unraid-glass/style.css

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

/* --- 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
   ============================================ */
html {
  overflow-x: hidden !important;
}

body {
  background: #0a0a0f !important;
  background-image: url('/custom/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(50, 55, 65, 0.85) !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: chevron in visible circle, 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;
  border-radius: 50% !important;
}

html.sidebar-expanded #sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !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) --- */
#header,
#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 #header,
html.sidebar-expanded.Theme--sidebar #displaybox,
html.sidebar-expanded.Theme--sidebar #footer,
html.sidebar-expanded.Theme--sidebar #copyright {
  margin-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 {
  transition: background 0.2s ease !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: 8px !important;
  overflow: hidden !important;
}

.usage-disk > span,
.usage-bar > span {
  border-radius: 8px !important;
  background: linear-gradient(90deg, rgba(126, 184, 218, 0.6), var(--glass-accent)) !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;
}


/* ============================================
   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;
}

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 + prevent overflow */
div.tile {
  background: transparent !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Dashboard tables → block layout, transparent */
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;
}

/* Ensure no dark backgrounds between dashboard cards */
table.dashboard > tbody:not(.sortable),
table.dashboard > thead {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: 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: var(--glass-shadow) !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !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: 0 8px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08) !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;
}

/* 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,
span.tile-header-right {
  color: var(--glass-text-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  font-size: 1em !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;
}

/* Dashboard card control icons — transparent background, white only */
span.tile-header-right > * {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 2rem !important;
  padding: 0 !important;
  line-height: 1 !important;
}

span.tile-header-right > *:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Nested control icons (gear, chevron) inside tile-header-right-controls */
span.tile-header-right .control,
span.tile-header-right-controls a {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 2rem !important;
  padding: 0 !important;
}

span.tile-header-right .control:hover,
span.tile-header-right-controls a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  background: transparent !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: 8px !important;
  height: 8px !important;
  margin: 6px 0 !important;
  overflow: hidden !important;
}

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

/* --- Dashboard CPU bars — override inner-page pill style (specificity 1-1-1 > 1-1-0) --- */
#displaybox table.dashboard .usage-disk {
  display: block !important;
  width: 100% !important;
  height: 10px !important;
  min-width: unset !important;
  border-radius: 5px !important;
  margin: 4px 0 !important;
  position: relative !important;
}

#displaybox table.dashboard .usage-disk > span:first-child {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  display: block !important;
  border-radius: 5px !important;
}

/* Color-coded CPU bar fills */
#displaybox table.dashboard .usage-disk > span.greenbar {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.6), #4ade80) !important;
}

#displaybox table.dashboard .usage-disk > span.orangebar {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.6), rgb(245, 166, 35)) !important;
}

#displaybox table.dashboard .usage-disk > span.redbar {
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.6), rgb(231, 76, 60)) !important;
}

/* Hide empty pill label text inside dashboard bars */
#displaybox table.dashboard .usage-disk > span:last-child {
  font-size: 0 !important;
  padding: 0 !important;
  position: absolute !important;
}

/* --- Array/Cache/Unassigned — Vertical Pill Bars (specificity 1-2-1) --- */
#displaybox table.dashboard .usage-disk.vertical-bar {
  width: 28px !important;
  height: 50px !important;
  border-radius: 14px !important;
  position: relative !important;
  display: block !important;
  min-width: unset !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

/* Vertical fill — from bottom */
#displaybox table.dashboard .usage-disk.vertical-bar > span:first-child {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  border-radius: 14px !important;
  top: auto !important;
}

/* Vertical color gradients (bottom to top) */
#displaybox table.dashboard .usage-disk.vertical-bar > span.greenbar {
  background: linear-gradient(0deg, rgba(74, 222, 128, 0.5), #4ade80) !important;
}

#displaybox table.dashboard .usage-disk.vertical-bar > span.orangebar {
  background: linear-gradient(0deg, rgba(245, 166, 35, 0.5), rgb(245, 166, 35)) !important;
}

