/* ==========================================================================
   Nimbus — design system
   Style reference: iOS 18 (grouped lists, frosted surfaces, SF Pro type)
   ========================================================================== */

:root {
  color-scheme: light;

  /* Palette — matched to macOS System Colors (flat, not gradient) */
  --bg: #f2f2f7;
  --bg-elevated: #ffffff;
  --bg-frosted: rgba(255, 255, 255, 0.72);
  --sidebar-bg: rgba(246, 246, 246, 0.82);

  --text-primary: #1c1c1e;
  --text-secondary: #6e6e73;
  --text-tertiary: #aeaeb2;

  --accent: #007aff;
  --accent-strong: #0060df;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --gradient-brand: var(--accent);

  --folder-fill: #6cc0ff;
  --folder-fill-dark: #2f86e0;
  --folder-fill-light: #eaf6ff;

  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.12);
  --success: #34c759;
  --warning: #ff9500;

  --divider: rgba(60, 60, 67, 0.13);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 12px 32px rgba(0, 122, 255, 0.24);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 9px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --bg-elevated: #1e1e1e;
    --bg-frosted: rgba(30, 30, 30, 0.72);
    --sidebar-bg: rgba(28, 28, 28, 0.82);

    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #636366;

    --accent: #0a84ff;
    --accent-soft: rgba(10, 132, 255, 0.18);
    --folder-fill: #4fa8f0;
    --folder-fill-dark: #1f6fc4;
    --folder-fill-light: #cfe8ff;
    --danger-soft: rgba(255, 69, 58, 0.18);

    --divider: rgba(84, 84, 88, 0.4);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
}

a { color: inherit; }
button, input { font-family: inherit; }

/* ---------- Brand mark ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.35);
}
.brand-icon svg { width: 19px; height: 19px; }
.brand-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 980px;
  padding: 10px 20px;
  transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:disabled { background: var(--text-tertiary); cursor: not-allowed; }

.btn-block { width: 100%; padding: 14px 20px; font-size: 17px; }

.btn-secondary {
  background: var(--accent-soft);
  color: var(--accent);
}
.btn-secondary:hover { background: rgba(10, 132, 255, 0.2); }

.btn-plain {
  background: transparent;
  color: var(--accent);
  padding: 8px 6px;
}
.btn-plain:hover { opacity: 0.7; }

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- Grouped list (iOS Settings-style) ---------- */
.group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 4px 8px;
}
.group {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--divider);
  font-size: 15px;
}
.group-row:last-child { border-bottom: none; }
.group-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ---------- Card / surface ---------- */
.surface {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ---------- Form fields ---------- */
.field-group {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.field {
  position: relative;
  border-bottom: 0.5px solid var(--divider);
}
.field:last-child { border-bottom: none; }
.field input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 14px 16px;
  font-size: 17px;
  color: var(--text-primary);
  font-family: inherit;
}
.field input::placeholder { color: var(--text-tertiary); }

.status-line {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 4px 0;
  min-height: 18px;
}
.status-ok { color: var(--success); }
.status-bad { color: var(--danger); }

.error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.error-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Search field ---------- */
.search-field {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.search-field svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}
.search-field input {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 980px;
  background: rgba(118, 118, 128, 0.12);
  padding: 0 14px 0 38px;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: background-color 0.15s ease;
}
.search-field input:focus { background: rgba(118, 118, 128, 0.2); }

/* ---------- Quota bar ---------- */
.quota-widget { padding: 4px 4px 2px; }
.quota-text { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.quota-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(118, 118, 128, 0.16);
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gradient-brand);
}

/* ---------- File list ---------- */
.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.file-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-icon svg { width: 17px; height: 17px; }
.file-name { font-size: 15px; font-weight: 500; }
.file-size { font-size: 13px; color: var(--text-secondary); }
.file-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.share-box {
  margin: 0 16px 14px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.share-url {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--accent-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Empty state ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 72px 24px;
  color: var(--text-secondary);
  text-align: center;
}
.empty-state svg { width: 44px; height: 44px; color: var(--text-tertiary); }
.empty-state-title { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.empty-state-sub { font-size: 14px; max-width: 280px; }

/* ---------- Large title ---------- */
.large-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(118, 118, 128, 0.28); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 860px) {
  .large-title { font-size: 26px; }
}

/* ==========================================================================
   Finder chrome — traffic lights, toolbar, sidebar favorites, path/status bar
   ========================================================================== */

/* Desktop wallpaper behind the window, so translucent chrome has something
   to blur/vibrate against, like macOS. */
.desktop {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(255, 214, 170, 0.28), transparent 55%),
    linear-gradient(150deg, #7fa8d9 0%, #a4b9dd 35%, #cdd3e6 65%, #e7dbd0 100%);
}

.finder-window {
  width: 100%;
  height: 100%;
  max-width: 1180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.06) inset;
  display: flex;
  flex-direction: column;
}

