/* =========================================================================
   DESIGN SYSTEM THEME LAYER
   Paperpen Design System v1.0 -> AdminLTE 2 / Bootstrap 3
   -------------------------------------------------------------------------
   Presentational only. This file restyles the primitives the views already
   use (.box, .panel, .btn, .form-control, .table, .modal, ...) so no markup,
   no selector, and no behavior change is required anywhere in views/ or
   public/ajax/.

   Rules followed here:
   - Never change display/visibility of anything jQuery toggles.
   - Never change the layout geometry AdminLTE's JS depends on (sidebar
     width, header height, content-wrapper offsets).
   - Colors, typography, radii, borders, shadows and spacing only.

   Load order: this file must be the LAST stylesheet in views/includes/head.pug.
   Selectors that compete with plugin CSS loaded after it (DataTables,
   select2, tom-select, selectize) are written with extra specificity rather
   than relying on source order.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
  /* brand */
  --ds-primary:        #00C18C;
  --ds-primary-hover:  #00A87A;
  --ds-primary-light:  #E6FAF5;
  --ds-primary-dark:   #007A58;

  /* neutral */
  --ds-bg-app:         #F8FAFB;
  --ds-bg-card:        #FFFFFF;
  --ds-border:         #E2E8F0;
  --ds-border-soft:    #F1F5F9;
  --ds-text:           #1A202C;
  --ds-text-body:      #334155;
  --ds-text-muted:     #64748B;
  --ds-text-disabled:  #A0AEC0;
  --ds-surface-muted:  #F8FAFC;

  /* status */
  --ds-success:        #00C18C;
  --ds-warning:        #F59E0B;
  --ds-error:          #EF4444;
  --ds-info:           #3B82F6;
  --ds-success-bg:     #E6FAF5;
  --ds-warning-bg:     #FEF3C7;
  --ds-error-bg:       #FEE2E2;
  --ds-info-bg:        #DBEAFE;

  /* radius */
  --ds-radius-sm:      6px;
  --ds-radius-lg:      8px;   /* button, input, icon container */
  --ds-radius-xl:      12px;  /* card / panel */
  --ds-radius-2xl:     16px;  /* modal */

  /* elevation — shadow-sm only, per DESIGN_SYSTEM.md section 15 */
  --ds-shadow-card:    0 1px 3px 0 rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .04);
  --ds-shadow-pop:     0 10px 20px -6px rgba(15, 23, 42, .14), 0 4px 8px -4px rgba(15, 23, 42, .08);

  /* focus ring */
  --ds-ring:           0 0 0 3px rgba(0, 193, 140, .18);
  --ds-ring-error:     0 0 0 3px rgba(239, 68, 68, .18);

  /* spacing scale */
  --ds-space-1:        4px;
  --ds-space-2:        8px;
  --ds-space-3:        12px;
  --ds-space-4:        16px;
  --ds-space-5:        20px;
  --ds-space-6:        24px;

  --ds-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* -------------------------------------------------------------------------
   2. BASE / TYPOGRAPHY
   ---------------------------------------------------------------------- */
body,
.skin-black-light body {
  font-family: var(--ds-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* AdminLTE hardcodes 'Source Sans Pro' on headings and Helvetica on the logo */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-header .logo,
button, input, select, textarea,
.btn, .form-control {
  font-family: var(--ds-font);
}

h1, .h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ds-text); }
h2, .h2 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ds-text); }
h3, .h3 { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ds-text); }
h4, .h4 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ds-text); }
h5, .h5 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ds-text); }
h6, .h6 { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ds-text-muted); }

small, .small { font-size: 12px; }

a {
  color: var(--ds-primary-dark);
  transition: color .15s ease;
}
a:hover, a:focus, a:active {
  color: var(--ds-primary-hover);
  text-decoration: none;
}

hr { border-top-color: var(--ds-border); }

.text-muted    { color: var(--ds-text-muted); }
.text-danger   { color: var(--ds-error); }
.text-success  { color: var(--ds-primary-dark); }
.text-warning  { color: var(--ds-warning); }
.text-info     { color: var(--ds-info); }
.redClass      { color: var(--ds-error); }

/* -------------------------------------------------------------------------
   3. LAYOUT — app shell
   ---------------------------------------------------------------------- */
.content-wrapper,
.right-side,
.skin-black-light .content-wrapper,
.skin-black-light .right-side {
  background-color: var(--ds-bg-app);
}

/* Page title block: one consistent gutter above the content sections. */
.content-header {
  padding: var(--ds-space-6) var(--ds-space-6) 0 var(--ds-space-6);
}
.content-header > h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ds-text);
}
.content-header > h1 > small {
  font-size: 14px;
  font-weight: 400;
  color: var(--ds-text-muted);
  padding-left: var(--ds-space-2);
}

.content {
  padding: var(--ds-space-6);
}

/* Bootstrap's -15px row gutter against a 24px page padding leaves an odd 9px
   at the page edge. Normalize the gutter to 12px so column content lines up
   with the page padding on every screen. */
