/* ═══════════════════════════════════════════════════
   Aroma Cloud — Design System
   Palette: Deep Navy (#0F172A) + Slate surfaces + Action Blue (#2563EB)
   Type: System-UI stack for cross-platform feel
   ═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0F172A;
  --surface:     #1E293B;
  --surface-hover: #273549;
  --surface2:    #334155;
  --border:      #334155;
  --border-subtle: #1E293B;

  --accent:      #2563EB;
  --accent-h:    #1D4ED8;
  --accent-dim:  rgba(37,99,235,.15);

  --text:        #F8FAFC;
  --subtext:     #94A3B8;
  --muted:       #64748B;

  --success:     #10B981;
  --warning:     #F59E0B;
  --danger:      #EF4444;

  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --sidebar-w:   220px;
  --topbar-h:    86px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --sidebar-bg:  #080F1E;
  --titlebar-bg: #080F1E;
  --backdrop:    rgba(0,0,0,.6);
  --row-tint:    rgba(255,255,255,.02);
  --shadow-sm:   0 8px 20px rgba(0,0,0,.4);
  --shadow-md:   0 12px 32px rgba(0,0,0,.5);
  --shadow-lg:   0 32px 64px rgba(0,0,0,.5);
  --glow-accent: rgba(37,99,235,.14);
  --selected-bg: rgba(37,99,235,.10);
  --selected-border: rgba(37,99,235,.55);
}

/* ═══════════ LIGHT THEME ═══════════
   Activated by html[data-theme="light"], set from app.js.
   Default follows the OS via matchMedia; user can override in Account. */
html[data-theme="light"] {
  --bg:            #F1F5F9;
  --surface:       #FFFFFF;
  --surface-hover: #F1F5F9;
  --surface2:      #E2E8F0;
  --border:        #CBD5E1;
  --border-subtle: #E2E8F0;

  --accent:        #2563EB;
  --accent-h:      #1D4ED8;
  --accent-dim:    rgba(37,99,235,.10);

  --text:          #0F172A;
  --subtext:       #475569;
  --muted:         #94A3B8;

  --sidebar-bg:    #FFFFFF;
  --titlebar-bg:   #FFFFFF;
  --backdrop:      rgba(15,23,42,.35);
  --row-tint:      rgba(15,23,42,.025);
  --shadow-sm:     0 4px 12px rgba(15,23,42,.10);
  --shadow-md:     0 8px 24px rgba(15,23,42,.12);
  --shadow-lg:     0 24px 48px rgba(15,23,42,.16);
  --glow-accent:   rgba(37,99,235,.09);
  --selected-bg:   rgba(37,99,235,.07);
  --selected-border: rgba(37,99,235,.45);
}
html { transition: background .2s ease; }
body { transition: background .2s ease, color .2s ease; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Ensure mobile viewport is respected */
  max-width: 100vw;
}

/* ═══════════ UTILITY ═══════════ */
/* Generic hidden utility — must be defined globally so classList.add('hidden')
   works on ANY element, not just those with a scoped rule below. */
.hidden { display: none !important; }

/* ═══════════ SCREENS ═══════════ */
.screen { position: fixed; inset: 0; }
.screen.hidden { display: none; }
.screen.active { display: flex; }

/* Splash: shown on load until the session check decides dashboard vs login,
   so a refresh never flashes the sign-in page before restoring the session. */
#screen-splash { background: var(--bg); }
.splash-inner { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ═══════════ AUTH ═══════════ */
#screen-auth {
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.auth-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-accent) 0%, transparent 70%);
}

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 40px 32px;
  width: 380px;
  box-shadow: var(--shadow-lg);
}

.auth-panel.hidden { display: none; }

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.auth-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  margin-bottom: 6px;
}

.auth-sub {
  text-align: center;
  color: var(--subtext);
  font-size: 13px;
  margin-bottom: 28px;
}

.field-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.field-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 44px;
  padding: 0 4px 0 12px;
  gap: 8px;
  transition: border-color .15s;
}

.field-wrap:focus-within { border-color: var(--accent); }

.field-icon { color: var(--subtext); font-size: 14px; flex-shrink: 0; }

.field-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  min-width: 0;
}

.field-wrap input::placeholder { color: var(--muted); }

.reveal-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--subtext);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .15s;
}
.reveal-btn:hover { color: var(--text); }

