/*!
 * Theme Name: Modernization Theme
 * Version: 0.2.0
 * Author: Wu23333
 * Link: https://github.com/WuSiYu/unraid-custom-css/raw/refs/heads/master/example.css
 * License: MIT (https://opensource.org/licenses/MIT)
 *
 * * Description:
 * A modern CSS refurbishment for Unraid WebGUI.
 * Features a clean and modern look with much better button gradient borders.
 * You can use it with My Custom CSS plugin (https://github.com/WuSiYu/unraid-custom-css/)
 *
 * * Changelog:
 * - 2025-11-29 v0.2.1 Minor update/fix, better support for folder view plugin.
 * - 2025-11-25 v0.2.0 Added new tabs style, Updated button text styles, minor other changes.
 * - 2025-11-24 v0.1.0 Initial release.
 */

/* Color Defines */
:root {
  /* You can customize the colors here */
  /* --text-color: #223344; */
  /* --brand-red: var(--blue-600); */
  /* --brand-orange: var(--blue-800); */
  /* --button-text-color: var(--blue-700); */

  /* Compatitibility for both White and Black themes */
  --custom-bg: var(--theme-black--mild-gray-700, #ffffff);
}


/* Global */
html {
  scrollbar-width: thin;  /* this may help to reset scrollbar style */
}

@-moz-document url-prefix() {
  html {
    scrollbar-width: initial;  /* not needed in Firefox */
  }
}

.content {
  padding: 2px 2px 6px 2px;
}

#header.image {
  background-size: cover;
  background-position: center;
}

#menu {
  box-shadow: rgba(3, 3, 3, 0.5) 0px 0px 6px 0px;
}

#footer {
  box-shadow: rgba(3, 3, 3, 0.1) 0px 0px 6px 0px;
}

.shade {
  border-radius: 8px;
}

.nav-item:after, .nav-user.show:after {
  width: 98%;
  left: 49%;
  transform: translateX(-50%) translateY(10px);
  border-left: 10px solid var(--header-background-color);
  border-right: 10px solid var(--header-background-color);
  box-sizing: border-box;
}

nav.tabs {
  margin-bottom: 20px;
}

.nav-tile {
  padding: 0 10px;
}

#UserProfile{
  min-width: 500px;
}

.tabs-container {
  gap: .75rem;
  position: relative;
  border-radius: 8px;
  background-color: var(--custom-bg);
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
}

.tabs button[role="tab"] {
  padding: 10px 16px 8px 16px;
  letter-spacing: 0px;
  font-size: 1.5rem;
  font-weight: normal;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: initial;
}

.tabs button[role="tab"]:focus, .tabs button[role="tab"]:hover{
  border: 0;
  border-bottom: 2px solid transparent;
  /* background: initial;
  background-image: linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
  background-origin: border-box;
  background-clip: padding-box, border-box; */
}

.tabs button[role="tab"][aria-selected="true"] {
  color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  background: initial;
  background-image: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)), linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
  background-origin: border-box;
  background-clip: text, padding-box, border-box;
}

@-moz-document url-prefix() {
  /* Firefox don't support background-clip: text with multi-layer backgrounds */
  .tabs button[role="tab"][aria-selected="true"] {
    color: var(--button-text-color);
    background-image: linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
    background-clip: padding-box, border-box;
  }
}

.tabs-container :is(input[type="button"]), .tabs-container a:is([title^="previous"], [title^="next"]) > button, div.title a.button:is([title^="previous"], [title^="next"]) {
  color: var(--button-text-color) !important;
  font-size: 1.5rem;
  border-color: transparent !important;
  background: initial !important;
  box-shadow: none !important;
  min-width: 30px !important;
  margin: 0 12px !important;
  padding: 0 !important;
}

:is(.tabs-container :is(input[type="button"]), .tabs-container a:is([title^="previous"], [title^="next"]) > button, div.title a.button:is([title^="previous"], [title^="next"])):hover {
  opacity: 0.8;
}