.content > .row:not(.ds-filter),
.content-header > .row:not(.ds-filter),
.modal-body > .row:not(.ds-filter) {
  margin-left: -12px;
  margin-right: -12px;
}
.content > .row > [class*="col-"],
.content-header > .row > [class*="col-"],
.modal-body > .row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 767px) {
  .content-header { padding: var(--ds-space-4) var(--ds-space-4) 0 var(--ds-space-4); }
  .content        { padding: var(--ds-space-4); }
  .content-header > h1 { font-size: 20px; line-height: 28px; }
}

/* -------------------------------------------------------------------------
   4. HEADER / NAVBAR
   ---------------------------------------------------------------------- */
.skin-black-light .main-header {
  box-shadow: none;
}
.skin-black-light .main-header .navbar,
.skin-black-light .main-header > .logo {
  background-color: var(--ds-bg-card);
  border-bottom: 1px solid var(--ds-border);
}
.skin-black-light .main-header > .logo {
  border-right: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-weight: 700;
  letter-spacing: -.01em;
}
.skin-black-light .main-header > .logo:hover {
  background-color: var(--ds-surface-muted);
}
.main-header .logo b {
  color: var(--ds-primary);
  font-weight: 700;
}
.skin-black-light .main-header .navbar .nav > li > a {
  color: var(--ds-text-muted);
  font-weight: 500;
  border-left: 1px solid var(--ds-border);
}
.skin-black-light .main-header .navbar .nav > li > a:hover,
.skin-black-light .main-header .navbar .nav > li > a:focus,
.skin-black-light .main-header .navbar .nav > li > a:active,
.skin-black-light .main-header .navbar .nav .open > a,
.skin-black-light .main-header .navbar .nav .open > a:hover,
.skin-black-light .main-header .navbar .nav .open > a:focus {
  background: var(--ds-surface-muted);
  color: var(--ds-text);
}
.skin-black-light .main-header .navbar .sidebar-toggle {
  color: var(--ds-text-muted);
}
.skin-black-light .main-header .navbar .sidebar-toggle:hover {
  color: var(--ds-primary);
  background: var(--ds-surface-muted);
}
.skin-black-light .main-header .navbar > .sidebar-toggle {
  border-right: 1px solid var(--ds-border);
}

/* user dropdown */
.navbar-nav > .user-menu > .dropdown-menu {
  width: 260px;
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-pop);
  overflow: hidden;
}
.skin-black-light .main-header li.user-header,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  height: auto;
  padding: var(--ds-space-4) var(--ds-space-5);
  background-color: var(--ds-primary-light);
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-primary-dark);
  text-shadow: none;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
  padding: var(--ds-space-3) var(--ds-space-4);
  background-color: var(--ds-bg-card);
  border-top: 1px solid var(--ds-border-soft);
}

/* -------------------------------------------------------------------------
   5. SIDEBAR
   ---------------------------------------------------------------------- */
.skin-black-light .wrapper,
.skin-black-light .main-sidebar,
.skin-black-light .left-side {
  background-color: var(--ds-bg-card);
}
.main-sidebar {
  border-right: 1px solid var(--ds-border);
}
.sidebar {
  padding-bottom: var(--ds-space-6);
}
.sidebar-menu {
  padding-top: var(--ds-space-2);
}
.sidebar-menu > li > a,
.sinar-menu .sinar-expandable {
  padding: 10px var(--ds-space-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text-muted);
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-menu > li > a > .fa,
.sinar-menu .sinar-expandable > .fa {
  width: 20px;
  font-size: 14px;
}
.sidebar-menu > li > a:hover,
.sinar-menu .sinar-expandable:hover {
  background-color: var(--ds-surface-muted);
  color: var(--ds-text);
}
.sidebar-menu > li.active > a,
.sinar-menu.active > .sinar-expandable {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
  border-left-color: var(--ds-primary);
  font-weight: 600;
}
.sidebar-menu li.header {
  padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-2);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-text-disabled);
}

/* sub menu — the hand-rolled sinar-* tree in dist/css/CustomClass.css */
.sinar-sub-menu {
  padding: var(--ds-space-1) 0;
  background-color: var(--ds-surface-muted);
}
.sinar-sub-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
  padding: 8px var(--ds-space-4) 8px 44px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-text-muted);
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sinar-sub-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a:hover {
  background: var(--ds-border-soft);
  color: var(--ds-text);
}
.sinar-sub-menu > li.active > a,
.sidebar-menu .treeview-menu > li.active > a {
  background: var(--ds-primary-light);
  color: var(--ds-primary-dark);
  border-left-color: var(--ds-primary);
  font-weight: 600;
}
.chevron-icon {
  font-size: 11px;
  color: var(--ds-text-disabled);
}

/* Sub menu tingkat ketiga. Selektor di atas memakai `.sinar-menu
   .sinar-expandable` yang juga menjangkau expandable bersarang, sehingga tanpa
   aturan ini sebuah grup di dalam submenu akan tampil sebesar menu utama.
   Indentasinya bertambah satu langkah dari induknya (44px -> 60px). */
