/* Akili UI Kit (glassmorphism + theme tokens) */
:root{
  --bg0:#070B16;
  --bg1:#0B1024;
  --panel: rgba(16, 24, 46, .62);
  --panel2: rgba(16, 24, 46, .42);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);
  --text:#EAF0FF;
  --muted:#A9B3D1;
  --muted2:#7F8AB0;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow2: 0 12px 32px rgba(0,0,0,.38);
  --gold:#F1B231;
  --blue:#2E72FF;
  --green:#25C26E;
  --red:#F06565;
  --radius:18px;
  --sidebar: 268px;
}

/* Light theme */
:root[data-theme="light"]{
  --bg0:#EEF2FF;
  --bg1:#F7FAFF;
  --panel: rgba(255,255,255,.78);
  --panel2: rgba(255,255,255,.62);
  --border: rgba(15,23,42,.10);
  --border2: rgba(15,23,42,.14);
  --text:#0B1220;
  --muted:#475569;
  --muted2:#64748B;
  --shadow: 0 18px 50px rgba(15,23,42,.16);
  --shadow2: 0 12px 32px rgba(15,23,42,.14);
}

html, body{height:100%;}
body{
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(46,114,255,.22), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(241,178,49,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

/* Scrollbar */
*{scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background: rgba(148,163,184,.35); border-radius: 999px;}
*::-webkit-scrollbar-track{background: transparent;}

/* Shell */
.ak-shell{min-height:100vh; display:flex;}
.ak-sidebar{
  width: var(--sidebar);
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.18));
  backdrop-filter: blur(12px);
}
:root[data-theme="light"] .ak-sidebar{background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));}

/* Sidebar photo ambience (to match screenshot) */
.ak-sidebar{position: sticky; overflow: hidden;}
.ak-sidebar::before{
  content:"";
  position:absolute; inset:-18px;
  background-image: url('/static/img/hero.jpg');
  background-size: cover;
  background-position: left center;
  filter: blur(10px) saturate(1.05) brightness(.62);
  opacity: .35;
  transform: scale(1.06);
  pointer-events:none;
}
:root[data-theme="light"] .ak-sidebar::before{
  filter: blur(10px) saturate(1.05) brightness(1.12);
  opacity: .22;
}
.ak-sidebar > *{position: relative; z-index: 1;}

.ak-main{flex:1; min-width:0; padding: 18px 22px 28px;}

.ak-topbar{
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
}

.ak-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}
.ak-card.soft{background: var(--panel2);}

.ak-hero{
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  overflow:hidden;
  position: relative;
  background: #0B1024;
  box-shadow: var(--shadow);
}
.ak-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('/static/img/hero.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05) brightness(.85);
  transform: scale(1.03);
}
.ak-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,10,22,.65), rgba(6,10,22,.20) 60%, rgba(6,10,22,.55));
}
:root[data-theme="light"] .ak-hero::after{background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.25) 60%, rgba(255,255,255,.62));}
.ak-hero > *{position: relative; z-index: 1;}

/* Sidebar bits */
.ak-brand{display:flex; align-items:center; gap:10px; padding: 8px 10px 14px;}
.ak-brand .mark{
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(46,114,255,.95), rgba(241,178,49,.85));
  box-shadow: 0 14px 40px rgba(46,114,255,.22);
}
.ak-brand .word{font-weight: 800; letter-spacing: .12em; font-size: 20px;}

.ak-user{
  display:flex; gap:12px; align-items:center;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.ak-avatar{width:42px;height:42px;border-radius:999px;background: rgba(148,163,184,.30); border: 1px solid var(--border2);}
.ak-user .name{font-weight: 700; font-size: 14px; line-height: 1.1;}
.ak-user .role{font-size: 12px; color: var(--muted);}

.ak-nav{margin-top: 14px; display:flex; flex-direction:column; gap: 6px;}
.ak-nav a{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
  text-decoration:none;
  border: 1px solid transparent;
  position: relative;
}
.ak-nav-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.10);
}
.ak-nav a .ico{width: 18px; height: 18px; opacity: .95;}
.ak-nav a:hover{background: rgba(148,163,184,.10); border-color: var(--border);}
.ak-nav a.active{background: rgba(241,178,49,.16); border-color: rgba(241,178,49,.30);}
.ak-nav a.active::before{
  content:"";
  position:absolute;
  left: -14px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(241,178,49,1), rgba(241,178,49,.55));
  box-shadow: 0 0 18px rgba(241,178,49,.35);
}
.ak-nav a.active .ak-nav-ico{
  background: linear-gradient(135deg, rgba(241,178,49,.95), rgba(241,178,49,.70));
  border-color: rgba(241,178,49,.35);
  color: #101423;
}
.ak-nav .muted{color: var(--muted); font-size: 12px; padding: 8px 12px; margin-top: 10px;}

