/* theme.css — source of truth: tokens + dark override */

:root {
  /* Brand / accent */
  --color-primary: #0F52BA;      /* CTA / links */
  --color-primary-dark: #0A3A8A; /* hover */
  --color-trust: #1B3A6B;        /* trust banner / gradients */

  /* Status */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Base surfaces */
  --color-bg: #F8F9FA;           /* page background */
  --color-surface: #FFFFFF;      /* cards */
  --color-surface-2: #F3F4F6;    /* subtle sections */
  --color-surface-hover: #F8FAFF;

  /* Text */
  --color-text: #1A1A2E;
  --color-text-muted: #6B7280;

  /* Borders */
  --color-border: #E5E7EB;

  /* Links & focus */
  --color-link: var(--color-primary);
  --color-focus-ring: rgba(15, 82, 186, 0.35);

  /* Alerts (background) */
  --color-success-bg: #E8F8F5;
  --color-warning-bg: #FFF7ED;
  --color-error-bg: #FDE8E8;

  /* Shadows */
  --shadow-1: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.10);

  /* Typography */
  --font-stack: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion */
  --theme-transition: 0.2s ease;
}

:root[data-theme="dark"] {
  /* Dark surfaces (slightly blue-tinted for "enterprise") */
  --color-bg: #0B1220;           /* page background */
  --color-surface: #0F172A;      /* cards */
  --color-surface-2: #111C33;    /* subtle sections */
  --color-surface-hover: #14213D;

  /* Text */
  --color-text: #E5E7EB;
  --color-text-muted: #9CA3AF;

  /* Borders */
  --color-border: #22304A;

  /* Brand accent: lighter for contrast */
  --color-primary: #60A5FA;      /* CTA / links */
  --color-primary-dark: #3B82F6; /* hover */
  --color-trust: #0B2A5B;

  /* Status (slightly brighter) */
  --color-success: #22C55E;
  --color-warning: #FBBF24;
  --color-error: #F87171;

  /* Focus ring */
  --color-focus-ring: rgba(96, 165, 250, 0.35);

  /* Alerts (background) */
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-error-bg: rgba(248, 113, 113, 0.14);

  /* Shadows reduced in dark */
  --shadow-1: 0 2px 14px rgba(0,0,0,0.35);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.45);
}

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

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack);
  min-height: 100vh;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

/* Make sure common surfaces transition smoothly */
.card, nav, .btn-primary, .btn-ghost, input, table, th, td {
  transition: background-color var(--theme-transition),
              color var(--theme-transition),
              border-color var(--theme-transition),
              box-shadow var(--theme-transition);
}

/* ── Theme Toggle ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--color-surface-2); }
.theme-toggle:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Show the right icon depending on theme */
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Navbar ── */
nav.app-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-1);
}
nav.app-nav .brand {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
}
nav.app-nav .brand span { color: var(--color-primary); }
nav.app-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
nav.app-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--theme-transition);
}
nav.app-nav a:hover { color: var(--color-text); }
nav.app-nav .nav-user {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ── Container ── */
.container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ── Card ── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-1);
  margin-bottom: 1.5rem;
}
.card-header { margin-bottom: 1.5rem; }
.card-header h1, .card-header h2 { margin-bottom: 0.35rem; }

h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.01em; color: var(--color-text); }
h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text); }
h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--color-text); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--theme-transition);
}
.btn-primary {
  transition: background var(--theme-transition), transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 82, 186, 0.3);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary.btn-full { width: 100%; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.2rem;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--theme-transition), border-color var(--theme-transition);
}
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-ghost:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.82rem; }

/* ── Inputs ── */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="file"] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-stack);
  font-size: 0.95rem;
  transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  outline: 3px solid var(--color-focus-ring);
  border-color: var(--color-primary);
}
.input::placeholder { color: var(--color-text-muted); }

.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}

/* ── Alerts ── */
.alert {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-success {
  background: var(--color-success-bg);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--color-text);
}
.alert-warning {
  background: var(--color-warning-bg);
  border-color: rgba(251, 191, 36, 0.25);
  color: var(--color-text);
}
.alert-error {
  background: var(--color-error-bg);
  border-color: rgba(248, 113, 113, 0.25);
  color: var(--color-text);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.badge-success { border-color: rgba(34, 197, 94, 0.35); color: var(--color-success); }
.badge-warning { border-color: rgba(251, 191, 36, 0.35); color: var(--color-warning); }
.badge-error   { border-color: rgba(248, 113, 113, 0.35); color: var(--color-error); }

/* ── Status Pills ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.status-pill.success { color: var(--color-success); border-color: rgba(34, 197, 94, .35); background: var(--color-success-bg); }
.status-pill.warning { color: var(--color-warning); border-color: rgba(251, 191, 36, .35); background: var(--color-warning-bg); }
.status-pill.error   { color: var(--color-error);   border-color: rgba(248, 113, 113, .35); background: var(--color-error-bg); }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-surface-hover); }
.table-wrap { overflow-x: auto; }

/* ── Auth ── */
.auth-wrap { max-width: 420px; margin: 4rem auto; padding: 0 1rem; }
.auth-card h1 { font-size: 1.6rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.auth-subtext {
  margin-top: 1rem;
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.9rem;
}
.auth-subtext a { color: var(--color-link); font-weight: 600; text-decoration: none; }
.auth-subtext a:hover { text-decoration: underline; }

/* ── Dashboard Grid ── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Dropzone ── */
.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-2);
  transition: border-color var(--theme-transition), background var(--theme-transition);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.dropzone:hover,
.dropzone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
}
.dropzone-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.dropzone-icon { font-size: 2.5rem; transition: transform 0.2s ease; }
.dropzone:hover .dropzone-icon,
.dropzone.drag-over .dropzone-icon { transform: scale(1.1); }
.dropzone-title { font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.dropzone-subtitle { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.dropzone-subtitle .link { color: var(--color-link); cursor: pointer; }

.upload-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Quota bar ── */
.quota-bar-wrap {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  height: 8px;
  margin-top: 0.4rem;
  overflow: hidden;
}
.quota-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--color-success);
  transition: width 0.3s;
}
.quota-bar.full { background: var(--color-error); }

