/* ACONT Task 5 — Institutional Product System
   Design lane: calm, premium academic operations; information-dense without visual noise.
   No backend/business logic dependency. */
:root {
  --a-navy-950:#071824;
  --a-navy-900:#0b2239;
  --a-navy-800:#11324f;
  --a-navy-700:#184566;
  --a-teal-700:#0f6f68;
  --a-teal-600:#10847a;
  --a-teal-500:#149c8f;
  --a-teal-100:#dff4f0;
  --a-gold-700:#9d6a17;
  --a-gold-600:#b97c1f;
  --a-gold-500:#c9902e;
  --a-ivory:#f7f5ef;
  --a-paper:#fffdfa;
  --a-ink:#13212d;
  --a-muted:#6d7b86;
  --a-line:#e6e4dd;
  --a-success:#17795d;
  --a-danger:#b64040;
  --a-radius-sm:10px;
  --a-radius:16px;
  --a-radius-lg:22px;
  --a-shadow:0 12px 28px rgba(26,41,52,.065);
  --a-shadow-lg:0 24px 60px rgba(15,34,48,.11);
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }
body {
  color:var(--a-ink)!important;
  background:var(--a-ivory)!important;
  background-image:none!important;
  letter-spacing:-.01em;
}
.dark body { color:#edf3f4!important; background:#0b1218!important; background-image:none!important; }

/* Typography and content rhythm */
main { background:
  linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 180px),
  var(--a-ivory); }
.dark main { background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 180px),#0b1218; }
main > .tabpage { max-width:1440px; margin:0 auto; }
.tabpage > h1,
.tabpage > div:first-child > h1,
.tabpage > div:first-child h1 { letter-spacing:-.035em; }