.sinar-sub-menu .sinar-menu > .sinar-expandable {
  padding: 8px var(--ds-space-4) 8px 44px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-text-muted);
  border-left: 3px solid transparent;
}
.sinar-sub-menu .sinar-menu > .sinar-expandable:hover {
  background: var(--ds-border-soft);
  color: var(--ds-text);
}
.sinar-sub-menu .sinar-menu.active > .sinar-expandable {
  background: transparent;
  color: var(--ds-text);
  border-left-color: transparent;
  font-weight: 600;
}
.sinar-sub-menu .sinar-sub-menu {
  background-color: transparent;
  padding: 0 0 var(--ds-space-1);
}
.sinar-sub-menu .sinar-sub-menu > li > a {
  padding: 7px var(--ds-space-4) 7px 60px;
  font-size: 13px;
}

/* -------------------------------------------------------------------------
   6. FOOTER
   ---------------------------------------------------------------------- */
.main-footer {
  padding: var(--ds-space-4) var(--ds-space-6);
  background: var(--ds-bg-card);
  border-top: 1px solid var(--ds-border);
  font-size: 12px;
  color: var(--ds-text-muted);
}
.main-footer a { color: var(--ds-primary-dark); }
.main-footer strong { font-weight: 500; }

/* -------------------------------------------------------------------------
   7. CARD — .box and .panel are the two card primitives used in the views
   ---------------------------------------------------------------------- */
.box,
.panel {
  margin-bottom: var(--ds-space-5);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
}
.box.box-solid { box-shadow: var(--ds-shadow-card); }

/* AdminLTE/Bootstrap tint the top border or the whole heading of a status
   card; the DS uses a left accent on a neutral card instead. */
.box.box-primary,
.box.box-success,
.box.box-info,
.box.box-warning,
.box.box-danger,
.panel.panel-primary,
.panel.panel-success,
.panel.panel-info,
.panel.panel-warning,
.panel.panel-danger {
  border-top: 1px solid var(--ds-border);
  border-left-width: 4px;
  border-left-style: solid;
}
.box.box-primary,
.box.box-success,
.panel.panel-primary,
.panel.panel-success { border-left-color: var(--ds-primary); }
.box.box-info,    .panel.panel-info    { border-left-color: var(--ds-info); }
.box.box-warning, .panel.panel-warning { border-left-color: var(--ds-warning); }
.box.box-danger,  .panel.panel-danger  { border-left-color: var(--ds-error); }

.box-header,
.panel-heading {
  padding: var(--ds-space-4) var(--ds-space-5);
  background: transparent;
  border-bottom: 1px solid var(--ds-border-soft);
  border-top-left-radius: var(--ds-radius-xl);
  border-top-right-radius: var(--ds-radius-xl);
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text);
}
.box-header.with-border { border-bottom: 1px solid var(--ds-border-soft); }
.box-header > .box-title,
.panel-heading > .panel-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ds-text);
}
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading,
.panel-default > .panel-heading {
  background-color: var(--ds-bg-card);
  border-color: var(--ds-border-soft);
  color: var(--ds-text);
}

.box-body,
.panel-body {
  padding: var(--ds-space-5);
  border-bottom-left-radius: var(--ds-radius-xl);
  border-bottom-right-radius: var(--ds-radius-xl);
}
.box-footer,
.panel-footer {
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-surface-muted);
  border-top: 1px solid var(--ds-border-soft);
  border-bottom-left-radius: var(--ds-radius-xl);
  border-bottom-right-radius: var(--ds-radius-xl);
}
/* the last child inside a card must not double the card's own padding */
.box-body > *:last-child,
.panel-body > *:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .box-header, .panel-heading,
  .box-body,   .panel-body   { padding: var(--ds-space-4); }
  .box-footer, .panel-footer { padding: var(--ds-space-3) var(--ds-space-4); }
}

/* the legacy hand-rolled card from stylesheets/style.css */
.cardView {
  padding: var(--ds-space-4);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
}
.borderRed    { border-color: var(--ds-error); }
.borderYellow { border-color: var(--ds-warning); }
.borderGreen  { border-color: var(--ds-primary); }

/* -------------------------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------------------- */
.btn {
  padding: 9px var(--ds-space-4);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-lg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: none;
  box-shadow: var(--ds-ring);
}
.btn:active,
.btn.active { box-shadow: none; }
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.btn-flat { border-radius: var(--ds-radius-lg); }

