/* ============================================================
   Connexolve BGV — Design Tokens
   Aesthetic: Audit-grade calm.
   Used by: login.php, register.php, dashboard.php, index.php
   ============================================================ */

:root {
  /* ──────── COLOR ──────── */

  /* Surfaces */
  --surface-page:        #FAFAF7;   /* warm off-white page bg */
  --surface-card:        #FFFFFF;
  --surface-subtle:      #F5F4EF;   /* card bg variant, inputs */
  --surface-inverse:     #0B1220;   /* dark sections */

  /* Trust blue — muted, banking-confident, NOT bright fintech */
  --primary-900:         #061735;
  --primary-800:         #0A2454;
  --primary-700:         #0B3B7A;
  --primary-600:         #0B4F9F;   /* DEFAULT */
  --primary-500:         #1565C8;
  --primary-100:         #DBE6F4;
  --primary-50:          #EEF4FB;

  /* Verify green — for success/verified states */
  --accent-700:          #15803D;
  --accent-600:          #16A34A;   /* DEFAULT */
  --accent-100:          #DCFCE7;
  --accent-50:           #F0FDF4;

  /* Status */
  --danger-700:          #B91C1C;
  --danger-600:          #DC2626;
  --danger-100:          #FEE2E2;
  --danger-50:           #FEF2F2;

  --warning-600:         #D97706;
  --warning-100:         #FFEDD5;

  /* Neutrals — slightly warm grays to pair with the cream page */
  --ink-900:             #0E1116;   /* primary text */
  --ink-700:             #313641;   /* secondary text */
  --ink-500:             #6B7280;   /* tertiary text, placeholders */
  --ink-300:             #C9CDD3;   /* disabled */
  --line-200:            #E6E4DC;   /* card borders, dividers */
  --line-100:            #EEEDE5;   /* hairlines */

  /* ──────── TYPOGRAPHY ──────── */
  --font-display:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:           'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:           ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* Type scale */
  --t-xs:                12px;
  --t-sm:                13px;
  --t-base:              15px;
  --t-md:                16px;
  --t-lg:                18px;
  --t-xl:                22px;
  --t-2xl:               28px;
  --t-3xl:               36px;
  --t-4xl:               48px;

  /* ──────── SPACING ──────── */
  --s-1:                 4px;
  --s-2:                 8px;
  --s-3:                 12px;
  --s-4:                 16px;
  --s-5:                 20px;
  --s-6:                 24px;
  --s-8:                 32px;
  --s-10:                40px;
  --s-12:                48px;
  --s-16:                64px;

  /* ──────── RADIUS ──────── */
  --r-sm:                6px;
  --r-md:                8px;
  --r-lg:                12px;
  --r-xl:                16px;
  --r-pill:              999px;

  /* ──────── SHADOWS ──────── */
  --shadow-sm:           0 1px 2px rgba(14, 17, 22, 0.04);
  --shadow-md:           0 4px 6px -1px rgba(14, 17, 22, 0.06), 0 2px 4px -2px rgba(14, 17, 22, 0.04);
  --shadow-lg:           0 10px 24px -6px rgba(14, 17, 22, 0.08), 0 4px 8px -4px rgba(14, 17, 22, 0.04);
  --shadow-ring-focus:   0 0 0 3px rgba(11, 79, 159, 0.18);
  --shadow-ring-danger:  0 0 0 3px rgba(220, 38, 38, 0.16);

  /* ──────── MOTION ──────── */
  --t-fast:              120ms;
  --t-base-dur:          180ms;
  --t-slow:              260ms;
  --ease:                cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   GLOBAL RESET + BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1;  /* tabular numerals everywhere */
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--surface-page);
  min-height: 100vh;
}

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--primary-700); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink-900);
}

::placeholder { color: var(--ink-500); opacity: 1; }

/* ============================================================
   FORM COMPONENT — Input
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field-label {
  font-size: var(--t-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-900);
  letter-spacing: 0.005em;
}

.field-hint {
  font-size: var(--t-xs);
  color: var(--ink-500);
  margin-top: var(--s-1);
}

.field-error {
  font-size: var(--t-xs);
  color: var(--danger-700);
  margin-top: var(--s-1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-card);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.input:hover:not(:disabled):not(:focus) {
  border-color: var(--ink-300);
}

.input:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: var(--shadow-ring-focus);
}

.input:disabled {
  background: var(--surface-subtle);
  color: var(--ink-500);
  cursor: not-allowed;
}

.input[aria-invalid="true"] {
  border-color: var(--danger-600);
}
.input[aria-invalid="true"]:focus {
  box-shadow: var(--shadow-ring-danger);
}

/* Input adornments — icon on the left or right */
.input-wrap {
  position: relative;
}
.input-wrap .input { padding-left: 40px; }
.input-wrap .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-500);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.input-wrap .input-icon svg {
  width: 16px;
  height: 16px;
}