#displaybox table.dashboard .usage-disk.vertical-bar > span.redbar {
  background: linear-gradient(0deg, rgba(231, 76, 60, 0.5), rgb(231, 76, 60)) !important;
}

/* % text inside vertical bar */
#displaybox table.dashboard .usage-disk.vertical-bar > span:last-child {
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 0.65em !important;
  white-space: nowrap !important;
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  padding: 0 !important;
  z-index: 1 !important;
}

/* Hide .load text outside vertical bars */
#array_list .w18 .load,
#pool_list0 .w18 .load,
#devs_list .w18 .load {
  display: none !important;
}

/* Center the vertical bar in its cell */
#array_list .w18:last-child,
#pool_list0 .w18:last-child,
#devs_list .w18:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Docker container icons in dashboard */
table.dashboard img {
  border-radius: 6px !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 */
table.dashboard span.inner a,
table.dashboard span.outer a,
table.dashboard span.appname a,
table.dashboard td a {
  color: var(--glass-accent) !important;
}

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

/* Docker card — force all text/links to white (FolderView sets blue on some spans) */
#docker_view span.inner span,
#docker_view span.inner a,
#docker_view a {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* --- CPU Chart Canvas — invert grid lines to white --- */
#cpuchart {
  filter: invert(1) hue-rotate(180deg) !important;
  opacity: 0.85 !important;
}

/* CPU chart row — force full width (TD has no .w26/.w72 spans) */
#cpu_chart td {
  display: block !important;
  width: 100% !important;
  padding: 8px 0 !important;
}

#cpu_chart td canvas {
  display: block !important;
  width: 100% !important;
  min-height: 96px !important;
}

/* --- System Card Donut Charts --- */
div.pie {
  position: relative !important;
}

/* Create donut hole — thinner ring, fully 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: rgb(15, 15, 25) !important;
}

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

/* --- Toggle Switch — Glass Style --- */
.switch-button-background {
  width: 40px !important;
  height: 22px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 11px !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.switch-button-background.checked {
  background: rgba(126, 184, 218, 0.3) !important;
  border-color: rgba(126, 184, 218, 0.4) !important;
}

.switch-button-button {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: left 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !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: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !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;
  opacity: 1 !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: var(--glass-shadow) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

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

#displaybox table:not(.dashboard) 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;
  background: transparent !important;
}

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

/* Header rows using <td> instead of <th> (Main/Pool/ZFS pages) */
#displaybox table:not(.dashboard) thead td,
#displaybox table:not(.dashboard) tbody tr:first-child td {
  color: var(--glass-text-muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 0.75em !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !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;
}

/* White icons inside tables (sort arrows, action icons, snapshots) */
#displaybox table i.fa,
#displaybox table .fa,
#displaybox table i[class*="icon-"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Toggle icon between tabs and table */
i.toggle.fa {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 16px !important;
}

/* Usage bars on inner pages — larger pill-style with separated text */
#displaybox .usage-disk {
  height: 26px !important;
  min-width: 80px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
}

#displaybox .usage-disk > span.orangebar,
#displaybox .usage-disk > span.greenbar {
  border-radius: 13px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
}

#displaybox .usage-disk > span:last-child {
  position: relative !important;
  z-index: 1 !important;
  font-size: 0.8em !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  color: var(--glass-text) !important;
}

/* Tooltip styling (custom tooltips) */
.tipsy .tipsy-inner {
  background: rgba(15, 15, 25, 0.85) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  color: var(--glass-text) !important;
  font-size: 12px !important;
  padding: 6px 10px !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;
}

/* Docker/VM table rows — override Unraid dark theme background */
table.tablesorter tbody tr.sortable {
  background: transparent !important;
}

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

table.tablesorter tbody tr.sortable:hover {
  background: rgba(255, 255, 255, 0.05) !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 */
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;
}

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;
}


/* ============================================
   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"] {
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 4px !important;
}

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

/* Tooltip / title popups */
.tooltip,
[data-tooltip] {
  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;
}

/* 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 — match glass bg */
.cardDesc::after {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(30, 30, 40, 0.6) 100%) !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;
}