/*
  ACONT Task 5 — Conversation-first redesign v2
  Applied design direction:
  - UI/UX Pro Max: accessible, responsive, data-dense institutional product UI
  - Taste Skill: trust-first/public-sector, restrained motion, anti-template composition
  - Impeccable: fewer nested cards, tinted neutrals, consistent hierarchy, purposeful polish

  Design read: a public-sector academic operations product for students and administrators.
  Tone: calm, trustworthy, premium, precise. Not an AI-SaaS aesthetic.
  Dials: DESIGN_VARIANCE 3 / MOTION_INTENSITY 2 / VISUAL_DENSITY 5.
*/

:root {
  --sr-ink-950:#081923;
  --sr-ink-900:#0c2534;
  --sr-ink-800:#123447;
  --sr-ink-700:#1d4a5d;
  --sr-teal-700:#0b6d66;
  --sr-teal-600:#0e8278;
  --sr-teal-500:#15968a;
  --sr-teal-100:#dcefeb;
  --sr-gold-700:#8f651f;
  --sr-gold-600:#91611d;
  --sr-gold-500:#c5953d;
  --sr-paper:#ffffff;
  --sr-canvas:#f5f7f6;
  --sr-soft:#eae8e1;
  --sr-line:#dde5e2;
  --sr-muted:#53666d;
  --sr-muted-2:#61747b;
  --sr-danger:#a94141;
  --sr-success:#13755d;
  --sr-warning:#95651e;
  --sr-radius-xs:7px;
  --sr-radius-sm:10px;
  --sr-radius-md:14px;
  --sr-radius-lg:18px;
  --sr-shadow-1:0 1px 2px rgba(8,25,35,.035),0 8px 24px rgba(8,25,35,.045);
  --sr-shadow-2:0 18px 46px rgba(8,25,35,.10);
  --sr-ease:cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior:smooth; }
