unraid-glass/style.css

/* ============================================
   Unraid visionOS Glassmorphism Theme v2.0
   Mountain wallpaper + frosted glass cards
   ============================================ */

/* --- Prevent horizontal scrollbar --- */
html {
  overflow-x: hidden;
}

/* --- CSS Variables --- */
:root {
  /* Accent: cool steel blue to match B&W mountains */
  --glass-accent: #7EB8DA;
  --glass-accent-hover: #9FCCE8;
  --glass-accent-glow: rgba(126, 184, 218, 0.25);
  --glass-accent-subtle: rgba(126, 184, 218, 0.12);

  /* Glass card properties */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-hover: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.25);
  --glass-blur: 50px;
  --glass-saturate: 1.5;
  --glass-radius: 22px;
  --glass-radius-sm: 14px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Text */
  --glass-text: rgba(255, 255, 255, 0.90);
  --glass-text-muted: rgba(255, 255, 255, 0.55);
  --glass-text-heading: rgba(255, 255, 255, 0.95);

  /* Override Unraid theme variables */
  --main-bg-color: transparent;
  --alt-background-color: transparent;
  --modal-bg-color: rgba(20, 20, 30, 0.85);
  --text: var(--glass-text);
  --text-muted: var(--glass-text-muted);
  --link-color: var(--glass-accent);
  --link-color-hover: var(--glass-accent-hover);
  --accent-color: var(--glass-accent);
  --accent-color-hover: var(--glass-accent-hover);
  --header-text-color: var(--glass-text);
  --box-shadow: none;

  /* Sidebar dimensions */
  --sidebar-collapsed: 64px;
  --sidebar-expanded: 220px;
}


/* ============================================
   BACKGROUND: Mountain Wallpaper
   ============================================ */
body {
  background: #0a0a0f !important;
  background-image: url('/custom/assets/wallpaper.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--glass-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: 0.15px !important;
}

/* Dark overlay on body to ensure contrast */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: -1;
  pointer-events: none;
}


/* ============================================
   HEADER BAR
   ============================================ */
#header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#header a,
#header .text-left,
#header .text-right,
#header span,
#header i,
#header .fa,
#header [class*="icon"] {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Notification bell SVG in header — force white */
#header #UserProfile svg,
#header svg {
  color: rgba(255, 255, 255, 0.9) !important;
  fill: currentColor !important;
}


/* ============================================
   SIDEBAR: Collapsed (icons only, NO hover expand)
   ============================================ */

/* Sidebar — glass container, keep Unraid's position:fixed */
.Theme--sidebar #menu {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: none !important;
  border-radius: 0 var(--glass-radius) var(--glass-radius) 0 !important;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  width: var(--sidebar-collapsed) !important;
  overflow: hidden !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* Inner glow on sidebar top edge */
.Theme--sidebar #menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
  z-index: 1;
}

/* --- Unraid logo: above toggle button --- */
#sidebar-logo {
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.70 !important;
  pointer-events: none !important;
  z-index: 10;
  transition: opacity 0.2s ease;
}

/* --- Toggle button: chevron only --- */
#sidebar-toggle-btn {
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--glass-text-muted) !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
  z-index: 10;
}

#sidebar-toggle-btn:hover {
  color: var(--glass-text) !important;
}

#sidebar-toggle-btn svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded: round hover highlight, rotated to point left */
html.sidebar-expanded #sidebar-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
}

html.sidebar-expanded #sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

html.sidebar-expanded #sidebar-toggle-btn svg {
  transform: rotate(180deg);
}

/* --- #nav-block: work with Unraid's existing absolute layout, adjust top --- */
.Theme--sidebar #nav-block {
  top: 92px !important;
  padding-left: 10px !important;
  color: var(--glass-text-muted) !important;
}

/* Main nav tile */
.Theme--sidebar .nav-tile {
  padding: 4px 0 !important;
}

/* Hide nav-tile scrollbar */
.Theme--sidebar .nav-tile::-webkit-scrollbar {
  width: 0 !important;
}

/* Utility nav items (right) — separator, scrolls with main nav */
.Theme--sidebar .nav-tile.right {
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  padding: 6px 0 6px !important;
}

/* DISABLE default Unraid hover width expansion */
.Theme--sidebar .nav-item:hover {
  width: auto !important;
  background: transparent !important;
  padding-right: 0 !important;
}

/* Nav items — text-align:center to center the inline-flex <a> */
.Theme--sidebar .nav-item {
  display: block !important;
  width: auto !important;
  border-bottom: none !important;
  padding: 2px 0 !important;
  transition: none !important;
  text-align: center !important;
  background: transparent !important;
}

/* Links — circle container with position:relative for absolute :before */
.Theme--sidebar .nav-item a {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
  color: var(--glass-text-muted) !important;
  background: transparent !important;
  border-radius: 50% !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

/* Hide ALL child elements inside links — only :before pseudo stays */
.Theme--sidebar .nav-item a > * {
  display: none !important;
}

/* :before icons — absolute centered in the circle */
.Theme--sidebar .nav-item a:before {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  font-weight: normal !important;
  color: inherit !important;
  transition: color 0.2s ease !important;
}

/* Hover — circle highlight */
.Theme--sidebar .nav-item:hover a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--glass-text) !important;
}

/* Active nav item — brighter circle */
.Theme--sidebar .nav-item.active {
  background: transparent !important;
}

.Theme--sidebar .nav-item.active a {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-text) !important;
}

/* Remove default left accent bar on active */
.Theme--sidebar .nav-item.active::before {
  display: none !important;
}

/* Utility nav items — slightly smaller circles, no active state */
.Theme--sidebar .nav-tile.right .nav-item {
  padding: 1px 0 !important;
}

.Theme--sidebar .nav-tile.right .nav-item a {
  width: 38px !important;
  height: 38px !important;
}

.Theme--sidebar .nav-tile.right .nav-item.active a {
  background: transparent !important;
  color: var(--glass-text-muted) !important;
}

/* --- Nav-right icons: thinner FontAwesome replacements --- */
.Theme--sidebar .nav-tile.right .nav-item a:before {
  font-family: FontAwesome !important;
  font-size: 18px !important;
}
.Theme--sidebar .nav-item.gui_search a:before { content: "\f002" !important; }
.Theme--sidebar .nav-item.LanguageButton a:before { content: "\f0ac" !important; }
.Theme--sidebar .nav-item.LogoutButton a:before { content: "\f08b" !important; }
.Theme--sidebar .nav-item.TerminalButton a:before { content: "\f120" !important; }
.Theme--sidebar .nav-item.BrowseButton a:before { content: "\f115" !important; }
.Theme--sidebar .nav-item.FeedbackButton a:before { content: "\f075" !important; }
.Theme--sidebar .nav-item.InfoButton a:before { content: "\f05a" !important; }
.Theme--sidebar .nav-item.LogButton a:before { content: "\f0f6" !important; }
.Theme--sidebar .nav-item.HelpButton a:before { content: "\f059" !important; }
.Theme--sidebar .nav-item.LockButton a:before { content: "\f09c" !important; font-family: FontAwesome !important; }
.Theme--sidebar .nav-item.LockButton.is-locked a:before { content: "\f023" !important; }