/* Replace generic gradients with restrained institutional brand */
.brand-gradient-text { background:none!important; -webkit-background-clip:initial!important; background-clip:initial!important; color:var(--a-navy-900)!important; }
.dark .brand-gradient-text { color:#e9f5f3!important; }
.btn-premium {
  background:var(--a-navy-900)!important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(11,34,57,.14)!important;
}
.btn-premium:hover { background:var(--a-navy-800)!important; box-shadow:0 10px 24px rgba(11,34,57,.18)!important; filter:none!important; }

/* Login — institutional front door */
#acont-login-frame { width:min(1120px,100%); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr); border-radius:28px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); }
#acont-login-story { position:relative; min-height:650px; padding:58px; color:white; background:linear-gradient(145deg,#071824 0%,#0b2c42 72%,#0f5f5a 140%); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
#acont-login-story::after { content:""; position:absolute; inset:auto -140px -190px auto; width:460px; height:460px; border:1px solid rgba(201,144,46,.28); border-radius:50%; box-shadow:0 0 0 74px rgba(201,144,46,.04),0 0 0 148px rgba(20,156,143,.04); }
.login-story-mark { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.login-story-mark img { width:48px; height:48px; object-fit:contain; border-radius:14px; padding:6px; background:rgba(255,255,255,.96); }
.login-story-copy { position:relative; z-index:1; max-width:560px; }
.login-story-eyebrow { color:#8fddd4; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.login-story-title { margin:14px 0 18px; font-size:clamp(36px,4vw,58px); line-height:1.04; font-weight:800; letter-spacing:-.055em; text-wrap:balance; }
.login-story-sub { max-width:500px; color:#c8d6dc; font-size:15px; line-height:1.8; }
.login-story-points { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:34px; }
.login-story-point { border-top:1px solid rgba(255,255,255,.16); padding-top:13px; }
.login-story-point strong { display:block; color:#fff; font-size:13px; }
.login-story-point span { display:block; color:#9fb0b8; font-size:11px; margin-top:4px; line-height:1.5; }
#acont-login-card { min-height:650px; padding:58px 52px; background:rgba(255,253,250,.98); display:flex; flex-direction:column; justify-content:center; }
.dark #acont-login-card { background:rgba(14,24,31,.985); }
.login-form-kicker { color:var(--a-teal-700); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.login-form-title { margin-top:8px; font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.04em; color:var(--a-navy-900); }
.dark .login-form-title { color:#f1f7f7; }
.login-form-copy { margin-top:9px; color:#78858e; font-size:13px; line-height:1.65; }
#acont-login-card input { border-radius:12px!important; background:#fff!important; border-color:#deddd6!important; min-height:48px; }
.dark #acont-login-card input { background:#111c24!important; border-color:#2d3a43!important; }
.login-security-note { margin-top:20px; padding:13px 14px; border:1px solid #e5e2d9; border-radius:12px; background:#f7f5ef; color:#68747d; font-size:10.5px; line-height:1.55; }
.dark .login-security-note { border-color:#293740; background:#101a21; color:#98a6ad; }

/* Sidebar */
#sidebar {
  width:272px;
  background:#fffdfa!important;
  border-right:1px solid var(--a-line)!important;
  box-shadow:none!important;
}
.dark #sidebar { background:#0c151c!important; border-right-color:#22303a!important; }
#sidebar > .h-1 { height:0!important; }
#sidebar .h-\[76px\] { height:82px!important; border-bottom:0!important; }
#sidebar-brand p:first-child { color:var(--a-navy-900)!important; font-size:18px!important; }
.dark #sidebar-brand p:first-child { color:#edf5f4!important; }
#sidebar-brand p:last-child { color:#8a959d!important; letter-spacing:.08em; text-transform:uppercase; font-size:9px!important; }
.section-heading { color:#9aa3aa!important; font-size:9px!important; letter-spacing:.16em!important; }
.sidebar-item {
  min-height:42px;
  margin:3px 12px!important;
  border-radius:11px!important;
  padding:10px 12px!important;
  color:#687782!important;
  font-weight:600!important;
  gap:11px!important;
}
.sidebar-item svg { width:17px; height:17px; }
.sidebar-item.active {
  background:#edf6f3!important;
  color:var(--a-teal-700)!important;
  box-shadow:none!important;
}
.dark .sidebar-item.active { background:#112c2b!important; color:#75d2c7!important; }
.sidebar-item.active::before { left:-12px!important; width:3px!important; height:22px!important; background:var(--a-gold-500)!important; }
.sidebar-item:hover:not(.active) { background:#f2f1ec!important; color:var(--a-navy-900)!important; transform:none!important; }
.dark .sidebar-item:hover:not(.active) { background:#14212a!important; color:#edf5f4!important; }

/* Top bar */
#app-shell > .flex-1 > header {
  height:76px!important;
  background:rgba(247,245,239,.88)!important;
  border-bottom:1px solid rgba(213,211,202,.8)!important;
  backdrop-filter:blur(18px)!important;
}
.dark #app-shell > .flex-1 > header { background:rgba(11,18,24,.9)!important; border-bottom-color:#22303a!important; }
#global-search-input { letter-spacing:-.01em; }
#global-search-input::placeholder { color:#9ba3a8!important; }

/* Shared surfaces */
.shadow-card,
main .bg-white.dark\:bg-slate-800,
main .bg-white {
  border-color:#e7e4dc!important;
  box-shadow:var(--a-shadow)!important;
}
.dark .shadow-card,
.dark main .bg-white.dark\:bg-slate-800,
.dark main .bg-white { border-color:#25333d!important; box-shadow:0 12px 28px rgba(0,0,0,.22)!important; }
main .shadow-card:hover { transform:none!important; box-shadow:0 16px 34px rgba(25,44,57,.09)!important; }
.dark main .shadow-card:hover { box-shadow:0 16px 34px rgba(0,0,0,.28)!important; }

/* Tables */
main table { border-collapse:separate; border-spacing:0; }
main thead tr { background:#f5f3ed!important; }
.dark main thead tr { background:#101b23!important; }
main thead th { color:#78858e!important; font-size:9.5px!important; letter-spacing:.11em!important; }
main tbody tr { transition:background-color .15s ease; }
main tbody tr:hover { background:#faf9f5!important; }
.dark main tbody tr:hover { background:#111f28!important; }

/* Inputs */
main input,main select,main textarea { border-radius:11px!important; }
main input:focus,main select:focus,main textarea:focus { box-shadow:0 0 0 3px rgba(20,156,143,.11)!important; }

/* Page header utility */
.acont-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px; }
.acont-page-head .eyebrow { color:var(--a-teal-700); font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.acont-page-head h1 { margin-top:5px; font-size:27px; font-weight:800; letter-spacing:-.04em; color:var(--a-navy-900); }
.dark .acont-page-head h1 { color:#f1f6f7; }
.acont-page-head p { margin-top:6px; color:#74818a; font-size:12.5px; line-height:1.6; max-width:720px; }

/* Dashboard */
.dashboard-hero { position:relative; padding:30px 32px; border-radius:22px; overflow:hidden; color:white; background:var(--a-navy-900); box-shadow:var(--a-shadow-lg); }
.dashboard-hero::after { content:""; position:absolute; right:-80px; top:-110px; width:310px; height:310px; border-radius:50%; border:1px solid rgba(99,211,197,.18); box-shadow:0 0 0 55px rgba(99,211,197,.04),0 0 0 110px rgba(201,144,46,.035); pointer-events:none; }
.dashboard-hero .hero-label { position:relative; z-index:1; color:#7bd9ce; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.dashboard-hero h1 { position:relative; z-index:1; margin-top:8px; max-width:760px; font-size:clamp(26px,3vw,38px)!important; line-height:1.12; letter-spacing:-.045em!important; color:white!important; }
.dashboard-hero .hero-meta { position:relative; z-index:1; margin-top:9px; color:#b7c7cf!important; }
.dashboard-hero #sync-status { position:relative; z-index:1; margin-top:18px!important; color:#dce7eb!important; background:rgba(255,255,255,.075)!important; border:1px solid rgba(255,255,255,.11); }
.dashboard-hero #sync-status-dot { background:#59d3b4!important; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.metric-card { min-height:136px; padding:20px 22px; border-radius:16px; border:1px solid #e6e4dd; background:var(--a-paper); box-shadow:var(--a-shadow); display:flex; flex-direction:column; justify-content:space-between; }
.dark .metric-card { background:#101b23; border-color:#25333d; }
.metric-label { color:#7a8790; font-size:11px; font-weight:700; }
.metric-value { margin-top:4px; color:var(--a-navy-900); font-size:29px; font-weight:800; letter-spacing:-.04em; }
.dark .metric-value { color:#f1f6f7; }
.metric-foot { color:#9aa3a9; font-size:10.5px; line-height:1.45; }
.metric-card.is-gold { border-top:3px solid var(--a-gold-500); }
.metric-card.is-teal { border-top:3px solid var(--a-teal-500); }
.metric-card.is-navy { border-top:3px solid var(--a-navy-700); }
.dashboard-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:11px; }
.dashboard-section-head h2 { color:#78858d!important; font-size:9.5px!important; letter-spacing:.14em!important; text-transform:uppercase; }
.dashboard-stack { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.dashboard-main-col,.dashboard-side-col { display:flex; flex-direction:column; gap:18px; }
.dashboard-quick-row { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.dashboard-compact-card { background:var(--a-paper); border:1px solid #e7e4dc; border-radius:16px; box-shadow:var(--a-shadow); padding:20px; }
.dark .dashboard-compact-card { background:#101b23; border-color:#25333d; }

/* Mapres */
.mapres-policy-strip { margin:18px 0 26px; display:grid; grid-template-columns:1.25fr repeat(3,.55fr); border:1px solid #dfe5df; border-radius:18px; overflow:hidden; background:#fffdfa; box-shadow:var(--a-shadow); }
.dark .mapres-policy-strip { background:#101b23; border-color:#25333d; }
.mapres-policy-intro { padding:20px 22px; background:#f0f6f4; }
.dark .mapres-policy-intro { background:#102421; }
.mapres-policy-intro strong { display:block; color:var(--a-navy-900); font-size:14px; }
.dark .mapres-policy-intro strong { color:#eef6f6; }
.mapres-policy-intro span { display:block; margin-top:5px; color:#738089; font-size:11px; line-height:1.55; }
.mapres-weight { padding:18px; border-left:1px solid #e6e4dd; display:flex; flex-direction:column; justify-content:center; }
.dark .mapres-weight { border-left-color:#25333d; }
.mapres-weight b { color:var(--a-navy-900); font-size:22px; letter-spacing:-.035em; }
.dark .mapres-weight b { color:#f2f7f7; }
.mapres-weight span { margin-top:2px; color:#7e8990; font-size:10.5px; }
#mapres-legacy-rubric[data-modern-policy="true"],
#mapres-manual-submission[data-modern-policy="true"] { display:none!important; }
#mapres-modern-note { display:none; }
#mapres-modern-note[data-visible="true"] { display:block; }

/* Status chips */
.acont-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:800; border:1px solid #dfe5e1; background:#f5f8f7; color:#526861; }
.acont-chip.gold { border-color:#ecd9b6; background:#fff8e9; color:#97681e; }
.acont-chip.teal { border-color:#cbe9e3; background:#edf8f5; color:#0f766e; }

/* Modal refinement */
[id^="modal-"] > div { border-radius:20px!important; border:1px solid rgba(226,224,216,.95)!important; box-shadow:0 28px 80px rgba(8,24,36,.18)!important; }
.dark [id^="modal-"] > div { border-color:#2a3944!important; }
.ask-suggestions { display:flex; gap:6px; overflow-x:auto; padding:9px 18px 4px; scrollbar-width:none; }
.ask-suggestions::-webkit-scrollbar { display:none; }
.ask-suggestion { flex:none; padding:7px 9px!important; border-radius:999px!important; border:1px solid #dfe3df!important; background:#fff!important; color:#53666c!important; font-size:10px!important; font-weight:700!important; white-space:nowrap; }
.dark .ask-suggestion { background:#101d25!important; border-color:#30404a!important; color:#b7c8cc!important; }

/* Dark mode */
.dark .metric-card,.dark .dashboard-compact-card { color:#eaf2f3; }
.dark .mapres-policy-intro span,.dark .metric-foot { color:#91a0a8; }

/* Responsive */
@media (max-width:1023px) {
  #acont-login-frame { grid-template-columns:1fr; max-width:540px; }
  #acont-login-story { display:none; }
  #acont-login-card { min-height:auto; padding:42px 34px; }
  .dashboard-stack { grid-template-columns:1fr; }
  .dashboard-side-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mapres-policy-strip { grid-template-columns:1fr repeat(3,.5fr); }
}
@media (max-width:767px) {
  #app-shell > .flex-1 > header { height:68px!important; }
  main { padding:20px 16px!important; }
  .dashboard-hero { padding:24px 22px; border-radius:18px; }
  .metric-grid,.dashboard-side-col,.dashboard-quick-row { grid-template-columns:1fr; }
  .mapres-policy-strip { grid-template-columns:1fr; }
  .mapres-weight { border-left:0; border-top:1px solid #e6e4dd; flex-direction:row; align-items:center; justify-content:space-between; }
  .dark .mapres-weight { border-top-color:#25333d; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-hero::after { display:none; }
}

/* Feature-specific calm color treatment */
#tab-profil .from-amber-400 { background-image:none!important; background-color:var(--a-gold-600)!important; }
#tab-profil .from-sky-400 { background-image:none!important; background-color:var(--a-navy-800)!important; }
#tab-skpm .bg-brand-600 { background:var(--a-navy-900)!important; }
#tab-siku > .bg-white { max-width:760px!important; }
#tab-siku #siku-akhir { font-size:clamp(32px,5vw,56px)!important; color:var(--a-teal-700)!important; }
.dark #tab-siku #siku-akhir { color:#70d4c8!important; }
#kandidat-banner { background:var(--a-navy-900)!important; box-shadow:var(--a-shadow-lg)!important; }
#kandidat-banner .blur-3xl { opacity:.35; }

/* Admin settings: less alarming, more governance-oriented */
#tab-admin_settings #activate-mapres-policy { background:var(--a-teal-700)!important; border-radius:10px!important; }
#tab-admin_settings button.bg-slate-900 { background:var(--a-navy-900)!important; }

/* Micro interaction restraint */
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid rgba(20,156,143,.75); outline-offset:2px; }
#mapres-modern-policy-strip[data-visible="false"] { display:none; }
#mapres-modern-policy-strip[data-visible="true"] { display:grid; }


/* ACONT_UI_FINAL_V2 */

/* Theme control: balanced size, not oversized / microscopic */
.theme-toggle-pill {
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
}

.theme-toggle-knob {
  width:18px!important;
  height:18px!important;
  top:2px!important;
  left:2px!important;
}

/* Modern Mapres already explains the policy in the policy strip.
   Remove the redundant automatic-SKPM info card. */
#mapres-modern-note {
  display:none!important;
}

/* Mapres dark-mode readability */
.dark #tab-mapres {
  color:#dce7eb;
}

.dark #tab-mapres .shadow-card,
.dark #tab-mapres .dashboard-compact-card,
.dark #tab-mapres .bg-white,
.dark #tab-mapres .bg-slate-50 {
  background:#101b23!important;
  border-color:#25333d!important;
}

.dark #tab-mapres .text-slate-900,
.dark #tab-mapres .text-slate-800,
.dark #tab-mapres .text-slate-700,
.dark #tab-mapres h1,
.dark #tab-mapres h2,
.dark #tab-mapres h3,
.dark #tab-mapres h4 {
  color:#edf4f5!important;
}

.dark #tab-mapres .text-slate-600,
.dark #tab-mapres .text-slate-500,
.dark #tab-mapres .text-slate-400 {
  color:#9daeb6!important;
}

.dark #tab-mapres table {
  color:#dce7eb!important;
}

.dark #tab-mapres thead tr {
  background:#12212a!important;
}

.dark #tab-mapres thead th {
  color:#93a5ae!important;
}

.dark #tab-mapres tbody td {
  color:#dbe5e8;
  border-color:#25333d!important;
}

.dark #tab-mapres tbody tr {
  border-color:#25333d!important;
}

.dark .mapres-policy-intro {
  background:#102421!important;
}

.dark .mapres-policy-intro strong,
.dark .mapres-policy-intro h2,
.dark .mapres-policy-intro h3 {
  color:#edf7f5!important;
}

.dark .mapres-policy-intro span,
.dark .mapres-policy-intro p {
  color:#9fb0b7!important;
}

/* Dashboard Mapres table */
.dark #dash-tabel-status td {
  color:#dce7eb;
  border-color:#25333d!important;
}



/* ACONT_LOGIN_DARK_FIX_V1 */
.dark #acont-login-card .login-form-title {
  color: #f4f7f8 !important;
}

.dark #acont-login-card .login-form-copy {
  color: #94a3b8 !important;
}

.dark #acont-login-card label {
  color: #cbd5e1;
}