/*
 * Tema warna SATU SIMRS untuk simetrisnet (Bootstrap 3 / Yeti).
 * Sumber token: satusimrs/DESIGN.md. Dimuat setelah bootstrap.css dan style.css
 * di template/views/header.php, jadi hanya menimpa warna, font, dan bentuk.
 */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --ss-primary: #00a99d;
  --ss-primary-hover: #00877e;
  --ss-primary-fg: #ffffff;
  --ss-deep-green: #06403b;
  --ss-mint: #e3f6f4;
  --ss-background: #f7faf9;
  --ss-foreground: #1e3430;
  --ss-card: #ffffff;
  --ss-muted: #f0f4f2;
  --ss-muted-fg: #4a5d58;
  --ss-placeholder: #748680;
  --ss-border: #dce5e1;
  --ss-input-stroke: #cbd8d3;
  --ss-lime: #c4d82e;
  --ss-lime-wash: #eef5c9;
  --ss-lime-ink: #35400b;
  --ss-info: #1677a8;
  --ss-success: #27864b;
  --ss-warning: #e1ad16;
  --ss-warning-fg: #332500;
  --ss-destructive: #e7000b;
  --ss-btn-disabled: #ced3d1;
  --ss-btn-disabled-fg: #46514d;
  --ss-btn-disabled-border: #7f8985;
  --ss-ring: rgba(0, 169, 157, 0.5);
  --ss-radius-md: 8px;
  --ss-radius-xl: 14px;
  --ss-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ss-font: "Inter Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@supports (color: oklch(0 0 0)) {
  :root { --ss-destructive: oklch(0.577 0.245 27.325); }
}

/* ---------- Dasar ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ss-font);
  font-size: 14px;
  line-height: 1.43;
  color: var(--ss-foreground);
  background-color: var(--ss-background);
  font-feature-settings: "cv11";
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, textarea, .tooltip, .popover {
  font-family: var(--ss-font);
}
h1, h2, h3, h4, h5, h6 { color: var(--ss-foreground); }
::selection { background: var(--ss-mint); color: var(--ss-deep-green); }
a { color: var(--ss-deep-green); text-underline-offset: 2px; }
a:hover, a:focus { color: var(--ss-primary-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ss-ring); outline-offset: 2px; }
hr { border-top-color: var(--ss-border); }
.text-muted, .help-block { color: var(--ss-muted-fg); }
.text-primary { color: var(--ss-deep-green); }
.text-success { color: var(--ss-success); }
.text-info { color: var(--ss-info); }
.text-warning { color: #8a6500; }
.text-danger { color: var(--ss-destructive); }
.bg-primary { background-color: var(--ss-primary); color: var(--ss-primary-fg); }
legend { color: var(--ss-foreground); border-bottom-color: var(--ss-border); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ss-muted); }
::-webkit-scrollbar-thumb { background: var(--ss-input-stroke); border-radius: 9999px; border: 2px solid var(--ss-muted); }

/* ---------- Topbar ----------
 * Desktop: nama aplikasi dan menu dalam satu baris (flex). Bila lebar layar tidak cukup
 * (menu simetrisnet ±1.300px, lebih panjang untuk akun dokter), menu otomatis turun ke
 * baris kedua. Navbar sticky (bukan fixed) agar konten tidak tertutup saat membungkus.
 */
/* app.js mengisi padding-top body setinggi navbar (untuk navbar fixed); sticky tidak membutuhkannya */
body { padding-top: 0 !important; }
.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.navbar { min-height: 56px; margin-bottom: 20px; border-radius: 0; }
.navbar-inverse { background-color: var(--ss-deep-green); border: 0; }
.navbar-inverse .navbar-brand {
  height: 56px;
  margin-left: 16px;
  padding: 18px 16px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: var(--ss-lime); }