:is(.tabs-container :is(input[type="button"]), .tabs-container a:is([title^="previous"], [title^="next"]) > button, div.title a.button:is([title^="previous"], [title^="next"])):active {
  opacity: 0.5;
}

div[role="dialog"].ui-widget-content {
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(3, 3, 3, 0.2) 0px 1px 2px 0px, rgba(3, 3, 3, 0.1) 0px 0px 2px 0px;
}

.ui-widget-header, .ui-widget-content {
  background: var(--custom-bg);
}

.ui-dialog .ui-dialog-title {
  margin-top: 1em;
}

.ui-widget-content {
  border: 1px solid rgba(128, 128, 128, 0.1);
}

.back_to_top, .move_to_end {
    bottom: 30px;
}

blockquote {
    border-radius: 8px;
    border: 1.5px solid var(--blue-900);
}

input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="email"], input[type="date"], input[type="file"],
select {
  border-bottom-width: 1.5px;
}

pre {
  border-bottom-width: 1.5px;
  padding: 10px 12px;
  border-radius: 8px;
}

textarea {
  border: 1.5px solid var(--input-border-color);
  padding: 10px 12px;
  border-radius: 8px;
}

input[disabled], textarea[disabled] {
    border-color: var(--disabled-input-border-color);
}


/* Tables */
:where(table.unraid, table.tablesorter, table#usb_devices_list, table.samba_mounts, table.usb_absent, table.array_status):not(table table) {
  background-color: var(--custom-bg);
  border-radius: 8px;
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
}

table.tablesorter.domdisk {
  background-color: var(--custom-bg);
}

.TableContainer, .TableContainer--no-min-width {
  background-color: var(--custom-bg);
  border-radius: 8px;
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
}

.TableContainer > table, .TableContainer--no-min-width > table {
  box-shadow: none;
  margin: 0;
}

/* disable the broken .autoheight */
.autoheight {
  height: 100% !important;
  overflow: visible !important;
}

form[name="arrayOps"] > p, .content:has(#docker_containers) .ToggleViewMode {
  background-color: var(--custom-bg);
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
  margin: 0;
  padding: 0 20px;
}

.content:has(#docker_containers) .ToggleViewMode {
  padding: 5px 0;
  box-shadow: none;
  position: absolute;
  right: 12px;
  top: 12px;
}

table.unraid thead tr:first-child > td, table.unraid tbody tr, table.tablesorter thead tr th, table.tablesorter tbody tr,
:is(table.usb_mounts, table.samba_mounts, table.usb_absent) :is(tbody tr, thead td) {
  background-color: inherit !important;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

table.unraid tbody tr:nth-child(even), table.unraid thead tr:first-child > td, table.disk_status tbody tr.tr_last, table.tablesorter tbody tr:nth-child(even) {
  background-color: var(--custom-bg);
}

table#usb_devices_list tbody tr.toggle-disk {
  border-bottom: 0;
}

table.disk_status:not(.dashboard) tbody tr:hover td, table.share_status:not(.dashboard) tbody tr:hover td, table.usb_mounts tbody tr:hover td {
  background-color: rgba(46, 66, 106, 0.05) !important;
}

table.tablesorter.indexer tfoot td {
  padding-top: 5px;
  padding-bottom: 5px;
}


/* Buttons */
input[type=button], input[type=reset], input[type=submit], button.mount, #remotes-buttons > button, button#default-button, button#clear-button, :is(#configLocation, #configLocationAdvanced, .content:has(.vmtemplate), :is(#docker_containers, #kvm_table) .folder-name) button,
.sa-button-container button, .ui-dialog-buttonpane .ui-dialog-buttonset button, button.swal-button {
  color: transparent;
  letter-spacing: 0px;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: normal;
  text-transform: none;
  padding: 4px 14px;
  border: 2px solid transparent;
  background: initial;
  background-image: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)), linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
  background-origin: border-box;
  background-clip: text, padding-box, border-box;
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
}