/* Buttons */
.ak-btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.12);
  color: var(--text);
  text-decoration:none;
  font-weight: 650;
}
.ak-btn:hover{filter: brightness(1.05);}
.ak-btn.primary{background: linear-gradient(135deg, rgba(241,178,49,.95), rgba(241,178,49,.75)); border-color: rgba(241,178,49,.35); color: #101423;}
.ak-btn.dark{background: rgba(15,23,42,.55);}
:root[data-theme="light"] .ak-btn.dark{background: rgba(15,23,42,.08);}

.ak-pill{display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border:1px solid var(--border);
  background: rgba(148,163,184,.10); color: var(--muted); font-size: 12px;
}

/* Stat tiles */
.ak-stat{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 92px;
}
.ak-stat .label{font-size: 13px; color: var(--muted); font-weight: 650;}
.ak-stat .value{font-size: 42px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;}
.ak-stat .icon{
  width: 40px; height: 40px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border);
  background: rgba(148,163,184,.10);
}
.ak-stat.gold{background: linear-gradient(180deg, rgba(241,178,49,.20), rgba(16,24,46,.55));}
.ak-stat.blue{background: linear-gradient(180deg, rgba(46,114,255,.18), rgba(16,24,46,.55));}
.ak-stat.green{background: linear-gradient(180deg, rgba(37,194,110,.16), rgba(16,24,46,.55));}
.ak-stat.gray{background: linear-gradient(180deg, rgba(148,163,184,.12), rgba(16,24,46,.55));}

/* Tables */
.ak-tabs{display:flex; gap: 8px;}
.ak-tab{padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-weight: 700; font-size: 13px;}
.ak-tab.active{background: rgba(241,178,49,.18); border-color: rgba(241,178,49,.35); color: var(--text);} 

.ak-row{border: 1px solid var(--border); border-radius: 16px; padding: 12px 12px; display:flex; align-items:center; justify-content:space-between; gap: 12px; background: rgba(15,23,42,.26);} 
:root[data-theme="light"] .ak-row{background: rgba(255,255,255,.55);} 