.field-error {
  color: var(--danger);
  font-size: 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.field-error.hidden { display: none; }

/* Password strength */
.strength-bar {
  height: 3px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width .3s, background .3s;
}
.strength-label { font-size: 11px; color: var(--subtext); text-align: right; display: block; }

.btn-primary {
  width: 100%;
  height: 44px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn-primary:hover { background: var(--accent-h); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary.sm { width: auto; height: 32px; padding: 0 14px; font-size: 13px; }

.auth-divider {
  position: relative;
  text-align: center;
  margin: 16px 0;
  color: var(--subtext);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

.auth-switch { text-align: center; color: var(--subtext); font-size: 13px; }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.auth-watermark {
  text-align: center;
  color: var(--surface2);
  font-size: 10px;
  margin-top: 20px;
}


/* ═══════════ DASHBOARD LAYOUT ═══════════ */
#screen-dash {
  flex-direction: column;
  overflow: hidden;
}

.dash-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Scrollable nav area — keeps footer pinned at bottom */
#sidebar-scroll {
  flex: 1;
  min-height: 0;            /* allow the flex child to shrink so it scrolls
                              instead of pushing the footer into overlap */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
#sidebar-scroll::-webkit-scrollbar { display: none; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 14px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-section-label {
  padding: 16px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--subtext);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav-icon { font-size: 13px; width: 18px; text-align: center; }

.sidebar-footer {
  margin-top: auto;
  flex-shrink: 0;           /* never let the footer be squeezed/overlapped */
  border-top: 1px solid var(--border-subtle);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bot-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--subtext);
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: background .3s;
}
.status-dot.online { background: var(--success); box-shadow: 0 0 5px var(--success); }
.status-dot.offline { background: var(--danger); }

.user-info {
  display: flex;
  align-items: center;
  gap: 9px;
}
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-role { font-size: 11px; color: var(--muted); }

.btn-logout {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--subtext);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.06); }

/* ═══════════ MAIN CONTENT ═══════════ */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ── Topbar ── */
#topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px 12px 20px;
  gap: 12px;
  flex-shrink: 0;
  -webkit-app-region: drag;
}

#topbar button,
#topbar input,
#topbar .search-wrap,
#topbar .breadcrumb,
#topbar .bc-item {
  -webkit-app-region: no-drag;
}

.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--subtext);
  min-width: 0;
}
.bc-item {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.bc-item:hover { background: var(--surface); color: var(--text); }
.bc-item:last-child { color: var(--text); font-weight: 600; }
.bc-sep { color: var(--muted); }

.search-wrap {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  gap: 6px;
  height: 34px;
  transition: border-color .15s;
}
.search-wrap:focus-within { border-color: var(--accent); }
.search-icon { color: var(--muted); font-size: 14px; }
.search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  width: 160px;
}
.search-wrap input::placeholder { color: var(--muted); }

.btn-icon {
  width: 34px; height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--subtext);
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
  font-family: var(--font);
}
.btn-icon:hover { background: var(--surface2); color: var(--text); border-color: var(--surface2); }
.btn-icon.active { color: var(--accent); border-color: var(--accent); }

.btn-upload {
  height: 34px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-upload:hover { background: var(--accent-h); }

/* ═══════════ VIEW PANELS ═══════════ */
.view-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}
.view-panel.hidden { display: none; }
.view-panel.active { display: flex; flex-direction: column; }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* ── File Grid ── */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  align-content: start;
}

.file-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.file-card:hover { background: var(--surface-hover); border-color: var(--border); transform: translateY(-1px); }
.file-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.file-card.selected { border-color: var(--accent); background: var(--accent-dim); }

.file-card-icon {
  font-size: 28px;
  color: var(--subtext);
  line-height: 1;
}
.file-card-icon.folder { color: var(--warning); }
.file-card-icon.video  { color: #818cf8; }
.file-card-icon.audio  { color: var(--success); }
.file-card-icon.image  { color: #f472b6; }
.file-card-icon.doc    { color: #38bdf8; }

.file-card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  word-break: break-word;
  line-height: 1.3;
  width: 100%;
}

.file-card-meta {
  font-size: 10px;
  color: var(--muted);
  width: 100%;        /* needed so child .file-card-loc can clip to the card edge */
  text-align: center;
  min-width: 0;
}

/* ── File List ── */
.file-list { display: flex; flex-direction: column; gap: 2px; }

.file-row {
  display: grid;
  grid-template-columns: 28px 1fr 90px 90px 32px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.file-row:hover { background: var(--surface); }
.file-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
.file-row-icon { font-size: 15px; color: var(--subtext); text-align: center; }
.file-row-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row-size { font-size: 12px; color: var(--muted); }
.file-row-date { font-size: 12px; color: var(--muted); }
.file-row-more {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--subtext);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .1s, background .1s;
}
.file-row:hover .file-row-more { opacity: 1; }
.file-row-more:hover { background: var(--surface2); color: var(--text); }

/* ── Empty State ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 80px 20px;
  color: var(--muted);
  text-align: center;
}
.empty-state.hidden { display: none; }
.empty-icon { font-size: 48px; opacity: .3; }
.empty-state p { font-size: 15px; font-weight: 600; color: var(--subtext); }
.empty-state span { font-size: 13px; }

/* ── Loading State ── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--surface2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Drop overlay ── */
#drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  margin: 8px;
}
#drop-overlay.hidden { display: none; }
.drop-inner {
  text-align: center;
  color: var(--accent);
  font-size: 32px;
}
.drop-inner p { font-size: 16px; font-weight: 600; margin-top: 8px; }

/* ═══════════ ADMIN ═══════════ */
.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-row {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px 16px;
  gap: 12px;
}
.admin-row-info { flex: 1; min-width: 0; }
.admin-row-label { font-size: 13px; font-weight: 600; color: var(--text); }
.admin-row-sub { font-size: 12px; color: var(--subtext); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
}
.admin-row-badge.admin { background: rgba(245,158,11,.12); color: var(--warning); }
.btn-danger {
  padding: 5px 12px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  color: var(--danger);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font);
}
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-secondary {
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--subtext);
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font);
}
.btn-secondary:hover { color: var(--text); border-color: var(--text); }