/* primary — btn-primary and btn-success are both used as "the" action button */
.btn-primary,
.btn-success,
.btn-submit {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-submit:hover,  .btn-submit:focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-success {
  background-color: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
  color: #fff;
}

.btn-default {
  background-color: var(--ds-bg-card);
  border-color: var(--ds-border);
  color: var(--ds-text-muted);
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-color: var(--ds-surface-muted);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

/* secondary / outline */
.btn-info {
  background-color: transparent;
  border-color: var(--ds-primary);
  color: var(--ds-primary-dark);
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-color: var(--ds-primary-light);
  border-color: var(--ds-primary);
  color: var(--ds-primary-dark);
}

.btn-danger {
  background-color: var(--ds-error);
  border-color: var(--ds-error);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-color: #DC2626;
  border-color: #DC2626;
  color: #fff;
}

.btn-warning {
  background-color: var(--ds-warning);
  border-color: var(--ds-warning);
  color: #fff;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-color: #D97706;
  border-color: #D97706;
  color: #fff;
}

/* ghost */
.btn-link {
  padding: 9px var(--ds-space-3);
  background: transparent;
  border-color: transparent;
  color: var(--ds-primary-dark);
  text-decoration: none;
}
.btn-link:hover, .btn-link:focus {
  background: var(--ds-primary-light);
  color: var(--ds-primary-hover);
  text-decoration: none;
}

.btn-xs { padding: 3px var(--ds-space-2);  font-size: 12px; border-radius: var(--ds-radius-sm); }
.btn-sm { padding: 6px var(--ds-space-3);  font-size: 13px; border-radius: var(--ds-radius-lg); }
.btn-lg { padding: 12px var(--ds-space-5); font-size: 16px; border-radius: var(--ds-radius-lg); }
.btn-block { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }

.btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* toolbars get one consistent gap instead of per-view inline margins */
.btn + .btn { margin-left: var(--ds-space-2); }
.btn-group .btn + .btn,
.input-group-btn .btn + .btn,
.btn-block + .btn-block { margin-left: 0; }

/* -------------------------------------------------------------------------
   9. FORMS
   ---------------------------------------------------------------------- */
.form-group { margin-bottom: var(--ds-space-4); }

label,
.control-label {
  display: block;
  margin-bottom: var(--ds-space-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-body);
}
/* A label is a block by default in the DS, but it must stay inline where it
   is the caption of a checkbox/radio, or where a plugin (DataTables) uses it
   as an inline wrapper around its own control. */
label.radio-inline,
label.checkbox-inline,
.radio label,
.checkbox label,
input[type="checkbox"] + label,
input[type="radio"] + label,
.dataTables_wrapper div.dataTables_length label,
.dataTables_wrapper div.dataTables_filter label {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  color: var(--ds-text);
}
input[type="checkbox"],
input[type="radio"] {
  margin-right: var(--ds-space-1);
  vertical-align: middle;
  accent-color: var(--ds-primary);
}

.form-control {
  height: auto;
  min-height: 38px;
  padding: 8px var(--ds-space-3);
  font-size: 14px;
  line-height: 1.43;
  color: var(--ds-text);
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-ring);
  outline: none;
}
.form-control::-moz-placeholder          { color: var(--ds-text-disabled); opacity: 1; }
.form-control:-ms-input-placeholder      { color: var(--ds-text-disabled); }
.form-control::-webkit-input-placeholder { color: var(--ds-text-disabled); }
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--ds-surface-muted);
  color: var(--ds-text-muted);
  cursor: not-allowed;
}
textarea.form-control { min-height: 88px; }
select.form-control   { height: 38px; }
.input-sm { min-height: 32px; padding: 5px var(--ds-space-2);  font-size: 13px; border-radius: var(--ds-radius-sm); }
.input-lg { min-height: 44px; padding: 11px var(--ds-space-4); font-size: 16px; border-radius: var(--ds-radius-lg); }

.help-block {
  margin-top: var(--ds-space-1);
  margin-bottom: 0;
  font-size: 12px;
  color: var(--ds-text-muted);
}

.input-group-addon {
  background-color: var(--ds-surface-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  font-size: 13px;
  color: var(--ds-text-muted);
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* validation states */
.has-error .form-control { border-color: #F87171; }
.has-error .form-control:focus {
  border-color: var(--ds-error);
  box-shadow: var(--ds-ring-error);
}
.has-error .control-label,
.has-error .help-block   { color: var(--ds-error); }
.has-success .form-control  { border-color: var(--ds-primary); }
.has-success .control-label { color: var(--ds-primary-dark); }

/* Bootstrap's feedback icon has to clear the taller DS input */
.has-feedback .form-control-feedback {
  width: 38px;
  height: 38px;
  line-height: 38px;
  color: var(--ds-text-disabled);
}
.has-feedback label ~ .form-control-feedback { top: 23px; }

/* -------------------------------------------------------------------------
   9b. SELECT PLUGINS — select2 / tom-select / selectize / bootstrap-select
   These stylesheets load after this file, so the rules below carry extra
   specificity on purpose.
   ---------------------------------------------------------------------- */
.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 38px;
  padding: 4px var(--ds-space-3);
  background-color: var(--ds-bg-card);
  background-image: none;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
  font-size: 14px;
  line-height: 28px;
  color: var(--ds-text);
}
.select2-container.select2-container-active .select2-choice,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-ring);
}
.select2-drop,
.select2-container--default .select2-dropdown {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-pop);
}
.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

