/* ==========================================================================
   OKG Brand — Compatibility Override Layer (v1.0)
   Cascades AFTER page-embedded styles to repaint existing pages with the
   unified brand palette without surgical rewrites. Linked second, so order
   beats matching-specificity rules. Component/behavior code is untouched.
   ========================================================================== */

/* ---------- Body + root surface repaint ---------- */
html,body{
  background:var(--okg-bg)!important;
  color:var(--okg-ink);
}
body{
  font-family:var(--okg-font-sans)!important;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}

/* Gradients that used the old navy palette — replace with new surface */
body[style*="linear-gradient"],
.app-shell,.page,.wrapper,.container-fluid{
  background:var(--okg-bg)!important;
}

/* ---------- Legacy palette variables → new tokens ---------- */
/* Many pages define these at :root. Re-bind so existing rules pick up new colors. */
:root{
  --navy: var(--okg-bg-elevated);
  --navy-deep: var(--okg-bg);
  --navy-light: var(--okg-bg-raised);
  --gold: var(--okg-orange);
  --gold-hover: var(--okg-orange-bright);
  --gold-soft: rgba(245,158,11,.12);
  --gold-glow: var(--okg-orange-glow);
  --white: var(--okg-ink-strong);
  --light: var(--okg-ink);
  --dark: var(--okg-ink);
  --muted: var(--okg-ink-muted);
  --border: var(--okg-border);
  --radius: var(--okg-r-lg);
  --danger: var(--okg-danger);
  --primary: var(--okg-orange);
  --primary-dark: var(--okg-orange-deep);
  --accent: var(--okg-orange);
  --bg: var(--okg-bg);
  --bg-surface: var(--okg-bg-elevated);
  --bg-card: var(--okg-bg-elevated);
  --text: var(--okg-ink);
  --text-muted: var(--okg-ink-dim);
}

/* ---------- Cards / panels that were white → dark-surface ---------- */
.card,.panel,.box,.tile,.surface{
  background:linear-gradient(to bottom,rgba(15,23,42,.7),rgba(2,6,23,.85))!important;
  color:var(--okg-ink)!important;
  border:1px solid var(--okg-border)!important;
  border-radius:var(--okg-r-xl);
  box-shadow:var(--okg-shadow-md)!important;
}

.card h1,.card h2,.card h3,.card h4,.card .title,
.panel h1,.panel h2,.panel h3,
.box h1,.box h2,.box h3{
  color:var(--okg-ink-strong)!important;
}
.card .subtitle,.card p,.card label,
.panel .subtitle,.panel p,.panel label{
  color:var(--okg-ink-dim)!important;
}

/* ---------- Inputs / textareas / selects ---------- */
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="search"],input[type="tel"],
input[type="url"],input[type="date"],input[type="time"],
textarea,select{
  background:rgba(15,23,42,.4)!important;
  color:var(--okg-ink)!important;
  border:1px solid var(--okg-border)!important;
  border-radius:var(--okg-r-md)!important;
  font-size:16px!important;  /* prevent iOS zoom */
  -webkit-appearance:none;
  appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--okg-ink-muted)!important}
input:focus,textarea:focus,select:focus{
  outline:none!important;
  border-color:var(--okg-blue)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.2)!important;
  background:rgba(15,23,42,.7)!important;
}

label{color:var(--okg-ink-dim)!important}

/* ---------- Buttons — orange as primary ---------- */
button,.btn,.button,input[type="submit"],input[type="button"]{
  font-family:var(--okg-font-sans);
  border-radius:var(--okg-r-md)!important;
  min-height:40px;
  transition:background var(--okg-dur-fast) var(--okg-ease),
             border-color var(--okg-dur-fast) var(--okg-ease),
             transform var(--okg-dur-fast) var(--okg-ease);
}
button:active,.btn:active{transform:translateY(1px)}

.btn-submit,.btn-primary,button[type="submit"],
input[type="submit"],.btn-gold,.btn-orange{
  background:var(--okg-orange)!important;
  color:#0f172a!important;
  border:none!important;
  font-weight:600!important;
  box-shadow:0 2px 16px rgba(245,158,11,.25)!important;
}
.btn-submit:hover,.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
  background:var(--okg-orange-bright)!important;
  box-shadow:0 4px 24px rgba(245,158,11,.35)!important;
}

.btn-secondary,.btn-outline{
  background:rgba(15,23,42,.4)!important;
  color:var(--okg-ink)!important;
  border:1px solid var(--okg-border)!important;
}
.btn-secondary:hover,.btn-outline:hover{
  background:rgba(15,23,42,.7)!important;
  border-color:var(--okg-border-hover)!important;
}