html.dark { --sr-muted:#aec3bd; --sr-muted-2:#aec3bd; }
body[data-design-system="skill-redesign-v2"] {
  background:var(--sr-canvas)!important;
  color:var(--sr-ink-950)!important;
  font-variant-numeric:tabular-nums;
}
.dark body[data-design-system="skill-redesign-v2"] {
  background:#091219!important;
  color:#edf3f4!important;
}

/* Quiet canvas: content and status carry the visual hierarchy. */
body[data-design-system="skill-redesign-v2"] main { background:var(--sr-canvas)!important; }
.dark body[data-design-system="skill-redesign-v2"] main { background:#091219!important; }
main > .tabpage { max-width:1440px!important; }

/* ---------- Login ---------- */
#acont-login-frame {
  width:min(1180px,100%)!important;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr)!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 32px 90px rgba(2,12,18,.34)!important;
}
#acont-login-story {
  min-height:600px!important;
  padding:56px 58px!important;
  background:var(--sr-ink-950)!important;
  isolation:isolate;
}
#acont-login-story::before,#acont-login-story::after { display:none!important; }
.login-story-mark img { border-radius:10px!important; }
.login-story-eyebrow { color:#8bd1c8!important; letter-spacing:.14em!important; }
.login-story-title {
  max-width:640px;
  font-size:48px!important;
  letter-spacing:-.058em!important;
  line-height:1.02!important;
  text-wrap:balance;
}
.login-story-sub { max-width:560px!important; color:#b7c7ce!important; font-size:14px!important; }
.login-story-points { margin-top:40px!important; gap:18px!important; }
.login-story-point { border-top-color:rgba(255,255,255,.14)!important; padding-top:16px!important; }
.login-story-point span { color:#93a5ad!important; }
#acont-login-card {
  min-height:600px!important;
  padding:60px 54px!important;
  background:var(--sr-paper)!important;
}
.dark #acont-login-card { background:#0e1b24!important; }
.login-form-kicker { color:var(--sr-teal-700)!important; }
.login-form-title { color:var(--sr-ink-900)!important; letter-spacing:-.045em!important; }
.login-form-copy { color:var(--sr-muted)!important; }
#acont-login-card input {
  min-height:48px!important;
  border-radius:10px!important;
  box-shadow:inset 0 1px 0 rgba(12,37,52,.02)!important;
}
.login-security-note {
  border-radius:10px!important;
  background:#f1f0ea!important;
  border-color:#dfddd4!important;
}
#login-page > .absolute.inset-0:first-child { opacity:.14!important; filter:saturate(.55) contrast(.85); }

/* ---------- Sidebar ---------- */
#sidebar {
  width:268px!important;
  background:var(--sr-ink-950)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  color:#d9e4e8!important;
}
.dark #sidebar { background:#07131b!important; border-right-color:#172934!important; }
#sidebar .h-\[76px\] { height:78px!important; border-bottom:1px solid rgba(255,255,255,.07)!important; }
#sidebar-brand p:first-child { color:#f7fbfb!important; letter-spacing:-.03em!important; }
#sidebar-brand p:last-child { color:#a5bac3!important; letter-spacing:.12em!important; }
#sidebar nav { scrollbar-color:#34505f transparent; }
#sidebar .section-heading {
  color:#9eb4bd!important;
  font-size:11px!important;
  letter-spacing:.15em!important;
  margin-bottom:7px!important;
}
.sidebar-item {
  min-height:44px!important;
  margin:2px 11px!important;
  padding:10px 12px!important;
  border-radius:9px!important;
  color:#9fb1b9!important;
  font-weight:600!important;
  transform:none!important;
}
.sidebar-item svg { width:17px!important; height:17px!important; stroke-width:1.8!important; }
.sidebar-item:hover:not(.active) {
  background:rgba(255,255,255,.055)!important;
  color:#f2f7f7!important;
}
.sidebar-item.active {
  background:rgba(21,150,138,.14)!important;
  color:#9be1d8!important;
  box-shadow:inset 0 0 0 1px rgba(84,188,176,.12)!important;
}
.sidebar-item.active::before {
  left:-11px!important;
  width:3px!important;
  height:24px!important;
  background:var(--sr-gold-500)!important;
  border-radius:0 3px 3px 0!important;
}
#btn-logout {
  min-height:44px!important;
  color:#9fb1b9!important;
  border-color:rgba(255,255,255,.07)!important;
}
#btn-logout:hover { background:rgba(255,255,255,.055)!important; color:#fff!important; border-color:rgba(255,255,255,.12)!important; }
#sidebar-collapse-btn { color:#8ca3ad!important; }

/* ---------- Top bar ---------- */
#app-shell > .flex-1 > header {
  height:70px!important;
  padding-left:28px!important;
  padding-right:28px!important;
  background:rgba(253,252,248,.92)!important;
  border-bottom:1px solid var(--sr-line)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
}
.dark #app-shell > .flex-1 > header { background:rgba(10,20,27,.92)!important; border-bottom-color:#20323d!important; }
#global-search-input { font-size:12.5px!important; }
#global-search-results { border-radius:12px!important; box-shadow:var(--sr-shadow-2)!important; }
#app-shell > .flex-1 > header button { min-height:40px; }
#app-shell > .flex-1 > header .bg-gradient-to-br {
  background:var(--sr-teal-700)!important;
  box-shadow:none!important;
  border:2px solid rgba(197,149,61,.38)!important;
}
#top-name { color:var(--sr-ink-900)!important; }
.dark #top-name { color:#eff6f7!important; }