.navbar-inverse .navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: var(--ss-lime-ink);
  background-color: var(--ss-lime);
}
.navbar-inverse .navbar-nav .caret { margin-left: 2px; }
.navbar-inverse .navbar-toggle { margin-top: 11px; margin-bottom: 11px; border-color: rgba(255, 255, 255, 0.3); }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: rgba(255, 255, 255, 0.1); }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: rgba(255, 255, 255, 0.12); }
.navbar-inverse .dropdown-menu { background-color: var(--ss-card); border: 1px solid var(--ss-border); }
.navbar-inverse .dropdown-menu > li > a { color: var(--ss-foreground); }
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > .active > a,
.navbar-inverse .dropdown-menu > .active > a:hover { color: var(--ss-deep-green); background-color: var(--ss-mint); }
@media (min-width: 768px) {
  #topnavbar > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 56px;
    padding: 0 12px 0 8px;
  }
  .navbar-inverse .navbar-header { float: none; flex: none; }
  .navbar-inverse .navbar-brand { margin-left: 0; }
  /* flex-basis auto = lebar menu satu baris; tidak muat -> pindah ke baris berikutnya */
  .navbar-inverse .navbar-collapse {
    flex: 1 0 auto;
    padding: 0;
    border: 0;
  }
  .navbar-inverse .navbar-collapse > .navbar-nav {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .navbar-inverse .navbar-nav > li > a {
    padding: 13px 8px;
    line-height: 18px;
    border-radius: 6px;
  }
  .navbar-inverse .navbar-nav > li:last-child { margin-left: auto; }
  /* menu memakai kelas navbar-right, sehingga Bootstrap meratakan dropdown ke kanan
     dan terpotong di tepi kiri layar; ratakan ke kiri tombolnya */
  .navbar-inverse .navbar-nav > li > .dropdown-menu { left: 0; right: auto; margin-top: 2px; border-radius: var(--ss-radius-md); }
  /* dropdown terakhir sebelum LOGOUT (TOOLS) dekat tepi kanan: ratakan ke kanan */
  .navbar-inverse .navbar-nav > li.dropdown:nth-last-child(2) > .dropdown-menu { left: auto; right: 0; }
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-brand { margin-left: 0; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: rgba(255, 255, 255, 0.86); }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.1); }
}

/* ---------- Dropdown ---------- */
.dropdown-menu {
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  box-shadow: 0 8px 24px rgba(6, 64, 59, 0.12);
  font-size: 13px;
}
.dropdown-menu > li > a { color: var(--ss-foreground); padding: 6px 14px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--ss-deep-green); background-color: var(--ss-mint); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: var(--ss-primary-fg); background-color: var(--ss-primary); }

/* ---------- Tombol ---------- */
.btn {
  border-radius: var(--ss-radius-md);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.btn:active, .btn.active { transform: translateY(1px); box-shadow: none; }
.btn:focus, .btn.focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.btn-sm, .btn-group-sm > .btn { font-size: 13px; border-radius: var(--ss-radius-md); }
.btn-xs, .btn-group-xs > .btn { font-size: 12px; border-radius: 6px; }

.btn-default {
  color: var(--ss-foreground);
  background-color: var(--ss-background);
  border-color: var(--ss-input-stroke);
  box-shadow: var(--ss-shadow-xs);
}
.btn-default:hover, .btn-default:focus, .btn-default.focus,
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
  color: var(--ss-foreground);
  background-color: var(--ss-muted);
  border-color: var(--ss-input-stroke);
}

.btn-primary { color: var(--ss-primary-fg); background-color: var(--ss-primary); border-color: var(--ss-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover, .btn-primary:active:focus {
  color: var(--ss-primary-fg); background-color: var(--ss-primary-hover); border-color: var(--ss-primary-hover);
}

.btn-success { color: #ffffff; background-color: var(--ss-success); border-color: var(--ss-success); }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
  color: #ffffff; background-color: #20703f; border-color: #20703f;
}

.btn-info { color: #ffffff; background-color: var(--ss-info); border-color: var(--ss-info); }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
  color: #ffffff; background-color: #12648e; border-color: #12648e;
}

.btn-warning { color: var(--ss-warning-fg); background-color: var(--ss-warning); border-color: var(--ss-warning); }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
  color: var(--ss-warning-fg); background-color: #c99a12; border-color: #c99a12;
}

/* Batal/Hapus: wash merah dengan teks merah (DESIGN.md) */
.btn-danger { color: var(--ss-destructive); background-color: #fdecec; border-color: #f7c4c4; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
  color: var(--ss-destructive); background-color: #fbdcdc; border-color: #f0a9a9;
}

.btn-link { color: var(--ss-deep-green); }
.btn-link:hover, .btn-link:focus { color: var(--ss-primary-hover); }

.btn.disabled, .btn[disabled], fieldset[disabled] .btn,
.btn.disabled:hover, .btn[disabled]:hover, fieldset[disabled] .btn:hover {
  color: var(--ss-btn-disabled-fg);
  background-color: var(--ss-btn-disabled);
  border-color: var(--ss-btn-disabled-border);
  opacity: 0.3;
  box-shadow: none;
}

/* ---------- Form ---------- */
label, .control-label { color: var(--ss-foreground); font-size: 12px; font-weight: 500; }
.form-control {
  height: 36px;
  padding: 4px 10px;
  font-size: 14px;
  color: var(--ss-foreground);
  background-color: #ffffff;
  border: 1px solid var(--ss-input-stroke);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-shadow-xs);
}
textarea.form-control { height: auto; }
.form-control::placeholder { color: var(--ss-placeholder); }
.form-control:focus { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-ring); outline: none; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  color: var(--ss-foreground);
  background-color: var(--ss-muted);
  border-color: var(--ss-border);
  box-shadow: none;
  opacity: 1;
}
.input-group-addon { color: var(--ss-muted-fg); background-color: var(--ss-muted); border-color: var(--ss-input-stroke); border-radius: var(--ss-radius-md); font-size: 14px; }
.input-group .form-control:first-child, .input-group-btn:first-child > .btn, .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .form-control:last-child, .input-group-btn:last-child > .btn, .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-btn > .btn { height: 36px; }
.has-error .form-control, .has-error .form-control:focus { border-color: var(--ss-destructive); box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.2); }
.has-error .help-block, .has-error .control-label { color: var(--ss-destructive); }
.has-warning .form-control { border-color: var(--ss-warning); }
.has-success .form-control { border-color: var(--ss-success); }

