/*
 * Familiar modern: red header, dark navigation, green current item, blue actions.
 * Sanggau-only overrides keep the shared evaluation theme unaffected.
 */
:root {
  --app-radius: 12px;
  --app-control-radius: 8px;
  --app-control-radius-sm: 6px;
  --app-bg: #f4f6f8;
  --app-surface: #ffffff;
  --app-surface-2: #f0f4f6;
  --app-line: #e3e9ec;
  --app-line-strong: #b8c7d0;
  --app-text: #243239;
  --app-muted: #5e6e78;
  --app-shadow: none;
  --app-track: #e3e7ec;
  --app-accent: #2e7096;
  --app-on-accent: #ffffff;
  --app-accent-soft: #e3eef6;
  --app-side: #222d32;
  --app-side-text: #c3d2d9;
  --app-side-muted: #aabcc5;
  --app-good: #008347;
  --app-good-soft: #e1f4ea;
  --app-danger: #c23321;
  --app-danger-soft: #fbe9e7;
  --app-warn: #b86e00;
  --app-warn-soft: #fdf1dc;
  --app-blue: #2e7096;
  --app-blue-soft: #e3eef6;
  --app-grid: #e5e8ec;
  --app-tooltip: #222d32;
  --app-chart-drd: #b8c7ce;
  --app-chart-trx: #bf1744;
  --app-chart-per: #0d73ae;
  --app-chart-kub: #d9822b; /* Tunggakan: orange as a warning, apart from the blue LPP chart */
  --sanggau-red: #dd4b39;
  --sanggau-red-dark: #d73925;
  --sanggau-green: #00a65a;
  --sanggau-green-light: #2ecc71;
}

body.dark-mode {
  --app-bg: #182126;
  --app-surface: #222d32;
  --app-surface-2: #2c3b41;
  --app-input: #222d32;
  --app-line: #374850;
  --app-line-strong: #607982;
  --app-text: #ecf0f5;
  --app-muted: #b8c7ce;
  --app-track: #374850;
  --app-accent: #6fb3dc;
  --app-on-accent: #0b1f2b;
  --app-accent-soft: #1f3a4b;
  --app-side: #1e282c;
  --app-side-text: #b8c7ce;
  --app-side-muted: #8aa4af;
  --app-good: #4cd18f;
  --app-good-soft: #173326;
  --app-danger: #f0796b;
  --app-danger-soft: #3d2320;
  --app-warn: #f5b552;
  --app-warn-soft: #3b2d17;
  --app-blue: #6fb3dc;
  --app-blue-soft: #1f3a4b;
  --app-grid: #374850;
  --app-tooltip: #2c3b41;
  --app-chart-drd: #5c7480;
  --app-chart-trx: #e0577a;
  --app-chart-per: #6fb3dc;
  --app-chart-kub: #f0a35c;
}