/* ---------- Traffic lights (interactive) ---------- */
.traffic-lights { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.traffic-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.traffic-dot.close { background: #ff5f57; }
.traffic-dot.minimize { background: #febc2e; }
.traffic-dot.zoom { background: #28c840; }
.traffic-dot svg {
  width: 7px;
  height: 7px;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.traffic-lights:hover .traffic-dot svg { opacity: 1; }
.traffic-dot.close svg { color: #4c0002; }
.traffic-dot.minimize svg { color: #985712; }
.traffic-dot.zoom svg { color: #0f5e17; }
.traffic-dot:active { filter: brightness(0.85); }

/* Window state transitions driven by JS toggling classes on .finder-window / .auth-window / .admin-window */
.finder-window, .auth-window, .admin-window {
  transition: transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.28s ease, width 0.32s cubic-bezier(.4,0,.2,1), height 0.32s cubic-bezier(.4,0,.2,1), max-width 0.32s cubic-bezier(.4,0,.2,1);
  transform-origin: bottom left;
}
.window-minimized { transform: scale(0.05) translateY(600px); opacity: 0; pointer-events: none; }
.window-closing { transform: scale(0.9); opacity: 0; }
.window-zoomed { max-width: 100% !important; width: 100% !important; height: 100% !important; }

.dock-restore {
  display: none;
  position: fixed;
  left: 24px;
  bottom: 24px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--bg-frosted);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-radius: 980px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  z-index: 100;
}
.dock-restore.show { display: flex; animation: dockIn 0.3s ease; }
@keyframes dockIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.dock-restore .dock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Unified toolbar (blurred / vibrant) */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 14px;
  flex-shrink: 0;
  background: var(--bg-frosted);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: 0.5px solid var(--divider);
}
.toolbar-nav { display: flex; align-items: center; gap: 2px; }
.toolbar-nav .icon-btn { width: 28px; height: 28px; }
.toolbar-nav .icon-btn svg { width: 15px; height: 15px; }
.toolbar-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.toolbar-spacer { flex: 1; }

.segmented {
  display: flex;
  background: rgba(118, 118, 128, 0.16);
  border-radius: 7px;
  padding: 2px;
  flex-shrink: 0;
}
.segmented button {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
}
.segmented button svg { width: 14px; height: 14px; }
.segmented button.active { background: var(--bg-elevated); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* Sidebar vibrancy + favorites */
.finder-sidebar {
  width: 210px;
  flex-shrink: 0;
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(34px) saturate(1.9);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  border-right: 0.5px solid var(--divider);
}
.sidebar-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 10px 4px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  cursor: default;
}
.sidebar-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-item.active { background: var(--accent); color: #fff; }
.sidebar-item.active svg { color: #fff; }
.sidebar-item:not(.active).link:hover { background: rgba(118, 118, 128, 0.14); }
.sidebar-item .tint-blue { color: var(--accent); }
.sidebar-item .tint-purple { color: #af52de; }

/* Path bar (bottom breadcrumb, Finder-style) */
.path-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-frosted);
  border-top: 0.5px solid var(--divider);
  flex-shrink: 0;
}
.path-bar svg { width: 12px; height: 12px; }
.path-sep { color: var(--text-tertiary); }

/* Status bar (item count / free space) */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-frosted);
  border-top: 0.5px solid var(--divider);
  flex-shrink: 0;
}
.status-bar .quota-track { width: 120px; height: 4px; }

/* Finder list view table */
.finder-list { width: 100%; border-collapse: collapse; }
.finder-list thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-bottom: 0.5px solid var(--divider);
  z-index: 1;
}
.finder-list tbody tr.data-row {
  font-size: 12.5px;
}
.finder-list tbody tr.data-row:nth-child(even) { background: rgba(118, 118, 128, 0.045); }
.finder-list tbody tr.data-row:hover { background: var(--accent-soft); }
.finder-list td {
  padding: 5px 12px;
  border-bottom: none;
  vertical-align: middle;
  color: var(--text-primary);
}
.finder-list .name-cell { display: flex; align-items: center; gap: 8px; }
.finder-list .name-cell svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.finder-list .col-actions { text-align: right; white-space: nowrap; }
.finder-list .col-actions .icon-btn { width: 26px; height: 26px; opacity: 0; transition: opacity 0.1s; }
.finder-list .col-actions .icon-btn svg { width: 14px; height: 14px; }
.finder-list tr:hover .col-actions .icon-btn { opacity: 1; }
.finder-list .muted { color: var(--text-secondary); }