/* =========================================================
   ENC Portal – Modern Theme
   ========================================================= */
/* ---------- Tokens ---------- */
:root{
  --brand:#2743f7;                /* primary */
  --ink:#0f172a;                  /* body text */
  --ink-dim:#475569;              /* muted text */
  --panel:#ffffff;                /* card/bg surface */
  --border:rgba(2,6,23,.12);      /* borders */
  --ring:rgba(39,67,247,.35);     /* focus ring */

  --elev-1:0 8px 24px rgba(2,6,23,.08);
  --elev-2:0 12px 34px rgba(2,6,23,.12);

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --speed:.24s;                   /* motion, respects reduce */
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e5e7eb; --ink-dim:#a1a1aa; --panel:#0f172a;
    --border:rgba(255,255,255,.10);
    --elev-1:0 8px 24px rgba(0,0,0,.35);
    --elev-2:0 12px 34px rgba(0,0,0,.45);
    --ring:rgba(99,102,241,.45);
  }
}
@media (prefers-reduced-motion: reduce){ :root{ --speed:0s; } }

/* ---------- Background + Shade ---------- */
html, body{
  height:100%;
}
body{
  font-family:"Inter","Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  /* brand-tinted glow + soft paper gradient */
  background:
    radial-gradient(1400px 800px at 50% -200px,
      rgba(39,67,247,.10) 0%,
      rgba(39,67,247,.04) 45%,
      transparent 80%),
    linear-gradient(180deg,
      rgba(247,249,255,.95) 0%,
      rgba(240,243,250,1) 100%);
  background-attachment: fixed;
  transition: background-color var(--speed), color var(--speed);
}
/* subtle vignette shade at the edges */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.05) 100%);
}

@media (prefers-color-scheme: dark){
  body{
    background:
      radial-gradient(1000px 600px at 50% -200px,
        rgba(39,67,247,.25) 0%,
        rgba(39,67,247,.10) 50%,
        transparent 90%),
      linear-gradient(180deg,#0b1220 0%,#0a0f1a 100%);
    background-attachment: fixed;
  }
  body::before{
    background:radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.25) 100%);
  }
}

/* Optional—gentle background drift */
/*
@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body{ background-size:200% 200%; animation:bg-shift 20s ease-in-out infinite; }
*/

/* ---------- Layout helpers ---------- */
.rounded-sm{border-radius:var(--r-sm)!important}
.rounded-md{border-radius:var(--r-md)!important}
.rounded-lg{border-radius:var(--r-lg)!important}
.rounded-xl{border-radius:var(--r-xl)!important}
.shadow-1{box-shadow:var(--elev-1)!important}
.shadow-2{box-shadow:var(--elev-2)!important}

/* =========================================================
   NAVBAR – Glass + classic Bootstrap 3 markup compatible
   ========================================================= */
.navbar{
  border:0!important;
  background:rgba(255,255,255,.55);
  background: color-mix(in oklab, var(--panel), transparent 35%);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-radius:var(--r-lg);
  margin:14px auto; padding-block:10px; max-width:1180px;
  box-shadow:var(--elev-1);
}
@media (max-width:991px){ .navbar{ border-radius:0; margin:0; } }
.navbar-brand{ font-weight:800; letter-spacing:.2px; color:var(--ink)!important; }
.navbar-nav>li>a{
  color:var(--ink-dim)!important; font-weight:600; padding:12px 16px; border-radius:10px;
  transition: background var(--speed) ease, color var(--speed) ease, transform var(--speed) ease;
}
.navbar-nav>li>a:hover{ color:var(--ink)!important; background:rgba(39,67,247,.08); }