/* Varian MULTI.

   Aturan bersama di atas memakai `line-height: 28px`, yang benar untuk select2
   tunggal karena teksnya duduk langsung di dalam kotak. Pada varian multi
   select2 menyisipkan `<ul>` berisi satu `<li>` per pilihan, masing-masing
   dengan margin dan padding sendiri; tinggi 28px itu lalu menumpuk di atasnya
   sehingga kotaknya tumbuh lebih tinggi daripada input di sebelahnya dan baris
   filter jadi tidak rata.

   Di bawah ini tingginya dikembalikan sejajar dengan input biasa: pembungkusnya
   yang memegang tinggi minimum, sedangkan `ul` dan `li` di dalamnya tidak
   menambah apa pun. Kotaknya tetap tumbuh saat pilihan bertambah — yang
   dihilangkan hanya tinggi berlebih saat isinya masih satu baris. */
.select2-container--default .select2-selection--multiple {
  padding: 3px var(--ds-space-2);
  line-height: normal;
}
/* select2 4.0.3 menata tag dan kotak ketiknya dengan `float: left`. Float dan
   flex tidak bisa hidup berdampingan — elemen yang di-float diperlakukan
   block-level, sehingga perataan vertikalnya lepas kendali. Float dimatikan dan
   penataannya diserahkan sepenuhnya ke flex, yang juga menangani pembungkusan
   baris saat pilihan bertambah banyak. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
  line-height: normal;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  float: none;
  margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-search--inline {
  float: none;
  display: flex;
  align-items: center;
}

/* Tanpa aturan ini, teks pilihan mewarisi warna terang dari pembungkusnya di
   atas latar abu-abu bawaan select2 — kontrasnya terlalu rendah untuk dibaca.
   Diberi warna hijau tua di atas hijau muda, sama seperti penanda terpilih di
   sidebar dan pada hasil pencarian, sehingga "sedang dipilih" terbaca sama di
   seluruh antarmuka. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin: 2px var(--ds-space-1) 2px 0;
  max-width: 100%;
  padding: 2px var(--ds-space-2);
  background-color: var(--ds-primary-light);
  border: 1px solid var(--ds-primary);
  border-radius: var(--ds-radius-sm);
  font-size: 13px;
  line-height: 20px;
  color: var(--ds-primary-dark);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: 2;             /* tanda silang di kanan, mengikuti kebiasaan chip */
  margin: 0 0 0 2px;
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  color: var(--ds-primary-dark);
  opacity: .65;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--ds-error);
  opacity: 1;
}

/* Kotak ketik yang mengekor pilihan. Tanpa penyetelan ini ia membawa margin
   atas bawaan select2 dan mendorong tinggi kotak bertambah beberapa piksel. */
.select2-container--default .select2-search--inline .select2-search__field {
  margin-top: 0;
  padding: 0;
  height: 26px;
  line-height: 26px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--ds-font);
  font-size: 14px;
  color: var(--ds-text);
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: var(--ds-text-disabled);
}

/* select2 membangun kotak ketiknya sebagai <input> sungguhan, sehingga di dalam
   `.ds-filter` ia ikut tersapu aturan "semua input jadi kotak berbingkai" di
   bagian 16. Akibatnya muncul kotak kecil berbingkai di dalam kotak select2 —
   terlihat saat belum ada pilihan — dan `min-height: 38px` miliknya menambah
   tinggi pembungkusnya sehingga tidak lagi sejajar dengan input di sebelahnya.
   Aturan itu berkekhususan (0,5,1); rantai `:not` yang sama diulang di sini
   supaya penyetelan ulangnya menang tanpa `!important`, mengikuti cara file ini
   menangani plugin lain. */
.ds-filter .select2-search--inline input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  width: auto;
  min-height: 0;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

/* Placeholder pada varian tunggal ikut disamakan supaya "Semua" tidak tampak
   seperti nilai yang sudah dipilih. */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ds-text-disabled);
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-control,
.selectize-input {
  min-height: 38px;
  padding: 7px var(--ds-space-3);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
  font-size: 14px;
  color: var(--ds-text);
}
.ts-wrapper.focus .ts-control,
.selectize-input.focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-ring);
}
.ts-dropdown,
.selectize-dropdown {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-pop);
  font-size: 14px;
}
.ts-dropdown .active,
.selectize-dropdown .active {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}
.ts-wrapper.multi .ts-control > div,
.selectize-input > .item {
  padding: 2px 10px;
  background: var(--ds-primary-light);
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-primary-dark);
}

.bootstrap-select > .dropdown-toggle.btn-default {
  min-height: 38px;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-text);
}

/* jQuery UI autocomplete / datepicker / typeahead popups */
.ui-widget,
.ui-widget.ui-widget-content,
.tt-menu,
.tt-dropdown-menu {
  font-family: var(--ds-font);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-pop);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.tt-suggestion.tt-cursor {
  background: var(--ds-primary-light);
  border-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}

/* -------------------------------------------------------------------------
   10. TABLES
   ---------------------------------------------------------------------- */