/* ---------- Kontainer ---------- */
.well {
  background-color: var(--ss-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-shadow-xs);
}
.panel { border-radius: var(--ss-radius-xl); border-color: var(--ss-border); box-shadow: var(--ss-shadow-xs); }
.panel-default > .panel-heading { color: var(--ss-foreground); background-color: var(--ss-muted); border-color: var(--ss-border); }
.panel-primary { border-color: var(--ss-border); }
.panel-primary > .panel-heading { color: #ffffff; background-color: var(--ss-deep-green); border-color: var(--ss-deep-green); }
.panel-success > .panel-heading { color: var(--ss-success); background-color: #e6f2ea; border-color: #b5d6c1; }
.panel-info > .panel-heading { color: var(--ss-info); background-color: #e5f0f6; border-color: #b3d1e2; }
.panel-warning > .panel-heading { color: var(--ss-warning-fg); background-color: #fbf3d9; border-color: #efd27f; }
.panel-danger > .panel-heading { color: var(--ss-destructive); background-color: #fdecec; border-color: #f7c4c4; }
.panel-heading { border-top-left-radius: 13px; border-top-right-radius: 13px; }
/* Bootstrap memberi .panel-title 17px (mengalahkan aturan h4); judul panel/akordeon = title 14px/600 */
.panel-title, .panel-title > a, .panel-title > small { font-size: 14px; font-weight: 600; line-height: 1.43; }
.panel-footer { background-color: var(--ss-background); border-top-color: var(--ss-border); }
.modal-content { border: 1px solid var(--ss-border); border-radius: var(--ss-radius-xl); box-shadow: 0 20px 40px rgba(6, 64, 59, 0.18); }
.modal-header, .modal-footer { border-color: var(--ss-border); }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-backdrop.in { opacity: 0.2; }

/* ---------- Status ---------- */
.alert { border-radius: var(--ss-radius-md); border-width: 1px; font-size: 13px; color: var(--ss-foreground); }
.alert-info { background-color: #e8f1f6; border-color: #a2c9dc; }
.alert-success { background-color: #e9f3ed; border-color: #a9cfb7; }
.alert-warning { background-color: #fcf5e0; border-color: #edcd73; }
.alert-danger { background-color: #fdecec; border-color: #f4b4b4; }
.alert-danger, .alert-danger a { color: #a80008; }
.alert .alert-link { color: inherit; }

.label { border-radius: 9999px; font-weight: 500; padding: 0.25em 0.7em; }
.label-default { background-color: var(--ss-muted); color: var(--ss-muted-fg); }
.label-primary { background-color: var(--ss-primary); }
.label-success { background-color: var(--ss-success); }
.label-info { background-color: var(--ss-info); }
.label-warning { background-color: var(--ss-warning); color: var(--ss-warning-fg); }
.label-danger { background-color: var(--ss-destructive); }
.badge:not(.btn) { background-color: var(--ss-deep-green); font-weight: 600; }
.progress-bar { background-color: var(--ss-primary); }
.progress-bar-success { background-color: var(--ss-success); }
.progress-bar-info { background-color: var(--ss-info); }
.progress-bar-warning { background-color: var(--ss-warning); }
.progress-bar-danger { background-color: var(--ss-destructive); }

/* ---------- Navigasi ---------- */
.nav-tabs { border-bottom-color: var(--ss-border); }
.nav-tabs > li > a { color: var(--ss-muted-fg); border-radius: var(--ss-radius-md) var(--ss-radius-md) 0 0; }
.nav-tabs > li > a:hover { background-color: var(--ss-muted); border-color: var(--ss-border); color: var(--ss-foreground); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--ss-primary-fg); background-color: var(--ss-primary); border-color: var(--ss-primary);
}
.nav-pills > li > a { border-radius: var(--ss-radius-md); color: var(--ss-foreground); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: var(--ss-primary); color: var(--ss-primary-fg); }
.list-group-item { border-color: var(--ss-border); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color: var(--ss-mint); border-color: var(--ss-border); color: var(--ss-deep-green); }
.pagination > li > a, .pagination > li > span { color: var(--ss-foreground); background-color: var(--ss-background); border-color: var(--ss-input-stroke); }
.pagination > li > a:hover, .pagination > li > span:hover { color: var(--ss-foreground); background-color: var(--ss-muted); border-color: var(--ss-input-stroke); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover {
  color: var(--ss-primary-fg); background-color: var(--ss-primary); border-color: var(--ss-primary);
}

/* ---------- Tabel ---------- */
.table { color: var(--ss-foreground); font-size: 12px; font-variant-numeric: tabular-nums; }
.table > thead > tr > th { background-color: var(--ss-muted); color: var(--ss-foreground); font-weight: 600; border-bottom: 1px solid var(--ss-border); }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-top-color: var(--ss-border); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th { border-color: var(--ss-border); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafcfb; }
.table-hover > tbody > tr:hover { background-color: rgba(0, 169, 157, 0.1); }

/* ---------- Footer & loader ---------- */
#maincontainer > hr { border-top-color: var(--ss-border); }
#maincontainer > footer { color: var(--ss-muted-fg); font-size: 12px; padding-bottom: 16px; }
#loading-notif.label-primary { background-color: var(--ss-deep-green); }

/* ---------- Halaman masuk (info/views/view_login.php) ----------
 * Mengikuti halaman login APP V2 SATU SIMRS (apps/src/src/pages/LoginPage.vue + .brand-* di style.css):
 * panel identitas bergradasi di kiri (>=1024px) dan kartu "Selamat datang" di kanan.
 */
.ss-auth-page { margin: 0; background-color: var(--ss-background); color: var(--ss-foreground); -webkit-font-smoothing: antialiased; }
.ss-auth { display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; }
.ss-auth p { margin: 0; }
.ss-auth svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Panel identitas */
.ss-auth__brand { display: none; }
.ss-auth__logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.ss-auth__logo img { width: 36px; height: 36px; object-fit: contain; }
.ss-auth__org { margin: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.6); }
.ss-auth__hero { position: relative; z-index: 1; margin: auto 0; max-width: 576px; padding: 64px 0 96px; }
.ss-auth__hero .ss-auth__identity { margin-bottom: 20px; }
.ss-auth__lead { max-width: 448px; margin-top: 18px !important; font-size: 15px; line-height: 28px; color: rgba(255, 255, 255, 0.65); }
.ss-auth__headline {
  max-width: 512px;
  margin: 0;
  font-size: 44px !important;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ss-lime);
}
.ss-auth__grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom right, black, transparent 80%);
  mask-image: linear-gradient(to bottom right, black, transparent 80%);
}
.ss-auth__orbit { position: absolute; border: 1px solid rgba(141, 224, 215, 0.14); border-radius: 9999px; }
.ss-auth__orbit--one {
  right: -13rem;
  bottom: -14rem;
  width: 34rem;
  height: 34rem;
  box-shadow: 0 0 0 58px rgba(0, 169, 157, 0.04), 0 0 0 116px rgba(0, 169, 157, 0.03);
}
.ss-auth__orbit--two { right: 5rem; top: 22%; width: 7rem; height: 7rem; border-color: rgba(196, 216, 46, 0.12); }

/* Panel form */
.ss-auth__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #eef8f5 0%, #f4faf8 45%, var(--ss-background) 100%);
}
.ss-auth__glow {
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 28rem;
  height: 28rem;
  border-radius: 9999px;
  background: rgba(0, 169, 157, 0.07);
  filter: blur(16px);
  pointer-events: none;
}
.ss-auth__inner { position: relative; z-index: 1; width: 100%; max-width: 440px; }
/* Header hijau pengganti panel identitas di layar sempit (<1024px) */
.ss-auth__mobile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 0%, rgba(15, 180, 206, 0.22), transparent 45%),
    linear-gradient(145deg, #073f3a 0%, #053630 58%, #042d29 100%);
  box-shadow: 0 6px 20px rgba(6, 64, 59, 0.18);
}
.ss-auth__mobile-identity .ss-auth__logo { width: 44px; height: 44px; border-radius: 12px; }
.ss-auth__mobile-identity .ss-auth__logo img { width: 32px; height: 32px; }
.ss-auth__mobile-identity .ss-auth__org { font-size: 9px; letter-spacing: 0.18em; }
.ss-auth__app { margin: 2px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ss-lime); }
.ss-auth__card {
  overflow: hidden;
  border: 1px solid rgba(6, 64, 59, 0.18);
  border-radius: var(--ss-radius-xl);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 80px rgba(6, 64, 59, 0.1);
}
.ss-auth__card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(circle at 100% 0%, rgba(15, 180, 206, 0.35), transparent 55%),
    linear-gradient(135deg, #00897f 0%, #06403b 100%);
}
.ss-auth__card-header::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -64px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(196, 216, 46, 0.25);
  border-radius: 9999px;
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.ss-auth__key {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--ss-lime);
}
.ss-auth__key svg { width: 21px; height: 21px; stroke-width: 1.8; }
.ss-auth__key circle { fill: currentColor; }
.ss-auth__card-header > div:last-child { position: relative; z-index: 1; }
.ss-auth__title { margin: 0; font-size: 20px !important; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: #ffffff; }
.ss-auth__subtitle { margin-top: 3px !important; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.ss-auth__card-body { padding: 20px 24px 24px; }

.ss-auth .messengger .alert {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(231, 0, 11, 0.3);
  border-radius: var(--ss-radius-md);
  background-color: rgba(231, 0, 11, 0.05);
  box-shadow: var(--ss-shadow-xs);
  color: #a80008;
  font-size: 13px;
  line-height: 1.5;
}
.ss-auth .messengger .alert p { margin: 0; }
.ss-auth .messengger .alert-warning { border-color: rgba(225, 173, 22, 0.55); background-color: #fdf6e3; color: var(--ss-warning-fg); }
.ss-auth__alert-title { margin-bottom: 4px !important; font-weight: 600; }

.ss-auth__fields { display: flex; flex-direction: column; gap: 20px; }
.ss-auth__field label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: #244942; }
.ss-auth__control { position: relative; }
.ss-auth__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  stroke-width: 1.7;
  color: var(--ss-muted-fg);
  pointer-events: none;
}
.ss-auth__control input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 8px 12px 8px 40px;
  border: 1px solid var(--ss-input-stroke);
  border-radius: var(--ss-radius-md);
  background-color: #ffffff;
  color: var(--ss-foreground);
  font: inherit;
  font-size: 14px;
  box-shadow: var(--ss-shadow-xs);
  outline: none;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
  -moz-appearance: textfield;
}
.ss-auth__control input::-webkit-outer-spin-button,
.ss-auth__control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-auth__control input.has-action { padding-right: 44px; }
.ss-auth__control input::placeholder { color: var(--ss-placeholder); }
.ss-auth__control input:focus { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-auth__control input[aria-invalid="true"] { border-color: rgba(231, 0, 11, 0.55); }
.ss-auth__eye, .ss-auth__refresh {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ss-muted-fg);
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.ss-auth__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.ss-auth__eye:hover, .ss-auth__refresh:hover { background-color: var(--ss-muted); color: var(--ss-foreground); }
.ss-auth__eye:focus-visible, .ss-auth__refresh:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ss-ring); }
.ss-auth__eye svg, .ss-auth__refresh svg { width: 17px; height: 17px; stroke-width: 2; }
.ss-auth__captcha { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ss-auth__captcha img {
  height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--ss-input-stroke);
  border-radius: var(--ss-radius-md);
  background-color: #ffffff;
}
.ss-auth__refresh { width: 44px; height: 44px; border: 1px solid var(--ss-input-stroke); background-color: #ffffff; }
.ss-auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 24px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--ss-radius-md);
  background-color: var(--ss-primary);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--ss-shadow-xs);
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.ss-auth__submit svg { width: 16px; height: 16px; stroke-width: 2; }
.ss-auth__submit:hover { background-color: var(--ss-primary-hover); }
.ss-auth__submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-auth__submit:active { transform: translateY(1px); }
.ss-auth__submit[disabled] {
  background-color: var(--ss-btn-disabled);
  color: var(--ss-btn-disabled-fg);
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}
.ss-auth__note { margin-top: 20px !important; text-align: center; font-size: 11px; color: var(--ss-muted-fg); }

@media (min-width: 640px) {
  .ss-auth__panel { padding: 32px; }
  .ss-auth__card-header { padding: 24px 32px; }
  .ss-auth__card-body { padding: 24px 32px 32px; }
}
@media (min-width: 1024px) {
  .ss-auth { display: grid; grid-template-columns: minmax(420px, 0.92fr) minmax(540px, 1.08fr); }
  .ss-auth__mobile-identity { display: none; }
  .ss-auth__panel { min-height: 100vh; }
  .ss-auth__brand {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    padding: 40px 48px;
    color: #ffffff;
    background:
      radial-gradient(circle at 86% 18%, rgba(15, 180, 206, 0.2), transparent 28%),
      linear-gradient(145deg, #073f3a 0%, #053630 58%, #042d29 100%);
  }
  .ss-auth__identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
  .ss-auth__panel { padding: 32px 48px; }
}
@media (min-width: 1280px) {
  .ss-auth__brand { padding: 48px 64px; }
  .ss-auth__headline { font-size: 56px !important; }
  .ss-auth__panel { padding: 32px 80px; }
}

/* ---------- Judul halaman ----------
 * style.css memaksa h1 30px; DESIGN.md: teks terbesar di halaman 16px, hierarki dari bobot.
 */
h1, .h1 { font-size: 16px !important; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
h2, .h2 { font-size: 16px; font-weight: 700; }
h3, .h3 { font-size: 15px; font-weight: 600; }
h4, .h4 { font-size: 14px; font-weight: 600; }
h5, .h5, h6, .h6 { font-size: 13px; font-weight: 600; }
legend { font-size: 15px; font-weight: 600; }
.navbar-inverse .navbar-collapse:not(:has(li)) { display: none !important; }

/* ---------- Loader ---------- */
img[src*="loader.gif"] { content: url("../images/ss-spinner.svg"); width: 48px; height: 48px; }
.show-loading:after {
  background: rgba(247, 250, 249, 0.85) url("../images/ss-spinner.svg") center calc(50% - 50px) / 48px 48px no-repeat !important;
  color: var(--ss-muted-fg);
  font-weight: 500 !important;
}
#loading .div-notif .label { background-color: var(--ss-deep-green); font-size: 12px; font-weight: 500; }

/* ---------- Plugin: Select2 / Selectize / Chosen ---------- */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple,
body .select2-container--bootstrap4 .select2-selection {
  min-height: 36px;
  border: 1px solid var(--ss-input-stroke);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-shadow-xs);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: var(--ss-foreground); padding-left: 10px; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ss-placeholder); }
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 3px var(--ss-ring);
}
body .select2-dropdown { border-color: var(--ss-border); border-radius: var(--ss-radius-md); box-shadow: 0 8px 24px rgba(6, 64, 59, 0.12); }
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--ss-primary); color: var(--ss-primary-fg); }
body .select2-container--default .select2-results__option[aria-selected=true],
body .select2-container--default .select2-results__option--selected { background-color: var(--ss-mint); color: var(--ss-deep-green); }
body .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--ss-mint); border-color: var(--ss-border); color: var(--ss-deep-green); border-radius: 9999px; }
body .select2-search--dropdown .select2-search__field { border-color: var(--ss-input-stroke); border-radius: 6px; }
body .selectize-input { border-color: var(--ss-input-stroke); border-radius: var(--ss-radius-md); box-shadow: var(--ss-shadow-xs); min-height: 36px; }
body .selectize-input.focus { border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-ring); }
body .selectize-dropdown .active { background-color: var(--ss-mint); color: var(--ss-deep-green); }
body .chosen-container .chosen-results li.highlighted { background: var(--ss-primary); color: var(--ss-primary-fg); }
body .chosen-container-single .chosen-single { border-color: var(--ss-input-stroke); border-radius: var(--ss-radius-md); background: #ffffff; box-shadow: var(--ss-shadow-xs); }

/* ---------- Plugin: DataTables ---------- */
body .dataTables_wrapper { color: var(--ss-foreground); font-size: 12px; }
body .dataTables_wrapper .dataTables_filter input,
body .dataTables_wrapper .dataTables_length select {
  height: 32px;
  padding: 2px 8px;
  border: 1px solid var(--ss-input-stroke);
  border-radius: var(--ss-radius-md);
  background-color: #ffffff;
}
body .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-ring); }
body table.dataTable thead th, body table.dataTable thead td { background-color: var(--ss-muted); color: var(--ss-foreground); font-weight: 600; border-bottom: 1px solid var(--ss-border); }
body table.dataTable.no-footer { border-bottom-color: var(--ss-border); }
body table.dataTable tbody tr.selected { background-color: var(--ss-mint); color: var(--ss-deep-green); }
body .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--ss-radius-md) !important; color: var(--ss-foreground) !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ss-primary) !important;
  border-color: var(--ss-primary) !important;
  color: var(--ss-primary-fg) !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ss-muted) !important; border-color: var(--ss-input-stroke) !important; }
