/* ============================================================
   CloudDrop — Admin Panel Overrides (Sash v12)
   ============================================================ */

/* Legacy CSS variable aliases — admin.js inline styles reference these */
:root, [data-bs-theme=dark] {
  --surface: #30334e;
  --surface2: #3b3e58;
  --surface3: #434660;
  --card: #30334e;
  --border: rgba(234,234,255,.12);
  --border2: rgba(234,234,255,.16);
  --text: #b2b3ca;
  --text2: #7b7d95;
  --text3: #555871;
  --heading: #eaeaff;
  --accent: #666cff;
  --accent2: #5c61e6;
  --accent-subtle: rgba(102,108,255,.16);
  --danger: #ff4d49;
  --danger-subtle: rgba(255,77,73,.16);
  --success: #72e128;
  --success-subtle: rgba(114,225,40,.16);
  --warning: #fdb528;
  --warning-subtle: rgba(253,181,40,.16);
  --radius: .5rem;
  --radius-lg: .625rem;
  --bg: #282a42;
}

/* .hidden moved to base.css */

/* ================================================================
   LOGIN (not part of Materialize — fully custom)
   ================================================================ */
#loginView {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-body-bg, #282a42); z-index: 100;
}
#loginView::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(102,108,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(102,108,255,.04) 0%, transparent 50%);
  pointer-events: none;
}
.login-card {
  position: relative;
  background: var(--bs-body-bg, #30334e);
  border: 1px solid rgba(234,234,255,.12);
  border-radius: .625rem;
  padding: 2.5rem 2.25rem;
  width: 100%; max-width: 400px;
  box-shadow: 0 .25rem .875rem 0 rgba(16,17,33,.26);
}
.login-logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.5px; color: var(--bs-heading-color, #eaeaff); text-align: center; margin-bottom: .25rem; }
.login-logo span { color: var(--bs-primary, #666cff); }
.login-subtitle { text-align: center; color: var(--bs-secondary-color, #7b7d95); font-size: .9375rem; margin-bottom: 1.75rem; }
.field { margin-bottom: 1rem; }
.field-label { display: block; font-size: .8125rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); margin-bottom: .375rem; letter-spacing: .01em; }
#loginView input[type="password"],
#loginView input[type="text"] {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(234,234,255,.16);
  border-radius: .5rem;
  padding: .65rem .875rem;
  color: var(--bs-heading-color, #eaeaff);
  font-size: .9375rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
#loginView input:focus {
  outline: none;
  border-color: #666cff;
  box-shadow: 0 0 0 3px rgba(102,108,255,.15);
}
#loginView input::placeholder { color: rgba(234,234,255,.3); }
#loginView .btn-full { margin-top: .5rem; padding: .625rem 1rem; font-size: .9375rem; font-weight: 500; }
.login-error { margin-top: .75rem; font-size: .875rem; color: var(--bs-danger, #ff4d49); text-align: center; min-height: 1.125rem; }
.login-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.login-bg .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .08; animation: float 25s ease-in-out infinite; }
.login-bg .orb:nth-child(1) { width: 400px; height: 400px; background: #666cff; top: 10%; left: 20%; }
.login-bg .orb:nth-child(2) { width: 300px; height: 300px; background: #8b5cf6; top: 60%; right: 15%; animation-duration: 30s; animation-delay: -5s; }
.login-bg .orb:nth-child(3) { width: 250px; height: 250px; background: #72e128; bottom: 20%; left: 40%; animation-duration: 22s; animation-delay: -10s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(30px, -40px) scale(1.05); }
  50%  { transform: translate(-20px, 20px) scale(0.95); }
  75%  { transform: translate(40px, 30px) scale(1.02); }
}

/* ================================================================
   NAV LINKS — Map our nav-link + data-tab to Materialize menu
   ================================================================ */
.nav-link.active .menu-icon,
.menu-link.active .menu-icon {
  color: #fff;
}
.nav-link.active,
.menu-link.active {
  color: #fff !important;
  background: var(--bs-primary, #666cff) !important;
  box-shadow: 0 .125rem .5rem 0 rgba(102,108,255,.46);
  border-radius: .5rem;
}

/* Center text vertically in menu buttons */
.layout-menu-horizontal .menu-inner > .menu-item > .menu-link {
  display: flex !important;
  align-items: center !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.layout-menu-horizontal .menu-inner > .menu-item > .menu-link > div {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.layout-menu-horizontal .menu-inner > .menu-item > .menu-link > .menu-icon {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}
.nav-icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke-width: 1.5;
}

/* ================================================================
   DROPDOWN — Pure CSS hover, works with Materialize core.css
   core.css already provides: position:absolute on .menu-horizontal .menu-sub,
   display:none on .menu-sub, proper sizing/shadow/padding.
   We ONLY need to add the :hover trigger and fix the gap.
   ================================================================ */

/* Ensure menu-items are hover-targetable */
.layout-menu-horizontal .menu-inner > .menu-item {
  position: relative;
}

/* THE KEY RULE: show dropdown on hover */
.layout-menu-horizontal .menu-inner > .menu-item:hover > .menu-sub {
  display: flex !important;
  flex-direction: column !important;
  z-index: 9999 !important;
}

/* Also show on .open class (for mobile/JS fallback) */
.layout-menu-horizontal .menu-inner > .menu-item.open > .menu-sub {
  display: flex !important;
  flex-direction: column !important;
}

/* Bridge the hover gap: pad the bottom of the menu-item so the mouse
   can travel from the toggle text down to the dropdown panel without
   leaving the :hover zone. We use padding instead of ::after to keep
   the hover target contiguous. */
.layout-menu-horizontal .menu-inner > .menu-item {
  padding-bottom: .5rem;
  margin-bottom: -.5rem;
}

/* Dark dropdown background */
.layout-menu-horizontal .menu-sub {
  background: var(--surface, #30334e) !important;
  border: 1px solid rgba(234,234,255,.12) !important;
  border-radius: .625rem !important;
  z-index: 9999 !important;
}

/* ── Layout containment ── */
/* Dropdown + layout fix — minimal approach */
.layout-menu-horizontal {
  z-index: 1080 !important;
  position: relative !important;
  overflow: visible !important;
}
.layout-menu-horizontal .menu-inner {
  overflow: visible !important;
  justify-content: center !important;
}
.layout-menu-horizontal .menu-inner > .menu-item {
  overflow: visible !important;
}
/* Kill horizontal scrollbar on the page itself */
html { overflow-x: hidden !important; }

/* Activity/Audit: wide tables scroll within their tab */
#tabActivity .admin-table,
#tabAudit .admin-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dropdown item styling */
.layout-menu-horizontal .menu-sub .menu-link {
  color: var(--text, #b2b3ca) !important;
  padding: .5rem 1.25rem !important;
  white-space: nowrap !important;
}
.layout-menu-horizontal .menu-sub .menu-link div {
  white-space: nowrap !important;
}
.layout-menu-horizontal .menu-sub .menu-link:hover {
  background: rgba(234,234,255,.08) !important;
  color: #eaeaff !important;
}
.layout-menu-horizontal .menu-sub .menu-item.active > .menu-link {
  background: #666cff !important;
  color: #fff !important;
}

/* Single dropdown arrow — Materialize-style chevron */
.layout-menu-horizontal .menu-toggle::after {
  display: none !important;
}
.layout-menu-horizontal .menu-inner > .menu-item > .menu-link.menu-toggle > div::after {
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: .5rem;
  margin-bottom: .2rem;
  opacity: .8;
  vertical-align: middle;
}

/* ================================================================
   TAB PANELS — Custom tab switching (not Bootstrap tabs)
   ================================================================ */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* ================================================================
   NOTIFICATION BAR & ALERTS
   ================================================================ */
.notify-bar { padding: .625rem 1.5rem; font-size: .875rem; font-weight: 500; text-align: center; border-radius: .625rem; margin-bottom: 1rem; }
.notify-bar.success { background: rgba(114,225,40,.16); color: #72e128; }
.notify-bar.error   { background: rgba(255,77,73,.16);  color: #ff4d49; }
.notify-bar.warning { background: rgba(253,181,40,.16); color: #fdb528; }
.alert-banner { display: flex; align-items: center; gap: .625rem; padding: .625rem 1.5rem; background: rgba(255,77,73,.16); border-bottom: 1px solid rgba(255,77,73,.15); font-size: .875rem; color: #ff4d49; margin-bottom: 1.5rem; border-radius: .625rem; }
.alert-banner .alert-count { font-weight: 700; background: #ff4d49; color: #fff; padding: .0625rem .5rem; border-radius: 50rem; font-size: .75rem; }
.alert-badge { position: absolute; top: .25rem; right: .25rem; width: .5rem; height: .5rem; background: #ff4d49; border-radius: 50%; display: none; }
.alert-badge.visible { display: block; }

/* ================================================================
   STAT CARDS (legacy — used in tabs not yet converted to cards)
   ================================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--bs-body-bg, #30334e);
  border: 1px solid rgba(234,234,255,.12);
  border-radius: .625rem;
  padding: 1.25rem;
  box-shadow: 0 .25rem .875rem 0 rgba(16,17,33,.26);
}
.stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.625rem; height: 2.625rem; border-radius: .5rem; margin-bottom: .75rem;
}
.stat-value { font-size: 1.5rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); line-height: 1.1; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .9375rem; color: var(--bs-secondary-color, #7b7d95); font-weight: 400; }

/* ================================================================
   QUEUE STATS
   ================================================================ */
.qs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.qs-card { background: var(--bs-body-bg, #30334e); border: 1px solid rgba(234,234,255,.12); border-radius: .5rem; padding: .5rem .75rem; box-shadow: 0 .125rem .5rem 0 rgba(16,17,33,.26); }
.qs-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--bs-tertiary-color, #555871); margin-bottom: .125rem; }
.qs-value { font-size: 1.125rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); font-variant-numeric: tabular-nums; }
.qs-speed .qs-value { color: #26c6f9; }
.qs-done .qs-value { color: #72e128; }
.qs-failed .qs-value { color: #ff4d49; }
.queue-section-header .page-title { display: flex !important; align-items: center; gap: .5rem; }
.queue-section-icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.queue-section-icon-active { color: #666cff; }
.queue-section-icon-queued { color: #fdb528; }
.queue-section-icon-failed { color: #ff4d49; }
.queue-section-icon-done { color: #72e128; }
.queue-btn-icon { width: .875rem; height: .875rem; vertical-align: -2px; stroke-width: 2.2; }
.queue-stat-icon { width: .875rem; height: .875rem; vertical-align: -2px; margin-right: .375rem; stroke-width: 2; color: var(--bs-tertiary-color); }
/* ---- active upload cards ---- */
.queue-active-card {
  background: linear-gradient(135deg, #2a2d48 0%, #32365a 100%);
  border: 1px solid rgba(102,108,255,.2);
  border-radius: .625rem;
  padding: .875rem 1rem;
  margin-bottom: .5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.queue-active-card:hover {
  border-color: rgba(102,108,255,.4);
  box-shadow: 0 4px 24px rgba(102,108,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.qac-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .625rem; margin-bottom: .5rem; }
.qac-info { flex: 1; min-width: 0; }
.qac-title { font-weight: 600; font-size: .8125rem; color: var(--bs-heading-color, #eaeaff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.qac-title span { overflow: hidden; text-overflow: ellipsis; }
.qac-meta-line { font-size: .75rem; color: var(--bs-tertiary-color, #7b7d95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-active-card .user-chevron { display: inline-flex; align-items: center; gap: .25rem; }
.queue-active-card .user-chevron i { width: .875rem; height: .875rem; stroke-width: 2; }
.queue-active-card .q-cancel { font-size: .6875rem; padding: .3rem .625rem; flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem; }

/* progress bar */
.qac-progress-row { display: flex; align-items: center; gap: .625rem; }
.qac-progress-track { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.qac-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #666cff, #8b5cf6, #a78bfa);
  box-shadow: 0 0 10px rgba(102,108,255,.5);
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}
.qac-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: qacShine 2s ease-in-out infinite;
}
@keyframes qacShine { 0% { left: -100%; } 100% { left: 200%; } }
.qac-progress-text { font-size: .75rem; color: var(--bs-secondary-color, #a3a4cc); font-variant-numeric: tabular-nums; min-width: 11rem; text-align: right; }

/* ================================================================
   POOL BAR & CHART CARDS (used inside Materialize .card wrappers)
   ================================================================ */
.pool-card, .chart-card {
  background: var(--bs-body-bg, #30334e);
  border: 1px solid rgba(234,234,255,.12);
  border-radius: .625rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 .25rem .875rem 0 rgba(16,17,33,.26);
}
.pool-bar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; font-size: .9375rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); }
.pool-bar-header .pool-pct { font-weight: 400; color: var(--bs-secondary-color); }
.pool-bar { height: .5rem; background: #434660; border-radius: 50rem; overflow: hidden; }
.pool-bar-fill { height: 100%; background: var(--bs-primary, #666cff); border-radius: 50rem; transition: width .4s ease; }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .875rem; flex-wrap: wrap; gap: .5rem; }
.chart-title { font-size: .9375rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); }
.chart-legend { display: flex; gap: 1rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.pool-cost-note { font-size: .75rem; color: var(--bs-secondary-color, #7b7d95); margin-top: .5rem; text-align: center; }
.chart-container { display: flex; align-items: flex-end; gap: .5rem; min-height: 11.25rem; padding-bottom: .25rem; }
.chart-group { display: flex; flex-direction: column; align-items: center; flex: 1; gap: .25rem; }
.chart-group-bars { display: flex; align-items: flex-end; gap: .25rem; height: 8.75rem; width: 100%; justify-content: center; }
.chart-group-label { font-size: .6875rem; color: var(--bs-secondary-color, #7b7d95); font-weight: 500; }
.accounts-pagination { display: flex; align-items: center; justify-content: center; gap: .375rem; padding: 1rem; flex-wrap: wrap; }
.done-filename { max-width: 21.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: .75rem 1.25rem; background: #22c55e; color: #0c1222; font-size: .8125rem; font-weight: 600; border-radius: .5rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.3); z-index: 10001; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.admin-toast.toast-error { background: #ef4444; }
.admin-toast.toast-info { background: #3b82f6; }
.chart-legend-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .25rem; }
#uploadChart { min-height: 11.25rem; }
.chart-bar { width: 1.25rem; border-radius: .375rem .375rem 0 0; transition: filter .15s, transform .15s; cursor: pointer; }
.chart-bar:hover { transform: scaleY(1.04); filter: brightness(1.25) drop-shadow(0 0 6px currentColor); }
.chart-bar-cloud { background: #666cff; color: #666cff; }
.chart-bar-transfer { background: #72e128; color: #72e128; }

/* Heatmap */
.hm-cell { background: #434660; border: 1px solid rgba(234,234,255,.12); }
.hm-cell.hm-l0 { background: #434660; }
.hm-cell.hm-l1 { background: rgba(114,225,40,.25); }
.hm-cell.hm-l2 { background: rgba(114,225,40,.45); }
.hm-cell.hm-l3 { background: rgba(114,225,40,.7); }
.hm-cell.hm-l4 { background: #72e128; }
.hm-day { width: 13px; height: 13px; border-radius: .1875rem; cursor: help; transition: transform .1s; }
.hm-day:hover { transform: scale(1.35); }

/* ================================================================
   PAGE HEADERS (inside tab-panels)
   ================================================================ */
.page-header { margin-bottom: 1.25rem; }
.page-title { font-size: 1.125rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); }
.page-subtitle { margin-top: .25rem; font-size: .9375rem; color: var(--bs-secondary-color, #7b7d95); }

/* ================================================================
   TOOLBAR (inside tabs)
   ================================================================ */
.toolbar { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ================================================================
   ADMIN TABLE — Override Materialize .table for our specific needs
   ================================================================ */
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9375rem;
  background: var(--bs-body-bg, #30334e);
  border: 1px solid rgba(234,234,255,.12);
  border-radius: .625rem;
  overflow: hidden;
  box-shadow: 0 .25rem .875rem 0 rgba(16,17,33,.26);
}
/* Content area must not overflow horizontally */
.container-p-y.admin-content {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.tab-panel {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* Fix Materialize content-wrapper stretching */
.content-wrapper,
.layout-page {
  max-width: 100vw;
  box-sizing: border-box;
}
/* Activity tab: table has many columns, needs horizontal scroll */
#tabActivity .admin-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Audit tab: same issue */
#tabAudit .admin-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table thead th {
  padding: .7813rem 1.25rem; text-align: left;
  font-size: .8125rem; font-weight: 600;
  color: var(--bs-heading-color, #eaeaff);
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid rgba(234,234,255,.12);
  background: #3a3e5b; position: sticky; top: 0;
}
.admin-table tbody tr { border-bottom: 1px solid rgba(234,234,255,.08); transition: background .1s; }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: rgba(38,43,67,.04); }
.admin-table td { padding: .7813rem 1.25rem; color: var(--bs-heading-color, #eaeaff); vertical-align: middle; font-variant-numeric: tabular-nums; }
/* Last column (Aktionen) right-aligned */
.admin-table thead th:last-child,
.admin-table tbody td:last-child {
  text-align: right;
}
.admin-table td button + button { margin-left: .375rem; }
/* Action cells: all buttons in one row, no wrap */
.admin-table td:last-child > div { white-space: nowrap; flex-wrap: nowrap !important; }
.admin-table td:last-child { white-space: nowrap; min-width: max-content; }
.admin-table td button.btn-danger { background: transparent !important; color: #ff4d49 !important; border: 1px solid rgba(255,77,73,.4) !important; }
.admin-table td button.btn-danger:hover { background: #ff4d49 !important; color: #fff !important; }

/* ================================================================
   PROVIDER BADGES & PILLS
   ================================================================ */
.provider-filter-pill { background: #3b3e58; border: 1px solid rgba(234,234,255,.12); color: #7b7d95; padding: .375rem .875rem; border-radius: 50rem; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.provider-filter-pill:hover { background: rgba(234,234,255,.08); color: #b2b3ca; }
.provider-filter-pill.active { background: #666cff; border-color: #666cff; color: #fff; }
.add-account-menu { position: absolute; top: calc(100% + .25rem); right: 0; background: #30334e; border: 1px solid rgba(234,234,255,.12); border-radius: .625rem; box-shadow: 0 1px 16px 1px rgba(255,255,255,.09); padding: .375rem; min-width: 13.75rem; z-index: 50; display: flex; flex-direction: column; gap: .125rem; }
.add-account-menu.hidden { display: none; }
.add-account-menu button { background: transparent; border: none; color: #b2b3ca; text-align: left; padding: .625rem .875rem; font-size: .875rem; border-radius: .375rem; cursor: pointer; }
.add-account-menu button:hover { background: rgba(234,234,255,.08); }
.add-account-menu .menu-divider { height: 1px; background: rgba(234,234,255,.12); margin: .25rem .375rem; }
.provider-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .5rem; border-radius: .1875rem; font-size: .8125rem; font-weight: 500; background: rgba(234,234,255,.06); color: #7b7d95; }

/* ================================================================
   TOGGLE & CHECKBOX
   ================================================================ */
.admin-toggle { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; cursor: pointer; }
.admin-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.admin-toggle-slider { position: absolute; inset: 0; background: #434660; border-radius: .625rem; transition: background .2s; }
.admin-toggle-slider::before { content: ''; position: absolute; width: 1rem; height: 1rem; left: .125rem; top: .125rem; background: #7b7d95; border-radius: 50%; transition: transform .2s, background .2s; }
.admin-toggle input:checked + .admin-toggle-slider { background: #666cff; }
.admin-toggle input:checked + .admin-toggle-slider::before { transform: translateX(1rem); background: #fff; }
.admin-toggle input:disabled + .admin-toggle-slider { opacity: .45; }
.admin-checkbox { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; border: 1.5px solid #555871; border-radius: .25rem; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0; flex-shrink: 0; position: relative; vertical-align: middle; }
.admin-checkbox:hover { border-color: #666cff; }
.admin-checkbox:checked { background: #666cff; border-color: #666cff; }
.admin-checkbox:checked::after { content: ''; position: absolute; left: .25rem; top: .0625rem; width: .25rem; height: .5rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.admin-checkbox-label { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; font-size: .875rem; user-select: none; }

/* Webhooks */
.webhook-form-row { display: flex; gap: .625rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: flex-end; }
.webhook-form-row .form-group { margin-bottom: 0; }
.webhook-form-events { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; min-height: 2.25rem; }

.empty-state { text-align: center !important; color: #555871 !important; padding: 2.25rem .875rem !important; font-style: normal; }
.text-muted { color: #7b7d95; }

/* CloudDrop badge variants (not in Materialize) */
.badge-ok { background: rgba(114,225,40,.16); color: #72e128; }
.badge-warn { background: rgba(253,181,40,.16); color: #fdb528; }
.badge-danger { background: rgba(255,77,73,.16); color: #ff4d49; }
.badge-neutral { background: #434660; color: #7b7d95; }
.badge-blue { background: rgba(102,108,255,.16); color: #666cff; }
.file-status.error { color: #ff4d49; font-size: .75rem; font-weight: 600; }

/* Storage mini-bar */
.storage-bar-wrap { display: flex; align-items: center; gap: .5rem; }
.storage-bar-track { flex: 1; height: .375rem; background: #434660; border-radius: 50rem; overflow: hidden; min-width: 3.75rem; }
.storage-bar-fill { height: 100%; background: #666cff; border-radius: 50rem; }
.storage-bar-label { font-size: .75rem; color: #7b7d95; white-space: nowrap; }

/* Settings form */
.settings-form { max-width: 37.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.settings-hint { font-size: .8125rem; color: #7b7d95; }
.settings-saved { font-size: .875rem; color: #72e128; font-weight: 500; opacity: 0; transition: opacity .2s; }
.settings-saved.visible { opacity: 1; }

/* ================================================================
   MODAL OVERRIDES (Materialize has .modal but we use .modal-overlay)
   ================================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(21,16,43,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.modal-card { background: var(--bs-body-bg, #30334e); border: 1px solid rgba(234,234,255,.12); border-radius: .625rem; padding: 1.75rem; width: 100%; max-width: 27.5rem; box-shadow: 0 .375rem 1.25rem 0 rgba(16,17,33,.28); display: flex; flex-direction: column; gap: 1.125rem; }
.modal-card h3 { font-size: 1.125rem; font-weight: 500; color: var(--bs-heading-color, #eaeaff); }
.modal-actions { display: flex; justify-content: flex-end; gap: .625rem; }
.modal-actions .btn-danger { background: #ff4d49; color: #fff; border: none; padding: .4806rem 1.375rem; border-radius: .5rem; font-weight: 500; }
.cd-dialog-msg { font-size: .9375rem; color: #7b7d95; line-height: 1.5; white-space: pre-line; word-break: break-word; }

/* ================================================================
   MOBILE SIDEBAR BACKDROP
   ================================================================ */
.admin-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1079; transition: opacity .2s ease; }
.admin-sidebar-backdrop.visible { display: block; }

/* ================================================================
   MOBILE OVERRIDES (<=991px) — Tablet + Phone
   ================================================================ */
@media (max-width: 1199px) {
  /* ── Force aside drawer visible when layout-menu-expanded is set ── */
  .layout-menu-expanded #adminSidebar,
  .layout-menu-expanded .layout-menu {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }

  /* Drawer styling */
  #adminSidebar {
    flex-direction: column !important;
    overflow-y: auto !important;
    background: var(--surface, #30334e) !important;
    padding: 1.25rem 0 !important;
    width: 16.25rem !important;
  }
  #adminSidebar .container-xxl {
    flex-direction: column !important;
    padding: 0 !important;
    height: auto !important;
  }
  /* Menu items stack vertically */
  .layout-menu-horizontal .menu-inner {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: .125rem !important;
    padding: 0 .75rem !important;
    width: 100% !important;
  }
  .layout-menu-horizontal .menu-inner > .menu-item {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }
  .layout-menu-horizontal .menu-inner > .menu-item > .menu-link {
    padding: .75rem 1rem !important;
    font-size: .9375rem !important;
    min-height: 2.75rem !important;
    border-radius: .5rem !important;
    width: 100% !important;
  }
  /* Dropdown sub-menus inline in drawer (not absolute) */
  .layout-menu-horizontal .menu-inner > .menu-item > .menu-sub,
  .layout-menu-horizontal .menu-inner > .menu-item:hover > .menu-sub,
  .layout-menu-horizontal .menu-inner > .menu-item.open > .menu-sub {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: 1rem !important;
    min-width: auto !important;
    width: 100% !important;
  }
  /* On mobile, sub-menus only show on .open (tap), not :hover */
  .layout-menu-horizontal .menu-inner > .menu-item:hover > .menu-sub {
    display: none !important;
  }
  .layout-menu-horizontal .menu-inner > .menu-item.open > .menu-sub {
    display: flex !important;
  }
  .layout-menu-horizontal .menu-sub > .menu-item > .menu-link {
    padding: .5rem .75rem !important;
    font-size: .875rem !important;
    min-height: 2.5rem !important;
  }

  /* ── Backdrop — below menu, does NOT block menu clicks ── */
  .admin-sidebar-backdrop {
    position: fixed !important; inset: 0 !important;
    background: rgba(21,16,43,.6) !important;
    z-index: 9 !important;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease !important;
  }
  .admin-sidebar-backdrop.visible {
    opacity: 1 !important; pointer-events: auto !important;
  }

  /* ── Header compact ── */
  .layout-navbar .container-xxl {
    padding: 0 .75rem !important;
  }

  /* ── Content area ── */
  .container-p-y.admin-content {
    padding: 1rem .75rem 2rem !important;
  }

  /* ── Stat cards: 2 columns ── */
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .stat-card { padding: .875rem !important; }
  .stat-value { font-size: 1.125rem !important; }

  .qs-grid { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .qs-card { padding: .75rem !important; }
  .qs-value { font-size: 1rem !important; }

  /* ── Tables: table itself scrolls horizontally ── */
  .admin-table {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-radius: .625rem !important;
  }
  .admin-table::-webkit-scrollbar { display: none !important; }
  .admin-table thead, .admin-table tbody {
    display: table !important;
    width: 100% !important;
    min-width: 700px !important;
  }
  /* Templates grid: single column on mobile */
  .cd-templates-grid {
    grid-template-columns: 1fr !important;
  }
  /* Button rows: equal flex on mobile */
  .cd-btn-row { flex-wrap: wrap !important; }
  .cd-btn-row > button { flex: 1 !important; font-size: .8125rem !important; padding: .5rem .75rem !important; min-width: 0 !important; }
  .cd-btn-row > .cd-search-spacer { display: none !important; }
  .cd-btn-row > .cd-toolbar-search {
    flex: 1 1 100% !important; order: -1 !important; width: 100% !important;
    margin-bottom: .5rem !important;
  }
  /* Action buttons in tables: compact, single row, no wrap */
  .admin-table td:last-child > div {
    flex-wrap: nowrap !important;
    gap: .25rem !important;
  }
  .admin-table td button {
    padding: .25rem .5rem !important;
    font-size: .7rem !important;
    min-height: auto !important;
    white-space: nowrap !important;
  }
  .admin-table td, .admin-table th {
    white-space: nowrap !important;
    padding: .5rem .75rem !important;
    vertical-align: middle !important;
  }
  .admin-table td button, .admin-table td .btn {
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
    min-height: auto !important;
    white-space: nowrap !important;
  }
  .admin-table td:last-child div {
    flex-wrap: nowrap !important;
  }

  /* ── Chart cards compact ── */
  .chart-card, .pool-card { padding: .875rem !important; }

  /* ── Cards in row: full width ── */
  .row.g-6 > [class*="col-xxl"],
  .row.g-6 > [class*="col-md"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* But stat cards stay 2-per-row */
  .row.g-6 > .col-xxl-2 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* ── Buttons touch-friendly ── */
  .btn, button.btn-primary, button.btn-secondary, button.btn-danger,
  .btn-primary, .btn-secondary, .btn-danger {
    min-height: 2.5rem !important;
    font-size: .875rem !important;
  }

  /* ── Modals: full-width ── */
  .modal-card {
    max-width: calc(100vw - 1.5rem) !important;
    padding: 1.25rem 1rem !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
  }

  /* ── Login compact ── */
  .login-card {
    padding: 1.75rem 1.25rem !important;
    max-width: calc(100vw - 1.5rem) !important;
  }

  /* ── Toolbar wraps ── */
  .toolbar { flex-wrap: wrap !important; gap: .5rem !important; }
  .card-header { flex-wrap: wrap !important; gap: .5rem !important; }

  /* ── Prevent iOS auto-zoom ── */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="url"], input[type="search"],
  textarea, select {
    font-size: 16px !important;
  }

  /* ── Prevent horizontal scroll ── */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* ── Page title smaller ── */
  .page-title { font-size: 1rem !important; }

  /* ── Queue active cards ── */
  .queue-active-card { padding: .625rem !important; }
  .queue-active-card > div:first-child {
    flex-direction: column !important; align-items: stretch !important; gap: .375rem !important;
  }
  .queue-active-card .user-chevron { font-size: .75rem !important; }
  .queue-active-card .user-chevron span {
    display: inline-block; max-width: calc(100vw - 6rem);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .queue-active-card .q-cancel { align-self: flex-end !important; font-size: .6875rem !important; }
  .queue-active-card [data-dyn-meta] { font-size: .6875rem !important; }

  /* ── Pagination compact ── */
  #accountsPagination { gap: .25rem !important; }
  #accountsPagination button { padding: .25rem .5rem !important; font-size: .75rem !important; }

  /* ── Alert banner ── */
  .alert-banner { font-size: .8125rem !important; padding: .5rem .75rem !important; }
}

/* ================================================================
   SMALL PHONE (<=575px)
   ================================================================ */
@media (max-width: 575px) {
  /* Stat cards: 1 column on tiny screens */
  .row.g-6 > .col-xxl-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .stat-grid { grid-template-columns: 1fr !important; }
  .qs-grid { grid-template-columns: 1fr 1fr !important; }

  /* Pool bar card stacks */
  .pool-card .card-body { flex-direction: column !important; gap: .75rem !important; }
}

/* ================================================================
   DESKTOP ONLY (>=1200px) — reset mobile overrides
   ================================================================ */
@media (min-width: 1200px) {
  .admin-sidebar-backdrop { display: none !important; }
  /* Ensure horizontal layout on desktop — override any .layout-menu vertical rules */
  .layout-menu.layout-menu-horizontal {
    position: relative !important;
    transform: none !important;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .layout-menu.layout-menu-horizontal .container-xxl {
    flex-direction: row !important;
  }
  .layout-menu.layout-menu-horizontal .menu-inner {
    flex-direction: row !important;
    justify-content: center !important;
  }
}

/* ================================================================
   INLINE-STYLE OVERRIDES from JS
   ================================================================ */
/* ================================================================
   SETTINGS CARDS (Materialize style)
   ================================================================ */
.cd-settings-card {
  background: var(--bs-body-bg, #30334e);
  border: 1px solid rgba(234,234,255,.12);
  border-radius: .625rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 .25rem .875rem 0 rgba(16,17,33,.26);
  overflow: hidden;
}
.cd-settings-header {
  padding: 1.25rem 1.5rem .875rem;
  border-bottom: 1px solid rgba(234,234,255,.08);
}
.cd-settings-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bs-heading-color, #eaeaff);
  margin: 0 0 .25rem 0;
}
.cd-settings-subtitle {
  font-size: .875rem;
  color: var(--bs-secondary-color, #7b7d95);
  margin: 0;
}
.cd-settings-body {
  padding: 1.5rem;
}
.cd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.cd-form-group {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.cd-form-full {
  grid-column: 1 / -1;
  margin-bottom: 1.25rem;
}
.cd-form-group label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bs-heading-color, #eaeaff);
  margin: 0;
  letter-spacing: .01em;
}
.cd-form-group input[type="text"],
.cd-form-group input[type="number"],
.cd-form-group input[type="url"],
.cd-form-group input[type="email"],
.cd-form-group input[type="password"],
.cd-form-group select,
.cd-form-group textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(234,234,255,.16);
  border-radius: .5rem;
  padding: .65rem .875rem;
  color: var(--bs-heading-color, #eaeaff);
  font-size: .9375rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.cd-form-group input:focus,
.cd-form-group select:focus,
.cd-form-group textarea:focus {
  outline: none;
  border-color: #666cff;
  box-shadow: 0 0 0 3px rgba(102,108,255,.15);
}
.cd-form-group input::placeholder {
  color: rgba(234,234,255,.3);
}
.cd-form-hint {
  font-size: .75rem;
  color: var(--bs-secondary-color, #7b7d95);
  margin-top: .125rem;
  line-height: 1.4;
}
.cd-form-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.cd-form-toggle-row + .cd-form-toggle-row {
  border-top: 1px solid rgba(234,234,255,.08);
}
.cd-form-toggle-row:first-child {
  padding-top: 0;
}
.cd-form-toggle-row:last-child {
  padding-bottom: 0;
}
.cd-toggle-label {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bs-heading-color, #eaeaff);
  margin-bottom: .25rem;
}
.cd-settings-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .875rem;
  margin-bottom: 1.5rem;
  padding: 0 .25rem;
}

/* Logs toolbar — flex row with aligned inputs */
.cd-logs-toolbar {
  display: flex;
  gap: .875rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Mobile: settings single column */
@media (max-width: 767px) {
  .cd-form-grid {
    grid-template-columns: 1fr !important;
  }
  .cd-settings-header { padding: 1rem 1rem .625rem; }
  .cd-settings-body { padding: 1rem; }
  .cd-form-toggle-row {
    flex-direction: row;
    align-items: flex-start;
  }
  .cd-logs-toolbar { flex-direction: column; }
  .cd-logs-toolbar .cd-form-group { width: 100% !important; }
}

/* Export dropdown */
.cd-export-dropdown:hover .cd-export-menu { display: block !important; }
.cd-export-menu a:hover { background: rgba(234,234,255,.08); color: #eaeaff; }

#bulkMegaText, #bulkProxyText { background: #3b3e58 !important; }
#shortcutsModalOk { background: #666cff !important; }

/* Let Materialize core.css handle .btn .btn-primary .btn-secondary .btn-danger
   Only keep .btn-full for login page */
.btn-full { width: 100%; }

/* Legacy compat: our HTML uses button.btn-primary without .btn class sometimes */
button.btn-primary:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .4375rem 1.25rem; border-radius: .5rem; font-weight: 500; font-size: .9375rem;
  background-color: #666cff; color: #fff; border: none; cursor: pointer;
  box-shadow: 0 .125rem .375rem 0 rgba(102,108,255,.4);
  transition: all .2s ease-in-out;
}
button.btn-primary:not(.btn):hover { background-color: #5c61e6; }
button.btn-primary:not(.btn):focus-visible { outline: 2px solid #666cff; outline-offset: 2px; }
button.btn-secondary:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .4375rem 1.25rem; border-radius: .5rem; font-weight: 500; font-size: .9375rem;
  background-color: #434660; color: #b2b3ca; border: 1px solid rgba(234,234,255,.12); cursor: pointer;
  transition: all .2s ease-in-out;
}
button.btn-secondary:not(.btn):hover { background-color: #3b3e58; }
button.btn-secondary:not(.btn):focus-visible { outline: 2px solid #666cff; outline-offset: 2px; }
button.btn-danger:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .4375rem 1.25rem; border-radius: .5rem; font-weight: 500; font-size: .9375rem;
  background-color: rgba(255,77,73,.16); color: #ff4d49; border: 1px solid rgba(255,77,73,.3); cursor: pointer;
  transition: all .2s ease-in-out;
}
button.btn-danger:not(.btn):hover { background-color: rgba(255,77,73,.24); }
button.btn-danger:not(.btn):focus-visible { outline: 2px solid #ff4d49; outline-offset: 2px; }