/* --- EXPANDED SIDEBAR ---
   Compound selectors: both classes on <html> */
html.sidebar-expanded.Theme--sidebar #menu {
  width: var(--sidebar-expanded) !important;
}

html.sidebar-expanded.Theme--sidebar .nav-item {
  text-align: left !important;
}

html.sidebar-expanded.Theme--sidebar .nav-item a {
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: normal !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  overflow: visible !important;
}

/* :before back to normal flow in expanded mode */
html.sidebar-expanded.Theme--sidebar .nav-item a:before {
  position: static !important;
  transform: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  width: 24px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Show spans in expanded */
html.sidebar-expanded.Theme--sidebar .nav-item a > span {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}

/* Keep everything else hidden in expanded */
html.sidebar-expanded.Theme--sidebar .nav-item a > b,
html.sidebar-expanded.Theme--sidebar .nav-item a > .system {
  display: none !important;
}

html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a:before {
  font-size: 18px !important;
}

html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a {
  width: auto !important;
  height: auto !important;
  padding: 8px 12px !important;
}

/* --- Content area shifts for sidebar (push, not overlap) --- */
#displaybox,
#footer,
#copyright {
  margin-left: var(--sidebar-collapsed) !important;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.sidebar-expanded.Theme--sidebar #displaybox,
html.sidebar-expanded.Theme--sidebar #footer,
html.sidebar-expanded.Theme--sidebar #copyright {
  margin-left: var(--sidebar-expanded) !important;
}

/* Header already has padding-left from Unraid — override it instead of adding margin */
#header {
  padding-left: var(--sidebar-collapsed) !important;
  transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.sidebar-expanded.Theme--sidebar #header {
  padding-left: var(--sidebar-expanded) !important;
}

/* --- Search: click-triggered centered popup overlay --- */
.Theme--sidebar .nav-item.gui_search {
  overflow: visible !important;
}

/* Spotlight-style search popup — centered, wide */
.Theme--sidebar #guiSearchBoxSpan,
body > #guiSearchBoxSpan {
  position: fixed !important;
  top: 28% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10001 !important;
  width: 600px !important;
  max-width: 90vw !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(50px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  display: block !important;
  overflow: visible !important;
  font-size: 16px !important;
  line-height: normal !important;
}

/* Awesomplete wrapper — fill full width */
.Theme--sidebar #guiSearchBoxSpan .awesomplete,
body > #guiSearchBoxSpan .awesomplete {
  display: block !important;
  width: 100% !important;
}

/* Search input — fills full width of glass container */
.Theme--sidebar #guiSearchBox,
body > #guiSearchBoxSpan #guiSearchBox {
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: var(--glass-text) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 18px 24px !important;
  font-size: 20px !important;
  font-family: inherit !important;
  outline: none !important;
}

.Theme--sidebar #guiSearchBox:focus,
body > #guiSearchBoxSpan #guiSearchBox:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Hide awesomplete status indicator (diamond marker) */
.Theme--sidebar #guiSearchBoxSpan .awesomplete .visually-hidden,
body > #guiSearchBoxSpan .awesomplete .visually-hidden,
.Theme--sidebar #guiSearchBoxSpan .awesomplete [role="status"],
body > #guiSearchBoxSpan .awesomplete [role="status"] {
  display: none !important;
}

#search-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
}

/* Autocomplete dropdown — attached to the glass container */
.Theme--sidebar .awesomplete > ul,
body > #guiSearchBoxSpan .awesomplete > ul {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(50px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
  padding: 8px !important;
  margin-top: 5px !important;
  z-index: 10002 !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
}

/* Hide the awesomplete arrow/caret */
.Theme--sidebar .awesomplete > ul::before,
.Theme--sidebar .awesomplete > ul::after,
body > #guiSearchBoxSpan .awesomplete > ul::before,
body > #guiSearchBoxSpan .awesomplete > ul::after {
  display: none !important;
}

.Theme--sidebar .awesomplete > ul > li,
body > #guiSearchBoxSpan .awesomplete > ul > li {
  color: var(--glass-text) !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

.Theme--sidebar .awesomplete > ul > li:hover,
.Theme--sidebar .awesomplete > ul > li[aria-selected="true"],
body > #guiSearchBoxSpan .awesomplete > ul > li:hover,
body > #guiSearchBoxSpan .awesomplete > ul > li[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--glass-text-heading) !important;
}

/* Highlighted matching text in results */
body > #guiSearchBoxSpan .awesomplete mark,
.Theme--sidebar .awesomplete mark {
  background: rgba(255, 200, 50, 0.25) !important;
  color: var(--glass-text-heading) !important;
  padding: 0 1px !important;
  border-radius: 2px !important;
}


/* ============================================
   GLASS CARDS (Panels, Frames)
   ============================================ */
div.Panel,
div.frame,
.ca_holder {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  margin-bottom: 16px !important;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Hover: subtle brighten */
div.Panel:hover,
div.frame:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Inner glow at top edge of cards (visionOS style) */
div.Panel::before,
div.frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Make panels position:relative for the ::before to work */
div.Panel,
div.frame {
  position: relative;
}

/* Panel Titles */
div.title,
#title,
.content #title {
  background: transparent !important;
  color: var(--glass-text-heading) !important;
  border-bottom: none !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
  letter-spacing: 0.3px !important;
  padding: 16px 22px !important;
}


/* ============================================
   TABLES
   ============================================ */