/* ═══════════ MODAL ═══════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-backdrop.hidden { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 420px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
  animation: modal-in .15s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-close {
  width: 26px; height: 26px;
  background: var(--surface2);
  border: none;
  border-radius: 6px;
  color: var(--subtext);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.modal-close:hover { background: var(--danger); color: #fff; }

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-body label { font-size: 12px; font-weight: 600; color: var(--subtext); display: block; margin-bottom: 4px; }

.modal-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.modal-input:focus { border-color: var(--accent); }

.modal-footer {
  padding: 14px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-footer button { min-width: 80px; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
}
.modal-box {
  width: min(92vw, 440px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  animation: modal-in .15s ease;
}
.modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 14px;
}

/* ═══════════ CONTEXT MENU ═══════════ */
.ctx-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  min-width: 170px;
  box-shadow: var(--shadow-md);
  z-index: 200;
}
.ctx-menu.hidden { display: none; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .1s;
}
.ctx-item:hover { background: var(--surface2); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: rgba(239,68,68,.1); }
.ctx-sep { height: 1px; background: var(--border-subtle); margin: 4px 0; }

/* ═══════════ PROGRESS TOAST ═══════════ */
.progress-toast {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  z-index: 150;
}
.progress-toast.hidden { display: none; }

.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.toast-header span { font-size: 13px; font-weight: 600; color: var(--text); }
#toast-dismiss {
  background: transparent;
  border: none;
  color: var(--subtext);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.toast-bar-wrap {
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.toast-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0;
  transition: width .3s;
}
.toast-pct { font-size: 11px; color: var(--muted); }

/* ═══════════ SNACK ═══════════ */
.snack {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 40px;
  box-shadow: var(--shadow-sm);
  z-index: 300;
  animation: snack-in .2s ease;
}
.snack.hidden { display: none; }
.snack.error { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: var(--danger); }
.snack.success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: var(--success); }
@keyframes snack-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ═══════════ INLINE RENAME ═══════════ */
.rename-input {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  padding: 3px 6px;
  outline: none;
  width: 100%;
  text-align: center;
}

/* ═══════════ SORT BAR ═══════════ */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.sort-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 4px;
}

.sort-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--subtext);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font);
  position: relative;
}
.sort-btn:hover { background: var(--surface-hover); color: var(--text); }
.sort-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.sort-btn[data-dir="asc"]::after  { content: ' ↑'; font-size: 10px; }
.sort-btn[data-dir="desc"]::after { content: ' ↓'; font-size: 10px; }

/* ═══════════ FILE LIST — HEADER & OUTLINE ═══════════ */
.file-list-header {
  display: grid;
  grid-template-columns: 28px 1fr 90px 90px 32px;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.file-row {
  border-bottom: 1px solid var(--border-subtle);
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: var(--surface-hover); }

/* ═══════════ MOVE — FOLDER PICKER ═══════════ */
.folder-pick-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.folder-pick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all .12s;
  font-family: var(--font);
}
.folder-pick-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.folder-pick-root {
  color: var(--subtext);
}
.folder-pick-root:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════
   Multi-transfer queue panel
══════════════════════════════════════════════════════ */
.transfer-queue {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 200;
  overflow: hidden;
}
.transfer-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--subtext);
}
.transfer-queue-header button {
  background: none;
  border: none;
  color: var(--subtext);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}