.table {
  margin-bottom: 0;
  background-color: var(--ds-bg-card);
  font-size: 14px;
  color: var(--ds-text);
}
.table > thead > tr > th {
  padding: var(--ds-space-3) var(--ds-space-4);
  background-color: var(--ds-surface-muted);
  border-top: none;
  border-bottom: 1px solid var(--ds-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  vertical-align: middle;
}
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-border-soft);
  color: var(--ds-text-body);
  vertical-align: middle;
}
.table > tbody > tr:hover > td {
  background-color: var(--ds-surface-muted);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td {
  border-color: var(--ds-border);
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #FCFDFE; }
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td { padding: var(--ds-space-2) var(--ds-space-3); }
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th { border: none; }

/* legacy row-emphasis helpers from stylesheets/style.css */
.tr-head   { background-color: var(--ds-surface-muted); }
.tr-bold   { background-color: var(--ds-border-soft); font-weight: 600; }
.tr-bolder { background-color: var(--ds-border);      font-weight: 700; }
.tr-red    { background-color: var(--ds-error-bg); }
.sinar-table-freeze { background-color: var(--ds-surface-muted); }

/* DataTables chrome */
.dataTables_wrapper div.dataTables_length,
.dataTables_wrapper div.dataTables_filter { margin-bottom: var(--ds-space-3); }
.dataTables_wrapper div.dataTables_length label,
.dataTables_wrapper div.dataTables_filter label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-text-muted);
}
.dataTables_wrapper div.dataTables_length select,
.dataTables_wrapper div.dataTables_filter input {
  min-height: 34px;
  margin-left: var(--ds-space-2);
  padding: 6px var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
  font-size: 13px;
  color: var(--ds-text);
}
.dataTables_wrapper div.dataTables_filter input:focus,
.dataTables_wrapper div.dataTables_length select:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-ring);
  outline: none;
}
.dataTables_wrapper div.dataTables_info {
  padding-top: var(--ds-space-3);
  font-size: 12px;
  color: var(--ds-text-muted);
}
.dataTables_wrapper div.dataTables_paginate { padding-top: var(--ds-space-2); }
.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a,
.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span,
.pagination > li > a,
.pagination > li > span {
  margin-left: var(--ds-space-1);
  padding: 6px 12px;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  font-size: 13px;
  color: var(--ds-text-muted);
}
.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > a,
.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > span,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--ds-primary-light);
  border-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}
.pagination > .disabled > a,
.pagination > .disabled > span {
  background: var(--ds-surface-muted);
  border-color: var(--ds-border);
  color: var(--ds-text-disabled);
}
div.dataTables_processing {
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-pop);
  font-size: 13px;
  color: var(--ds-text-muted);
}
table.dataTable thead > tr > th { border-bottom: 1px solid var(--ds-border); }
.dt-buttons .btn { margin-right: var(--ds-space-2); }

/* -------------------------------------------------------------------------
   11. MODALS
   ---------------------------------------------------------------------- */
.modal-backdrop.in {
  background-color: #0F172A;
  opacity: .5;
}
.modal-content {
  border: none;
  border-radius: var(--ds-radius-2xl);
  box-shadow: var(--ds-shadow-pop);
}
.modal-header {
  min-height: auto;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border-soft);
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text);
}
.modal-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ds-text);
}
.modal-header .close {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 400;
  color: var(--ds-text-disabled);
  opacity: 1;
  text-shadow: none;
  transition: color .15s ease;
}
.modal-header .close:hover {
  color: var(--ds-text);
  opacity: 1;
}
.modal-body   { padding: var(--ds-space-5); }
.modal-footer {
  margin-top: 0;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-top: 1px solid var(--ds-border-soft);
}
.modal-lg { width: 85%; }
@media (max-width: 767px) {
  .modal-dialog,
  .modal-lg { width: auto; margin: var(--ds-space-3); }
  .modal-header,
  .modal-body   { padding: var(--ds-space-4); }
  .modal-footer { padding: var(--ds-space-3) var(--ds-space-4); }
}

/* bootbox reuses the same modal primitives */
.bootbox .modal-footer { border-top: 1px solid var(--ds-border-soft); }

/* -------------------------------------------------------------------------
   12. BADGE / LABEL / ALERT / CALLOUT
   ---------------------------------------------------------------------- */