table,
table.tablesorter,
table.share_status,
table.disk_status,
table.dashboard {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table thead {
  background: rgba(255, 255, 255, 0.02) !important;
}

table thead th {
  color: var(--glass-text-muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.72em !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 16px !important;
}

table tbody tr {
  background: transparent !important;
  transition: background 0.2s ease !important;
}

table tbody tr:nth-child(2n) {
  background: rgba(255, 255, 255, 0.02) !important;
}

table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

table tbody td {
  color: var(--glass-text) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}


/* ============================================
   BUTTONS
   ============================================ */
button,
input[type="button"],
input[type="submit"],
a.button {
  background: var(--glass-accent-subtle) !important;
  color: var(--glass-accent) !important;
  border: 1px solid rgba(126, 184, 218, 0.25) !important;
  border-radius: var(--glass-radius-sm) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 8px 20px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.button:hover {
  background: rgba(126, 184, 218, 0.20) !important;
  border-color: rgba(126, 184, 218, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--glass-accent-glow) !important;
}


/* ============================================
   FORM INPUTS
   ============================================ */
input,
textarea,
select {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--glass-text) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  padding: 8px 12px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--glass-accent) !important;
  box-shadow: 0 0 0 3px var(--glass-accent-glow) !important;
  outline: none !important;
}


/* ============================================
   TABS
   ============================================ */
div.tabs {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

div.tab {
  background: transparent !important;
  color: var(--glass-text-muted) !important;
  border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0 !important;
  transition: all 0.25s ease !important;
}

div.tab:hover {
  background: var(--glass-bg) !important;
  color: var(--glass-text) !important;
}


/* ============================================
   FOOTER
   ============================================ */
#footer,
#copyright {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(40px) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(40px) saturate(var(--glass-saturate)) !important;
  border-top: 1px solid var(--glass-border) !important;
  color: var(--glass-text-muted) !important;
}


/* ============================================
   MODALS / DIALOGS
   ============================================ */
.sweet-alert,
.swal-modal {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(50px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: var(--glass-text) !important;
}

.sweet-overlay,
.swal-overlay--show-modal,
div.shade-black {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Sweet-alert inner content — force light text on glass */
.sweet-alert h2 {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--glass-text-heading) !important;
}

.sweet-alert p,
.sweet-alert pre,
.sweet-alert td,
.sweet-alert th,
.sweet-alert tr,
.sweet-alert span,
.sweet-alert label,
.sweet-alert div {
  color: var(--glass-text) !important;
}

.sweet-alert .sa-fix {
  background: transparent !important;
}

.sweet-alert hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

.sweet-alert button {
  color: var(--glass-accent) !important;
}

.sweet-alert a,
.sweet-alert .link {
  color: var(--glass-accent) !important;
}


/* ============================================
   DROPDOWN MENUS / POPUPS
   ============================================ */
.popupProfile,
.repoPopup,
.pinPopup {
  background: rgba(15, 20, 30, 0.65) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Context menu (Docker/VM icon click) */
.dropdown-menu.dropdown-context {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(50px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  padding: 6px !important;
  overflow: hidden;
}

.dropdown-menu.dropdown-context > li > a {
  color: var(--glass-text) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  transition: background 0.15s ease !important;
}

.dropdown-menu.dropdown-context > li > a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--glass-text-heading) !important;
}

.dropdown-menu.dropdown-context > li > a > i {
  color: var(--glass-text-muted) !important;
}

.dropdown-menu.dropdown-context > li.divider {
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 4px 8px !important;
}


/* ============================================
   STATUS INDICATORS
   ============================================ */
.green,
.green-text,
.passed {
  color: #4ade80 !important;
}


/* ============================================
   USAGE BARS
   ============================================ */
.usage-disk,
.usage-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  height: 24px !important;
  position: relative !important;
}

.usage-disk > span:first-child,
.usage-bar > span:first-child {
  border-radius: 12px !important;
  background: linear-gradient(90deg, rgba(126, 184, 218, 0.6), var(--glass-accent)) !important;
  height: 100% !important;
  display: block !important;
}

/* Value text overlaid inside the bar */
.usage-disk > span:last-child,
.usage-bar > span:last-child {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}


/* ============================================
   LINKS
   ============================================ */
a {
  color: var(--glass-accent) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--glass-accent-hover) !important;
}


/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ============================================
   DOCKER CONTAINER CARDS
   ============================================ */
.ca_templatesDisplay,
.ca_holderFav {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  overflow: hidden !important;
}


/* ============================================
   DASHBOARD: Individual Glass Cards
   ============================================ */

/* Remove glass from the dashboard's outer frame so
   individual cards float over the wallpaper */
div.frame:has(> div.grid) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

div.frame:has(> div.grid)::before {
  display: none !important;
}

div.frame:has(> div.grid):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Dashboard grid — prevent first column blowout */
div.grid {
  gap: 24px !important;
}