@-moz-document url-prefix() {
  /* Firefox don't support background-clip: text with multi-layer backgrounds */
  input[type=button], input[type=reset], input[type=submit], button.mount, #remotes-buttons > button, button#default-button, button#clear-button, :is(#configLocation, #configLocationAdvanced, .content:has(.vmtemplate), :is(#docker_containers, #kvm_table) .folder-name) button,
  .sa-button-container button, .ui-dialog-buttonpane .ui-dialog-buttonset button, button.swal-button {
    color: var(--button-text-color);
    background-image: linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
    background-clip: padding-box, border-box;
  }
}

/* Additional button accent for special buttons */
input[name="#apply"], input[value="Apply"], input[value="应用"], input[value="Start"], input[value="启动"], input[value="Apply & Save"],
.sa-confirm-button-container button, .ui-dialog-buttonset button:first-child, button.swal-button--next {
  filter: drop-shadow(2px 2px 4px rgba(255, 0, 0, 0.3));
}

:is(input[type=button], input[type=reset], input[type=submit], button.mount, #remotes-buttons > button, button#default-button, button#clear-button, :is(#configLocation, #configLocationAdvanced, .content:has(.vmtemplate), :is(#docker_containers, #kvm_table) .folder-name) button,
.sa-button-container button, .ui-dialog-buttonpane .ui-dialog-buttonset button, button.swal-button):is(:hover, :active) {
  color: var(--hover-button-text-color);
  background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) border-box;
}

:is(input[type=button], input[type=reset], input[type=submit], button.mount, #remotes-buttons > button, button#default-button, button#clear-button, :is(#configLocation, #configLocationAdvanced, .content:has(.vmtemplate), :is(#docker_containers, #kvm_table) .folder-name) button,
.sa-button-container button, .ui-dialog-buttonpane .ui-dialog-buttonset button, button.swal-button):active {
  opacity: 0.5;
}

:is(input[type=button], input[type=reset], input[type=submit], button.mount, #remotes-buttons > button, button#default-button, button#clear-button, :is(#configLocation, #configLocationAdvanced, .content:has(.vmtemplate), :is(#docker_containers, #kvm_table) .folder-name) button,
.sa-button-container button, .ui-dialog-buttonpane .ui-dialog-buttonset button, button.swal-button)[disabled] {
  color: var(--disabled-text-color);
  background: transparent;
  border: 2px solid var(--disabled-border-color);
  filter: initial;
  opacity: 0.5;
  box-shadow: none;
}


/* Page Specific Panels */
/* dashboard */
table.dashboard {
  box-shadow: none;
}

table.dashboard tbody {
  background: var(--custom-bg);
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 4px, rgba(3, 3, 3, 0.06) 0px 0px 2px 4px;
  border: 0;
  border-radius: 8px;
  outline: 4px solid var(--custom-bg);
}

table.dashboard span.outer.solid {
  background-color: inherit;
}

table.dashboard td.stopgap {
  height: 2.5rem !important;
  background: none;
}

table.dashboard tr:first-child > td {
  padding-top: 20px;
}

table.dashboard tbody td {
  padding: 5px 20px;
}

div.grid {
  gap: 2.5rem !important;
  padding-left: 15px;
  padding-right: 15px;
}

div.pie {
  height: 84px !important;
  width: 84px !important;
}

div.pie ::after {
  height: 68px !important;
  width: 68px !important;
}

.dashboard #docker_view > tr:last-child > td, .dashboard #vm_view > tr:last-child > td {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.dashboard #docker_view > tr:last-child > td span.outer, .dashboard #vm_view > tr:last-child > td, span.outer {
  width: 100%;
}

.dashboard #docker_view span.apps > .inner, .dashboard #vm_view span.vms > .inner {
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
}