.transfer-item {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.transfer-item:last-child { border-bottom: none; }
.transfer-item-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.transfer-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.transfer-item-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}
.transfer-item-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .3s;
}
.transfer-item-bar.done  { background: var(--success); }
.transfer-item-bar.error { background: var(--danger); }
.transfer-item-pct {
  font-size: 11px;
  color: var(--subtext);
  min-width: 32px;
  text-align: right;
}
.transfer-item-speed {
  font-size: 11px;
  color: var(--subtext);
  min-width: 62px;
  text-align: right;
}
.transfer-item-status {
  font-size: 11px;
  color: var(--subtext);
  min-width: 46px;
  text-align: right;
}
.transfer-item-status.done  { color: var(--success); }
.transfer-item-status.error { color: var(--danger); }

/* ══════════════════════════════════════════════════════
   Storage bar in sidebar footer
══════════════════════════════════════════════════════ */
.storage-bar-wrap {
  padding: 0 0 10px;
}
.storage-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--subtext);
  margin-bottom: 5px;
}
.storage-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.storage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .4s;
}

/* ══════════════════════════════════════════════════════
   Change-password button in sidebar user info
══════════════════════════════════════════════════════ */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.btn-change-pw {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--subtext);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  border-radius: var(--radius);
  transition: color .12s, background .12s;
  flex-shrink: 0;
}
.btn-change-pw:hover {
  color: var(--text);
  background: var(--surface2);
}

/* ══════════════════════════════════════════════════════
   Admin stats summary row
══════════════════════════════════════════════════════ */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 0 18px;
}
.admin-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
}
.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.admin-stat-label {
  font-size: 11px;
  color: var(--subtext);
  margin-top: 3px;
}


/* ══════════════════════════════════════════════════════
   Windows custom title bar
══════════════════════════════════════════════════════ */
#win-titlebar {
  display: none;
  height: 32px;
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 12px;
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
  width: 100%;
}
body.platform-win32 #win-titlebar,
body.platform-linux #win-titlebar {
  display: flex;
}
.win-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--subtext);
  letter-spacing: 0.3px;
}
.win-controls {
  display: flex;
  align-items: stretch;
  height: 32px;
  -webkit-app-region: no-drag;
}
.win-btn {
  width: 46px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--subtext);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.win-btn:hover { background: var(--surface2); color: var(--text); }
.win-btn.close:hover { background: #C42B1C; color: #fff; }

/* On macOS, macOS inset handles the topbar traffic lights, so we need
   sidebar-brand to have enough padding-top for the traffic lights */
body.platform-darwin .sidebar-brand { padding-top: 50px; }

/* ══════════════════════════════════════════════════════
   Account Settings view
══════════════════════════════════════════════════════ */
.account-settings-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  padding: 4px 0;
}
.account-section {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.account-section.danger-zone {
  border-color: rgba(239,68,68,.3);
}
.account-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--subtext);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--row-tint);
}
.account-section-title.danger {
  color: var(--danger);
  border-bottom-color: rgba(239,68,68,.15);
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  gap: 12px;
}
.account-row + .account-row { border-top: 1px solid var(--border-subtle); }
.account-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--subtext);
  min-width: 80px;
}
.account-row-value {
  flex: 1;              /* fill space between label and button(s) */
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-row-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
/* Standalone description paragraph between section-title and the first account-row */
.account-section > .account-row-sub {
  padding: 10px 16px 14px;
  margin-top: 0;
}
.danger-row { align-items: flex-start; }
.danger-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
.account-form .field-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 340px;
}
.account-form .modal-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
}


/* ═══════════ THEME PICKER ═══════════ */
.theme-picker { display: flex; gap: 8px; padding: 14px 16px; }
.theme-opt {
  flex: 1; padding: 10px 0; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--subtext); font-family: var(--font); font-size: 13px;
  cursor: pointer; transition: all .15s ease;
}
.theme-opt:hover { background: var(--surface-hover); color: var(--text); }
.theme-opt.active {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
  color: var(--text);
}
/* Explicit overrides so light theme never bleeds in a stale --accent value */
html[data-theme="light"] .theme-opt.active {
  border-color: #2563EB !important;
  background: rgba(37,99,235,.10) !important;
  color: #0F172A;
}
html[data-theme="dark"] .theme-opt.active {
  border-color: #2563EB !important;
  background: rgba(37,99,235,.15) !important;
  color: #F8FAFC;
}


/* ═══════════ SVG ICON SYSTEM ═══════════ */
.nav-icon svg, .search-icon svg, .field-icon svg, .ctx-icon svg, .fp-icon svg,
.btn-upload svg, .btn-logout svg, .file-row-more svg, #btn-view-toggle svg,
[data-svgi] svg, [data-svgi-btn] svg {
  width: 1.05em; height: 1.05em; vertical-align: -0.18em; display: inline-block;
}
.nav-icon svg { width: 15px; height: 15px; }
.file-row-icon svg { width: 18px; height: 18px; vertical-align: -0.25em; }
.file-card-icon svg { width: 34px; height: 34px; }
.empty-icon svg { width: 42px; height: 42px; opacity: .55; }
.ctx-icon svg { width: 14px; height: 14px; }
.fp-icon svg { width: 15px; height: 15px; color: var(--warning); }