/* Tile columns — transparent */
div.tile {
  background: transparent !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Dashboard tables → block layout, transparent, no stacking blur */
table.dashboard {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

table.dashboard > tbody:not(.sortable),
table.dashboard > thead:not(.stopgap) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide colgroup (not needed with block layout) */
table.dashboard > colgroup {
  display: none !important;
}

/* --- Individual Dashboard Glass Cards --- */
table.dashboard > tbody.sortable {
  display: block !important;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  overflow: hidden !important;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

table.dashboard > tbody.sortable:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--glass-border-hover) !important;
  box-shadow: none !important;
}

/* visionOS inner glow on dashboard cards */
table.dashboard > tbody.sortable::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Dashboard card rows — use block to preserve inner layouts
   NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */
table.dashboard > tbody.sortable > tr {
  display: block;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: transparent !important;
}

table.dashboard > tbody.sortable > tr:last-child {
  border-bottom: none !important;
}

/* Hide compact Load: row in Processor card — Overall Load row shows same info.
   Unraid's DashStats.css hides span.switch but the row keeps 33px of padding/gap */
table.dashboard > tbody.sortable > tr:has(.head_bar) {
  display: none !important;
}

/* Dashboard card cells
   NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */
table.dashboard > tbody.sortable > tr > td {
  display: block;
  width: 100% !important;
  border: none !important;
  padding: 6px 6px !important;
  color: var(--glass-text) !important;
  background: transparent !important;
}

/* Header row of each card */
table.dashboard > tbody.sortable > tr:first-child {
  background: transparent !important;
  border-bottom: none !important;
  padding: 14px 18px !important;
}

/* Tile header text */
span.tile-header,
span.tile-header-left {
  color: var(--glass-text-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  font-size: 1em !important;
}

/* Card header control icons — transparent, white icons */
span.tile-header-right {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.85em !important;
}

span.tile-header-right i,
span.tile-header-right .fa {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
}

span.tile-header-right i:hover,
span.tile-header-right .fa:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Card control icons (cog, film, chevron) — ensure white on all cards
   including Plex Streams which uses raw FA icons without .tile-header */
table.dashboard i.control,
table.dashboard .fa.control {
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

table.dashboard i.control:hover,
table.dashboard .fa.control:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Plex Streams icon — white */
table.dashboard i.fa-film.icon {
  color: var(--glass-text) !important;
}

/* Tile header layout */
span.tile-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

span.tile-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}

/* Stopgap spacers → hidden (card margins handle spacing) */
table.dashboard > thead.stopgap {
  display: none !important;
}

/* Usage bars inside dashboard cards */
table.dashboard .usage-disk,
table.dashboard .usage-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  height: 24px !important;
  margin: 6px 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

table.dashboard .usage-disk > span:first-child,
table.dashboard .usage-bar > span:first-child {
  border-radius: 12px !important;
  background: linear-gradient(90deg, rgba(126, 184, 218, 0.5), var(--glass-accent)) !important;
  height: 100% !important;
  display: block !important;
}

/* Dashboard bar inner spans: normalize height/line-height */
.Theme--sidebar .usage-disk.sys > span {
  line-height: normal !important;
  height: 24px !important;
}

/* Dashboard: hide the external span.load (Unraid JS fills the bar's inner span) */
table.dashboard span.head_bar > .load,
table.dashboard span.w72 > .load,
table.dashboard span.w36 > .load,
table.dashboard span.w18 > .load {
  display: none !important;
}

/* Dashboard bar value text: left-aligned, vertically centered (inside bar) */
table.dashboard .usage-disk > span:last-child,
table.dashboard .usage-bar > span:last-child {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Dashboard CPU rows: consistent height so borders don't clip bars
   Scoped to rows containing usage bars (processor/memory cards only) */
table.dashboard > tbody.sortable > tr > td > .usage-disk,
table.dashboard > tbody.sortable > tr > td > span > .usage-disk {
  margin: 4px 0 !important;
}

/* Dashboard CPU show/hide link — parent flex container needs full width */
table.dashboard td > span.flex {
  width: 100% !important;
}

/* Color variants for dashboard bars (class is on the fill span) */
table.dashboard .usage-disk > span.greenbar,
table.dashboard .usage-bar > span.greenbar {
  background: linear-gradient(90deg, #22c55e, #4ade80) !important;
}

table.dashboard .usage-disk > span.orangebar,
table.dashboard .usage-bar > span.orangebar {
  background: linear-gradient(90deg, #f97316, #fb923c) !important;
}

table.dashboard .usage-disk > span.redbar,
table.dashboard .usage-bar > span.redbar {
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
}

/* Docker container icons in dashboard */
table.dashboard img {
  border-radius: 6px !important;
}

/* Dashboard selects — compact height (global select gets 8px 12px padding, too tall for cards) */
table.dashboard select {
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* Dashboard container status text — tighter spacing to container name */
#docker_view span.inner,
#vm_view span.inner {
  line-height: 1.3 !important;
}

#docker_view .folder-appname-docker,
#docker_view span.appname {
  margin-bottom: 0 !important;
}

#docker_view span.state,
#vm_view span.state {
  font-size: 0.8em !important;
  margin-top: 0 !important;
}

/* --- Docker / VM container grid fixes --- */

/* Container items in dashboard */
table.dashboard span.outer {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}

/* Folder showcase containers */
table.dashboard div[class*="folder-showcase-outer"] {
  display: inline-block !important;
  vertical-align: top !important;
  border: none !important;
  background: transparent !important;
}

/* Folder row — the main folder summary */
table.dashboard span.folder-docker {
  border: none !important;
}

/* Remove default dashed/dotted borders from container grid */
table.dashboard .folder-storage {
  border: none !important;
  border-top: none !important;
}

/* Container inner text */
table.dashboard span.inner {
  color: var(--glass-text) !important;
}

table.dashboard span.inner span.state {
  color: var(--glass-text-muted) !important;
  font-size: 0.85em !important;
}

/* Docker/VM container name links — use accent color (clock color) */
table.dashboard span.inner a,
table.dashboard span.outer a,
table.dashboard td a {
  color: var(--glass-accent) !important;
}

table.dashboard span.inner a:hover,
table.dashboard span.outer a:hover,
table.dashboard td a:hover {
  color: var(--glass-accent-hover) !important;
}

/* Docker link — add appname links to accent color */
table.dashboard span.appname a {
  color: var(--glass-accent) !important;
}

table.dashboard span.appname a:hover {
  color: var(--glass-accent-hover) !important;
}

/* Docker text — force white in dashboard (FolderView sets blue) */
#docker_view span,
#docker_view .inner span {
  color: var(--glass-text) !important;
}

#docker_view a {
  color: var(--glass-accent) !important;
}

/* CPU chart — force block display (inline style sets table-row, breaking layout) */
#cpu_chart {
  display: block !important;
  padding-bottom: 8px !important;
}

/* CPU chart canvas — invert for dark background, block to prevent inline offset */
#cpuchart {
  display: block !important;
  filter: invert(1) hue-rotate(180deg) !important;
}

#cpu_chart td {
  width: 100% !important;
  padding-bottom: 4px !important;
}

#cpu_chart canvas {
  width: 100% !important;
  display: block !important;
}

/* System donut charts — thinner ring with opaque center */
div.pie::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 78% !important;
  height: 78% !important;
  border-radius: 50% !important;
  background: rgba(20, 20, 30, 0.85) !important;
}

div.pie {
  position: relative !important;
}

/* Ensure labels are above donut hole */
div.pie span,
div.pie div {
  position: relative !important;
  z-index: 1 !important;
}

/* Toggle switch — glass style */
.switch-button-background {
  width: 40px !important;
  height: 22px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

.switch-button-background.checked {
  background: var(--glass-accent) !important;
  border-color: var(--glass-accent) !important;
}

.switch-button-button {
  position: absolute !important;
  top: 50% !important;
  left: 2px !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: left 0.25s ease, transform 0.25s ease !important;
}

.switch-button-background.checked .switch-button-button {
  left: calc(100% - 21px) !important;
  top: calc(50% - 0.5px) !important;
}


/* ============================================
   INNER PAGES — Content Glass Wrapper
   ============================================ */

/* #displaybox is the main content area next to sidebar.
   On non-dashboard pages, wrap content in a glass panel. */
#displaybox {
  padding: 20px 28px !important;
  box-sizing: border-box !important;
  max-width: calc(100vw - var(--sidebar-collapsed)) !important;
  overflow-x: hidden !important;
}

html.sidebar-expanded.Theme--sidebar #displaybox {
  max-width: calc(100vw - var(--sidebar-expanded)) !important;
}

/* Header bar — MUST stay transparent, no glass background */
#header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}


/* ============================================
   TAB NAVIGATION (nav.tabs with <button>)
   ============================================ */
nav.tabs {
  background: transparent !important;
  padding: 0 0 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  position: relative !important;
}

/* Move status icon (disk I/O toggle) inline with tabs instead of wrapping to new row */
nav.tabs .status {
  position: absolute !important;
  right: 0 !important;
  top: 6px !important;
  margin: 0 !important;
}

nav.tabs .status a {
  color: var(--glass-text-muted) !important;
}

nav.tabs .status a:hover {
  color: var(--glass-text) !important;
}

nav.tabs button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--glass-text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

nav.tabs button:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-text) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

nav.tabs button[aria-selected="true"],
nav.tabs button.active {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-text-heading) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
              0 0 12px rgba(255, 255, 255, 0.06) !important;
}

/* Legacy div.tab style tabs (some pages still use these) */
div.tabs {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  gap: 6px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

div.tab {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--glass-text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

div.tab:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-text) !important;
}

div.tab.active,
div.tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--glass-text-heading) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
              0 0 12px rgba(255, 255, 255, 0.06) !important;
}


/* ============================================
   INNER PAGE TABLES (Shares, Docker, VMs, Main)
   ============================================ */