/* main/share/docker ... */
div.title {
  background: var(--custom-bg);
  letter-spacing: 0.6px;
  border-bottom: 0;
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
  padding: 8px 16px;
  font-size: 1.15em;
  border-radius: 8px;
}

div.title > span:first-child {
  padding: 4px 0;
}

table:is(.disk_status, .usb_mounts, .samba_mounts, .usb_absent, .array_status, .share_status, .plugins, .content:has(#docker_containers, #kvm_table) table) tr :is(th, td):first-child {
  padding-left: 20px !important;
}

table.disk_status tr > td:last-child, table.usb_mounts tr>td, table.samba_mounts tr>td+td {
  padding-right: 20px !important;
}

table:is(.disk_status, table.share_status) tbody :last-child > td {
  padding-bottom: 4px;
}

.content:has(#docker_containers) table td {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

div.content:has(#array_devices, #shareslist, #docker_containers) div.title {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 0;
  font-size: 1.15em;
}

div.content:has(#array_devices, #shareslist, #docker_containers) div.title, table.plugins {
  border-radius: 8px 8px 0 0;
}

#plugin_list p {
  margin: 0;
}

table:is(#plugin_table, #kvm_table) {
  border-radius: 8px;
}

div.content:has(#array_devices) :is(div.title.ud, .shift:has(+ #usb_devices_list)) {
  border-radius: 0;
}

table.array_status {
  border-radius: 0;
}

table.unraid.disk_status, table.unraid.share_status, .content:has(#docker_containers) table, table#usb_devices_list, table.samba_mounts, table.usb_absent, form[name="shutdownOps"] > table.array_status {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.TableContainer:has(table.disk_status, table.share_status, table#usb_devices_list, table.samba_mounts, table.usb_absent), .content:has(#docker_containers) .TableContainer, form[name="shutdownOps"] {
  border-radius: 0 0 8px 8px;
}

.title.ud {
  border-radius: 0 0 8px 8px !important;
  margin-bottom: 2rem !important;
}

.title.ud + .show-disks > div.title {
  border-radius: 8px 8px 0 0 !important;
}

div.title.ud .rightTitleUD {
  display: flex;
  align-items: center;
  gap: 15px;
}

div.title.ud .ud_titleFix {
  padding-right: 0;
}

div.content { @media (max-width: 1080px) {
  div.title.ud {
    display: block;
    padding: 0 20px;
  }
  .leftTitleUD {
    display: block;
    padding: 8px 0;
  }
  .rightTitleUD {
    display: flex;
    padding: 0 0 12px 0;
    position: initial;
  }
}}

div.content .ArrayOperation-Table { @media (max-width: 769px) { td {
  padding: var(--table-gap) 20px !important;
}}}

table.array_status td.line {
  border-top: 0;
}

table#kvm_table th {
    padding-top: 12px;
}

/* for folder view plugin */
:is(#docker_containers, #kvm_table) + input[type="button"][onclick="createFolderBtn()"] {
  margin: 5px 15px 15px 15px;
}

:is(#docker_containers, #kvm_table) .folder-name button {
  padding: 4px 8px;
  margin-left: 0;
}

:is(#docker_containers, #kvm_table) .folder-preview {
  border-radius: 8px !important;
  border-width: 1.5px !important;
}

:is(#docker_containers, #kvm_table) .folder-preview-wrapper {
  margin-right: 10px;
}


/* Settings / Tools */
.PanelText {
  width: 100px;
  padding-bottom: 3px;
  color: var(--text-color);
}

div.Panel:hover .PanelText {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* Users */
div.user-list {
  background-color: var(--custom-bg);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(3, 3, 3, 0.12) 0px 1px 2px 0px, rgba(3, 3, 3, 0.06) 0px 0px 2px 0px;
  padding: 10px 5px 8px 5px;
}

div.user-list > a {
  gap: 0;
  color: var(--text-color);
}

div.user-list > a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

form[action="/Users/UserAdd"] {
  margin-top: 20px;
}

div.user-list > a span {
  position: fixed;
}