/* File-type colors */
.file-card-icon.folder, .file-row-icon.folder { color: var(--warning); }
.file-card-icon.video,  .file-row-icon.video  { color: #A78BFA; }
.file-card-icon.audio,  .file-row-icon.audio  { color: #34D399; }
.file-card-icon.image,  .file-row-icon.image  { color: #60A5FA; }
.file-card-icon.doc,    .file-row-icon.doc    { color: #F87171; }
.file-card-icon.archive,.file-row-icon.archive{ color: #FBBF24; }
.file-card-icon.code,   .file-row-icon.code   { color: #2DD4BF; }
.file-card-icon.generic,.file-row-icon.generic{ color: var(--subtext); }

/* Extension badge on grid cards */
.file-card-icon { position: relative; }
.ext-badge {
  position: absolute; bottom: -4px; right: calc(50% - 30px);
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 5px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); line-height: 1.5;
}


/* ═══════════ MULTI-SELECT ═══════════ */
.file-card.selected, .file-row.selected {
  background: var(--selected-bg);
  border-color: var(--selected-border) !important;
  outline: 1px solid var(--selected-border);
}
.file-card.drop-target, .file-row.drop-target {
  border-color: var(--accent) !important;
  background: var(--accent-dim);
  transform: scale(1.02);
}

.bulk-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 10px 8px 18px;
  box-shadow: var(--shadow-md); z-index: 90;
}
.bulk-count { font-size: 13px; font-weight: 600; color: var(--text); margin-right: 6px; }
.bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface2); color: var(--text);
  border: none; border-radius: 999px; padding: 7px 14px;
  font-family: var(--font); font-size: 12.5px; cursor: pointer;
  transition: background .15s ease;
}
.bulk-btn:hover { background: var(--surface-hover); }
.bulk-btn.danger { color: var(--danger); }
.bulk-btn svg { width: 13px; height: 13px; }

/* Snack action button (Undo) */
.snack-action {
  margin-left: 14px; background: none; border: none;
  color: var(--accent); font-weight: 700; font-family: var(--font);
  font-size: 13px; cursor: pointer; text-transform: uppercase; letter-spacing: .03em;
}
.snack-action:hover { text-decoration: underline; }

/* Storage meter states */
.storage-bar-fill.warn { background: var(--warning); }
.storage-bar-fill.crit { background: var(--danger); }

/* Plan badge in admin rows */
.admin-row-badge.plan {
  background: var(--accent-dim); color: var(--accent);
  text-transform: capitalize;
}


/* ═══════════ TOAST STACK ═══════════ */
.toast-stack {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
  transition: bottom .18s ease;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--subtext);
  border-radius: var(--radius); padding: 12px 12px 12px 14px;
  font-size: 13px; box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in .18s ease;
}
.toast.leaving { opacity: 0; transform: translateX(12px); transition: all .18s ease; }
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast-msg { flex: 1; line-height: 1.45; word-break: break-word; }
.toast-action {
  background: none; border: none; color: var(--accent);
  font-weight: 700; font-family: var(--font); font-size: 12.5px;
  cursor: pointer; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.toast-action:hover { text-decoration: underline; }
.toast-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 2px; line-height: 0;
}
.toast-close:hover { color: var(--text); }
.toast-close svg { width: 12px; height: 12px; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ═══════════ LIGHT THEME — COMPONENT REFINEMENTS ═══════════ */
/* Deeper, higher-contrast type colors on light surfaces */
html[data-theme="light"] .file-card-icon.video,  html[data-theme="light"] .file-row-icon.video  { color: #7C3AED; }
html[data-theme="light"] .file-card-icon.audio,  html[data-theme="light"] .file-row-icon.audio  { color: #059669; }
html[data-theme="light"] .file-card-icon.image,  html[data-theme="light"] .file-row-icon.image  { color: #2563EB; }
html[data-theme="light"] .file-card-icon.doc,    html[data-theme="light"] .file-row-icon.doc    { color: #2563EB; }
html[data-theme="light"] .file-card-icon.archive,html[data-theme="light"] .file-row-icon.archive{ color: #B45309; }
html[data-theme="light"] .file-card-icon.code,   html[data-theme="light"] .file-row-icon.code   { color: #0D9488; }
html[data-theme="light"] .file-card-icon.folder, html[data-theme="light"] .file-row-icon.folder { color: #D97706; }

/* Sidebar: crisp white panel with a visible divider and tinted active item */
html[data-theme="light"] #sidebar { border-right: 1px solid var(--border); }
html[data-theme="light"] .nav-item.active { background: var(--accent-dim); color: var(--accent); }
html[data-theme="light"] .nav-item:hover:not(.active) { background: var(--surface2); }

/* Cards and rows need real borders in light mode (shadows alone are too soft) */
html[data-theme="light"] .file-card { border: 1px solid var(--border-subtle); background: var(--surface); }
html[data-theme="light"] .file-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
html[data-theme="light"] .file-row:hover { background: var(--surface2); }

/* Inputs: white field on grey page */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] .modal-input,
html[data-theme="light"] .search-wrap input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] ::placeholder { color: var(--muted); }

/* Auth screen: subtle grey backdrop, white card */
html[data-theme="light"] .auth-card { background: var(--surface); }

/* Scrollbars */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Win titlebar buttons */
html[data-theme="light"] .win-btn:hover { background: var(--surface2); }

/* ═══════════ FOLDER PICKER / BREADCRUMB POLISH ═══════════ */
.folder-pick-btn.disabled { opacity: .45; cursor: not-allowed; }
.folder-pick-list { max-height: 320px; overflow-y: auto; }
.bc-item.current { color: var(--text); font-weight: 600; cursor: default; }
.bc-item:not(.current):hover { color: var(--accent); cursor: pointer; }


/* ═══════════ BREADCRUMB (NESTED) ═══════════ */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.breadcrumb .bc-item {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1;
}
.breadcrumb .bc-sep { color: var(--muted); flex-shrink: 0; }


/* ═══════════ FOLDER TREE PICKER ═══════════ */
.fp-chevron {
  display: inline-block; width: 14px; color: var(--muted);
  font-size: 10px; transition: transform .12s ease; text-align: center;
  cursor: pointer; flex-shrink: 0;
}
.fp-chevron.open { transform: rotate(90deg); }
.fp-chevron.empty { cursor: default; }
.fp-children.hidden { display: none; }

/* Search result location hints */
.file-card-loc {
  font-size: 11px; color: var(--accent); margin-top: 2px; cursor: pointer;
  display: block;
  width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.file-card-loc:hover { text-decoration: underline; }
.file-row-loc {
  font-size: 11px; color: var(--subtext);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex-shrink: 1;
}

.transfer-item-detail { color: var(--subtext); font-size: 11px; font-weight: 400; }


/* ═══════════════════════════════════════════════════════
   FILE PREVIEW OVERLAY
   ═══════════════════════════════════════════════════════ */
.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, .93);
  display: flex;
  flex-direction: column;
  animation: fadeIn .12s ease;
  /* CRITICAL: override the underlying #topbar -webkit-app-region:drag zone.
     Electron hit-tests drag regions independently of z-index, so without this
     the drag strip still intercepts clicks even though the overlay is on top. */
  -webkit-app-region: no-drag;
}
.preview-overlay.hidden { display: none; }

.preview-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 36px clears the macOS traffic lights; no-drag on the overlay handles clicks */
  padding: 36px 52px 12px 16px;
  background: rgba(0, 0, 0, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  flex-shrink: 0;
}
.preview-topbar .btn-icon {
  color: #94A3B8;
  border-color: transparent;
  background: transparent;
  flex-shrink: 0;
}
.preview-topbar .btn-icon:hover {
  background: rgba(255, 255, 255, .09);
  color: #F8FAFC;
  border-color: transparent;
}
.preview-filename {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #E2E8F0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Floating close button — sits at the right edge of the topbar row */
.preview-close-btn {
  position: absolute;
  top: 36px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .10);
  color: #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
  z-index: 9100;
  flex-shrink: 0;
}
.preview-close-btn:hover {
  background: rgba(255, 255, 255, .20);
  color: #F8FAFC;
  transform: scale(1.08);
}

.preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 0;  /* allows flex child to shrink below content size */
}

/* Image */
.preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, .7);
  user-select: none;
}
/* Blurred low-res thumbnail shown instantly while full image downloads */
.preview-img-placeholder {
  filter: blur(8px) brightness(.85);
  transform: scale(1.04);
  transition: filter .3s, transform .3s;
}

/* Video */
.preview-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  outline: none;
}

/* Audio */
.preview-audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.preview-audio-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
}
.preview-audio-icon svg { width: 40px; height: 40px; }
.preview-audio {
  width: 400px;
  max-width: 90vw;
}

/* PDF */
.preview-pdf {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
  background: #fff;
}

/* Clean "open in native viewer" card (used on iOS for video/PDF) */
.preview-open {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 36px 22px; min-height: 220px;
}
.preview-open-icon { color: var(--accent); }
.preview-open-icon svg { width: 60px; height: 60px; }
.preview-open-name { font-size: 15px; font-weight: 600; color: var(--text); word-break: break-word; max-width: 92%; }
.preview-open-sub { font-size: 13px; color: var(--subtext); }
.preview-open-btn { margin-top: 4px; text-decoration: none; min-width: 160px; }

/* Loading */
.preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #64748B;
  font-size: 13px;
}
.preview-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, .08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Error */
.preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #94A3B8;
  font-size: 13px;
  text-align: center;
  max-width: 340px;
}