/* Table wrapper — glass card for non-dashboard tables */
#displaybox table:not(.dashboard) {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Table header row */
#displaybox table:not(.dashboard) thead,
#displaybox table:not(.dashboard) thead tr {
  background: rgba(255, 255, 255, 0.04) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

#displaybox table:not(.dashboard) thead th,
#displaybox table:not(.dashboard) thead td {
  color: var(--glass-text-muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.72em !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 16px !important;
  background: transparent !important;
}

#displaybox table:not(.dashboard) tbody td {
  color: var(--glass-text) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  background: transparent !important;
}

#displaybox table:not(.dashboard) tbody tr {
  background: transparent !important;
}

#displaybox table:not(.dashboard) tbody tr:nth-child(2n) {
  background: rgba(255, 255, 255, 0.02) !important;
}

#displaybox table:not(.dashboard) tbody tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

#displaybox table:not(.dashboard) tbody tr:last-child td {
  border-bottom: none !important;
}


/* ============================================
   SETTINGS PAGES — Icon Grid
   ============================================ */

/* Settings category headers */
#displaybox > div.title,
.tab-content > div.title {
  color: var(--glass-text-heading) !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
  padding: 16px 4px 8px !important;
  margin-top: 12px !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Settings icon grid wrapper */
.icon-grid,
div[style*="icon"],
#displaybox > table:not(.dashboard):not(.share_status):not(.disk_status) {
  border-radius: var(--glass-radius) !important;
}

/* Settings tiles (individual icon buttons) */
span.icon-setting,
.page-setting,
.icon-app {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.2s ease !important;
  color: var(--glass-text) !important;
}

span.icon-setting:hover,
.page-setting:hover,
.icon-app:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}


/* ============================================
   FORM PAGES (Settings detail, Share detail)
   ============================================ */

/* Settings form — dl/dt/dd layout */
dl {
  background: transparent !important;
}

dt {
  color: var(--glass-text) !important;
  font-weight: 600 !important;
}

dd {
  color: var(--glass-text) !important;
}

/* Alternating section backgrounds on share/settings pages */
.section-colored,
table.settings > tbody > tr:nth-child(even),
#displaybox > div[style*="background"] {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Help text */
blockquote,
.helptext,
.help,
div.help {
  color: var(--glass-text-muted) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-left: 3px solid rgba(126, 184, 218, 0.3) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 14px !important;
}


/* ============================================
   USERS PAGE
   ============================================ */
.user-card,
div[style*="dashed"],
#displaybox > table td > div[style] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  padding: 16px !important;
}


/* ============================================
   PLUGINS PAGE
   ============================================ */
.plugin-list .plugin,
#displaybox > table.tablesorter {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
}

/* Plugin support thread links */
.plugin a.support,
a[href*="forums.unraid.net"] {
  color: var(--glass-accent) !important;
}


/* ============================================
   DOCKER & VM LIST PAGES (advanced table view)
   ============================================ */

/* Table header bar on Docker/VM pages */
#docker_list thead,
#vm_list thead,
table.tablesorter thead {
  background: rgba(255, 255, 255, 0.04) !important;
}

#docker_list thead th,
#vm_list thead th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Container row actions */
#docker_list tbody td,
#vm_list tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* All tablesorter rows — override Unraid dark theme --dynamix-tablesorter-* variables */
table.tablesorter tbody tr {
  background: transparent !important;
  background-color: transparent !important;
}

table.tablesorter tbody tr:nth-child(2n) {
  background: rgba(255, 255, 255, 0.02) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
}

table.tablesorter tbody tr:hover,
table.tablesorter tbody tr.sortable:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Tablesorter thead — override opaque header backgrounds */
table.tablesorter thead tr {
  background: rgba(255, 255, 255, 0.04) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}


/* ============================================
   FOLDERVIEW PLUGIN OVERRIDES
   ============================================ */

/* Folder rows — override opaque dark bg from FolderView */
tr.folder,
tr.folder-element,
tr[class*="folder-id-"] {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

tr.folder:nth-child(even),
tr[class*="folder-id-"]:nth-child(even) {
  background: rgba(255, 255, 255, 0.02) !important;
}

tr.folder:hover,
tr[class*="folder-id-"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Folder preview containers — override white/light borders */
.folder-preview,
div[class*="folder-preview"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
}

/* Folder storage area */
.folder-storage {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
}

/* Folder inner text */
.folder-inner,
span.folder-inner {
  color: var(--glass-text) !important;
}

.folder-state,
span.folder-state {
  color: var(--glass-text-muted) !important;
}

/* Folder name */
.folder-appname,
a.folder-appname {
  color: var(--glass-accent) !important;
}

/* Folder name sub container */
.folder-name-sub {
  color: var(--glass-text) !important;
}

/* Folder outer container */
span.folder-outer {
  background: transparent !important;
  border: none !important;
}

/* Folder category icons (SVG on the folder row itself) — make white */
tr.folder > td.folder-name img.folder-img {
  filter: brightness(0) invert(1) !important;
}

/* Dashboard folder category icons — make white (same SVGs, different DOM) */
img.folder-img-docker {
  filter: brightness(0) invert(1) !important;
}

/* Folder dropdown button — small circle with chevron */
button[class*="dropDown-"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--glass-text-muted) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  font-size: 12px !important;
}

button[class*="dropDown-"]:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--glass-text) !important;
}

/* Docker autostart column — center switch vertically */
td.folder-autostart,
td[class*="autostart"] {
  text-align: center !important;
  vertical-align: middle !important;
}

td.folder-autostart .switch-button-background,
td[class*="autostart"] .switch-button-background {
  margin: 0 auto !important;
}

/* Switch button labels (Basic View / Advanced View, ON/OFF) — center */
.switch-button-label {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  color: var(--glass-text-muted) !important;
  margin-top: 2px !important;
}


/* ============================================
   MISC INNER PAGE ELEMENTS
   ============================================ */

/* Page title text */
span.title {
  color: var(--glass-text-heading) !important;
  font-weight: 600 !important;
}

/* Status badges */
span.label,
.badge {
  border-radius: 8px !important;
  padding: 2px 8px !important;
}

/* Disabled buttons */
input[type="button"][disabled],
input[type="submit"][disabled],
button[disabled] {
  background: rgba(128, 128, 128, 0.08) !important;
  color: rgba(128, 128, 128, 0.5) !important;
  border-color: rgba(128, 128, 128, 0.15) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Checkbox and radio — subtle glass */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--glass-accent-subtle) !important;
  border-color: var(--glass-accent) !important;
}

input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  color: #fff !important;
  line-height: 1 !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
}

/* Disabled buttons — slightly more visible */
input[type="button"]:disabled,
button:disabled {
  opacity: 0.65 !important;
}

/* Tooltip / title popups — glass style */
.tooltip,
[data-tooltip],
.ui-tooltip,
.tippy-box,
a.info > span {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  color: var(--glass-text) !important;
  padding: 6px 12px !important;
}