body .dataTables_wrapper .dataTables_processing { background: var(--ss-card); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-md); color: var(--ss-muted-fg); box-shadow: var(--ss-shadow-xs); }

/* ---------- Plugin: SweetAlert2 / Bootbox / Datepicker ---------- */
body .swal2-popup { border-radius: var(--ss-radius-xl); font-family: var(--ss-font); color: var(--ss-foreground); }
body .swal2-title { font-size: 16px; font-weight: 700; color: var(--ss-foreground); }
body .swal2-html-container, body .swal2-content { font-size: 14px; color: var(--ss-muted-fg); }
body .swal2-styled { border-radius: var(--ss-radius-md) !important; font-size: 14px !important; font-weight: 500; }
body .swal2-styled.swal2-confirm { background-color: var(--ss-primary) !important; }
body .swal2-styled.swal2-cancel { background-color: #fdecec !important; color: var(--ss-destructive) !important; }
body .swal2-styled:focus { box-shadow: 0 0 0 3px var(--ss-ring) !important; }
body .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--ss-success); }
body .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(39, 134, 75, 0.3); }
body .swal2-icon.swal2-info { border-color: var(--ss-info); color: var(--ss-info); }
body .swal2-icon.swal2-warning { border-color: var(--ss-warning); color: #8a6500; }
body .swal2-icon.swal2-error { border-color: var(--ss-destructive); }
body .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--ss-destructive); }
body .bootstrap-datetimepicker-widget td.active, body .bootstrap-datetimepicker-widget td.active:hover,
body .bootstrap-datetimepicker-widget td span.active { background-color: var(--ss-primary); color: var(--ss-primary-fg); }
body .bootstrap-datetimepicker-widget td.today:before { border-bottom-color: var(--ss-primary); }
body .bootstrap-datetimepicker-widget td.day:hover, body .bootstrap-datetimepicker-widget td span:hover { background: var(--ss-mint); }
body .bootstrap-datetimepicker-widget.dropdown-menu { border-radius: var(--ss-radius-md); }

/* ---------- Tabel: kelas kontekstual Bootstrap (tr/td .success/.info/.warning/.danger/.active) ---------- */
.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success,
.table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success,
.table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td,
.table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { background-color: #e9f3ed; }
.table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info,
.table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info,
.table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td,
.table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { background-color: #e8f1f6; }
.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning,
.table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning,
.table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td,
.table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { background-color: #fcf5e0; }
.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger,
.table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger,
.table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td,
.table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { background-color: #fdecec; }
.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active,
.table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active,
.table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td,
.table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th { background-color: var(--ss-mint); }

/* ---------- Pagination nonaktif (Yeti memakai #999) ---------- */
.pagination > .disabled > a, .pagination > .disabled > span,
.pagination > .disabled > a:hover, .pagination > .disabled > span:hover,
.pagination > .disabled > a:focus, .pagination > .disabled > span:focus {
  color: var(--ss-placeholder);
  background-color: var(--ss-muted);
  border-color: var(--ss-border);
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--ss-placeholder) !important;
  background: transparent !important;
  border-color: transparent !important;
}