.ak-badge{padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; border:1px solid var(--border);} 
.ak-badge.approved{background: rgba(37,194,110,.16); border-color: rgba(37,194,110,.30); color: #BFF4D6;} 
:root[data-theme="light"] .ak-badge.approved{color: #0B6B3A;} 
.ak-badge.pending{background: rgba(241,178,49,.16); border-color: rgba(241,178,49,.30); color: #FFE7B0;} 
:root[data-theme="light"] .ak-badge.pending{color: #7A4E00;} 
.ak-badge.checked{background: rgba(46,114,255,.16); border-color: rgba(46,114,255,.30); color: #CFE0FF;} 
:root[data-theme="light"] .ak-badge.checked{color:#1F4EB8;} 

/* Neutral / danger states */
.ak-badge.neutral{background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.32); color: rgba(226,232,240,.92);} 
:root[data-theme="light"] .ak-badge.neutral{color:#334155;} 
.ak-badge.danger{background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.30); color: #FECACA;} 
:root[data-theme="light"] .ak-badge.danger{color:#991B1B;} 

/* Inputs */
.ak-input{width:100%; border-radius: 14px; border: 1px solid var(--border); background: rgba(148,163,184,.10); color: var(--text); padding: 10px 12px;} 
:root[data-theme="light"] .ak-input{background: rgba(15,23,42,.04);} 
.ak-input:focus{outline:none; border-color: rgba(46,114,255,.55); box-shadow: 0 0 0 4px rgba(46,114,255,.16);} 

/* Responsive */
@media (max-width: 980px){
  .ak-sidebar{display:none;}
  .ak-main{padding: 14px 12px 22px;}
}

/* ------------------------------------------------------------------
   Tailwind compatibility layer
   Many legacy templates still use Tailwind utility *color* classes.
   We keep Tailwind loaded, but force palette + surfaces to match Akili UI
   so pages don't look "mixed".
------------------------------------------------------------------- */

/* Surfaces */
.ak-main .bg-white{ background: var(--card) !important; }
.ak-main .bg-slate-900{ background: rgba(15,23,42,.55) !important; }
:root[data-theme="light"] .ak-main .bg-slate-900{ background: rgba(15,23,42,.10) !important; color: #0B1220 !important; }

/* Borders */
.ak-main .border{ border-color: var(--border) !important; }
.ak-main .border-slate-200,
.ak-main .border-slate-300,
.ak-main .border-slate-400{ border-color: var(--border) !important; }

/* Text palette */
.ak-main .text-slate-400{ color: var(--muted2) !important; }
.ak-main .text-slate-500,
.ak-main .text-slate-600{ color: var(--muted) !important; }
.ak-main .text-slate-700,
.ak-main .text-slate-800,
.ak-main .text-slate-900{ color: var(--text) !important; }

/* Shadows */
.ak-main .shadow,
.ak-main .shadow-sm,
.ak-main .shadow-md,
.ak-main .shadow-lg{ box-shadow: var(--shadow2) !important; }

/* Rounding */
.ak-main .rounded-2xl{ border-radius: var(--radius) !important; }
.ak-main .rounded-xl{ border-radius: 16px !important; }
.ak-main .rounded-lg{ border-radius: 14px !important; }

/* Inputs / selects */
.ak-main input.mt-1.w-full.rounded-xl.border,
.ak-main select.mt-1.w-full.rounded-xl.border,
.ak-main textarea.mt-1.w-full.rounded-xl.border{
  background: rgba(148,163,184,.10) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .ak-main input.mt-1.w-full.rounded-xl.border,
:root[data-theme="light"] .ak-main select.mt-1.w-full.rounded-xl.border,
:root[data-theme="light"] .ak-main textarea.mt-1.w-full.rounded-xl.border{
  background: rgba(15,23,42,.04) !important;
}

/* Table headings in legacy screens */
.ak-main thead tr{ color: var(--muted) !important; }


/* -------------------------------------------------------
   FIXES: missing --card + input typing visibility
-------------------------------------------------------- */

/* Define card token used by compatibility layer */
:root{
  --card: var(--panel);
}
:root[data-theme="light"]{
  --card: var(--panel);
}

/* Inputs: caret + placeholder clarity */
.ak-input{
  caret-color: var(--text);
}
.ak-input::placeholder{
  color: var(--muted2);
  opacity: 1;
}

/* Autofill (Chrome/Edge/Safari) — prevents "white text" while typing */
input.ak-input:-webkit-autofill,
textarea.ak-input:-webkit-autofill,
select.ak-input:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  box-shadow: 0 0 0px 1000px rgba(148,163,184,.10) inset !important;
  border: 1px solid var(--border) !important;
}

/* Light theme autofill background */
:root[data-theme="light"] input.ak-input:-webkit-autofill,
:root[data-theme="light"] textarea.ak-input:-webkit-autofill,
:root[data-theme="light"] select.ak-input:-webkit-autofill{
  box-shadow: 0 0 0px 1000px rgba(15,23,42,.04) inset !important;
}

/* Compatibility layer fix: your bg-white override should use --card safely */
.ak-main .bg-white{ background: var(--card) !important; }

/* Force-fix any stray Tailwind inputs in dark mode */
.ak-main input,
.ak-main textarea,
.ak-main select {
  color: var(--text) !important;
  background: rgba(148,163,184,.10) !important;
  border-color: var(--border) !important;
}

:root[data-theme="light"] .ak-main input,
:root[data-theme="light"] .ak-main textarea,
:root[data-theme="light"] .ak-main select {
  background: rgba(15,23,42,.04) !important;
  color: var(--text) !important;
}

/* Make sure bg-white doesn't ruin dark mode cards */
.ak-main .bg-white {
  background: var(--panel) !important;
}