/* ═══════════ CARD THUMBNAILS ═══════════ */
/* When an image thumbnail is loaded, the icon div swaps to a square image */
.file-card-icon.has-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;   /* preserve ext-badge positioning */
}
.card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  user-select: none;
  /* Subtle fade-in so the swap doesn't flash */
  animation: fadeIn .2s ease;
}

/* Thumbnail in list-view rows */
.file-row-icon.has-thumb {
  width: 32px; height: 32px;
  border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
}
.file-row-icon.has-thumb .card-thumb {
  border-radius: 4px;
}

/* ── Star button on file cards ─────────────────────────────────────────── */
.card-star-btn {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  background: none; border: none; padding: 0;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  z-index: 2;
}
.file-card:hover .card-star-btn,
.card-star-btn.starred { opacity: 1; }
.card-star-btn.starred { color: #F59E0B; }
.card-star-btn:hover   { background: var(--surface2); color: #F59E0B; }

/* ── Activity log ─────────────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.activity-row:hover { background: var(--surface2); }
.activity-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.activity-body { flex: 1; font-size: 13px; color: var(--text); min-width: 0; }
.activity-detail { color: var(--muted); font-size: 12px; }
.activity-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* ── File info modal ───────────────────────────────────────────────────── */
.file-info-rows { display: flex; flex-direction: column; gap: 0; margin: 16px 0; }
.file-info-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.file-info-row:last-child { border-bottom: none; }
.file-info-label {
  width: 80px; flex-shrink: 0;
  font-size: 12px; color: var(--muted); font-weight: 500;
  padding-top: 1px;
}
.file-info-value {
  flex: 1; font-size: 13px; color: var(--text);
  word-break: break-all;
}

/* ── Duplicate warning modal body text ─────────────────────────────────── */
.modal-body-text { font-size: 14px; color: var(--text); margin: 12px 0 20px; line-height: 1.5; }

/* ── Transfer queue controls ───────────────────────────────────────────── */
.transfer-action-btn {
  flex-shrink: 0; background: none; border: none;
  color: var(--muted); cursor: pointer; font-size: 15px;
  min-width: 30px; height: 28px; padding: 3px 8px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s;
}
.transfer-action-btn:hover { color: var(--accent); background: var(--surface2); }
.transfer-action-btn.danger:hover { color: var(--danger); }
.transfer-action-btn:disabled { opacity: .5; cursor: default; }

/* ── Server Settings view ──────────────────────────────────────────────── */
.settings-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 0; max-width: 600px; margin-top: 8px;
}
.settings-group { display: flex; flex-direction: column; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-text { display: flex; flex-direction: column; gap: 3px; }
.settings-row-label { font-size: 14px; font-weight: 500; color: var(--text); }
.settings-row-desc  { font-size: 12px; color: var(--subtext); line-height: 1.4; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 24px; cursor: pointer;
  transition: background .2s;
}
.toggle-track::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); }

