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
   ============================================ */
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: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html.sidebar-expanded #sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.20) !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; }

/* --- 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 when sidebar expands (push, not overlap) --- */
#displaybox,
#footer,
#copyright {
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

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: rgba(255, 255, 255, 0.02) !important;
  color: var(--glass-text-heading) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !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;
}

/* 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: 8px !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;
}

/* 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: 6px !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;
}

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


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

/* Checkbox / switch styling */
.switch-button-background {
  border-radius: 12px !important;
}

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