.ui-tooltip-content {
  color: var(--glass-text) !important;
}

/* Grey-text icons (lock, etc.) — lighter for dark background */
.grey-text,
.gray-text {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* File manager filter wrapper */
span.dfm_filter {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  margin-right: 12px !important;
}

span.dfm_filter > i.fa-filter {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

span.dfm_filter > input.dfm_filter {
  padding: 5px 12px 5px 30px !important;
  color: #fff !important;
}

span.dfm_filter > input.dfm_filter::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* File manager toggle (time/size) */
i.fa-toggle-off,
i.fa-toggle-on {
  font-size: 20px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: color 0.2s ease !important;
}
i.fa-toggle-off {
  color: rgba(255, 255, 255, 0.35) !important;
}
i.fa-toggle-on {
  color: var(--glass-accent) !important;
}

/* Notification bar (parity check etc.) */
#footer .status {
  color: var(--glass-text) !important;
}

/* Form section bands (Share detail, disk settings, etc.)
   Unraid uses div.shade with opaque dark background */
div.shade,
div.clone-settings.shade,
div.clone-settings {
  background: rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Dropdown checklist containers (multi-select) */
.ui-dropdownchecklist-dropcontainer,
.ui-widget-content {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  color: var(--glass-text) !important;
}

/* Dropdown checklist items */
.ui-dropdownchecklist-item {
  color: var(--glass-text) !important;
  background: transparent !important;
}

.ui-dropdownchecklist-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}


/* ============================================
   CONTENT AREA offset for sidebar
   ============================================ */
.Theme--sidebar #template {
  background: transparent !important;
}


/* ============================================
   MISC OVERRIDES
   ============================================ */

/* Remove harsh backgrounds from content area */
#template,
.content,
.markdown-textmain {
  background: transparent !important;
}

/* Selection color */
::selection {
  background: rgba(126, 184, 218, 0.3);
  color: #fff;
}


/* ============================================
   COMMUNITY APPLICATIONS (APPS PAGE) OVERRIDES
   ============================================ */

/* --- Override CA gray theme variables for glass look --- */
:root {
  --template-background: rgba(255, 255, 255, 0.06);
  --template-hover-background: rgba(255, 255, 255, 0.12);
  --template-favourite: rgba(255, 255, 255, 0.10);
  --border-color: rgba(255, 255, 255, 0.12);
  --sidebar-background: rgba(255, 255, 255, 0.08);
  --sidebar-text: var(--glass-text);
  --ca-legacy-background-color: transparent;
  --support-popup-text: var(--glass-text);
  --support-popup-background: rgba(255, 255, 255, 0.10);
}

/* --- Apps page left sidebar menu --- */
.menuItems {
  background-color: transparent !important;
  background: transparent !important;
}

ul.caMenu,
ul.nonselectMenu {
  color: var(--glass-text) !important;
}

li.caMenuItem,
a.caMenuItem {
  color: var(--glass-text-muted) !important;
}

.caMenuItem:hover {
  color: var(--glass-accent) !important;
}

.selectedMenu {
  color: var(--glass-accent) !important;
}

.menuItems hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- Search area bar --- */
.searchArea {
  background-color: transparent !important;
  background: transparent !important;
}

.searchAreaHolder {
  background: transparent !important;
}

#searchBox {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: var(--glass-text) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

#searchBox::placeholder {
  color: var(--glass-text-muted) !important;
}

.searchSubmit {
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  color: var(--glass-text-muted) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* --- App cards (ca_holder) --- */
.ca_holder,
.dockerHubHolder {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.ca_holder:hover,
.dockerHubHolder:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.ca_holderFav {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Card text */
.ca_applicationName {
  color: var(--glass-text-heading) !important;
}

.cardDescription,
.cardDesc {
  color: var(--glass-text-muted) !important;
}

.ca_author {
  color: var(--glass-text-muted) !important;
}

.ca_categories,
a.ca_categories {
  color: var(--glass-text-muted) !important;
}

/* Card description fade-out gradient — transparent instead of dark */
.cardDesc::after {
  background: transparent !important;
  display: none !important;
}

/* Card description — allow text to wrap and ellipsis naturally */
.cardDesc {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-bottom: 4px !important;
}

/* --- Buttons (caButton) --- */
.caButton,
.popupRepoDescription,
.popupDescription {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--glass-text) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

.caButton:hover {
  background: var(--glass-accent) !important;
  border-color: var(--glass-accent) !important;
  color: #fff !important;
}

.caButton:hover a,
a.caButton:hover {
  color: #fff !important;
}

.caButton a {
  color: var(--glass-text) !important;
}

/* --- Home templates section headers --- */
.ca_homeTemplatesHeader {
  color: var(--glass-text-heading) !important;
}

.ca_homeTemplatesLine2 {
  color: var(--glass-text-muted) !important;
}

/* --- Home templates horizontal scroll area --- */
.ca_homeTemplates {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* --- Alternate view (app detail popup) --- */
#alternateView {
  background-color: rgba(15, 15, 25, 0.92) !important;
  backdrop-filter: blur(60px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(60px) saturate(1.5) !important;
  color: var(--glass-text) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#alternateView table {
  background-color: transparent !important;
}

.popupCloseArea {
  background-color: transparent !important;
}

.popupName {
  color: var(--glass-text-heading) !important;
}

.popupAuthor,
.popupAuthorMain {
  color: var(--glass-text-muted) !important;
}

.popupInfoSection {
  color: var(--glass-text) !important;
}

/* Popup description box */
.popupDescription {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
  color: var(--glass-text) !important;
}

.popupRepoDescription {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
  color: var(--glass-text) !important;
}

/* --- Sidebar detail panel (sidenav) --- */
.sidenav {
  background-color: rgba(15, 15, 25, 0.90) !important;
  backdrop-filter: blur(50px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
  color: var(--glass-text) !important;
}

/* --- Mobile overlay --- */
.mobileOverlay.menuShowing {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* --- Multi-install bottom bar --- */
.multi_installDiv {
  background-color: rgba(15, 15, 25, 0.85) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --- Card badge triangles — keep visible but soften --- */
.installedCardBackground {
  background-color: rgba(50, 47, 255, 0.75) !important;
}

.officialCardBackground,
.spotlightCardBackground {
  background-color: rgba(133, 65, 83, 0.75) !important;
}

.betaCardBackground {
  background-color: rgba(255, 140, 47, 0.7) !important;
}

.warningCardBackground {
  background-color: rgba(129, 0, 0, 0.75) !important;
}

.greenCardBackground {
  background-color: rgba(0, 129, 0, 0.75) !important;
}

/* --- Links inside CA --- */
.popUpLink,
a.popUpLink {
  color: var(--glass-accent) !important;
}

.popUpLink:hover,
a.popUpLink:hover {
  color: var(--glass-accent-hover) !important;
}

/* --- Sort icons --- */
.sortIcons {
  color: var(--glass-text-muted) !important;
}

.sortIcons:hover {
  color: var(--glass-accent) !important;
}

/* --- Page navigation --- */
.pageNumber {
  color: var(--glass-text-muted) !important;
}

.pageNumber:hover {
  color: var(--glass-accent) !important;
}

.pageSelected {
  color: var(--glass-accent) !important;
}

/* --- Template display area --- */
.ca_template {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--glass-text) !important;
  border-radius: 16px !important;
}

/* --- Statistics / no-apps-found text --- */
.ca_NoAppsFound,
.ca_NoDockerAppsFound {
  color: var(--glass-text-muted) !important;
}

/* --- Repo table --- */
.repoTable {
  background-color: transparent !important;
}

/* --- Screenshot borders --- */
.screen {
  border-color: var(--glass-accent) !important;
}

/* --- Mod comment --- */
.modComment {
  border-color: rgba(207, 49, 49, 0.5) !important;
  background: rgba(207, 49, 49, 0.08) !important;
  border-radius: 12px !important;
}

/* --- Category display --- */
#Category {
  color: var(--glass-text-muted) !important;
}

/* --- Docker card background (inside cards) --- */
.dockerCardBackground {
  background: transparent !important;
}

/* --- Favourite button styles --- */
.fav {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  ),
  linear-gradient(
    to right,
    rgba(0, 153, 0, 0.7) 0%,
    rgba(0, 153, 0, 0.85) 50%,
    rgba(0, 153, 0, 0.7) 100%
  ) !important;
}

.nonfav {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* --- Icon display inside popup --- */
img.displayIcon,
img.popupIcon {
  border-radius: 12px !important;
}

/* --- Spinner overlay --- */
.spinnerBackground {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* --- Readmore gradient mask fix for dark theme --- */
.readmore-js-collapsed {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0.1))) !important;
}

/* --- Credits page --- */
.credits {
  color: var(--glass-text) !important;
}

.ca_creditTitle,
.ca_creditheader {
  color: var(--glass-text-heading) !important;
}

.ca_credit {
  color: var(--glass-text-muted) !important;
}


/* ============================================
   BUG FIXES — Phase 2: Text & Label Visibility
   ============================================ */

/* Fix: Unraid tables use <td> in <thead>, not <th>.
   Our existing rules only target thead th — add thead td. */
#displaybox table:not(.dashboard) thead td {
  color: var(--glass-text-muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.72em !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 16px !important;
  background: transparent !important;
}

/* Also cover generic thead td (non-#displaybox context) */
table thead td {
  color: var(--glass-text-muted) !important;
  font-weight: 500 !important;
}

/* Plugins page: table header row has opaque dark bg from tablesorter.
   The grid role table uses <th> which is fine, but ensure plugin
   description text, author, version are clearly visible. */
#displaybox table.tablesorter tbody td,
#displaybox table.tablesorter tbody th,
#displaybox .plugin_list td,
#displaybox table[role="grid"] td,
#displaybox table[role="grid"] [role="gridcell"] {
  color: var(--glass-text) !important;
}

/* Plugin name (h4/strong) and description (p) */
#displaybox table.tablesorter h4,
#displaybox table.tablesorter strong,
#displaybox table[role="grid"] h4,
#displaybox table[role="grid"] strong {
  color: var(--glass-text-heading) !important;
}

#displaybox table.tablesorter p,
#displaybox table[role="grid"] p {
  color: var(--glass-text-muted) !important;
}