.btn-danger{background:var(--okg-danger)!important;color:#fff!important}

/* ---------- Links ---------- */
a{color:var(--okg-orange-bright)}
a:hover{color:var(--okg-orange)}
/* Keep footer-link and nav links legible in their contexts */
.footer-link a,.forgot-row a{color:var(--okg-orange-bright)!important}
.footer-link a:hover,.forgot-row a:hover{color:var(--okg-orange)!important}

/* ---------- Tables ---------- */
table{color:var(--okg-ink);border-color:var(--okg-border)}
th{
  background:rgba(15,23,42,.6)!important;
  color:var(--okg-ink-dim)!important;
  border-bottom:1px solid var(--okg-border)!important;
  text-align:left;font-weight:600;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
td{border-bottom:1px solid var(--okg-border-soft)!important}
tr:hover td{background:rgba(15,23,42,.3)}

/* ---------- Nav / Header / Sidebar ---------- */
header,.header,.navbar,.top-bar,.appbar{
  background:var(--okg-bg-overlay)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--okg-border-soft)!important;
  color:var(--okg-ink)!important;
}
.sidebar,.side-nav,.aside,aside.nav{
  background:var(--okg-bg-elevated)!important;
  border-right:1px solid var(--okg-border-soft)!important;
  color:var(--okg-ink-dim);
}
.sidebar a,.side-nav a{color:var(--okg-ink-dim)!important}
.sidebar a:hover,.sidebar a.active,
.side-nav a:hover,.side-nav a.active{
  color:var(--okg-ink-strong)!important;
  background:rgba(245,158,11,.08)!important;
  border-left:3px solid var(--okg-orange);
}

/* ---------- Badges / status pills ---------- */
.badge,.pill,.tag,.chip{
  background:rgba(15,23,42,.6)!important;
  color:var(--okg-ink-dim)!important;
  border:1px solid var(--okg-border)!important;
  border-radius:var(--okg-r-pill);
  font-family:var(--okg-font-mono);
  font-size:11px;
}
.badge-success,.pill-success,.status-success{color:var(--okg-success)!important;border-color:rgba(52,211,153,.4)!important}
.badge-warn,.pill-warn,.status-warn{color:var(--okg-warning)!important;border-color:rgba(251,191,36,.4)!important}
.badge-danger,.pill-danger,.status-danger{color:var(--okg-danger)!important;border-color:rgba(239,68,68,.4)!important}

/* ---------- Alerts ---------- */
.alert{border-radius:var(--okg-r-md)}
.alert-error,.alert-danger{
  background:rgba(239,68,68,.08)!important;
  color:#fca5a5!important;
  border:1px solid rgba(239,68,68,.3)!important;
}
.alert-success{
  background:rgba(52,211,153,.08)!important;
  color:#6ee7b7!important;
  border:1px solid rgba(52,211,153,.3)!important;
}
.alert-warn,.alert-warning{
  background:rgba(251,191,36,.08)!important;
  color:#fcd34d!important;
  border:1px solid rgba(251,191,36,.3)!important;
}

/* ---------- Modals / dialogs ---------- */
.modal,.dialog,[role="dialog"]{
  background:var(--okg-bg-elevated)!important;
  color:var(--okg-ink)!important;
  border:1px solid var(--okg-border)!important;
  border-radius:var(--okg-r-xl);
  box-shadow:var(--okg-shadow-lg)!important;
}
.modal-overlay,.backdrop{background:rgba(2,6,23,.7)!important;backdrop-filter:blur(4px)}

/* ---------- Dividers ---------- */
hr,.divider{border-color:var(--okg-border-soft)!important;color:var(--okg-ink-muted)!important}
.divider::before,.divider::after{background:var(--okg-border-soft)!important}

/* ---------- Focus ring for a11y (keyboard) ---------- */
:focus-visible{outline:none;box-shadow:var(--okg-focus)!important}

/* ---------- Spinners — keep visible on dark bg ---------- */
.spinner{border-color:rgba(255,255,255,.25)!important;border-top-color:var(--okg-ink-strong)!important}

/* ---------- Scrollbars (dark, subtle) ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--okg-border-hover) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--okg-border-hover);border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:var(--okg-ink-muted)}

/* ---------- Old "side-panel" text on login — keep readable ---------- */
.side-panel{background:linear-gradient(180deg,rgba(245,158,11,.04) 0%,transparent 60%)!important}
.side-panel .sp-num{color:var(--okg-orange-bright)!important}
.sp-testimonial,.sp-stat{background:rgba(15,23,42,.5)!important;border:1px solid var(--okg-border)!important}

/* ---------- Logo tweaks ---------- */
.logo span,.brand span{color:var(--okg-orange-bright)!important}

/* ---------- Accessibility: honor reduced motion + high contrast ---------- */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}