/* ============================================================================
 * Clothy — "Aurora Glass" theme
 * A layered redesign for the main app + login only (NOT admin — admin never
 * loads this file). Loaded AFTER style.css, so it overrides the visual layer
 * by redefining the design tokens and adding frosted-glass panels, a teal->blue
 * aurora background, gradient accents, and responsiveness. RTL/Vazirmatn rules
 * from style.css keep working ([dir="rtl"] selectors out-specify these).
 * ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* brand gradient sampled from the logo */
  --g-teal: #16a8cc;
  --g-blue: #2b6fe0;
  --g-cyan: #38e0d0;
  --grad-brand: linear-gradient(120deg, var(--g-teal) 0%, var(--g-blue) 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(22,168,204,.18), rgba(43,111,224,.18));

  /* dark (default) palette — drives style.css's var-based rules */
  --bg-primary: #070d1a;
  --bg-secondary: rgba(18, 31, 54, 0.55);
  --bg-tertiary: rgba(30, 46, 74, 0.55);
  --text-primary: #e9f2fc;
  --text-secondary: #97abca;
  --border-color: rgba(150, 190, 240, 0.14);
  --accent-color: #29b6d8;
  --accent-hover: #46c8e6;

  /* glass + effects */
  --glass-bg: rgba(16, 28, 50, 0.55);
  --glass-bg-strong: rgba(14, 24, 44, 0.78);
  --glass-border: rgba(160, 200, 250, 0.16);
  --glass-blur: blur(22px) saturate(140%);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.06);
  --glow: 0 0 0 1px rgba(56, 224, 208, .35), 0 8px 30px rgba(22, 168, 204, .35);
  --radius: 16px;
  --radius-sm: 11px;
  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

body.light-theme {
  --bg-primary: #eaf1fb;
  --bg-secondary: rgba(255, 255, 255, 0.62);
  --bg-tertiary: rgba(255, 255, 255, 0.5);
  --text-primary: #16314f;
  --text-secondary: #5d7693;
  --border-color: rgba(22, 49, 79, 0.12);
  --accent-color: #1d80c9;
  --accent-hover: #1668a8;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(22, 49, 79, 0.1);
  --glass-shadow: 0 12px 40px rgba(30, 70, 130, .14), inset 0 1px 0 rgba(255,255,255,.6);
  --glow: 0 0 0 1px rgba(43, 111, 224, .25), 0 10px 30px rgba(43, 111, 224, .2);
}

/* ── Persian (RTL): Vazirmatn for ALL text ──────────────────────────────────
 * Redefine the font tokens so every var-driven element (incl. the display-font
 * headings) uses Vazirmatn in Persian. :root[dir="rtl"] (0,2,0) out-specifies
 * :root, and the explicit list covers elements that set their own font or don't
 * inherit (the display headings + native form controls). */
:root[dir="rtl"] {
  --font-body: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}
[dir="rtl"] body,
[dir="rtl"] .app-title,
[dir="rtl"] .gallery-header h2,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}

