/* ============================================================================
   SIMITRA — Skin "Segel Audit"
   Inspektorat Kota Semarang · Sistem Informasi Manajemen Integritas
   Lapisan skin di atas Vuexy (Bootstrap 5). Dimuat PALING AKHIR.
   Palet lahir dari dunia pengawasan: tinta surat resmi (navy) + segel kuningan.
   ============================================================================ */

:root {
  /* --- Identitas warna --- */
  --sim-navy:        #1F2A4C;   /* tinta letterhead / primary */
  --sim-navy-700:    #16203c;   /* sidebar */
  --sim-navy-900:    #0f1830;   /* dasar sidebar */
  --sim-navy-soft:   #33406b;   /* hover navy */
  --sim-brass:       #B0873B;   /* segel kuningan / accent */
  --sim-brass-600:   #9a742f;
  --sim-brass-200:   #e7d4a8;
  --sim-paper:       #F3F5F8;   /* kertas dingin */
  --sim-card:        #ffffff;
  --sim-ink:         #2A2F3A;   /* teks utama */
  --sim-muted:       #6b7488;
  --sim-line:        #e3e7ee;   /* garis pisah */

  /* --- Semantik civic (makna hue dijaga, tone diselaraskan) --- */
  --sim-success: #2E7D5B;  --sim-success-bg: #e5f1eb;
  --sim-info:    #2C7A93;  --sim-info-bg:    #e2eef2;
  --sim-warning: #C08A2E;  --sim-warning-bg: #f6ecd8;
  --sim-danger:  #B5442E;  --sim-danger-bg:  #f6e2dd;
  --sim-secondary: #5B6577; --sim-secondary-bg: #e7eaef;

  /* --- Bootstrap bridge --- */
  --bs-primary: var(--sim-navy);
  --bs-primary-rgb: 31, 42, 76;
  --bs-link-color: var(--sim-navy);
  --bs-link-hover-color: var(--sim-brass-600);
  --bs-border-radius: .5rem;

  --sim-font-display: 'Fraunces', Georgia, serif;
  --sim-font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sim-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ============================================================================
   Dasar & tipografi
   ============================================================================ */
body {
  background-color: var(--sim-paper) !important;
  color: var(--sim-ink);
  font-family: var(--sim-font-ui);
}
h1, h2, h3, h4, h5, .card-title, .fw-bold {
  font-family: var(--sim-font-display);
  letter-spacing: -.01em;
}
.text-muted { color: var(--sim-muted) !important; }
code, kbd, .font-mono, .text-mono { font-family: var(--sim-font-mono); }

a { color: var(--sim-navy); }
a:hover { color: var(--sim-brass-600); }

/* ============================================================================
   PRIMARY — Vuexy meng-hardcode ungu sebagai literal (171×). Timpa langsung.
   ============================================================================ */
.btn-primary {
  --bs-btn-bg: var(--sim-navy); --bs-btn-border-color: var(--sim-navy);
  --bs-btn-hover-bg: var(--sim-navy-700); --bs-btn-hover-border-color: var(--sim-navy-700);
  --bs-btn-active-bg: var(--sim-navy-900); --bs-btn-active-border-color: var(--sim-navy-900);
  --bs-btn-disabled-bg: var(--sim-navy); --bs-btn-disabled-border-color: var(--sim-navy);
  background-color: var(--sim-navy) !important;
  border-color: var(--sim-navy) !important;
  color: #fff !important;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .btn-primary:first-child:active {
  background-color: var(--sim-navy-700) !important;
  border-color: var(--sim-navy-700) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--sim-navy) !important; border-color: var(--sim-navy) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--sim-navy) !important; color: #fff !important;
}
.bg-primary { background-color: var(--sim-navy) !important; }
.text-primary { color: var(--sim-navy) !important; }
.border-primary { border-color: var(--sim-navy) !important; }
.badge.bg-primary { background-color: var(--sim-navy) !important; color: #fff !important; }
.bg-label-primary { background-color: #e2e6f0 !important; color: var(--sim-navy) !important; }
.btn-primary:focus-visible, .form-control:focus, .form-select:focus {
  border-color: var(--sim-navy) !important;
  box-shadow: 0 0 0 .18rem rgba(31, 42, 76, .18) !important;
}
.page-item.active .page-link { background-color: var(--sim-navy); border-color: var(--sim-navy); }
.page-link { color: var(--sim-navy); }

/* switches, checkbox, radio */
.form-check-input:checked,
.form-switch .form-check-input:checked,
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked {
  background-color: var(--sim-navy) !important; border-color: var(--sim-navy) !important;
}
.form-check-input:focus { border-color: var(--sim-navy); box-shadow: 0 0 0 .18rem rgba(31,42,76,.18); }
.form-range::-webkit-slider-thumb { background-color: var(--sim-navy); }
.form-range::-moz-range-thumb { background-color: var(--sim-navy); }

/* nav pills & tabs */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--sim-navy) !important; color: #fff !important;
}
.nav-tabs .nav-link.active { color: var(--sim-navy) !important; border-bottom-color: var(--sim-navy) !important; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--sim-navy); }