/* Red top bar */
.wrapper .main-header.navbar { background: var(--sanggau-red); border-bottom-color: var(--sanggau-red-dark); }
/* The loading bar runs along the red top bar, so it is gold rather than the red accent: it stands out on the red and on the page. */
.wrapper .main-header.navbar > .app-loading { --app-progress: #facc15; }
.wrapper .main-header.navbar .navbar-nav .nav-link,
.wrapper .main-header.navbar .navbar-nav .app-user-toggle,
.wrapper .main-header.navbar .app-user-chevron { color: #ffffff; }
.wrapper .main-header.navbar .navbar-nav .nav-link:hover { background: rgba(0, 0, 0, .1); color: #f6f6f6; }
.layout-navbar-fixed .wrapper .main-sidebar .brand-link:not([class*="navbar"]) { background: var(--sanggau-red-dark); }
.wrapper .main-sidebar .brand-link { border-bottom-color: transparent; }

/* Dark sidebar with the green active marker */
.wrapper .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active,
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active:hover {
  background: rgba(0, 166, 90, .22); color: #ffffff; box-shadow: inset 3px 0 0 var(--sanggau-green);
}
.wrapper .sidebar-dark-primary .nav-sidebar .nav-link.active > .nav-icon,
.wrapper .main-sidebar .app-nav-group.is-current > .nav-icon { color: var(--sanggau-green-light); }
.wrapper .main-sidebar .nav-sidebar .nav-treeview { border-left-color: #374850; }

/* Outlined cards (former box-primary) take the primary blue on top. */
.wrapper .card.card-outline.card-primary { border-top-color: var(--app-accent); }

/* Fixed header, brand and sidebar share one height. */
.wrapper .main-header.navbar { min-height: 4.5rem; padding: .75rem 1.25rem; }
.layout-navbar-fixed .wrapper .content-wrapper { margin-top: 4.5rem; }
.layout-navbar-fixed.layout-fixed .wrapper .sidebar { margin-top: 4.5rem; }
.layout-fixed .wrapper .sidebar { height: calc(100% - 4.5rem); }
.layout-navbar-fixed .wrapper .main-sidebar .brand-link,
.layout-navbar-fixed.sidebar-mini.sidebar-collapse .wrapper .brand-link { height: 4.5rem; display: flex; align-items: center; gap: .75rem; padding: .875rem 1.25rem; }
.wrapper .main-sidebar .brand-link .brand-image { float: none; margin: 0; width: 2.5rem; height: 2.5rem; max-height: none; flex: none; }
.wrapper .main-sidebar .brand-text { font-size: .9375rem; line-height: 1.4; }
.app-brand-caption { display: block; margin-top: .125rem; font-size: .625rem; font-weight: 500; letter-spacing: .12em; }
.app-topbar-identity { display: flex; flex-direction: column; justify-content: center; margin-left: .5rem; color: #fff; line-height: 1.5; }
.app-topbar-identity strong { font-size: .8125rem; font-weight: 600; }
.app-topbar-identity span { font-size: .6875rem; opacity: .9; }
.wrapper .content-wrapper > .content { padding: 0 1.25rem; }
.wrapper .content-header { padding: 1.75rem 1.25rem 1.375rem; }
.wrapper .content-header h1, .wrapper .sg-header h1, .wrapper .ua-heading h1, .wrapper .acct-heading h1 { letter-spacing: -.035em; font-weight: 700; }
.wrapper .app-eyebrow, .wrapper .sg-header .sg-eyebrow { color: var(--app-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; }
.wrapper .main-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: 1.125rem 1.75rem; font-size: .75rem; background: var(--app-bg); border: 0; }
.wrapper .main-footer strong { color: var(--app-text); font-weight: 600; }

/* Workspace and connected submenu. */
.wrapper .main-sidebar .sidebar { padding: 0 .75rem 1rem; }
.app-loket { margin: 1rem 0 .75rem; padding: 1rem; border: 1px solid #3c505a; border-radius: 12px; background: #29383f; }
.app-loket-identity { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.app-loket-symbol { display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border-radius: 9px; background: #244b3d; color: #75deb0; }
.app-loket-symbol svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-loket-label { display: block; margin-bottom: .1875rem; color: #b1c5cf; font-size: .625rem; font-weight: 400; }
.app-loket-name { font-size: .8125rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.app-loket-meta { gap: .875rem; margin: .875rem 0 0; font-size: .6875rem; }
.app-loket-meta dt { color: #b1c5cf; }
.app-loket-meta dd { color: #edf4f7; min-width: 0; overflow-wrap: anywhere; }
.app-loket-id { align-items: baseline; }
.app-loket-id dd { font-weight: 500; letter-spacing: .04em; }
.app-loket-meta > .app-loket-balance { display: block; padding-top: .875rem; border-top: 1px solid #41545e; }
.app-loket-balance dd { margin-top: .375rem; text-align: left; font-size: 1.1875rem; font-weight: 700; line-height: 1.4; letter-spacing: -.025em; }
.wrapper .main-sidebar .nav-sidebar .nav-header { padding: .875rem .75rem .625rem; font-size: .625rem; }
.wrapper .main-sidebar .nav-sidebar > .nav-item { margin-bottom: .375rem; }
.wrapper .main-sidebar .nav-sidebar > .nav-item > .nav-link {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .625rem;
  min-height: 3rem; margin: 0; padding: .5rem .625rem; font-size: .8125rem; font-weight: 600; color: #d5e1e7;
}
.wrapper .main-sidebar .nav-sidebar button.nav-link { width: 100%; border: 0; background: transparent; text-align: left; font-family: inherit; }
.wrapper .main-sidebar .nav-sidebar .nav-link > p { display: block; width: auto; min-width: 0; margin: 0; padding: 0; line-height: 1.5; }
.wrapper .main-sidebar .nav-sidebar > .nav-item > .app-nav-group { grid-template-columns: 2rem minmax(0, 1fr) .625rem; }
.wrapper .main-sidebar .nav-sidebar .nav-link > .app-menu-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0;
  border-radius: 9px; background: rgba(255, 255, 255, .045); color: #b5c8d1;
}
.app-menu-icon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-nav-chevron { color: #92a8b3; font-size: .5625rem; transition: transform .2s; }
.app-nav-group[aria-expanded="true"] > .app-nav-chevron { transform: rotate(90deg); }
.wrapper .main-sidebar .nav-sidebar .app-nav-group.is-current { background: transparent; color: #fff; }
.wrapper .main-sidebar .nav-sidebar .app-nav-group.is-current > .app-menu-icon,
.wrapper .main-sidebar .nav-sidebar > .nav-item > .nav-link.active > .app-menu-icon { background: rgba(0, 166, 90, .18); color: #65dda2; }
.wrapper .main-sidebar .nav-sidebar > .nav-item > .nav-link.active { background: #214737; }
.wrapper .main-sidebar .nav-sidebar .nav-treeview { margin: .25rem 0 .75rem 1.625rem; padding-left: 1rem; border-left: 1px solid #42545e; }
.wrapper .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  display: grid; grid-template-columns: .375rem minmax(0, 1fr); align-items: center; gap: .625rem;
  min-height: 2.5rem; padding: .5rem .625rem; margin-bottom: .125rem; font-size: .75rem; font-weight: 400; color: #bacbd3;
}
.app-submenu-marker { display: block; width: .375rem; height: 2px; border-radius: 1px; background: #7c939e; }
.wrapper .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.wrapper .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover { background: rgba(0, 166, 90, .1); color: #fff; box-shadow: none; font-weight: 600; }
.nav-treeview > .nav-item > .nav-link.active > .app-submenu-marker { height: .375rem; border-radius: 50%; background: #65dda2; box-shadow: 0 0 0 3px rgba(0, 166, 90, .15); }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-link { justify-content: center; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-link .brand-image { margin: 0; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link { display: flex; justify-content: center; padding-inline: 0; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > .app-menu-icon { width: 2rem; margin: 0; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .app-nav-chevron { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-treeview { display: none !important; }

/* All signed-in forms, tables, toolbars, cards and dialogs. */
.wrapper .card, .wrapper .app-panel, .wrapper .app-kpi { box-shadow: none; }
.wrapper .card.card-outline.card-primary { border-top-width: 1px; border-top-color: var(--app-line); }
.wrapper .card > .card-header { padding: 1.125rem 1.25rem; }
.wrapper .card-title { font-size: .875rem; }
.wrapper .card > .card-header:has(.app-filter) { border-bottom: 0; }
.wrapper .card > .card-header .app-filter { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--app-line); gap: .75rem; }
.wrapper .card-body { padding: 1.25rem; }
.wrapper .card-footer { background: var(--app-surface); padding: 1.125rem 1.25rem; }
.wrapper .form-control, .wrapper .custom-select { border-color: var(--app-line-strong); }
.wrapper .form-control::placeholder { opacity: 1; }
.wrapper .form-control.is-invalid { border-color: var(--app-danger); }
.wrapper .form-control.is-valid { border-color: var(--app-good); }
.wrapper select.form-control[multiple], .wrapper select.form-control[size] { height: auto; min-height: var(--app-control-h); }
.wrapper .form-control-plaintext { color: var(--app-text); }
.wrapper .input-group-text { border-color: var(--app-line-strong); background: var(--app-surface-2); }
.wrapper .btn:not(.btn-tool):not(.btn-link) { font-size: .8125rem; }
.wrapper .btn-success { background: var(--app-good); border-color: var(--app-good); color: #fff; }
.wrapper .btn-success:hover { filter: brightness(.92); }
.wrapper .btn-danger { background: var(--app-danger); border-color: var(--app-danger); color: #fff; }
.wrapper .btn-outline-primary { color: var(--app-accent); border-color: var(--app-accent); }
.wrapper .btn-outline-primary:hover { background: var(--app-accent); color: var(--app-on-accent); }
.wrapper .app-table thead th, .wrapper .app-datatable thead th { padding-top: .875rem; padding-bottom: .875rem; font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.wrapper .app-table td, .wrapper .app-datatable td { padding-top: .875rem; padding-bottom: .875rem; }
.wrapper .app-datatable .dataTables_empty { padding: 2.5rem 1rem; color: var(--app-muted); }
.wrapper .table { color: var(--app-text); }
.wrapper .table td, .wrapper .table th { border-color: var(--app-line); }
.wrapper div.dataTables_wrapper div.dataTables_filter input,
.wrapper div.dataTables_wrapper div.dataTables_length select { height: var(--app-control-h); }
.wrapper .nav-tabs { border-color: var(--app-line); gap: .25rem; }
.wrapper .nav-tabs .nav-link { color: var(--app-muted); padding: .75rem 1rem; border-radius: 8px 8px 0 0; }
.wrapper .nav-tabs .nav-link.active { background: var(--app-surface); color: var(--app-accent); border-color: var(--app-line) var(--app-line) var(--app-surface); font-weight: 600; }
.wrapper .nav-pills:not(.nav-sidebar) .nav-link { border-radius: 8px; }
.wrapper .nav-pills:not(.nav-sidebar) .nav-link.active { background: var(--app-accent); color: var(--app-on-accent); }
.wrapper .dropdown-menu { padding: .375rem; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-popover-shadow); }
.wrapper .dropdown-item { border-radius: 6px; color: var(--app-text); font-size: .8125rem; }
.wrapper .dropdown-item:hover { background: var(--app-surface-2); color: var(--app-text); }
.wrapper .modal-content { border: 1px solid var(--app-line); border-radius: var(--app-radius); }
.wrapper .modal-header { padding: 1.25rem; }
.wrapper .modal-footer { background: var(--app-surface-2); border-radius: 0 0 var(--app-radius) var(--app-radius); }
.wrapper .modal-footer .btn { white-space: normal; }
.wrapper .app-kpi { padding: 1.25rem; gap: .75rem; }
.wrapper .app-kpi-icon { background: transparent; width: 1.5rem; height: 1.5rem; }
.wrapper .app-kpi-value { font-size: clamp(1.75rem, 1.25rem + 1vw, 2.125rem); letter-spacing: -.04em; }
.wrapper .app-kpi-label, .wrapper .app-kpi-note { font-size: .75rem; }
.wrapper .sg-evaluation { --field-line: var(--app-line-strong); }
.wrapper .sg-services .sg-tabs button, .wrapper .rs-presets button { border-radius: var(--app-control-radius); }
.wrapper .sg-evaluation th { font-weight: 500; text-transform: none; letter-spacing: 0; }
.wrapper .sg-services input, .wrapper .sg-services select,
.wrapper .sg-evaluation button, .wrapper .sg-evaluation .sg-link { border-radius: var(--app-control-radius); }
.wrapper .select2-container--bootstrap4 .select2-selection { background: var(--app-input); border-color: var(--app-line-strong); border-radius: var(--app-control-radius); color: var(--app-text); }
.select2-dropdown { background: var(--app-surface); color: var(--app-text); border-color: var(--app-line-strong); }
.select2-container--bootstrap4 .select2-results__option--highlighted { background: var(--app-accent); color: var(--app-on-accent); }
.datepicker.dropdown-menu { background: var(--app-surface); color: var(--app-text); border-color: var(--app-line); border-radius: 10px; padding: .75rem; box-shadow: var(--app-popover-shadow); }
.datepicker table tr td.day:hover, .datepicker table tr td span:hover { background: var(--app-surface-2); }
.datepicker table tr td.active.active { background: var(--app-accent); color: var(--app-on-accent); }

/* Public login and error views use the same identity and controls. */
.app-guest { margin: 0; background: var(--app-bg); color: var(--app-text); }
.app-guest .app-guest-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; min-height: 100svh; }
.app-guest-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; padding: clamp(2rem, 5vw, 5rem); background: var(--app-side); border-top: 8px solid var(--sanggau-red); color: #fff; }
.app-guest-logo { display: flex; align-items: center; gap: 1rem; }
.app-guest-logo img { width: 3.25rem; height: 3.25rem; padding: .25rem; border-radius: 10px; object-fit: contain; background: #fff; }
.app-guest-logo strong { display: block; font-size: 1.125rem; font-weight: 700; }
.app-guest-logo span { display: block; margin-top: .25rem; font-size: .6875rem; letter-spacing: .14em; color: #c3d2d9; }
.app-guest-brand h2 { max-width: 25rem; margin: 0 0 1.25rem; font-size: clamp(2rem, 3.5vw, 3.75rem); line-height: 1.15; font-weight: 700; letter-spacing: -.045em; color: #fff; }
.app-guest-brand p { max-width: 25rem; margin: 0; color: #c3d2d9; line-height: 1.8; }
.app-guest-location { color: #aabcc5; font-size: .75rem; }
.app-guest-content { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 5rem); }
.app-guest-card { width: 100%; max-width: 26rem; }
.app-guest-card h1 { margin: 0 0 .75rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -.035em; }
.app-guest-card > p:not(.app-eyebrow) { color: var(--app-muted); margin-bottom: 2rem; line-height: 1.7; }
.app-guest-card form { padding: 1.75rem; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius); }
.app-guest-card .form-group { margin-bottom: 1.25rem; }
.app-guest-card label { font-size: .8125rem; font-weight: 600; }
.app-guest-card .form-control { height: 2.75rem; font-size: .875rem; }
.app-guest-card .btn { min-height: 2.75rem; }
.app-guest-card .app-login-button { background: #c23321; border-color: #c23321; color: #fff; }
.app-guest-card .app-login-button:hover { background: #a92b1c; border-color: #a92b1c; }
.app-guest-footer { margin: 1.75rem 0 0; color: var(--app-muted); font-size: .6875rem; line-height: 1.7; }
.app-error-code { color: var(--app-danger); font-size: .75rem; font-weight: 600; margin-bottom: .75rem; }
.app-error-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 991.98px) {
  .app-topbar-identity span { display: none; }
  .wrapper .content-wrapper > .content, .wrapper .content-header { padding-inline: .75rem; }
}
@media (max-width: 575.98px) {
  .wrapper .main-header.navbar { padding-inline: .5rem; }
  .app-topbar-identity { margin-left: .25rem; }
  .app-topbar-identity strong { font-size: .75rem; }
  .wrapper .content-header { padding-top: 1.25rem; }
  .wrapper .content-wrapper > .content, .wrapper .content-header { padding-inline: .375rem; }
  .wrapper .card > .card-header, .wrapper .card-body, .wrapper .card-footer { padding: 1rem; }
  .wrapper .app-filter { align-items: stretch; }
  .wrapper .app-filter .input-group-prepend { max-width: 55%; }
  .wrapper .app-filter .input-group-text { white-space: normal; font-size: .75rem; }
  .wrapper .form-control:not(.form-control-sm), .wrapper .custom-select:not(.custom-select-sm) { min-height: 2.75rem; font-size: 1rem; }
  .wrapper .btn:not(.btn-xs):not(.btn-tool):not(.btn-link), .wrapper .main-header button { min-height: 2.75rem; }
  .wrapper .modal-footer .btn { flex: 1 1 auto; }
  .wrapper .main-footer { padding: 1rem; }
  .wrapper .app-kpi { padding: 1rem; }
  .wrapper .app-keyvalue-inline { grid-template-columns: minmax(0, 1fr); }
  .wrapper .card-title { overflow-wrap: anywhere; }
}
@media (max-width: 767.98px) {
  .app-guest .app-guest-shell { grid-template-columns: minmax(0, 1fr); }
  .app-guest-brand { gap: 0; padding: 1.5rem; }
  .app-guest-brand h2, .app-guest-brand p, .app-guest-location { display: none; }
  .app-guest-content { padding: 2rem 1.25rem; align-items: flex-start; }
  .app-guest-card h1 { font-size: 1.625rem; }
  .app-guest-card form { padding: 1.25rem; }
  .app-guest-card .form-control { font-size: 1rem; }
}

/* Keep status colors readable in both appearances. */
body.dark-mode .wrapper .btn-success { color: #082d1a; }
body.dark-mode .wrapper .btn-danger { color: #3c100c; }
.wrapper .badge-success { background: var(--app-good-soft); color: var(--app-good); }
.wrapper .badge-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.wrapper .badge-warning { background: var(--app-warn-soft); color: var(--app-warn); }
.wrapper .badge-info, .wrapper .badge-primary { background: var(--app-accent-soft); color: var(--app-accent); }
@media (max-width: 767.98px) {
  .wrapper .sg-services .sg-tabs { flex-wrap: wrap; overflow: visible; }
  .wrapper .sg-services .sg-tabs button { flex: 1 1 auto; white-space: normal; }
}
@media (max-width: 575.98px) {
  .wrapper .rs-filters .card-body, .wrapper .rs-fields > div { min-width: 0; }
  .wrapper .rs-fields { grid-template-columns: minmax(0, 1fr); }
  .wrapper .rs-fields .form-control { min-width: 0; width: 100%; }
}
@media (max-width: 575.98px) {
  .wrapper .rs-pager { flex-wrap: wrap; }
  .wrapper .rs-pager span { order: -1; flex: 1 1 100%; text-align: center; }
  .wrapper .rs-pager .btn { flex: 1 1 0; min-width: 0; white-space: normal; padding-inline: .5rem; }
}