.label,
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-shadow: none;
}
.label-success, .badge-success,
.label-primary, .badge-primary { background-color: var(--ds-primary-light); color: var(--ds-primary-dark); }
.label-warning, .badge-warning { background-color: var(--ds-warning-bg);    color: #92400E; }
.label-danger,  .badge-danger  { background-color: var(--ds-error-bg);      color: #B91C1C; }
.label-info,    .badge-info    { background-color: var(--ds-info-bg);       color: #1D4ED8; }
.label-default, .badge         { background-color: #F1F5F9;                 color: var(--ds-text-muted); }

.alert {
  margin-bottom: var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-5);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-xl);
  box-shadow: none;
  font-size: 14px;
}
.alert-success { background-color: var(--ds-success-bg); border-color: #A7F3D9; color: var(--ds-primary-dark); }
.alert-info    { background-color: var(--ds-info-bg);    border-color: #BFDBFE; color: #1D4ED8; }
.alert-warning { background-color: var(--ds-warning-bg); border-color: #FDE68A; color: #92400E; }
.alert-danger,
.alert-error   { background-color: var(--ds-error-bg);   border-color: #FECACA; color: #B91C1C; }
.alert .close  { color: inherit; opacity: .6; text-shadow: none; }

.callout {
  margin-bottom: var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-5);
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-left-width: 4px;
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
  font-size: 14px;
  color: var(--ds-text);
}
.callout h4 {
  margin-top: 0;
  margin-bottom: var(--ds-space-2);
  font-size: 14px;
  font-weight: 600;
}
.callout p:last-child { margin-bottom: 0; }
.callout a { color: var(--ds-primary-dark); text-decoration: underline; }
.callout.callout-success,
.callout.callout-primary { border-left-color: var(--ds-primary); background-color: var(--ds-success-bg); }
.callout.callout-info    { border-left-color: var(--ds-info);    background-color: var(--ds-info-bg); }
.callout.callout-warning { border-left-color: var(--ds-warning); background-color: var(--ds-warning-bg); }
.callout.callout-danger  { border-left-color: var(--ds-error);   background-color: var(--ds-error-bg); }
.callout code {
  padding: 1px 6px;
  background: rgba(15, 23, 42, .06);
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
  color: var(--ds-text);
}

/* -------------------------------------------------------------------------
   13. TABS / DROPDOWN / PROGRESS / MISC
   ---------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ds-border); }
.nav-tabs > li > a {
  margin-right: var(--ds-space-1);
  padding: 10px var(--ds-space-4);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text-muted);
}
.nav-tabs > li > a:hover {
  background-color: transparent;
  border-bottom-color: var(--ds-border);
  color: var(--ds-text);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--ds-primary);
  font-weight: 600;
  color: var(--ds-primary-dark);
}
.nav-tabs-custom {
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
}

.dropdown-menu {
  padding: var(--ds-space-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-pop);
  font-size: 14px;
}
.dropdown-menu > li > a {
  padding: 8px var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--ds-primary-light);
  color: var(--ds-primary-dark);
}
.dropdown-menu .divider { background-color: var(--ds-border-soft); }

.progress {
  height: 8px;
  margin-bottom: var(--ds-space-4);
  background-color: var(--ds-border-soft);
  border-radius: 999px;
  box-shadow: none;
}
.progress-bar {
  background-color: var(--ds-primary);
  border-radius: 999px;
  box-shadow: none;
  font-size: 11px;
  line-height: 8px;
}

.breadcrumb {
  padding: 0;
  background: transparent;
  font-size: 12px;
  color: var(--ds-text-muted);
}
.breadcrumb > li > a { color: var(--ds-text-muted); }
.breadcrumb > .active { color: var(--ds-text); }

.well {
  padding: var(--ds-space-4);
  background-color: var(--ds-surface-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: none;
}

/* toast used across the ajax layer */
#snackbar {
  min-width: 260px;
  margin-left: -130px;
  padding: var(--ds-space-3) var(--ds-space-5);
  background-color: #1E293B;
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-pop);
  font-size: 14px;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   14. LOGIN PAGE
   ---------------------------------------------------------------------- */
.login-page,
.register-page { background-color: var(--ds-bg-app); }

.login-box,
.register-box {
  width: 380px;
  margin: 7vh auto;
}
.login-logo,
.register-logo {
  margin-bottom: var(--ds-space-6);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ds-text);
}
.login-box-body,
.register-box-body {
  padding: var(--ds-space-6);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-text);
}
.login-box-body .form-group { margin-bottom: var(--ds-space-4); }
.login-box-msg {
  padding: 0 0 var(--ds-space-4);
  font-size: 13px;
  color: var(--ds-text-muted);
}
@media (max-width: 767px) {
  .login-box,
  .register-box { width: 100%; margin-top: 5vh; padding: 0 var(--ds-space-4); }
}

/* -------------------------------------------------------------------------
   15. EXISTING UTILITIES, ALIGNED TO THE DS SPACING SCALE
   ---------------------------------------------------------------------- */
.akses-matrix { gap: var(--ds-space-4); padding: var(--ds-space-6); }
.akses-matrix-container { background-color: var(--ds-bg-app); }

/* stylesheets/style.css gives every .row a 16px bottom margin. Drop it where a
   row is only a layout wrapper. */
.content > .row:last-child { margin-bottom: 0; }
.modal-body .row,
.form-group .row,
.box-body > .row:last-child,
.panel-body > .row:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   16. PAGE-LEVEL FILTER & ACTION ROWS

   Data tables already arrive inside a `.box` from public/ajax/, but the
   filter bar and the button toolbar above them sat bare on the page
   background. Two marker classes carry the DS treatment; they are the only
   change made to the Pug views, and they add no elements and no nesting.

     .ds-filter   a row holding form controls  -> rendered as a card
     .ds-actions  a row holding only buttons   -> spacing only
   ---------------------------------------------------------------------- */
.row.ds-filter,
.ds-filter {
  margin: 0 0 var(--ds-space-4);
  padding: var(--ds-space-4) var(--ds-space-2) var(--ds-space-2);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
}
/* Bootstrap columns supply the horizontal rhythm inside the card; a column
   that only wraps other columns contributes none of its own. */
.ds-filter [class*="col-"] {
  padding-left: var(--ds-space-3);
  padding-right: var(--ds-space-3);
  padding-bottom: var(--ds-space-2);
}
.ds-filter [class*="col-"]:has(> [class*="col-"]) {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* The views write `label` + `br` + control. The label is already a block, so
   the `br` is redundant — but several filters use an EMPTY label as a spacer
   that lines the search button up with the inputs, so the label keeps a
   reserved height whether or not it has text. */
.content label + br { display: none; }
.ds-filter label {
  display: block;
  min-height: 20px;
  margin-bottom: var(--ds-space-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-body);
}

/* Filter controls are mostly plain <select>/<input> without .form-control. */
.ds-filter select,
.ds-filter textarea,
.ds-filter input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  width: 100%;
  min-height: 38px;
  padding: 8px var(--ds-space-3);
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
  font-family: var(--ds-font);
  font-size: 14px;
  line-height: 1.43;
  color: var(--ds-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-filter select:focus,
.ds-filter textarea:focus,
.ds-filter input:focus {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-ring);
  outline: none;
}
.ds-filter .btn { vertical-align: top; }

/* Mobile-first: these grids are written with col-xs-* only, which leaves a
   filter at 8% width on a phone. Stack them below the desktop breakpoint
   without touching a single column class in the views. */
@media (max-width: 767px) {
  .ds-filter [class*="col-xs-"]:not(.col-xs-12) { width: 100%; float: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .ds-filter [class*="col-xs-"]:not(.col-xs-12) { width: 50%; }
}

.row.ds-actions,
.ds-actions {
  margin-bottom: var(--ds-space-3);
}
.ds-actions [class*="col-"] { padding-bottom: 0; }
.ds-actions .btn { margin-bottom: var(--ds-space-1); }

/* A few older filters are laid out with a borderless <table> instead of the
   grid. Strip the data-table chrome so they read as a form, not as data. */
table.table:not(:has(thead)):has(select, input) > tbody > tr > td {
  padding: var(--ds-space-1) var(--ds-space-2);
  border-top: none;
  vertical-align: middle;
}
table.table:not(:has(thead)):has(select, input) > tbody > tr:hover > td {
  background-color: transparent;
}
table.table:not(:has(thead)):has(select, input) select,
table.table:not(:has(thead)):has(select, input) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  min-height: 34px;
  padding: 6px var(--ds-space-3);
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font);
  font-size: 14px;
  color: var(--ds-text);
}

/* -------------------------------------------------------------------------
   17. STANDALONE PAGES (layout.pug, includes/404.pug)

   These render outside the AdminLTE shell and load only this stylesheet.
   ---------------------------------------------------------------------- */
.ds-page {
  margin: 0;
  min-height: 100vh;
  background: var(--ds-bg-app);
  color: var(--ds-text-body);
  font-family: var(--ds-font);
}
.ds-page-inner {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px var(--ds-space-4);
}
.ds-panel {
  padding: var(--ds-space-6);
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-card);
}
.ds-panel h1 {
  margin: 0 0 var(--ds-space-2);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ds-text);
}
.ds-panel-lead {
  margin: 0 0 var(--ds-space-5);
  font-size: 14px;
  color: var(--ds-text-muted);
}
.ds-panel-lead:last-child { margin-bottom: 0; }
.ds-panel-centered {
  text-align: center;
  padding: 48px var(--ds-space-6);
}
.ds-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ds-space-4);
  background: var(--ds-primary-light);
  border-radius: 50%;
  font-size: 26px;
  color: var(--ds-primary);
}
@media (max-width: 767px) {
  .ds-page-inner { padding: var(--ds-space-6) var(--ds-space-4); }
  .ds-panel { padding: var(--ds-space-4); }
  .ds-panel-centered { padding: var(--ds-space-6) var(--ds-space-4); }
}

/* -------------------------------------------------------------------------
   18. EMPTY STATE (DESIGN_SYSTEM.md section 14)

   Available to the ajax layer for "Belum ada data" panels.
   ---------------------------------------------------------------------- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px var(--ds-space-4);
  text-align: center;
}
.ds-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--ds-space-4);
  background: #F1F5F9;
  border-radius: 50%;
  font-size: 26px;
  color: var(--ds-text-disabled);
}
.ds-empty-title { font-size: 14px; font-weight: 500; color: var(--ds-text-muted); }
.ds-empty-hint  { margin-top: var(--ds-space-1); font-size: 12px; color: var(--ds-text-disabled); }

/* -------------------------------------------------------------------------
   19. LOADING OVERLAYS

   Same elements, same JS-toggled display/visibility — only the visual
   changes: the animated GIF is replaced by a CSS spinner on a soft scrim.
   ---------------------------------------------------------------------- */
#loadingPage,
.loader {
  background-color: rgba(248, 250, 251, .85);
  background-image: none;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#loadingPage::after,
.loader::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--ds-primary-light);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
#loading-bar { background-color: rgba(15, 23, 42, .45); }
#loading-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }