/* ProjexaGo — Design tokens & global primitives.
   Brand: teal #1D9E75 | Dark sidebar #0F1117 | Inter font */
:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg:         #0F1117;
  --bg-soft:    #151D2E;
  --surface:    #ffffff;
  --surface-2:  #f4f7fb;
  --surface-3:  #eaeef5;
  --surface-4:  #e0e6f0;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:       #d4dbe8;
  --border-soft:  #eaeef5;
  --border-strong:#b0bbcf;

  /* ── Text ────────────────────────────────────────────────── */
  --text:       #0a0f1d;
  --text-2:     #2d3a52;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  /* ── Brand / Primary (Projexa Go teal) ───────────────────── */
  --primary:       #1D9E75;
  --primary-dark:  #158060;
  --primary-hover: #17875F;
  --primary-soft:  #d1f5ea;
  --primary-ink:   #ffffff;

  /* ── Accent (used for secondary highlights) ──────────────── */
  --accent:      #0ea5e9;
  --accent-soft: #e0f5fe;

  /* ── Semantic colors ─────────────────────────────────────── */
  --success:      #059669;
  --success-soft: #d1fae5;
  --warning:      #d97706;
  --warning-soft: #fef3c7;
  --danger:       #dc2626;
  --danger-soft:  #fee2e2;
  --info:         #2563eb;
  --info-soft:    #dbeafe;
  --purple:       #7c3aed;
  --purple-soft:  #ede9fe;
  --teal:         #1D9E75;

  /* ── Sidebar ─────────────────────────────────────────────── */
  --sidebar-bg:     #0F1117;
  --sidebar-bg2:    #161C28;
  --sidebar-border: rgba(255,255,255,.08);
  --sidebar-text:   #9aafc5;
  --sidebar-active-bg: rgba(29,158,117,.13);
  --sidebar-active-border: #1D9E75;
  --sidebar-active-text: #ffffff;

  /* ── Border radii ────────────────────────────────────────── */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 16px -4px rgba(15,23,42,.10), 0 4px 6px -4px rgba(15,23,42,.06);
  --shadow-lg: 0 20px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.08);
  --shadow-xl: 0 32px 48px -8px rgba(15,23,42,.16);
  --shadow-teal: 0 0 0 3px rgba(29,158,117,.2);
  --shadow-teal-glow: 0 4px 16px rgba(29,158,117,.25);

  /* ── Typography ──────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* ── Resets & globals ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 {
  margin: 0 0 .4em;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; font-family: inherit; font-size: .875rem; font-weight: 600;
  padding: .6rem 1.1rem; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: all .15s ease; text-decoration: none;
  white-space: nowrap; line-height: 1.4; letter-spacing: -.01em;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(29,158,117,.3);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost {
  background: transparent; color: var(--text-2); border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-light { background: #fff; color: var(--primary); border-color: rgba(255,255,255,.3); }
.btn-light:hover { background: #f0fdf9; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #047857; }
.btn-outline-primary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary-soft); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; border-radius: 6px; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; }
.btn-icon { padding: .5rem; width: 34px; height: 34px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 1.25rem 1.4rem; }
.card-hover { transition: transform .15s, box-shadow .15s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── Forms ────────────────────────────────────────────────────── */
label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--text-2); margin-bottom: .35rem;
}
input, select, textarea {
  width: 100%; font-family: inherit; font-size: .9rem; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: .6rem .8rem;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.4;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-teal);
}
input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--border-strong); }
textarea { resize: vertical; min-height: 90px; }
/* Field alignment: the label sits on top and the explanatory hint is moved
   BELOW the control (via flex order), so every input lines up right under its
   label regardless of whether a neighbouring column's hint is 1 line or 3.
   Applied to ALL fields (not just the wizard) so every form, settings page and
   modal keeps inputs vertically aligned across a row. */
.field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.field:last-child { margin-bottom: 0; }
.field > label { order: 0; }
.field > .field-label-row { order: 0; }
.field > .hint { order: 5; margin-top: .45rem; margin-bottom: 0; }
/* Compact controls shouldn't stretch to the full field width in a flex column. */
.field > input[type="color"], .field > input[type="checkbox"] { align-self: flex-start; }
/* Rows of side-by-side fields align their tops, so wrapping labels never push a
   neighbour's input out of line. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; align-items: start; }
.hint { font-size: .775rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.4; }
.form-section { border-top: 1px solid var(--border); padding-top: 1.2rem; margin-top: 1.2rem; }
.form-section h4 { font-size: .925rem; margin-bottom: .8rem; }
input[type="checkbox"] { width: auto; accent-color: var(--primary); }
input[type="color"] { padding: .25rem; height: 38px; cursor: pointer; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.badge-gray   { background: var(--surface-3); color: var(--text-muted); }
.badge-green  { background: var(--success-soft); color: var(--success); }
.badge-teal   { background: var(--primary-soft); color: var(--primary); }
.badge-amber  { background: var(--warning-soft); color: var(--warning); }
.badge-red    { background: var(--danger-soft); color: var(--danger); }
.badge-blue   { background: var(--info-soft); color: var(--info); }
.badge-purple { background: var(--purple-soft); color: var(--purple); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Tables ───────────────────────────────────────────────────── */
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data thead { background: var(--surface-2); }
table.data th {
  text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; color: var(--text-muted);
  padding: .7rem .9rem; border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text-2); }
table.data td { padding: .75rem .9rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .col-actions { text-align: right; white-space: nowrap; }

/* ── Utility classes ──────────────────────────────────────────── */
.muted     { color: var(--text-muted); }
.faint     { color: var(--text-faint); }
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-sm { gap: .35rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-mono { font-family: var(--font-mono); font-size: .85em; }
.pill {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--surface-3);
  color: var(--text-2); white-space: nowrap;
}
.kv { display: grid; grid-template-columns: 150px 1fr; gap: .5rem .8rem; font-size: .9rem; align-items: start; }
.kv dt { color: var(--text-muted); font-weight: 500; padding-top: .05rem; }
.kv dd { margin: 0; font-weight: 500; }
.divider { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* ── Spinner / skeleton ───────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border: 2.5px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .65s linear infinite; flex-shrink: 0;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 14px; margin-bottom: .6rem; }
.skel-line:last-child { width: 60%; }

/* ── Empty states ─────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 4rem 1.5rem; color: var(--text-muted);
}
.empty-state .empty-icon {
  width: 56px; height: 56px; border-radius: var(--radius);
  background: var(--surface-3); display: grid; place-items: center;
  font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-faint);
}
.empty-state h3 { font-size: 1rem; color: var(--text-2); margin-bottom: .35rem; }
.empty-state p { font-size: .875rem; max-width: 340px; margin: 0 0 1.2rem; }
/* Legacy */
.empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty i { font-size: 2rem; opacity: .35; margin-bottom: .7rem; display: block; }

/* ── Toasts ───────────────────────────────────────────────────── */
#toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem;
}
.toast {
  background: #1e293b; color: #f8fafc; padding: .75rem 1.1rem;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: .875rem; animation: slidein .2s ease;
  max-width: 360px; display: flex; align-items: center; gap: .6rem;
  border-left: 3px solid #475569;
}
.toast.err  { background: #450a0a; color: #fca5a5; border-left-color: var(--danger); }
.toast.ok   { background: #052e16; color: #6ee7b7; border-left-color: var(--success); }
.toast.warn { background: #431407; color: #fdba74; border-left-color: #f97316; }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } }
.toast i { font-size: 1rem; }

/* ════════════════════════════════════════════════════════════════════
   UI ENHANCE LAYER — premium primitives (added 2026-06)
   Reusable across landing + backoffice. Purely additive.
   ════════════════════════════════════════════════════════════════════ */

/* ── Button: loading state + xl size ──────────────────────────── */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 15px; height: 15px;
  top: calc(50% - 7.5px); left: calc(50% - 7.5px);
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
  color: #fff; opacity: .9;
}
.btn-ghost.is-loading::after, .btn-light.is-loading::after,
.btn-outline-primary.is-loading::after { color: var(--primary); }
.btn-xl { padding: .95rem 2rem; font-size: 1.05rem; border-radius: var(--radius-md); }
.btn-pill { border-radius: 999px; }

/* ── Inline field validation ──────────────────────────────────── */
.field { position: relative; }
.field-valid-icon {
  position: absolute; right: .7rem; top: 2.05rem; font-size: .85rem;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.field.is-valid .field-valid-icon { opacity: 1; color: var(--success); }
.field.is-error .field-valid-icon { opacity: 1; color: var(--danger); }
.field.is-valid input:not(:focus), .field.is-valid select:not(:focus) { border-color: var(--success); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--danger); }
.field-error-msg { font-size: .75rem; color: var(--danger); margin-top: .3rem; display: none; }
.field.is-error .field-error-msg { display: block; }

/* Real-time platform notice banners (backoffice, above the shell) */
#pg-notice-bar { position: relative; z-index: 1200; }
#pg-notice-bar .pg-notice { display: flex; align-items: center; gap: .7rem; padding: .55rem 1.1rem; font-size: .86rem; color: #fff; background: #1d4ed8; }
#pg-notice-bar .pg-notice + .pg-notice { border-top: 1px solid rgba(255,255,255,.18); }
#pg-notice-bar .pg-notice-ic { flex-shrink: 0; opacity: .9; }
#pg-notice-bar .pg-notice-text { flex: 1; min-width: 0; line-height: 1.4; }
#pg-notice-bar .pg-notice-text span { opacity: .9; }
#pg-notice-bar .pg-notice-cta { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
#pg-notice-bar .pg-notice-x { background: none; border: none; color: #fff; opacity: .8; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
#pg-notice-bar .pg-notice-x:hover { opacity: 1; }
.pg-notice-info { background: #1d4ed8; }
.pg-notice-success { background: #047857; }
.pg-notice-warning { background: #b45309; }
.pg-notice-error, .pg-notice-critical { background: #b91c1c; }
.pg-notice-promotion { background: #6d28d9; }
.pg-notice-maintenance { background: #334155; }

/* Password strength meter */
.pw-meter { height: 4px; border-radius: 999px; background: var(--surface-3); margin-top: .5rem; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .25s; }
.pw-meter.s1 span { width: 33%; background: var(--danger); }
.pw-meter.s2 span { width: 66%; background: var(--warning); }
.pw-meter.s3 span { width: 100%; background: var(--success); }
.pw-meter-label { font-size: .72rem; margin-top: .3rem; color: var(--text-muted); }
/* Live password recommendations checklist */
.pw-reco { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .18rem .9rem; }
.pw-reco li { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; transition: color .2s; }
.pw-reco li i { font-size: .68rem; color: var(--surface-3); transition: color .2s; }
.pw-reco li.ok { color: var(--text); }
.pw-reco li.ok i { color: var(--success); }
@media (max-width: 420px) { .pw-reco { grid-template-columns: 1fr; } }

/* ── Animation utilities ──────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } }
.anim-fade-in { animation: fadeIn .3s ease both; }
.anim-fade-up { animation: fadeUp .4s cubic-bezier(.16,.84,.44,1) both; }
.anim-scale-in { animation: scaleIn .25s ease both; }
/* Scroll reveal — JS toggles .in */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.44,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* ── Segmented control (period filters, toggles) ──────────────── */
.segmented { display: inline-flex; background: var(--surface-3); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmented button {
  appearance: none; border: none; background: none; font-family: inherit;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  padding: .4rem .8rem; border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer; transition: all .15s; white-space: nowrap; line-height: 1;
}
.segmented button:hover { color: var(--text-2); }
.segmented button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

/* ── Chips (filters) ──────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; padding: .4rem .8rem;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: all .15s; white-space: nowrap; line-height: 1;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Trend indicators ─────────────────────────────────────────── */
.trend { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; }
.trend.up { color: var(--success); } .trend.down { color: var(--danger); }
.trend.flat { color: var(--text-faint); }

/* ── Skeleton variants ────────────────────────────────────────── */
.skel-circle { border-radius: 50%; }
.skel-card { height: 88px; border-radius: var(--radius); }
.skel-stat { height: 110px; border-radius: var(--radius); }
.skel-row { height: 48px; border-radius: var(--radius-sm); margin-bottom: .5rem; }

/* ── Accessibility: clearer focus-visible ─────────────────────── */
a:focus-visible, button:focus-visible, .chip:focus-visible, .segmented button:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}