/* ════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.btn-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  padding: 6px;
}
.btn-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: opacity .2s;
}

/* Sidebar close button — hidden on desktop */
.sidebar-close-btn {
  display: none;
  background: none; border: none; color: var(--subtext);
  font-size: 16px; cursor: pointer; padding: 4px 8px 4px 0;
  line-height: 1; flex-shrink: 0;
}

/* Sidebar overlay (mobile backdrop) */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  /* Very light tap-to-close scrim — just enough to register, not a "dark" screen */
  background: rgba(0,0,0,.12);
}
#sidebar-overlay.visible { display: block; }

@media (max-width: 768px) {
  /* ── Hamburger visible ── */
  .btn-hamburger     { display: flex; }
  .sidebar-close-btn { display: block; }

  /* ── Sidebar slides in from left ── */
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 260px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }
  #sidebar.open { transform: translateX(0); }

  /* ── Main content fills full width ── */
  #main-content { width: 100%; }

  /* ── Topbar ── */
  #topbar {
    padding: 0 12px;
    height: auto; min-height: 54px;
    flex-wrap: wrap; gap: 6px; padding-top: 8px; padding-bottom: 8px;
  }
  /* Stack the two topbar groups: hamburger+title on row 1, the search and
     action buttons on row 2. The buttons WRAP beside the search instead of
     running off the right edge (the old rule forced search to 100% width,
     which shoved Upload and the view toggle off-screen). */
  .topbar-left  { flex: 1 1 100%; min-width: 0; gap: 8px; }
  .topbar-right { width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .search-wrap  { flex: 1 1 180px; min-width: 0; width: auto; height: 40px; }
  #search-input, .search-wrap input { width: 100%; }
  .btn-icon     { width: 40px; height: 40px; flex: 0 0 auto; }

  /* Compact icon-only Upload on phones. Its label is a bare text node that the
     old `+ *` selector could never hide, so zero the button font and restore
     the icon glyph — keeps the row short and the search box usable. */
  .btn-upload {
    height: 40px; width: 40px; padding: 0; font-size: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .btn-upload span[data-svgi] { font-size: 16px; }

  /* ── Grid: 2 columns on phone ── */
  .files-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── File cards ── */
  .file-card { padding: 10px 8px; }
  .file-card-name { font-size: 12px; }

  /* ── File info panel — full-screen bottom sheet on mobile ── */
  #file-info-panel {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: 55vh !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 150;
    box-shadow: 0 -4px 24px rgba(0,0,0,.3);
  }

  /* ── Preview modal full screen ── */
  .preview-modal { border-radius: 0 !important; }

  /* ── Auth card ── */
  .auth-card { width: 92vw; padding: 28px 20px; }

  /* ── Modals ── */
  .modal { width: 92vw !important; margin: 0 auto; }

  /* ── Bulk bar: clean full-width bottom bar instead of a wrapping pill ── */
  .bulk-bar {
    left: 10px; right: 10px; transform: none; width: auto;
    flex-wrap: nowrap; gap: 6px;
    border-radius: 14px;
    padding: 10px 12px;
  }
  .bulk-count { margin-right: auto; }          /* count left, actions right */
  .bulk-btn {
    font-size: 0; padding: 0;                   /* hide label text, keep icon */
    width: 42px; height: 42px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .bulk-btn svg { width: 18px; height: 18px; }

  /* ── Transfer queue ── */
  #transfer-queue { width: calc(100vw - 24px) !important; right: 12px !important; }

  /* ── View header ── */
  .view-header { font-size: 15px; padding: 12px 14px; }

  /* ── Admin list ── */
  .admin-list-row { flex-wrap: wrap; gap: 6px; }

  /* ── Breadcrumb — truncate on small screens ── */
  .breadcrumb { max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

@media (max-width: 400px) {
  /* Extra small phones */
  .files-grid { grid-template-columns: repeat(1, 1fr) !important; }
  .auth-card { padding: 24px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE HARDENING (v6)
   Layout already collapses correctly above; these rules fix the things that
   make a phone *feel* broken: iOS zoom-on-focus, the notch/home-indicator,
   small tap targets, and scroll/overflow quirks.
   ════════════════════════════════════════════════════════════════════════ */

/* Stop the OS from re-flowing our font sizes, and kill the grey tap flash. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* Remove the 300ms tap delay / double-tap-zoom on interactive controls so
   taps register immediately on phones. */
button, a.nav-item, .sort-btn, .btn-icon, .btn-upload, .toggle-switch { touch-action: manipulation; }

@media (max-width: 768px) {
  /* iOS Safari zooms the whole page when you focus a field smaller than 16px
     and never zooms back out. Forcing 16px on every control prevents it — this
     is the single biggest "the site is broken on my phone" fix, and it matters
     most on the login screen which is the first thing people tap. */
  input, select, textarea,
  .modal-input, .search-wrap input, .field-wrap input, .rename-input,
  input[type="text"], input[type="password"], input[type="email"] {
    font-size: 16px !important;
  }

  /* Respect the notch and home indicator (we set viewport-fit=cover). */
  #topbar          { padding-top: calc(8px + env(safe-area-inset-top)); }
  #sidebar         { padding-top: env(safe-area-inset-top); }
  #file-info-panel { padding-bottom: env(safe-area-inset-bottom) !important; }
  .bulk-bar        { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #transfer-queue  { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  .auth-card       { margin-top: env(safe-area-inset-top);
                     margin-bottom: env(safe-area-inset-bottom); }

  /* Comfortable touch targets (Apple HIG ~44px). */
  .nav-item                                  { min-height: 44px; }
  .btn-icon, .btn-hamburger,
  .sidebar-close-btn, .btn-upload            { min-width: 40px; min-height: 40px; }
  .file-card                                 { min-height: 96px; }

  /* Momentum scrolling + no accidental sideways scroll. */
  #main-content, #sidebar-scroll,
  .modal-body, .files-grid                   { -webkit-overflow-scrolling: touch; }
  #screen-dash, .dash-body, #main-content    { max-width: 100vw; overflow-x: hidden; }
}