/* Right-side button inside input (e.g. show/hide password) */
.input-wrap .input-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  color: var(--ink-500);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.input-wrap .input-action:hover {
  color: var(--ink-900);
  background: var(--surface-subtle);
}

/* ============================================================
   FORM COMPONENT — Button
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: var(--t-base);
  font-weight: var(--weight-medium);
  font-family: inherit;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn-primary {
  background: var(--primary-600);
  color: #FFFFFF;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-700);
}
.btn-primary:active:not(:disabled) {
  background: var(--primary-800);
  transform: translateY(0.5px);
}

.btn-secondary {
  background: var(--surface-card);
  border-color: var(--line-200);
  color: var(--ink-900);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-subtle);
  border-color: var(--ink-300);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-700);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-subtle);
  color: var(--ink-900);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 14px 24px;
  font-size: var(--t-md);
}

/* Loading spinner inside button */
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.card-hr {
  border: none;
  border-top: 1px solid var(--line-100);
  margin: 0;
}

/* ============================================================
   UTILITY — Trust strip (uppercase letterspaced legalese)
   ============================================================ */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.trust-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.trust-strip-item svg {
  width: 12px;
  height: 12px;
  color: var(--accent-600);
}

/* ============================================================
   FLASH / ALERT
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.45;
  border: 1px solid;
}

.alert-error {
  background: var(--danger-50);
  border-color: var(--danger-100);
  color: var(--danger-700);
}

.alert-error svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* ============================================================
   VISUALLY HIDDEN
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE — typography scales down slightly on mobile
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --t-3xl: 28px;
    --t-2xl: 22px;
    --t-xl:  18px;
  }
}
/* ============================================================
   TOKENS — APPENDED PATCH
   Adds rules that were previously only defined inline in login.php
   but are also needed by register.php and homepage.
   ============================================================ */

/* HTML hidden attribute must always win over display: flex/grid/block.
   Without this, .alert[hidden] still renders because .alert uses
   display: flex. Standard fix in any production stylesheet. */
[hidden] {
  display: none !important;
}

/* ── Brand mark — used by login, register, homepage header ─── */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  font-weight: var(--weight-semibold);
  font-size: var(--t-md);
  letter-spacing: -0.005em;
  text-decoration: none;
}
.auth-brand:hover { color: var(--ink-900); }

.auth-brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.auth-brand-text-light {
  color: var(--ink-500);
  font-weight: var(--weight-medium);
}

/* ── Button arrow — used on .btn-primary across the system ── */
.btn .btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.btn-primary:hover:not(:disabled) .btn-arrow {
  transform: translateX(2px);
}

/* ── Auth page layout — shared by login + register ────────── */
.auth-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  gap: var(--s-6);
  background:
    radial-gradient(circle at 0% 0%, rgba(11, 79, 159, 0.025) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(22, 163, 74, 0.018) 0%, transparent 40%),
    var(--surface-page);
}

/* ── Auth card — used by login + register ─────────────────── */
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 0;
}

.auth-card-head {
  padding: var(--s-8) var(--s-8) var(--s-6);
  text-align: center;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-700);
  background: var(--primary-50);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-5);
}
.auth-eyebrow svg { width: 12px; height: 12px; }

.auth-h {
  font-size: var(--t-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.018em;
  color: var(--ink-900);
  line-height: 1.15;
  margin-bottom: var(--s-2);
}

.auth-sub {
  font-size: var(--t-base);
  color: var(--ink-700);
  line-height: 1.5;
}

.auth-card-foot {
  padding: var(--s-5) var(--s-8);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ink-700);
}
.auth-foot-link {
  font-weight: var(--weight-medium);
  margin-left: 2px;
}

/* Field label row — label left, aux link right */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.field-aux-link {
  font-size: var(--t-xs);
  color: var(--primary-600);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.field-aux-link:hover { color: var(--primary-700); }

/* ============================================================
   DEFENSIVE — SVG sizing
   Stop ANY SVG without explicit dimensions from rendering at
   its natural viewport size (which can be 600px+ in flow).
   Components that need a specific size set width/height on the
   element directly via CSS (.btn-arrow, .entity-icon, etc.)
   ============================================================ */

/* Inline SVGs inside paragraphs and labels: cap at line height */
p svg:not([width]):not([class]),
label svg:not([width]):not([class]),
.field-hint svg:not([width]):not([class]) {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
}

/* Alert icons (no class, just <svg viewBox=...> inside .alert) */
.alert svg:not([width]):not([class]) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}