/* Hamburger transform to X */
.navbar-toggle{ border:0; border-radius:12px; padding:10px 12px; background:transparent; margin:6px 12px; }
.navbar-toggle:hover{ background:rgba(39,67,247,.10); }
.navbar-toggle:focus{ outline:0; box-shadow:0 0 0 4px var(--ring); }
.navbar-toggle .icon-bar{
  background-color:var(--ink); width:22px; height:2px; border-radius:2px;
  transition: transform var(--speed), opacity var(--speed), width var(--speed);
}
.navbar-toggle .icon-bar + .icon-bar{ margin-top:5px; }
.navbar-toggle[aria-expanded="true"] .icon-bar:nth-of-type(1){ transform:translateY(7px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] .icon-bar:nth-of-type(2){ opacity:0; width:0; }
.navbar-toggle[aria-expanded="true"] .icon-bar:nth-of-type(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   TYPOGRAPHY & LINKS
   ========================================================= */
h1,h2,h3{ color:var(--ink); letter-spacing:.2px; }
h1{ font-weight:800 } h2{ font-weight:700 } h3{ font-weight:700 }
a{ color:var(--brand); transition: color var(--speed), opacity var(--speed); }
a:hover{ opacity:.9 }

/* =========================================================
   BUTTONS – Bold primary + micro-interactions
   ========================================================= */
.btn{
  border-radius:12px; font-weight:800; letter-spacing:.2px;
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus{ outline:0; box-shadow:0 0 0 4px var(--ring); }

.btn-primary{
  background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand), #000 12%));
  border-color: color-mix(in oklab, var(--brand), #000 20%);
  color:#fff;
  box-shadow: 0 10px 26px color-mix(in oklab, var(--brand), transparent 60%);
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--ink); }
.btn-ghost:hover{ background: color-mix(in oklab, var(--panel), #000 4%); }

/* Icon spacing for Lucide/Feather */
.icon-left{ margin-right:.5em; display:inline-block; translate:0 1px; }
.icon-right{ margin-left:.5em; display:inline-block; translate:0 1px; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; }
.btn-icon i{ width:20px; height:20px; }

/* =========================================================
   FORMS – Inputs/text boxes with soft elevation
   ========================================================= */
.form-control{
  border-radius:12px; border:1px solid var(--border);
  background:var(--panel); color:var(--ink); padding:10px 12px;
  box-shadow:var(--elev-1);
  transition:border-color var(--speed), box-shadow var(--speed), background var(--speed);
}
.form-control:focus{
  border-color: color-mix(in oklab, var(--brand), #000 20%);
  box-shadow: 0 0 0 4px var(--ring), var(--elev-2);
  outline:0;
}
.input-group-addon, .input-group-btn .btn{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), #000 3%);
  color:var(--ink-dim);
}
.help-block{ color:#94a3b8 }

/* Larger, clearer checkboxes/radios */
.checkbox input[type="checkbox"], .radio input[type="radio"]{ transform:scale(1.15); accent-color:var(--brand); }

/* Validations */
.has-success .form-control{ border-color:#22c55e }
.has-warning .form-control{ border-color:#f59e0b }
.has-error   .form-control{ border-color:#ef4444 }

/* =========================================================
   CARDS / PANELS / WELLS – unified, shadowed
   ========================================================= */
.panel, .well, .thumbnail, .jumbotron{
  border:1px solid var(--border)!important;
  border-radius:var(--r-lg);
  background:var(--panel);
  box-shadow:var(--elev-1);
}
.panel-heading{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel), #000 3%),
    color-mix(in oklab, var(--panel), #000 6%));
  border-bottom:1px solid var(--border)!important;
  border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);
  color:var(--ink); font-weight:800;
}
.panel:hover{ box-shadow:var(--elev-2); transition:box-shadow var(--speed); }

/* Optional stronger "card" variant */
.card{ border-radius:var(--r-lg); box-shadow:var(--elev-2); }

/* =========================================================
   TABLES – hover lift + shaded header
   ========================================================= */
.table{
  border-collapse:separate!important; border-spacing:0;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--elev-1);
}
.table>thead>tr>th{
  border-bottom:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), #000 4%);
  color:var(--ink); font-weight:800;
}
.table>tbody>tr>td, .table>thead>tr>th{
  border-top:1px solid color-mix(in oklab, var(--border), transparent 25%);
}
.table-hover>tbody>tr{ transition: background var(--speed), transform var(--speed); }
.table-hover>tbody>tr:hover{
  background: color-mix(in oklab, var(--panel), #000 3%);
  transform: translateY(-1px);
}
.table-striped>tbody>tr:nth-of-type(odd){
  background: color-mix(in oklab, var(--panel), #000 2.5%);
}
/* responsive wrapper keeps rounded/shadow look */
.table-responsive{ border:0; box-shadow:var(--elev-1); border-radius:var(--r-lg); }

/* =========================================================
   NAV TABS / PILLS
   ========================================================= */
.nav-tabs{ border-bottom:1px solid var(--border); }
.nav-tabs>li>a{
  border:0!important; margin-right:8px; border-radius:12px 12px 0 0;
  color:var(--ink-dim); padding:10px 14px; transition: background var(--speed), color var(--speed);
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover{
  background:var(--panel); color:var(--ink); box-shadow:0 -2px 0 var(--brand) inset;
}
.nav-pills>li>a{ border-radius:12px; color:var(--ink-dim); }
.nav-pills>li.active>a{ background:var(--brand); color:#fff; }

/* =========================================================
   ALERTS / BADGES / BREADCRUMBS
   ========================================================= */
.alert{
  border-radius:var(--r-md); border:1px solid var(--border);
  box-shadow:var(--elev-1);
  background: color-mix(in oklab, var(--panel), #000 2%);
  color:var(--ink);
}
.label, .badge{ border-radius:999px; padding:.35em .6em; font-weight:700; }
.label-primary, .badge-primary{ background:var(--brand); color:#fff; }
.breadcrumb{
  background: color-mix(in oklab, var(--panel), #000 3%);
  border:1px solid var(--border); border-radius:999px; padding:8px 14px; color:var(--ink-dim);
}

/* =========================================================
   MODALS / PROGRESS / TOOLTIP
   ========================================================= */
.modal-content{
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--panel); box-shadow:var(--elev-2);
}
.modal-header{ border-bottom:1px solid var(--border); }
.modal-footer{ border-top:1px solid var(--border); }
.progress{
  background: color-mix(in oklab, var(--panel), #000 6%);
  border-radius:999px; box-shadow:var(--elev-1);
}
.progress-bar{
  background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand), #000 14%));
  border-radius:999px;
}
.tooltip .tooltip-inner{ background:var(--ink); color:#fff; border-radius:8px; text-align:left; }
.tooltip.top .tooltip-arrow{ border-top-color:var(--ink); }

/* =========================================================
   ACCESSIBILITY – Focus rings on tabbables
   ========================================================= */
a:focus, button:focus, [role="button"]:focus, .nav>li>a:focus{
  outline:0; box-shadow:0 0 0 4px var(--ring);
}

/* =========================================================
   SPACING FOR MAIN CONTENT (optional wrapper)
   ========================================================= */
.main-content, .page-wrapper, #content-area{
  background: color-mix(in oklab, var(--panel), rgba(255,255,255,.6));
  border-radius:var(--r-xl);
  box-shadow: 0 10px 40px rgba(2,6,23,.06), inset 0 0 30px rgba(255,255,255,.1);
  padding:2rem;
}

/* =========================================================
   PRINT TWEAK
   ========================================================= */
@media print{
  .navbar{ box-shadow:none; background:#fff }
  body::before{ display:none }
}