/* Plugin status text */
#displaybox table.tablesorter .up-to-date,
#displaybox table[role="grid"] .up-to-date {
  color: #4ade80 !important;
}

/* Settings/Tools/Plugins icon grid labels (.PanelText) —
   currently inherits accent blue from <a>. Make labels white for readability. */
.PanelText {
  color: var(--glass-text) !important;
}

/* Settings/Tools/Plugins font icons — make white */
.PanelIcon {
  color: #fff !important;
}

/* Settings/Tools section headers (injected by Unraid as spans with inline styles) */
#displaybox .content > span[style],
#displaybox .content span[style*="font-size"] {
  color: var(--glass-text-heading) !important;
}


/* ============================================
   BUG FIXES — Phase 3: Icon Coloring
   ============================================ */

/* Plugin list large FA icons — white */
#displaybox i.fa.list,
#displaybox i[class*="icon-"].list {
  color: #fff !important;
}

/* Table sorter headers — transparent bg, white text */
.tablesorter-header-inner {
  background: transparent !important;
  color: var(--glass-text-muted) !important;
}

/* Settings/Plugins/Tools icon grid: non-FA icons are PNG/SVG <img>.
   Plugin icons that have selfh.st light SVG replacements get swapped via JS
   (sidebar.js replacePluginIcons). For others, apply invert filter.
   We scope this to only target icons inside the icon-grid span (not the
   whole page) and exclude icons already replaced by JS (data-glass-icon). */
#displaybox .icon-setting img:not([data-glass-icon]),
#displaybox .page-setting img:not([data-glass-icon]),
#displaybox .icon-app img:not([data-glass-icon]),
#displaybox a[href*="/Settings/"] > span:first-child img:not([data-glass-icon]),
#displaybox a[href*="/Tools/"] > span:first-child img:not([data-glass-icon]),
#displaybox table[role="grid"] td:first-child img:not([data-glass-icon]) {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
}

/* Plugin list: first-cell icons (some are <img> not FA) */
#displaybox table.tablesorter td:first-child img:not([data-glass-icon]),
#displaybox table[role="grid"] [role="gridcell"]:first-child img:not([data-glass-icon]) {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
}


/* ============================================
   BUG FIXES — Phase 4: Shadow & Rounding
   ============================================ */

/* Shadow removed from inner tables — parent glass card handles shadow */

/* Array Operation page: unify 4 stacked tables into one glass block.
   Tables are: FORM>table, TABLE (direct), FORM>table, FORM>table.
   Hidden P elements sit between them in the DOM. */

/* All ArrayOp tables: remove individual rounding, collapse spacing */
#displaybox table.ArrayOperation-Table {
  border-radius: 0 !important;
  margin-top: -1px !important;
  margin-bottom: 0 !important;
}

/* Form wrappers: remove their margin so tables sit flush */
#displaybox .content > form:has(> table.ArrayOperation-Table) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Direct table child (Spin Up/Down): also remove bottom margin */
#displaybox .content > table.ArrayOperation-Table {
  margin-bottom: 0 !important;
}

/* First table (inside first form): round top corners, restore top margin */
#displaybox .content > form:first-of-type > table.ArrayOperation-Table {
  border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
  margin-top: 0 !important;
}

/* Last table (inside last form): round bottom corners */
#displaybox .content > form:last-of-type > table.ArrayOperation-Table {
  border-radius: 0 0 var(--glass-radius) var(--glass-radius) !important;
}