/* ── Utilities ── */
.text-muted { color: var(--color-text-muted); font-size: 0.85rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ══════════════════════════════════════════════════
   NEW — UX Redesign v1.7.0 (Sally spec / ON-004)
   ══════════════════════════════════════════════════ */

/* ── New color tokens (light) ── */
:root {
  --color-stat-bg: #F0F4FF;
  --color-stat-border: #C7D7FA;
  --color-download-bg: #EEF2FF;
  --color-download-border: #A5B4FC;
  --color-spinner: #0F52BA;
  --color-warning-bg: #FFF7ED;
}

/* ── New color tokens (dark) ── */
:root[data-theme="dark"] {
  --color-stat-bg: #111C33;
  --color-stat-border: #1E3A6E;
  --color-download-bg: #0F1F3D;
  --color-download-border: #2563EB;
  --color-spinner: #60A5FA;
  --color-warning-bg: rgba(251, 191, 36, 0.12);
}

/* ── Page title (result page) ── */
.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}
.page-title-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* ── Result header ── */
.result-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.result-status-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1.2; }

/* ── Spinner ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 0.4rem;
}
:root[data-theme="dark"] .spinner {
  border-color: rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
}

/* ── Animations (result page) ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-card { animation: fadeSlideUp 0.35s ease both; }
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }
.download-card { animation: fadeSlideUp 0.35s ease 0.25s both; }
.result-grid   { animation: fadeSlideUp 0.35s ease 0.30s both; }

@media (prefers-reduced-motion: reduce) {
  .stat-card, .download-card, .result-grid { animation: none; }
  .spinner { animation: none; }
  .dropzone-icon { transition: none; }
  .btn-primary { transition: background var(--theme-transition); }
}

/* ── Stat grid + cards ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .stat-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--color-stat-bg);
  border: 1px solid var(--color-stat-border);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Download card ── */
.download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-download-bg);
  border: 1px solid var(--color-download-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.download-card-info { display: flex; align-items: center; gap: 0.75rem; }
.download-card-icon { font-size: 2rem; line-height: 1; }
.download-card-name { font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.download-card-meta { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.15rem; }

/* ── Result grid (next steps + controls) ── */
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 700px) { .result-grid { grid-template-columns: 1fr; } }

/* ── Steps list ── */
.steps-list {
  list-style: none;
  counter-reset: steps;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.steps-list li {
  counter-increment: steps;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.steps-list li::before {
  content: counter(steps);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Error block ── */
.error-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--color-error-bg);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.error-block-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.error-block-title { font-weight: 600; margin-bottom: 0.25rem; color: var(--color-text); }

/* ── Warning list ── */
.warning-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.warning-item {
  display: flex;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* ── File chip ── */
.file-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-text);
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

/* ── t2pbi-home-redesign v1.7.x ── */

/* Format chips (upload) */
.dropzone-formats {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  justify-content: center;
}
.format-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  opacity: 0.85;
}
:root[data-theme="dark"] .format-chip {
  background: rgba(96, 165, 250, 0.08);
}

/* CTA upload — plus de présence */
.btn-cta-upload {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
}

/* Drag label */
.dropzone-drag-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  min-height: 1.2rem;
  margin-top: 0.25rem;
}

/* Zero retention badge dans upload-actions */
.upload-zero-retention {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* PBIP Info Card */
.pbip-info-card {
  border-left: 3px solid var(--color-primary);
}
.pbip-info-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.pbip-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }

.pbip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 700px) { .pbip-grid { grid-template-columns: 1fr; } }

.pbip-block {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.pbip-block-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.pbip-block-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}
.pbip-block-desc { margin: 0; }

/* Folder tree */
.pbip-folder-tree {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.4rem;
}
.pbip-folder-tree code {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--color-primary);
  background: transparent;
}
.pbip-folder-tree code.indent { padding-left: 1rem; color: var(--color-text-muted); }

/* Steps & advantages lists */
.pbip-steps-list,
.pbip-advantages {
  margin: 0.4rem 0 0 1rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pbip-advantages { list-style: none; margin-left: 0; }
.pbip-advantages li::before {
  content: "✓ ";
  color: var(--color-success);
  font-weight: 700;
}

/* History expand */
.history-expand {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.history-extra {
  margin-top: 0.5rem;
}