/* ── Atmosphere: aurora background ──────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  background-image:
    radial-gradient(60% 55% at 12% 8%, rgba(22, 168, 204, .26), transparent 60%),
    radial-gradient(55% 50% at 92% 18%, rgba(43, 111, 224, .24), transparent 60%),
    radial-gradient(70% 60% at 78% 100%, rgba(56, 224, 208, .14), transparent 60%);
  background-attachment: fixed;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
body.light-theme {
  background-image:
    radial-gradient(60% 55% at 12% 8%, rgba(22, 168, 204, .22), transparent 60%),
    radial-gradient(55% 50% at 92% 18%, rgba(43, 111, 224, .18), transparent 60%),
    radial-gradient(70% 60% at 78% 100%, rgba(56, 224, 208, .14), transparent 60%);
}

/* ── Glass panels ───────────────────────────────────────────────────────── */
.main-content,
.sidebar,
.status-panel,
.login-card,
.queue-details,
.project-modal-content {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

.container {
  gap: 18px;
  padding: 18px 18px 0;
  align-items: stretch;
}
.main-content {
  border-radius: var(--radius);
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.sidebar {
  width: 360px;
  border-radius: var(--radius);
  /* all-sides glass border comes from the grouped panel rule above; no physical
     left/right border here so RTL isn't flipped onto the wrong edge. */
  animation: rise .6s .08s cubic-bezier(.2,.8,.2,1) both;
}
.status-panel {
  margin: 12px 18px 16px;
  border-radius: var(--radius);
  border-top: 1px solid var(--glass-border) !important;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Branding ───────────────────────────────────────────────────────────── */
.app-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent-color); /* solid fallback when background-clip:text is unsupported */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .app-title, .login-card .app-title {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.sidebar-logo { width: 92px; filter: drop-shadow(0 6px 18px rgba(22,168,204,.35)); }
.gallery-header h2 { font-family: var(--font-display); font-weight: 700; }
.gallery-header { border-bottom: 1px solid var(--glass-border); }

/* ── Primary / gradient buttons ─────────────────────────────────────────── */
.start-button,
.form-btn,
.gallery-batch-zip,
.mode-btn.active {
  background: var(--grad-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(22, 168, 204, .35);
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.start-button:not(:disabled):hover,
.form-btn:not(:disabled):hover,
.gallery-batch-zip:not(:disabled):hover,
.mode-btn.active:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  filter: brightness(1.06);
}
.start-button:disabled,
.form-btn:disabled,
.gallery-batch-zip:disabled,
.mode-btn.active:disabled {
  background: var(--glass-bg-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  filter: grayscale(.4) opacity(.6);
  transform: none !important;
}
.start-button { border-radius: var(--radius-sm); padding: 14px; font-size: 15px; }

/* ── Secondary / glass buttons ──────────────────────────────────────────── */
.mode-btn,
.queue-toggle-btn,
.history-action-btn,
.gallery-batch-btn,
.project-action-btn,
.logout-btn,
.refresh-btn,
.project-create-btn,
.project-settings-btn,
.gallery-item-btn {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm);
  transition: border-color .2s, transform .15s, background .2s;
}
.mode-btn:hover,
.queue-toggle-btn:hover,
.history-action-btn:hover,
.gallery-batch-btn:hover,
.project-action-btn:hover,
.refresh-btn:hover,
.project-create-btn:hover,
.project-settings-btn:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  transform: translateY(-1px);
}
.refresh-btn:hover { transform: rotate(180deg); }
.gallery-item-btn.download { background: var(--grad-brand) !important; color: #fff !important; border: none !important; }
.gallery-item-btn.refine  { background: rgba(56, 224, 208, .9) !important; color: #062b2a !important; border: none !important; }
.logout-btn, .danger-btn, .danger-delete {
  background: rgba(229, 72, 77, .14) !important;
  border: 1px solid rgba(229, 72, 77, .4) !important;
  color: #ff8a8d !important;
}
.danger-delete { background: rgba(229, 72, 77, .85) !important; color: #fff !important; }

/* ── Inputs, selects, textareas ─────────────────────────────────────────── */
.form-input,
.provider-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
.history-search-input,
.history-filter-select,
.history-filter-date {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus,
.provider-select:focus,
select:focus,
textarea:focus,
input:focus,
.history-search-input:focus {
  outline: none;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(41, 182, 216, .22) !important;
}
select option { background: #0e182c; color: var(--text-primary); }

/* ── Drop zones ─────────────────────────────────────────────────────────── */
.drop-zone {
  background: var(--grad-brand-soft) !important;
  border: 1.5px dashed var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .2s, background .2s, transform .15s;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--g-cyan) !important;
  background: rgba(56, 224, 208, .12) !important;
  transform: translateY(-1px);
}
.drop-text { color: var(--text-primary); font-weight: 600; }

/* ── Selectors / chips group containers ─────────────────────────────────── */
.project-selector,
.provider-selection,
.mode-switch,
.format-selector,
.prompt-selector {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.mode-switch { background: transparent; border: none; padding: 0; }
.user-bar { background: var(--glass-bg-strong) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-sm); }

/* ── Gallery cards ──────────────────────────────────────────────────────── */
.images-gallery { gap: 16px; }
.gallery-item {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.gallery-item:hover {
  transform: translateY(-6px);
  border-color: var(--accent-color) !important;
  box-shadow: var(--glow);
}
.gallery-item-overlay { background: linear-gradient(180deg, rgba(7,13,26,0) 30%, rgba(7,13,26,.82)) !important; }
.refined-badge { background: var(--grad-brand); color: #fff; }

/* ── Toggles (theme / lang) ─────────────────────────────────────────────── */
.theme-toggle, .lang-toggle {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 999px !important;
  transition: transform .15s, box-shadow .2s;
}
.theme-toggle:hover, .lang-toggle:hover { transform: translateY(-2px); box-shadow: var(--glow); }

/* ── Status bar + queue/history ─────────────────────────────────────────── */
.status-item { background: rgba(255,255,255,.04); border-radius: 999px; padding: 4px 12px; }
.queue-item, .collaborator-item {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
.project-modal, .modal-overlay {
  background: rgba(6, 11, 22, .6) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.project-modal-content, .modal-content {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow);
}

/* ── Login card glass ───────────────────────────────────────────────────── */
.login-card {
  border-radius: var(--radius) !important;
  padding: 40px 36px !important;
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.login-card .app-title { color: var(--accent-color); } /* gradient via the @supports block above */
.login-logo { filter: drop-shadow(0 8px 22px rgba(22,168,204,.4)); }

/* ── Notifications (toasts) ─────────────────────────────────────────────── */
.notification {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow) !important;
  border-radius: var(--radius-sm) !important;
}
.notification.success { border-left: 3px solid var(--g-cyan) !important; }
.notification.error { border-left: 3px solid #ff6b6e !important; }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
.sidebar::-webkit-scrollbar, .main-content::-webkit-scrollbar,
.queue-list::-webkit-scrollbar, .project-modal-body::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb,
.queue-list::-webkit-scrollbar-thumb, .project-modal-body::-webkit-scrollbar-thumb {
  background: rgba(150,190,240,.25); border-radius: 999px;
}

/* ── Responsive: stack on small screens ─────────────────────────────────── */
@media (max-width: 768px) {
  body { height: auto !important; overflow-y: auto !important; }
  /* padding-top clears the fixed theme/lang toggles so they don't cover the header */
  .container { flex-direction: column; padding: 60px 12px 0; gap: 12px; overflow: visible; }
  .sidebar { width: auto; order: 1; }      /* controls on top */
  .main-content { min-height: 55vh; order: 2; }
  .status-panel { margin: 12px; flex-wrap: wrap; }
  .status-content { flex-wrap: wrap; gap: 8px; }
  .theme-toggle, .lang-toggle { transform: scale(.92); }
}

/* ── Coverage: route remaining style.css greys/blues through tokens ─────── */
/* Labels + helper text (loaded after style.css, equal specificity wins) —
   critical so the light theme stays legible. */
.upload-label,
.format-selector label,
.prompt-selector label,
.provider-label,
.project-selector-header label,
.form-group label { color: var(--text-secondary); }
.drop-hint { color: var(--text-secondary); }
.placeholder-text { color: var(--text-secondary); }

/* Status bar: readable label, accent count */
.status-item { color: var(--text-secondary); }
.status-item span[id] { color: var(--accent-color); font-weight: 700; }

/* Gallery batch bar */
.gallery-batch-bar { background: var(--glass-bg-strong) !important; border: 1px solid var(--accent-color) !important; }
.gallery-select-count { color: var(--accent-color) !important; }
.gallery-batch-btn:hover { background: var(--glass-bg-strong) !important; }

/* Keep the model-vs-clothes affordance, but glass-tinted instead of flat light/red */
.model-drop-zone { background: linear-gradient(120deg, rgba(43,111,224,.20), rgba(43,111,224,.07)) !important; border-color: rgba(74,144,226,.6) !important; }
.clothes-drop-zone { background: linear-gradient(120deg, rgba(231,76,60,.20), rgba(231,76,60,.07)) !important; border-color: rgba(231,76,60,.6) !important; }

/* Queue status chips -> aurora tints */
.queue-item-status.pending   { background: rgba(255,193,77,.16) !important; color: #ffcd5c !important; }
.queue-item-status.running   { background: rgba(41,182,216,.18) !important; color: var(--accent-hover) !important; }
.queue-item-status.done      { background: rgba(56,224,208,.16) !important; color: #5fe8d8 !important; }
.queue-item-status.failed,
.queue-item-status.cancelled { background: rgba(255,107,110,.16) !important; color: #ff8a8d !important; }

/* Native <select> dropdown options readable in both themes */
select option { background: #0e182c; color: var(--text-primary); }
body.light-theme select option { background: #ffffff; color: #16314f; }

/* Firefox scrollbar parity */
.sidebar, .main-content, .queue-list, .project-modal-body, .queue-details {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 190, 240, .3) transparent;
}

/* Graceful fallback where backdrop-filter is unsupported -> near-solid panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-content, .sidebar, .status-panel, .gallery-item,
  .login-card, .queue-details, .project-modal-content {
    background: var(--glass-bg-strong) !important;
  }
}