/* ---------- General visual system ---------- */
.acont-page-head { margin-bottom:24px!important; }
.acont-page-head .eyebrow {
  color:var(--sr-teal-700)!important;
  font-size:12px!important;
  letter-spacing:.11em!important;
}
.acont-page-head h1 {
  color:var(--sr-ink-900)!important;
  font-size:30px!important;
  letter-spacing:-.045em!important;
  line-height:1.12!important;
  text-wrap:balance;
}
.dark .acont-page-head h1 { color:#eef5f6!important; }
.acont-page-head p { color:var(--sr-muted)!important; font-size:13px!important; max-width:68ch!important; }

/* Flatten AI-template cardiness. */
.shadow-card,
main .bg-white.dark\:bg-slate-800,
main .bg-white {
  background:var(--sr-paper)!important;
  border-color:var(--sr-line)!important;
  box-shadow:var(--sr-shadow-1)!important;
}
.dark .shadow-card,
.dark main .bg-white.dark\:bg-slate-800,
.dark main .bg-white {
  background:#0d1a22!important;
  border-color:#263945!important;
  box-shadow:0 1px 2px rgba(0,0,0,.16)!important;
}
main .rounded-2xl { border-radius:var(--sr-radius-md)!important; }
main .rounded-xl { border-radius:var(--sr-radius-sm)!important; }
main .shadow-card:hover { transform:none!important; box-shadow:var(--sr-shadow-1)!important; }

.btn-premium,
main .bg-brand-600,
main button.bg-slate-900 {
  background:var(--sr-ink-900)!important;
  background-image:none!important;
  box-shadow:none!important;
}
.btn-premium:hover,
main .bg-brand-600:hover,
main button.bg-slate-900:hover { background:var(--sr-ink-800)!important; transform:none!important; }
.brand-gradient-text { background:none!important; color:var(--sr-ink-900)!important; -webkit-text-fill-color:initial!important; }
.dark .brand-gradient-text { color:#eef5f6!important; }

button,a,input,select,textarea { transition-duration:180ms!important; transition-timing-function:var(--sr-ease)!important; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--sr-teal-500)!important;
  outline-offset:2px!important;
}
main input,main select,main textarea {
  min-height:42px;
  border-radius:9px!important;
  border-color:#d7d5cc!important;
  background:#fffefb!important;
}
.dark main input,.dark main select,.dark main textarea { background:#0b171f!important; border-color:#30444f!important; }
main input:focus,main select:focus,main textarea:focus { border-color:var(--sr-teal-500)!important; box-shadow:0 0 0 3px rgba(21,150,138,.10)!important; }

/* ---------- Dashboard ---------- */
.dashboard-stack { gap:18px!important; grid-template-columns:minmax(0,1fr) 316px!important; }
.dashboard-main-col,.dashboard-side-col { gap:16px!important; }
.dashboard-hero {
  padding:28px!important;
  color:var(--sr-ink-950)!important;
  background:var(--sr-paper)!important;
  border:1px solid var(--sr-line)!important;
  border-top:1px solid var(--sr-line)!important;
  border-radius:var(--sr-radius-md)!important;
  box-shadow:var(--sr-shadow-1)!important;
}
.dark .dashboard-hero { color:#eef5f6!important; background:#0d1a22!important; border-color:#263945!important; border-top-color:#b38942!important; }
.dashboard-hero::after { display:none!important; }
.dashboard-hero .hero-label { color:var(--sr-teal-700)!important; font-size:11px!important; letter-spacing:.12em!important; }
.dark .dashboard-hero .hero-label { color:#75cfc5!important; }
.dashboard-hero h1 { color:var(--sr-ink-900)!important; font-size:28px!important; max-width:860px!important; }
.dark .dashboard-hero h1 { color:#f2f7f7!important; }
.dashboard-hero .hero-meta { color:var(--sr-muted)!important; }
.dark .dashboard-hero .hero-meta { color:#91a5ae!important; }
.dashboard-hero #sync-status {
  margin-top:16px!important;
  color:#4d615f!important;
  background:#edf5f2!important;
  border-color:#d1e4df!important;
  border-radius:999px!important;
}
.dark .dashboard-hero #sync-status { color:#b8d8d4!important; background:#102b2a!important; border-color:#214944!important; }

.metric-grid {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  overflow:hidden;
  border:1px solid var(--sr-line);
  border-radius:var(--sr-radius-md);
  background:var(--sr-paper);
  box-shadow:var(--sr-shadow-1);
}
.dark .metric-grid { background:#0d1a22; border-color:#263945; }
.metric-card {
  min-height:132px!important;
  padding:20px 22px!important;
  border:0!important;
  border-right:1px solid var(--sr-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.dark .metric-card { border-right-color:#263945!important; background:transparent!important; }
.metric-card:last-child { border-right:0!important; }
.metric-card.is-gold,.metric-card.is-teal,.metric-card.is-navy { border-top:0!important; }
.metric-card::before { display:none; content:""; width:30px; height:2px; margin-bottom:10px; background:var(--sr-teal-500); border-radius:99px; }
.metric-card.is-gold::before { background:var(--sr-gold-500); }
.metric-card.is-navy::before { background:var(--sr-ink-700); }
.metric-label { color:var(--sr-muted)!important; font-size:11px!important; }
.metric-value { color:var(--sr-ink-900)!important; font-size:31px!important; }
.dark .metric-value { color:#f0f6f6!important; }
.metric-foot { color:var(--sr-muted-2)!important; font-size:12px!important; }

.dashboard-compact-card {
  padding:18px!important;
  border-radius:var(--sr-radius-md)!important;
  background:var(--sr-paper)!important;
  border-color:var(--sr-line)!important;
  box-shadow:var(--sr-shadow-1)!important;
}
.dark .dashboard-compact-card { background:#0d1a22!important; border-color:#263945!important; }
.dashboard-compact-card:hover { transform:none!important; }
.dashboard-section-head h2 { color:var(--sr-muted)!important; letter-spacing:.11em!important; }

/* ---------- Data tables ---------- */
main table { border-spacing:0!important; font-variant-numeric:tabular-nums; }
main thead tr { background:#efeee8!important; }
.dark main thead tr { background:#10212b!important; }
.dark main thead th { color:#aec3bd!important; }
main thead th {
  color:#63727b!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
  white-space:nowrap;
}
main tbody td { color:#30424d; }
.dark main tbody td { color:#dce6e9; }
main tbody tr:hover { background:#f6f5f0!important; }
.dark main tbody tr:hover { background:#11222c!important; }
main tbody tr:last-child td { border-bottom:0!important; }

/* ---------- Mapres ---------- */
.mapres-policy-strip {
  grid-template-columns:minmax(320px,1.35fr) repeat(3,minmax(110px,.45fr))!important;
  margin:16px 0 24px!important;
  border-radius:var(--sr-radius-md)!important;
  border-color:var(--sr-line)!important;
  background:var(--sr-paper)!important;
  box-shadow:var(--sr-shadow-1)!important;
}
.dark .mapres-policy-strip { background:#0d1a22!important; border-color:#263945!important; }
.mapres-policy-intro { padding:18px 20px!important; background:#edf4f1!important; }
.dark .mapres-policy-intro { background:#102724!important; }
.mapres-policy-intro strong { color:var(--sr-ink-900)!important; }
.mapres-policy-intro span { color:var(--sr-muted)!important; }
.mapres-weight { padding:16px 18px!important; border-left-color:var(--sr-line)!important; }
.mapres-weight b { color:var(--sr-ink-900)!important; font-size:24px!important; }
.mapres-weight span { color:var(--sr-muted)!important; }
.dark .mapres-weight { border-left-color:#263945!important; }
.dark .mapres-weight b { color:#f0f6f6!important; }
.acont-chip { border-radius:7px!important; padding:5px 8px!important; }
.acont-chip.teal { background:#e8f3f0!important; border-color:#c9e0da!important; color:#0b6d66!important; }
.acont-chip.gold { background:#f8f0df!important; border-color:#ead8b7!important; color:#8f651f!important; }

/* ---------- SIKU / profile emphasis ---------- */
#tab-siku > .bg-white { max-width:820px!important; }
#tab-siku #siku-akhir { color:var(--sr-teal-700)!important; letter-spacing:-.05em!important; }
#tab-profil .from-amber-400,#tab-profil .from-sky-400,#kandidat-banner { background-image:none!important; }
#tab-profil .from-amber-400 { background:var(--sr-gold-600)!important; }
#tab-profil .from-sky-400 { background:var(--sr-ink-800)!important; }
#kandidat-banner { background:var(--sr-ink-900)!important; border:1px solid rgba(255,255,255,.07)!important; box-shadow:var(--sr-shadow-2)!important; }

/* ---------- Agenda ---------- */
#tab-agenda .ag-hero { border-radius:var(--sr-radius-md)!important; box-shadow:var(--sr-shadow-1)!important; }
#tab-agenda .ag-panel,#tab-agenda .ag-source { border-radius:var(--sr-radius-md)!important; }

/* ---------- Admin ---------- */
#tab-admin_settings #activate-mapres-policy { background:var(--sr-teal-700)!important; border-radius:9px!important; min-height:42px; }
#tab-admin_settings #activate-mapres-policy:hover { background:#095e58!important; }

/* ---------- Modals ---------- */
[id^="modal-"] > div {
  border-radius:16px!important;
  border:1px solid var(--sr-line)!important;
  box-shadow:0 28px 80px rgba(8,25,35,.20)!important;
}
.dark [id^="modal-"] > div { border-color:#30444f!important; }
[id^="modal-"] h3 { letter-spacing:-.025em; }

@media (max-width:1199px) {
  .dashboard-stack { grid-template-columns:1fr!important; }
  .dashboard-side-col { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; }
}
@media (max-width:1023px) {
  #acont-login-frame { grid-template-columns:1fr!important; max-width:560px!important; }
  #acont-login-story { display:none!important; }
  #acont-login-card { min-height:auto!important; padding:44px 36px!important; }
  .dashboard-side-col { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .mapres-policy-strip { grid-template-columns:1fr repeat(3,.5fr)!important; }
}
@media (max-width:767px) {
  #app-shell > .flex-1 > header { height:64px!important; padding-left:14px!important; padding-right:14px!important; }
  main { padding:18px 14px 88px!important; }
  .acont-page-head { margin-bottom:18px!important; }
  .acont-page-head h1 { font-size:26px!important; }
  .dashboard-hero { padding:22px 20px!important; }
  .metric-grid { grid-template-columns:1fr!important; }
  .metric-card { min-height:112px!important; border-right:0!important; border-bottom:1px solid var(--sr-line)!important; }
  .dark .metric-card { border-bottom-color:#263945!important; }
  .metric-card:last-child { border-bottom:0!important; }
  .dashboard-side-col,.dashboard-quick-row { grid-template-columns:1fr!important; }
  .mapres-policy-strip { grid-template-columns:1fr!important; }
  .mapres-weight { border-left:0!important; border-top:1px solid var(--sr-line)!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; }
}

@media (prefers-contrast:more) {
  :root { --sr-line:#b8b6ad; --sr-muted:#4e5c64; }
  .sidebar-item { color:#c4d1d6!important; }
}


/* ACONT_LOGIN_DARK_LIVE_FIX_V1 */

/* This file loads after task5-design.css, so dark login
   overrides must live here to beat the generic !important rules. */

.dark #acont-login-card .login-form-kicker {
  color: #4fd1c5 !important;
  -webkit-text-fill-color: #4fd1c5 !important;
}

.dark #acont-login-card .login-form-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.dark #acont-login-card .login-form-copy {
  color: #a8b5bd !important;
  -webkit-text-fill-color: #a8b5bd !important;
}

.dark #acont-login-card label {
  color: #d7e0e5 !important;
  -webkit-text-fill-color: #d7e0e5 !important;
}

.dark #acont-login-card input {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

.dark #acont-login-card input::placeholder {
  color: #8fa1ad !important;
  -webkit-text-fill-color: #8fa1ad !important;
  opacity: 1 !important;
}

.dark #acont-login-card .text-slate-400,
.dark #acont-login-card .text-slate-500 {
  color: #9babb4 !important;
  -webkit-text-fill-color: #9babb4 !important;
}

.dark #acont-login-card > p {
  color: #93a4ae !important;
  -webkit-text-fill-color: #93a4ae !important;
}

.dark #acont-login-card > p a {
  color: #54d6c6 !important;
  -webkit-text-fill-color: #54d6c6 !important;
}


/* ACONT_BREAKDOWN_MODAL_UX_V1 */

/*
 * Keep the Mapres score modal inside the viewport.
 * The backdrop itself scrolls only as a safety net.
 */
#modal-breakdown-skor {
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 24px !important;
}

/*
 * The modal card is the direct child of the backdrop.
 * It may scroll internally, so its top/close controls never
 * disappear above the viewport.
 */
#modal-breakdown-skor > div {
  width: min(100%, 580px) !important;
  max-height: calc(100dvh - 48px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  margin: auto 0 !important;
  scrollbar-gutter: stable;
}

/* Comfortable spacing on small screens. */
@media (max-width: 640px) {
  #modal-breakdown-skor {
    padding: 12px !important;
  }

  #modal-breakdown-skor > div {
    max-height: calc(100dvh - 24px) !important;
    width: 100% !important;
  }
}

/* Operate-mode accessibility and restrained state changes. */
.sidebar-item { width:calc(100% - 22px); text-align:left; font-family:inherit; }
.sidebar-item:focus-visible { outline:2px solid #9be1d8; outline-offset:-2px; }
#sidebar.collapsed { width:84px!important; }
main .tabpage.active { animation:none!important; }
main table { font-size:13px; }
main tbody td { line-height:1.6; }
.dashboard-hero .hero-meta { font-size:14px!important; }
.dashboard-section-head h2 { font-size:12px!important; letter-spacing:.04em!important; }
.metric-label { font-size:13px!important; }
.metric-value { font-size:34px!important; line-height:1.3; }
.metric-foot { line-height:1.6; }
#acont-login-card label { font-size:13px!important; }
#acont-login-card input { font-size:16px; }
#global-search-input:focus-visible { outline-offset:5px!important; }
button:disabled { cursor:not-allowed; }
main .text-slate-400,main .text-slate-500 { color:#53666d!important; }
.dark main .text-slate-400,.dark main .text-slate-500 { color:#aec3bd!important; }
main .text-amber-600,main .text-orange-600 { color:#96540b!important; }
main .text-green-600 { color:#17643b!important; }
.dark main .text-amber-600,.dark main .text-orange-600 { color:#f4c079!important; }
.dark main .text-green-600 { color:#91d3ae!important; }
main .text-brand-600 { color:#0b6d66!important; }
.dark main .text-brand-600 { color:#8bd1c8!important; }
main [class~="text-[10px]"],main [class~="text-[11px]"],.acont-chip { font-size:12px!important; }
#acont-login-story > p { color:#a5bac3!important; }
.login-story-point span { font-size:12px!important; }
@media (max-width:767px) {
  body:has(#mobile-overlay:not(.hidden)) #ask-acont { visibility:hidden; pointer-events:none; }
  #sidebar.collapsed { width:268px!important; }
  #sidebar.collapsed .nav-label,#sidebar.collapsed #sidebar-brand,#sidebar.collapsed .section-heading { display:block!important; }
  #sidebar.collapsed .sidebar-item { justify-content:flex-start!important; padding:10px 12px!important; }
  .dashboard-hero h1 { font-size:24px!important; }
  main { padding:20px 16px 96px!important; }
  .metric-card { padding:18px 14px!important; }
  .metric-grid { grid-template-columns:1fr!important; }
  .metric-card { min-height:100px!important; border-right:0!important; border-bottom:1px solid var(--sr-line)!important; }
  .metric-card:last-child { border-bottom:0!important; }
  .metric-value { font-size:30px!important; }
  #acont-login-card { padding:36px 24px!important; }
}