/* dropdown & list-group aktif */
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--sim-navy) !important; color: #fff !important;
}
.list-group-item.active { background-color: var(--sim-navy) !important; border-color: var(--sim-navy) !important; }

/* accordion terbuka */
.accordion-button:not(.collapsed) { color: var(--sim-navy) !important; background-color: #eef1f6 !important; box-shadow: none; }
.accordion-button:focus { border-color: var(--sim-navy); box-shadow: 0 0 0 .18rem rgba(31,42,76,.18); }

/* link & tint utility */
.link-primary { color: var(--sim-navy) !important; }
.text-white-primary, .btn-label-primary { color: var(--sim-navy) !important; }

/* neutralkan glow ungu (Vuexy: box-shadow rgba(115,103,240,…) ×32) */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:focus-visible {
  box-shadow: 0 .125rem .375rem rgba(31, 42, 76, .35) !important;
}

/* ============================================================================
   SEMANTIK — retint seluruh keluarga (Vuexy hardcode juga). Utility = !important.
   ============================================================================ */
.bg-success { background-color: var(--sim-success) !important; }
.bg-info    { background-color: var(--sim-info) !important; }
.bg-warning { background-color: var(--sim-warning) !important; }
.bg-danger  { background-color: var(--sim-danger) !important; }
.bg-secondary { background-color: var(--sim-secondary) !important; }

.text-success { color: var(--sim-success) !important; }
.text-info    { color: var(--sim-info) !important; }
.text-warning { color: var(--sim-warning) !important; }
.text-danger  { color: var(--sim-danger) !important; }
.text-secondary { color: var(--sim-secondary) !important; }

.badge.bg-success, .btn-success { background-color: var(--sim-success) !important; border-color: var(--sim-success) !important; color: #fff !important; }
.badge.bg-info,    .btn-info    { background-color: var(--sim-info) !important; border-color: var(--sim-info) !important; color: #fff !important; }
.badge.bg-warning, .btn-warning { background-color: var(--sim-warning) !important; border-color: var(--sim-warning) !important; color: #fff !important; }
.badge.bg-danger,  .btn-danger  { background-color: var(--sim-danger) !important; border-color: var(--sim-danger) !important; color: #fff !important; }
.badge.bg-secondary, .btn-secondary { background-color: var(--sim-secondary) !important; border-color: var(--sim-secondary) !important; color: #fff !important; }

.btn-outline-success { color: var(--sim-success) !important; border-color: var(--sim-success) !important; }
.btn-outline-success:hover { background-color: var(--sim-success) !important; color:#fff !important; }
.btn-outline-danger { color: var(--sim-danger) !important; border-color: var(--sim-danger) !important; }
.btn-outline-danger:hover { background-color: var(--sim-danger) !important; color:#fff !important; }

.bg-label-success { background-color: var(--sim-success-bg) !important; color: var(--sim-success) !important; }
.bg-label-info    { background-color: var(--sim-info-bg) !important; color: var(--sim-info) !important; }
.bg-label-warning { background-color: var(--sim-warning-bg) !important; color: var(--sim-warning) !important; }
.bg-label-danger  { background-color: var(--sim-danger-bg) !important; color: var(--sim-danger) !important; }
.bg-label-secondary { background-color: var(--sim-secondary-bg) !important; color: var(--sim-secondary) !important; }

.progress-bar.bg-success { background-color: var(--sim-success) !important; }
.progress-bar.bg-info    { background-color: var(--sim-info) !important; }
.progress-bar.bg-warning { background-color: var(--sim-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--sim-danger) !important; }
.progress-bar.bg-primary { background-color: var(--sim-navy) !important; }
.alert-info { background-color: var(--sim-info-bg); color: #1c4a59; border-color: #bcd7df; }

/* ============================================================================
   SIDEBAR — navy dengan tepi kuningan (selvedge). Signature: segel audit.
   Selektor menyamai spesifisitas Vuexy; skin dimuat terakhir → menang.
   ============================================================================ */
.bg-menu-theme {
  background: linear-gradient(180deg, var(--sim-navy-700) 0%, var(--sim-navy-900) 100%) !important;
  border-right: 3px solid var(--sim-brass);   /* benang selvedge kuningan */
}
.bg-menu-theme .app-brand-text,
.bg-menu-theme .menu-header-text { color: #cfd6e6; }
.bg-menu-theme .menu-header { position: relative; }

/* teks & ikon menu default (Vuexy: #5d596c gelap → tak terbaca) */
.bg-menu-theme .menu-item .menu-link { color: #c4ccdd; }
.bg-menu-theme .menu-item .menu-link .menu-icon { color: #98a2ba; }
.bg-menu-theme .menu-inner > .menu-item > .menu-link .menu-icon { color: #98a2ba; }

/* hover (Vuexy: bg #f8f8f8 → teks putih hilang). Overlay + teks terang. */
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #ffffff !important;
}
.bg-menu-theme .menu-item:not(.active) > .menu-link:hover .menu-icon { color: var(--sim-brass-200) !important; }

/* item aktif — pil navy dalam + bar & segel kuningan */
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: rgba(176, 135, 59, .16) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--sim-brass);
  position: relative;
}
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: var(--sim-brass-200) !important;
}
/* SIGNATURE: cincin segel kuningan di ujung kanan item aktif */
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle)::after {
  content: "";
  position: absolute; right: .85rem; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%;
  border: 2px solid var(--sim-brass);
  box-shadow: 0 0 0 2px rgba(176,135,59,.22), inset 0 0 0 2px var(--sim-navy-900);
  opacity: .95;
}

/* netralkan bar aksen ::before bawaan Vuexy (kita pakai inset kiri sendiri) */
.bg-menu-theme .menu-inner > .menu-item.active::before { background: transparent !important; }

/* submenu & toggle terbuka */
.bg-menu-theme.menu-vertical .menu-sub .menu-link { color: #aab3c8; }
/* toggle .open/.active (Vuexy: background #f4f4f5 terang → teks putih hilang).
   Selektor disamakan persis + !important agar menang. */
.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle {
  background: rgba(176, 135, 59, .14) !important;
  color: #ffffff !important;
}
.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle .menu-icon,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle .menu-icon {
  color: var(--sim-brass-200) !important;
}
.bg-menu-theme .menu-inner .menu-item.open .menu-item.active > .menu-link { color:#fff !important; }
.menu-vertical .menu-item .menu-link .menu-icon { margin-right: .5rem; }

/* glow atas menu (Vuexy: gradien ungu) → fade ke warna sidebar */
.menu-inner-shadow {
  background: linear-gradient(var(--sim-navy-700) 41%, rgba(22,32,60,.6) 95%, rgba(22,32,60,0)) !important;
}
.bg-menu-theme .menu-item .menu-toggle::after { border-color: currentColor; }
.bg-menu-theme .menu-inner::-webkit-scrollbar-thumb { background: rgba(176,135,59,.35); }

/* app-brand: garis pisah tipis kuningan */
.bg-menu-theme .app-brand { border-bottom: 1px solid rgba(176,135,59,.28); padding-bottom: .35rem; }
.app-brand-text { font-family: var(--sim-font-display); letter-spacing: .01em; }

/* identitas bawah sidebar */
.sim-menu-footer {
  color: #8f99b0; font-size: .72rem; line-height: 1.35;
  padding: .9rem 1.4rem; border-top: 1px solid rgba(176,135,59,.2);
  margin-top: .5rem;
}
.sim-menu-footer strong { color: var(--sim-brass-200); font-weight: 600; }

/* ============================================================================
   NAVBAR — terang, tinta navy, garis kuningan tipis
   ============================================================================ */
.layout-navbar, .bg-navbar-theme {
  background: var(--sim-card) !important;
  box-shadow: 0 1px 0 var(--sim-line);
}
.sim-navbar-context {
  font-family: var(--sim-font-display);
  color: var(--sim-navy); font-weight: 600; line-height: 1.15;
}
.sim-navbar-context small {
  display: block; font-family: var(--sim-font-ui);
  font-weight: 500; font-size: .72rem; color: var(--sim-muted); letter-spacing: .02em;
}
.layout-navbar .avatar.avatar-online .avatar-initial,
.layout-navbar .dropdown-user .avatar { border: 2px solid var(--sim-brass-200); border-radius: 50%; }

/* ============================================================================
   KARTU, FORM, TABEL, DATATABLES
   ============================================================================ */
.card {
  background: var(--sim-card);
  border: 1px solid var(--sim-line);
  border-radius: .65rem;
  box-shadow: 0 1px 2px rgba(15, 24, 48, .04);
}
.card-header { border-bottom: 1px solid var(--sim-line); }
.form-control, .form-select { border-color: #d4dae4; color: var(--sim-ink); }
.table > :not(caption) > * > * { border-color: var(--sim-line); }
.table-light, thead.table-light th {
  background-color: #eef1f6 !important; color: var(--sim-navy) !important;
  font-family: var(--sim-font-ui); font-weight: 600;
}
.table-warning, .table-warning > td { background-color: var(--sim-warning-bg) !important; }
div.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--sim-navy) !important; border-color: var(--sim-navy) !important; color:#fff !important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--sim-brass) !important; border-color: var(--sim-brass) !important; color:#fff !important;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.content-footer, .bg-footer-theme { background: transparent !important; }
.footer-link { color: var(--sim-navy); }
.footer-link:hover { color: var(--sim-brass-600); }
.sim-footer-seal { color: var(--sim-brass-600); font-weight: 600; }

/* ============================================================================
   Quality floor
   ============================================================================ */
:focus-visible { outline: 2px solid var(--sim-brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}