/* Hide cell borders inside ArrayOp tables */
#displaybox table.ArrayOperation-Table td {
  border-color: transparent !important;
}


/* ============================================
   BUG FIXES — Phase 5: Table & Form Styling
   ============================================ */

/* Shares Browse page: file browser uses table.indexer.tablesorter.
   Also covers any general tablesorter table with glass styling. */
table.tablesorter.indexer,
#displaybox table.tablesorter.indexer {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  overflow: hidden !important;
}

table.tablesorter.indexer thead td,
table.tablesorter.indexer thead th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--glass-text-muted) !important;
}

table.tablesorter.indexer tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

table.tablesorter.indexer tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Share Settings form page: wrap form content in glass styling.
   The form uses dl/dt/dd inside a content div. */
#displaybox .content > form,
#displaybox form[method],
#displaybox div.clone-settings,
#displaybox > .content > table:not(.dashboard):not(.tablesorter):not(.disk_status):not(.share_status):not(.ArrayOperation-Table) {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* Apps detail panel: ensure tags/buttons area has glass bg */
#alternateView .ca_template,
#alternateView table {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ============================================
   BUG FIXES — Phase 6: Bars & Button Visibility
   ============================================ */

/* Main page usage bars: 24px with value text inside */
#displaybox table:not(.dashboard) .usage-disk,
#displaybox table:not(.dashboard) .usage-bar {
  height: 24px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  margin: 4px 0 !important;
  position: relative !important;
}

#displaybox table:not(.dashboard) .usage-disk > span:first-child,
#displaybox table:not(.dashboard) .usage-bar > span:first-child {
  height: 100% !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, rgba(126, 184, 218, 0.5), var(--glass-accent)) !important;
  display: block !important;
}

/* Value text overlaid inside the bar */
#displaybox table:not(.dashboard) .usage-disk > span:last-child,
#displaybox table:not(.dashboard) .usage-bar > span:last-child {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Color-coded bars on Main page (class is on the fill span) */
#displaybox table:not(.dashboard) .usage-disk > span.greenbar,
#displaybox table:not(.dashboard) .usage-bar > span.greenbar {
  background: linear-gradient(90deg, #22c55e, #4ade80) !important;
}

#displaybox table:not(.dashboard) .usage-disk > span.orangebar,
#displaybox table:not(.dashboard) .usage-bar > span.orangebar {
  background: linear-gradient(90deg, #f97316, #fb923c) !important;
}

#displaybox table:not(.dashboard) .usage-disk > span.redbar,
#displaybox table:not(.dashboard) .usage-bar > span.redbar {
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
}

/* Plugins Update: ensure update arrow buttons are visible */
#displaybox table.tablesorter input[type="button"],
#displaybox table[role="grid"] input[type="button"],
#displaybox table.tablesorter button:not([disabled]),
#displaybox table[role="grid"] button:not([disabled]) {
  background: var(--glass-accent-subtle) !important;
  color: var(--glass-accent) !important;
  border: 1px solid rgba(126, 184, 218, 0.25) !important;
}

/* VM action buttons — ensure visibility */
#displaybox #vm_list button,
#displaybox #vm_list input[type="button"] {
  background: var(--glass-accent-subtle) !important;
  color: var(--glass-accent) !important;
  border: 1px solid rgba(126, 184, 218, 0.25) !important;
}


/* ============================================
   BUG FIXES — Phase 7: Page-Specific Layouts
   ============================================ */

/* Dashboard #3: header clipping — ensure UNRAID banner is fully visible */
#header {
  overflow: visible !important;
  z-index: 100 !important;
}

/* Ensure the Unraid logo/brand area doesn't clip */
#header > div:first-child,
#header .brand,
#header a[href*="unraid.net"] {
  overflow: visible !important;
}

/* Docker #1: folder-preview wrapper — nearly invisible so
   container items don't appear in a "tab-like" wrapper. */
.folder-preview,
div[class*="folder-preview"] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Docker folder-storage cell — reduce the wrapper appearance */
td.folder-storage {
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
}

/* Apps #1: ribbon/badge corner rounding.
   Ensure the card clips the ribbon properly. */
.ca_holder {
  overflow: hidden !important;
  border-radius: 16px !important;
}

/* Badge text positioning — ensure visible */
.ca_holder .installedCardBackground + span,
.ca_holder .betaCardBackground + span,
.ca_holder .officialCardBackground + span,
.ca_holder .warningCardBackground + span,
.ca_holder .greenCardBackground + span {
  color: #fff !important;
  font-size: 10px !important;
  z-index: 2 !important;
}

/* ZFS Master: toggle icon gap fix.
   The toggle/refresh area sits in a div that has excess margin.
   Tighten the layout. */
#displaybox [id*="zfs"] .switch-button-background,
#displaybox [id*="ZFS"] .switch-button-background {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 8px !important;
}

/* Fix stacked panels: don't apply to tabpanel children
   which have their own panel structure */
[role="tabpanel"] div.Panel + div.Panel {
  margin-top: 16px !important;
  border-top: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
}

[role="tabpanel"] div.Panel:not(:first-of-type):not(:last-of-type) {
  border-radius: var(--glass-radius) !important;
}

[role="tabpanel"] div.Panel:first-of-type:has(+ div.Panel) {
  border-radius: var(--glass-radius) !important;
  margin-bottom: 16px !important;
}

/* ===== Bug #9: Toggle icon visibility (Shares Browse, etc.) ===== */
i.fa.fa-toggle-off,
i.fa.fa-toggle-on {
  color: var(--glass-text-muted) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

i.fa.fa-toggle-on {
  color: var(--glass-accent) !important;
}

i.fa.fa-toggle-off:hover,
i.fa.fa-toggle-on:hover {
  color: var(--glass-text) !important;
}

/* ===== Bug #11: Share Settings — merge two glass cards into one ===== */
div.relative:has(> div.clone-settings) {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(30px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

#displaybox div.relative:has(> div.clone-settings) > div.clone-settings {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
}

#displaybox div.relative:has(> div.clone-settings) > form {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Bugs #16/#17/#19: Apps ribbon badge clipping ===== */
div:has(> [class*="CardBackground"]) {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.installedCardBackground,
.betaCardBackground,
.officialCardBackground,
.warningCardBackground,
.deprecatedCardBackground,
.greenCardBackground,
.limetechCardBackground {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
}

/* ===== Bug #20: ZFS Master tooltipster glass styling ===== */
.tooltipster-base,
.tooltipster-box,
.tooltipster-sidetip .tooltipster-box {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
}

.tooltipster-content,
.tooltipster-sidetip .tooltipster-content {
  color: var(--glass-text) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
}

.tooltipster-arrow-border,
.tooltipster-arrow-background {
  border-color: transparent !important;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  border-left-color: rgba(255, 255, 255, 0.10) !important;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  border-right-color: rgba(255, 255, 255, 0.10) !important;
}