/* ==========================================================================
   SOHIB Design System — lapisan tampilan di atas AdminLTE / Bootstrap 3
   --------------------------------------------------------------------------
   Dimuat SETELAH styles.css pada kedua layout (publik & backend).
   Hanya mengubah tampilan (warna, tipografi, garis, radius); struktur dan
   kelas yang dipakai navigasi AJAX tidak disentuh.

   Warna dari customizer pengguna (Assets::styles) memakai !important,
   sehingga aturan yang menimpanya di sini memakai selektor berawalan
   "html body.backend" / "html body.frontend" + !important.

   Palet: Royal Blue #1E40AF (aksi & navigasi), Emerald #059669 (dana
   tersalurkan & status beres). Tanpa ungu/indigo.
   ========================================================================== */

:root{
  --sh-blue:#1E40AF; --sh-blue-hover:#1A3790; --sh-blue-50:#EFF6FF; --sh-blue-100:#DBEAFE; --sh-blue-200:#BFDBFE;
  --sh-emerald:#059669; --sh-emerald-700:#047857; --sh-emerald-50:#ECFDF5; --sh-emerald-100:#CDF5E3;
  --sh-amber:#B45309; --sh-amber-500:#D97706; --sh-amber-50:#FFFBEB; --sh-amber-200:#FDE68A;
  --sh-red:#B91C1C; --sh-red-600:#DC2626; --sh-red-50:#FEF2F2; --sh-red-200:#FECACA;
  --sh-bg:#F8FAFC; --sh-surface:#FFFFFF; --sh-surface-2:#F1F5F9; --sh-border:#E2E8F0; --sh-border-strong:#CBD5E1;
  --sh-text:#0F172A; --sh-text-2:#334155; --sh-text-3:#64748B; --sh-text-4:#94A3B8; --sh-ink:#0B1222;
  --sh-focus:#FFD43D;
  --sh-radius:10px; --sh-radius-sm:8px;
  --sh-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --sh-shadow-lg:0 24px 60px -16px rgba(15,23,42,.30);
  --sh-font:'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* -------------------------------------------------------------------------
   1. Dasar & tipografi
   ------------------------------------------------------------------------- */
html body.backend,
html body.frontend{
  font-family:var(--sh-font);
  font-size:14.5px;
  line-height:1.6;
  color:var(--sh-text);
  background:var(--sh-bg) !important;
  -webkit-font-smoothing:antialiased;
}
body.backend h1, body.backend h2, body.backend h3, body.backend h4, body.backend h5,
body.frontend h1, body.frontend h2, body.frontend h3, body.frontend h4, body.frontend h5{
  font-family:var(--sh-font);
  letter-spacing:-.01em;
}
body.backend .content a:not(.btn):not(.label):not(.dropdown-toggle),
body.frontend .content a:not(.btn):not(.label){ color:var(--sh-blue); }
body.backend .text-muted, body.frontend .text-muted{ color:var(--sh-text-3) !important; }
body.backend hr, body.frontend hr{ border-top-color:var(--sh-border); }
body.backend ::selection, body.frontend ::selection{ background:var(--sh-blue-100); color:var(--sh-text); }

/* Fokus keyboard bergaya situs pemerintahan: kuning + tepi gelap */
body.backend a:focus-visible, body.backend button:focus-visible, body.backend [tabindex]:focus-visible,
body.frontend a:focus-visible, body.frontend button:focus-visible, body.frontend [tabindex]:focus-visible{
  outline:2px solid #0F172A !important;
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--sh-focus) !important;
}

/* -------------------------------------------------------------------------
   2. Header (backend & publik)
   ------------------------------------------------------------------------- */
html body.backend .main-header,
html body.backend .navbar-default:not(.transparent),
html body.frontend .main-header,
html body.frontend .navbar-default:not(.transparent){
  background:rgba(255,255,255,.97) !important;
  color:var(--sh-text) !important;
  border:0 !important;
  border-bottom:1px solid var(--sh-border) !important;
  box-shadow:none !important;
}
html body.backend .navbar:not(.transparent) .nav a,
html body.backend .navbar:not(.transparent) .nav span,
html body.backend .navbar-default .navbar-nav > li > a,
html body.frontend .navbar:not(.transparent) .nav a,
html body.frontend .navbar:not(.transparent) .nav span,
html body.frontend .navbar-default .navbar-nav > li > a{
  color:var(--sh-text-2) !important;
  font-weight:600;
}
html body.backend .navbar-default .navbar-nav > li > a:hover,
html body.frontend .navbar-default .navbar-nav > li > a:hover{
  color:var(--sh-text) !important;
  background:transparent;
}
html body.backend .sidebar-toggle,
html body.backend .logo-mini{ color:var(--sh-text-2) !important; }
html body.backend .icon-bar,
html body.frontend .icon-bar{ background:var(--sh-text-2) !important; }
html body .pace .pace-progress{ background:var(--sh-blue) !important; }
html body .pace .pace-activity{ border-top-color:var(--sh-blue) !important; border-right-color:var(--sh-blue) !important; }
body.backend .navbar-brand .label.bg-yellow{
  background:var(--sh-blue-50) !important; color:var(--sh-blue) !important;
  border:1px solid var(--sh-blue-100); border-radius:999px; font-weight:700; font-size:11.5px;
}

/* Dropdown */
body.backend .dropdown-menu, body.frontend .dropdown-menu{
  border:1px solid var(--sh-border); border-radius:var(--sh-radius); box-shadow:var(--sh-shadow-lg); padding:6px;
}
body.backend .dropdown-menu > li > a, body.frontend .dropdown-menu > li > a{ border-radius:6px; padding:8px 12px; color:var(--sh-text-2) !important; }
body.backend .dropdown-menu > li > a:hover, body.frontend .dropdown-menu > li > a:hover{ background:var(--sh-surface-2); color:var(--sh-text) !important; }
body.backend .dropdown-menu .divider, body.frontend .dropdown-menu .divider{ background:var(--sh-border); }
body.frontend .dropdown-header{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sh-text-4); }

/* Breadcrumb di bawah header */
body.backend .content-header{ background:var(--sh-surface); border-top:1px solid var(--sh-border); }
body.backend .content-header .breadcrumb{ background:transparent; font-size:13px; }
body.backend .content-header .breadcrumb > li, body.backend .content-header .breadcrumb > li > a{ color:var(--sh-text-3) !important; }
body.backend .content-header .breadcrumb > .active{ color:var(--sh-text) !important; font-weight:600; }

/* -------------------------------------------------------------------------
   3. Sidebar backend
   ------------------------------------------------------------------------- */
html body.backend .main-sidebar,
html body.backend .main-sidebar .sidebar{
  background:var(--sh-surface) !important;
  color:var(--sh-text-2) !important;
}
html body.backend .main-sidebar{ border-right:1px solid var(--sh-border); box-shadow:none; }
html body.backend .main-sidebar a,
html body.backend .main-sidebar ul.sidebar-menu > li > a,
html body.backend .main-sidebar:hover ul.sidebar-menu > li.active > a{
  color:var(--sh-text-2) !important;
}
body.backend .user-panel{ padding:18px 12px 14px; border-bottom:1px solid var(--sh-border); margin-bottom:6px; }
body.backend .user-panel .image{ border:2px solid var(--sh-surface); box-shadow:0 0 0 1px var(--sh-border); }
body.backend .user-panel p a{ font-weight:700; color:var(--sh-text) !important; }
body.backend .user-panel small{ color:var(--sh-text-3); font-size:12px; }
body.backend .user-panel .text-success{ color:var(--sh-emerald) !important; }

body.backend .sidebar-menu > li.header{
  background:transparent !important;
  color:var(--sh-text-4) !important;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:14px 22px 6px;
}
body.backend .sidebar-menu > li > a,
body.backend .sidebar-menu .treeview-menu > li > a{
  font-size:13.5px; font-weight:600;
  border-left:0 !important;
  transition:background-color .12s, color .12s;
}
body.backend .sidebar-menu li > a > i.menu-icon,
html body.backend.sidebar-open .sidebar-menu li > a > i.menu-icon{
  background:transparent !important;
  color:var(--sh-text-3) !important;
}
/* Bentuk "pil" hanya saat sidebar terbuka penuh (mode ciut dibiarkan bawaan) */
body.backend:not(.sidebar-collapse) .sidebar-menu > li > a,
body.backend:not(.sidebar-collapse) .sidebar-menu .treeview-menu > li > a{
  margin:1px 10px; border-radius:8px; padding:8px 10px;
}
/* Label bawaan diberi lebar tetap untuk mode ciut; di mode terbuka biarkan mengikuti pil */
body.backend:not(.sidebar-collapse) .sidebar-menu li > a > span{ width:auto !important; }
body.backend .sidebar-menu > li > a:hover,
body.backend .sidebar-menu .treeview-menu > li > a:hover{
  background:var(--sh-surface-2) !important;
  color:var(--sh-text) !important;
}
/* Item aktif (halaman yang sedang dibuka): pil biru */
html body.backend .main-sidebar .sidebar-menu li.active:not(.have-children) > a,
html body.backend .main-sidebar:hover .sidebar-menu li.active:not(.have-children) > a{
  background:var(--sh-blue-50) !important;
  color:var(--sh-blue) !important;
  font-weight:700;
}
/* Induk grup yang sedang terbuka: cukup tebal, tanpa pil — agar hanya satu yang tersorot */
html body.backend .main-sidebar .sidebar-menu li.active.have-children > a,
html body.backend .main-sidebar:hover .sidebar-menu li.active.have-children > a{
  background:transparent !important;
  color:var(--sh-text) !important;
  font-weight:700;
}
body.backend .sidebar-menu li.active > a > i.menu-icon{ color:var(--sh-blue) !important; }
body.backend .sidebar-menu .treeview-menu{ background:transparent !important; padding:2px 0 6px; }
body.backend .sidebar-menu .treeview-menu > li > a{ color:var(--sh-text-3) !important; font-weight:500; }
body.backend:not(.sidebar-collapse) .sidebar-menu .treeview-menu > li > a{ padding:6px 10px 6px 24px !important; font-size:13px; }
body.backend:not(.sidebar-collapse) .sidebar-menu li > a > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.backend .sidebar-menu .pull-right-container i{ color:var(--sh-text-4); }

/* -------------------------------------------------------------------------
   4. Area konten & kartu (box)
   ------------------------------------------------------------------------- */
html body.backend .content-wrapper,
html body.backend .main-footer,
html body.frontend .content-wrapper{
  background:var(--sh-bg) !important;
  color:var(--sh-text) !important;
}
html body.backend .box.maximized{ background:var(--sh-surface) !important; color:var(--sh-text) !important; }
body.backend .content{ padding:20px; }

body.backend .box,
body.frontend .box{
  background:var(--sh-surface);
  border:1px solid var(--sh-border) !important;
  border-radius:var(--sh-radius);
  box-shadow:var(--sh-shadow-sm);
}
body.backend .box > .box-header.with-border,
body.frontend .box > .box-header.with-border{
  border-bottom:1px solid var(--sh-border);
  padding:16px 20px;
}
body.backend .box > .box-body,
body.frontend .box > .box-body{ padding:20px; }
body.backend .box-title, body.frontend .box-title{
  font-size:17px !important; font-weight:800 !important; letter-spacing:-.015em; color:var(--sh-text);
}
body.backend .box-title > .fa{ color:var(--sh-blue); margin-right:4px; }
body.backend .box-header > .row > hr{ margin:14px 15px; }
body.backend .btn-box-tool{ color:var(--sh-text-4); }
body.backend .btn-box-tool:hover{ color:var(--sh-text-2); }
body.backend .box-footer{ background:var(--sh-surface-2); border-top:1px solid var(--sh-border); border-radius:0 0 var(--sh-radius) var(--sh-radius); }
body.backend .well, body.frontend .well{ background:var(--sh-surface-2); border:1px solid var(--sh-border); border-radius:var(--sh-radius); box-shadow:none; }
body.backend .panel{ border-color:var(--sh-border); border-radius:var(--sh-radius); box-shadow:var(--sh-shadow-sm); }
body.backend .panel-heading{ border-radius:var(--sh-radius) var(--sh-radius) 0 0; }

/* -------------------------------------------------------------------------
   5. Tombol
   ------------------------------------------------------------------------- */
body.backend .btn, body.frontend .btn{
  border-radius:var(--sh-radius-sm);
  font-weight:600;
  box-shadow:none;
  transition:background-color .15s, border-color .15s, color .15s;
}
body.backend .btn-group > .btn:not(:first-child):not(:last-child),
body.frontend .btn-group > .btn:not(:first-child):not(:last-child){ border-radius:0; }
body.backend .btn-group > .btn:first-child:not(:last-child),
body.frontend .btn-group > .btn:first-child:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
body.backend .btn-group > .btn:last-child:not(:first-child),
body.frontend .btn-group > .btn:last-child:not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; }

/* Solid */
body.backend .btn-primary, body.frontend .btn-primary{ background:var(--sh-blue); border-color:var(--sh-blue); color:#fff; }
body.backend .btn-primary:hover, body.backend .btn-primary:focus, body.backend .btn-primary:active,
body.frontend .btn-primary:hover, body.frontend .btn-primary:focus, body.frontend .btn-primary:active{ background:var(--sh-blue-hover) !important; border-color:var(--sh-blue-hover) !important; color:#fff !important; }
body.backend .btn-success, body.frontend .btn-success{ background:var(--sh-emerald); border-color:var(--sh-emerald); color:#fff; }
body.backend .btn-success:hover, body.backend .btn-success:focus,
body.frontend .btn-success:hover, body.frontend .btn-success:focus{ background:var(--sh-emerald-700) !important; border-color:var(--sh-emerald-700) !important; color:#fff !important; }
body.backend .btn-danger, body.frontend .btn-danger{ background:var(--sh-red); border-color:var(--sh-red); color:#fff; }
body.backend .btn-danger:hover, body.frontend .btn-danger:hover{ background:#991B1B !important; border-color:#991B1B !important; color:#fff !important; }
body.backend .btn-warning, body.frontend .btn-warning{ background:var(--sh-amber-500); border-color:var(--sh-amber-500); color:#fff; }
body.backend .btn-warning:hover, body.frontend .btn-warning:hover{ background:var(--sh-amber) !important; border-color:var(--sh-amber) !important; color:#fff !important; }
/* "Info" = aksi sekunder: biru muda, bukan cyan */
body.backend .btn-info, body.frontend .btn-info{ background:var(--sh-blue-50); border-color:var(--sh-blue-100); color:var(--sh-blue); }
body.backend .btn-info:hover, body.backend .btn-info:focus,
body.frontend .btn-info:hover, body.frontend .btn-info:focus{ background:var(--sh-blue-100) !important; border-color:var(--sh-blue-200) !important; color:var(--sh-blue) !important; }
body.backend .btn-default, body.frontend .btn-default{ background:var(--sh-surface); border-color:var(--sh-border-strong); color:var(--sh-text-2); }
body.backend .btn-default:hover, body.frontend .btn-default:hover{ background:var(--sh-surface) !important; border-color:var(--sh-blue) !important; color:var(--sh-blue) !important; }

/* Tombol aksi baris tabel (btn-xs): versi lembut agar tabel tidak ramai */
body.backend .btn-xs{ border-radius:6px; }
body.backend .table .btn-xs.btn-primary{ background:var(--sh-blue-50); border-color:var(--sh-blue-100); color:var(--sh-blue); }
body.backend .table .btn-xs.btn-success{ background:var(--sh-emerald-50); border-color:var(--sh-emerald-100); color:var(--sh-emerald-700); }
body.backend .table .btn-xs.btn-danger{ background:var(--sh-red-50); border-color:var(--sh-red-200); color:var(--sh-red); }
body.backend .table .btn-xs.btn-warning{ background:var(--sh-amber-50); border-color:var(--sh-amber-200); color:var(--sh-amber); }
body.backend .table .btn-xs.btn-primary:hover{ background:var(--sh-blue) !important; border-color:var(--sh-blue) !important; color:#fff !important; }
body.backend .table .btn-xs.btn-success:hover{ background:var(--sh-emerald) !important; border-color:var(--sh-emerald) !important; color:#fff !important; }
body.backend .table .btn-xs.btn-danger:hover{ background:var(--sh-red) !important; border-color:var(--sh-red) !important; color:#fff !important; }
body.backend .table .btn-xs.btn-warning:hover{ background:var(--sh-amber-500) !important; border-color:var(--sh-amber-500) !important; color:#fff !important; }

/* Varian "holo" (garis) */
body.backend .btn-holo.btn-primary, body.frontend .btn-holo.btn-primary{ background:transparent; border-color:var(--sh-blue); color:var(--sh-blue); }
body.backend .btn-holo.btn-success, body.frontend .btn-holo.btn-success{ background:transparent; border-color:var(--sh-emerald); color:var(--sh-emerald-700); }
body.backend .btn-holo.btn-danger, body.frontend .btn-holo.btn-danger{ background:transparent; border-color:var(--sh-red); color:var(--sh-red); }
body.backend .btn-holo.btn-warning, body.frontend .btn-holo.btn-warning{ background:transparent; border-color:var(--sh-amber-500); color:var(--sh-amber); }
body.backend .btn-holo.btn-info, body.frontend .btn-holo.btn-info{ background:transparent; border-color:var(--sh-blue-200); color:var(--sh-blue); }
body.backend .btn-holo:hover, body.frontend .btn-holo:hover{ color:#fff !important; }

/* -------------------------------------------------------------------------
   6. Formulir
   ------------------------------------------------------------------------- */
body.backend .form-control, body.frontend .form-control{
  border:1px solid var(--sh-border-strong);
  border-radius:var(--sh-radius-sm);
  box-shadow:none;
  color:var(--sh-text);
  font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
body.backend .form-control:focus, body.frontend .form-control:focus{
  border-color:#0F172A !important;
  box-shadow:0 0 0 3px var(--sh-focus) !important;
  outline:none;
}
body.backend .form-control::placeholder, body.frontend .form-control::placeholder{ color:var(--sh-text-4); }
body.backend .form-control[readonly], body.backend .form-control[disabled]{ background:var(--sh-surface-2); color:var(--sh-text-3); }
body.backend .input-sm, body.frontend .input-sm{ border-radius:6px; }
body.backend .input-group-addon, body.frontend .input-group-addon{
  background:var(--sh-surface-2); border-color:var(--sh-border-strong); color:var(--sh-text-3);
}
/* Sudut di dalam input-group tetap rapat */
body.backend .input-group .form-control:not(:first-child):not(:last-child),
body.backend .input-group .no-radius{ border-radius:0; }
body.backend .left-radius{ border-radius:6px 0 0 6px !important; }
body.backend label, body.backend .control-label,
body.frontend label, body.frontend .control-label{ font-weight:600; color:var(--sh-text-2); font-size:13px; }
body.backend .help-block, body.frontend .help-block{ color:var(--sh-text-3); font-size:12.5px; }
body.backend .has-error .form-control{ border-color:var(--sh-red); }
body.backend .has-error .help-block, body.backend .has-error .control-label{ color:var(--sh-red); }
body.backend .big-label{ font-size:13px; }

/* -------------------------------------------------------------------------
   7. Tabel
   ------------------------------------------------------------------------- */
body.backend .table, body.frontend .table{ font-size:13.5px; color:var(--sh-text-2); }
body.backend .table > thead > tr > th,
body.frontend .table > thead > tr > th{
  background:var(--sh-surface-2);
  color:var(--sh-text-3);
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:1px solid var(--sh-border) !important;
  border-top:0 !important;
  padding:10px 12px;
  white-space:nowrap;
}
body.backend .table > thead > tr > th a, body.backend .table > thead > tr > th a i{ color:var(--sh-text-3) !important; }
body.backend .table > tbody > tr > td,
body.frontend .table > tbody > tr > td{
  border-top:1px solid var(--sh-border) !important;
  padding:10px 12px;
  vertical-align:middle;
}
body.backend .table-striped > tbody > tr:nth-of-type(odd){ background:transparent; }
body.backend .table-hover > tbody > tr:hover,
body.backend .table > tbody > tr:hover{ background:#F5F9FF; }
body.backend .table-bordered, body.backend .table-bordered > thead > tr > th, body.backend .table-bordered > tbody > tr > td{ border-color:var(--sh-border) !important; }
body.backend .table-responsive{ border:0; }
body.backend input[type="checkbox"], body.frontend input[type="checkbox"],
body.backend input[type="radio"], body.frontend input[type="radio"]{ accent-color:var(--sh-blue); }

/* -------------------------------------------------------------------------
   8. Label/badge → chip
   ------------------------------------------------------------------------- */
body.backend .label, body.frontend .label{
  display:inline-block; border-radius:999px; font-size:11.5px; font-weight:700;
  padding:.3em .75em; letter-spacing:.01em; border:1px solid transparent;
}
body.backend .label-success, body.backend .label.bg-green,
body.frontend .label-success, body.frontend .label.bg-green{ background:var(--sh-emerald-50) !important; color:var(--sh-emerald-700) !important; border-color:var(--sh-emerald-100); }
body.backend .label-danger, body.backend .label.bg-red,
body.frontend .label-danger, body.frontend .label.bg-red{ background:var(--sh-red-50) !important; color:var(--sh-red) !important; border-color:var(--sh-red-200); }
body.backend .label-warning, body.backend .label.bg-yellow, body.backend .label.bg-orange,
body.frontend .label-warning, body.frontend .label.bg-yellow, body.frontend .label.bg-orange{ background:var(--sh-amber-50) !important; color:var(--sh-amber) !important; border-color:var(--sh-amber-200); }
body.backend .label-info, body.backend .label-primary, body.backend .label.bg-aqua, body.backend .label.bg-blue, body.backend .label.bg-light-blue,
body.frontend .label-info, body.frontend .label-primary, body.frontend .label.bg-aqua, body.frontend .label.bg-blue{ background:var(--sh-blue-50) !important; color:var(--sh-blue) !important; border-color:var(--sh-blue-100); }
body.backend .label-default, body.frontend .label-default{ background:var(--sh-surface-2) !important; color:var(--sh-text-3) !important; border-color:var(--sh-border); }
/* Ungu (bg-purple, label-purple) dipetakan ke biru */
body.backend .bg-purple, body.backend .label-purple, body.frontend .bg-purple{ background:var(--sh-blue) !important; color:#fff !important; }
body.backend .badge, body.frontend .badge{ background:var(--sh-blue); border-radius:999px; font-weight:700; }

/* -------------------------------------------------------------------------
   9. Alert, modal, paginasi, tab
   ------------------------------------------------------------------------- */
body.backend .alert, body.frontend .alert{ border-radius:var(--sh-radius); border:1px solid; box-shadow:none; }
body.backend .alert-success, body.frontend .alert-success{ background:var(--sh-emerald-50) !important; border-color:var(--sh-emerald-100) !important; color:#065F46 !important; }
body.backend .alert-danger, body.frontend .alert-danger{ background:var(--sh-red-50) !important; border-color:var(--sh-red-200) !important; color:#7F1D1D !important; }
body.backend .alert-warning, body.frontend .alert-warning{ background:var(--sh-amber-50) !important; border-color:var(--sh-amber-200) !important; color:#78350F !important; }
body.backend .alert-info, body.frontend .alert-info{ background:var(--sh-blue-50) !important; border-color:var(--sh-blue-100) !important; color:#1E3A8A !important; }
body.backend .callout{ border-radius:var(--sh-radius); }

body.backend .modal-content, body.frontend .modal-content{ border:0; border-radius:14px; box-shadow:var(--sh-shadow-lg); }
body.backend .modal-header, body.frontend .modal-header{ border-bottom-color:var(--sh-border); }
body.backend .modal-footer, body.frontend .modal-footer{ border-top-color:var(--sh-border); background:var(--sh-bg); border-radius:0 0 14px 14px; }
html body.backend .modal .box-header, html body.frontend .modal .box-header{ background:var(--sh-surface) !important; color:var(--sh-text) !important; }
body.backend .modal-backdrop.in, body.frontend .modal-backdrop.in{ opacity:.45; }
body.backend .modal_cell > .row .alert, body.frontend .modal_cell > .row .alert{ padding:28px 22px; box-shadow:var(--sh-shadow-lg); }

body.backend .pagination > li > a, body.backend .pagination > li > span,
body.frontend .pagination > li > a, body.frontend .pagination > li > span{
  color:var(--sh-text-2); border-color:var(--sh-border); background:var(--sh-surface); font-weight:600;
}
body.backend .pagination > li > a:hover, body.frontend .pagination > li > a:hover{ background:var(--sh-surface-2); color:var(--sh-text); }
body.backend .pagination > .active > a, body.backend .pagination > .active > span,
body.frontend .pagination > .active > a, body.frontend .pagination > .active > span{
  background:var(--sh-blue) !important; border-color:var(--sh-blue) !important; color:#fff !important;
}
body.backend .pagination > li:first-child > a, body.frontend .pagination > li:first-child > a{ border-radius:8px 0 0 8px; }
body.backend .pagination > li:last-child > a, body.frontend .pagination > li:last-child > a{ border-radius:0 8px 8px 0; }

body.backend .nav-tabs, body.frontend .nav-tabs{ border-bottom-color:var(--sh-border); }
body.backend .nav-tabs > li > a, body.frontend .nav-tabs > li > a{ color:var(--sh-text-3); font-weight:600; border:0; border-bottom:2px solid transparent; border-radius:0; }
body.backend .nav-tabs > li.active > a, body.backend .nav-tabs > li.active > a:hover, body.backend .nav-tabs > li.active > a:focus,
body.frontend .nav-tabs > li.active > a, body.frontend .nav-tabs > li.active > a:hover{ color:var(--sh-blue); border:0; border-bottom:2px solid var(--sh-blue); background:transparent; }
body.backend .nav-tabs-custom{ border-radius:var(--sh-radius); box-shadow:var(--sh-shadow-sm); border:1px solid var(--sh-border); }
body.backend .progress{ border-radius:999px; background:var(--sh-surface-2); box-shadow:none; }
body.backend .progress-bar{ background:var(--sh-blue); box-shadow:none; }
body.backend .progress-bar-success{ background:var(--sh-emerald); }

/* Warna teks status bawaan */
body.backend .text-success, body.frontend .text-success{ color:var(--sh-emerald-700) !important; }
body.backend .text-danger, body.frontend .text-danger{ color:var(--sh-red) !important; }
body.backend .text-warning, body.frontend .text-warning{ color:var(--sh-amber) !important; }
body.backend .text-primary, body.backend .text-info, body.frontend .text-primary, body.frontend .text-info{ color:var(--sh-blue) !important; }

/* -------------------------------------------------------------------------
   10. Portal publik
   ------------------------------------------------------------------------- */
/* Strip identitas pemerintahan di atas header */
.sh-gov-strip{ background:var(--sh-ink); color:#CBD5E1; font-size:12.5px; line-height:1; }
.sh-gov-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:30px; }
.sh-gov-strip .fa{ color:#6EE7B7; margin-right:6px; }
.sh-gov-strip a{ color:#E2E8F0 !important; }
/* Strip berada di dalam navbar (tinggi navbar tetap 80px; baris menu hanya ~49px,
   sehingga strip 32px mengisi ruang kosong tanpa menggeser konten) */
.sh-gov-strip{ position:relative; z-index:2; }
/* Baris menu dirapatkan agar strip (30px) + menu muat dalam navbar 80px */
html body.frontend .navbar.frontend{ padding-top:0 !important; padding-bottom:0 !important; }
@media (min-width:768px){
  html body.frontend .navbar.frontend .navbar-nav{ margin-top:4px; margin-bottom:4px; }
  html body.frontend .navbar.frontend .navbar-nav > li > a{ padding-top:10px; padding-bottom:10px; line-height:20px; }
  html body.frontend .navbar.frontend .navbar-form{ margin-top:8px; margin-bottom:8px; }
  html body.frontend .navbar.frontend .navbar-brand{ height:50px; padding-top:6px; padding-bottom:6px; display:flex; align-items:center; }
}
/* Clearfix Bootstrap 3 (::before/::after) jangan ikut jadi item flex */
.sh-gov-strip .container::before, .sh-gov-strip .container::after{ display:none; }

body.frontend .navbar.frontend .navbar-brand img{ max-height:38px; width:auto; }
body.frontend .navbar.frontend .navbar-nav > li > a{ border-radius:8px; }
body.frontend .navbar.frontend .navbar-nav > li.active > a,
body.frontend .navbar.frontend .navbar-nav > li > a:hover{ background:var(--sh-surface-2) !important; color:var(--sh-text) !important; }
body.frontend .navbar.frontend .navbar-nav > li.active > a{ background:var(--sh-blue-50) !important; color:var(--sh-blue) !important; }
body.frontend .navbar-form .front-search{ border-radius:8px 0 0 8px !important; background:var(--sh-bg); }
body.frontend .navbar-form .input-group-addon .btn{ border-radius:0 8px 8px 0 !important; background:var(--sh-blue); color:#fff !important; border-color:var(--sh-blue); }
body.frontend .navbar-form .input-group-addon .btn .fa{ color:#fff !important; }

/* Kartu daftar proposal publik */
body.frontend .card{
  background:var(--sh-surface); border:1px solid var(--sh-border); border-radius:var(--sh-radius);
  box-shadow:var(--sh-shadow-sm); overflow:hidden; transition:border-color .15s;
}
body.frontend .card:hover{ border-color:var(--sh-blue); }
body.frontend .card .card-title{ font-weight:800; letter-spacing:-.01em; }
body.frontend .list-group-item{ border-color:var(--sh-border); }
body.frontend .list-group-item.active, body.frontend .list-group-item.active:hover{ background:var(--sh-blue); border-color:var(--sh-blue); }

/* Footer publik */
html body.frontend .main-footer.frontend{
  background:var(--sh-ink) !important; color:#94A3B8 !important; border-top:0; padding:40px 0 24px;
}
html body.frontend .main-footer.frontend a{ color:#CBD5E1 !important; }
html body.frontend .main-footer.frontend a:hover{ color:#fff !important; }

/* -------------------------------------------------------------------------
   11. Warna latar dekoratif AdminLTE → palet SOHIB
   random_bg() kini selalu memberi bg-blue; kelas lain tetap dipetakan agar
   tidak ada warna di luar palet (termasuk maroon/ungu).
   ------------------------------------------------------------------------- */
body.frontend .bg-blue, body.backend .bg-blue:not(.label){ background-color:var(--sh-blue) !important; color:#fff; }
body.frontend .bg-navy, body.backend .bg-navy:not(.label){ background-color:var(--sh-ink) !important; color:#fff; }
body.frontend .bg-teal, body.backend .bg-teal:not(.label){ background-color:#0F766E !important; color:#fff; }
body.frontend .bg-aqua:not(.label), body.backend .bg-aqua:not(.label){ background-color:#1D4ED8 !important; color:#fff; }
body.frontend .bg-maroon, body.backend .bg-maroon:not(.label){ background-color:var(--sh-blue) !important; color:#fff; }
body.frontend .bg-green:not(.label), body.backend .bg-green:not(.label){ background-color:var(--sh-emerald) !important; color:#fff; }
body.frontend .bg-red:not(.label), body.backend .bg-red:not(.label){ background-color:var(--sh-red) !important; color:#fff; }
body.frontend .bg-yellow:not(.label), body.backend .bg-yellow:not(.label){ background-color:var(--sh-amber-500) !important; color:#fff; }

/* -------------------------------------------------------------------------
   12. Beranda publik (.sh-home)
   ------------------------------------------------------------------------- */
/* Beranda penuh-lebar: padding kontainer dinolkan lewat :has (browser lama: tetap aman, hanya ada jarak tepi).
   clear:both → mulai di bawah float logo/menu navbar yang menjorok pada layar kecil. */
.render-content:has(> .sh-home){ padding:0 !important; }
.sh-home{ clear:both; color:var(--sh-text); font-size:16px; line-height:1.65; }
/* Reset berspesifisitas nol (:where) agar tidak mengalahkan padding/margin komponen */
.sh-home :where(h1, h2, h3, p, ul, ol, dl, dd){ margin:0; padding:0; }
.sh-home :where(ul, ol){ list-style:none; }
.sh-home p{ text-align:left; }
.sh-home h1, .sh-home h2, .sh-home h3{ color:var(--sh-text); text-wrap:balance; }
.sh-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.sh-section{ padding:80px 0; border-top:1px solid var(--sh-border); background:var(--sh-bg); }
.sh-section.sh-white{ background:var(--sh-surface); }
.sh-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sh-blue); }
.sh-eyebrow.sh-green{ color:var(--sh-emerald-700); }
.sh-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; }
.sh-sec-head h2{ margin-top:10px; font-size:32px; font-weight:800; letter-spacing:-.025em; line-height:1.2; }
.sh-sec-head p{ margin-top:10px; font-size:16px; color:var(--sh-text-2); max-width:62ch; }
.sh-card{ background:var(--sh-surface); border:1px solid var(--sh-border); border-radius:var(--sh-radius); box-shadow:var(--sh-shadow-sm); }

/* Tombol beranda */
.sh-home .sh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--sh-radius-sm); border:1px solid transparent; font-weight:600; font-size:14px; line-height:1; white-space:nowrap; text-decoration:none !important; transition:background-color .15s, border-color .15s, color .15s; cursor:pointer; }
.sh-home .sh-btn-primary{ background:var(--sh-blue); color:#fff !important; }
.sh-home .sh-btn-primary:hover{ background:var(--sh-blue-hover); }
.sh-home .sh-btn-outline{ background:var(--sh-surface); border-color:var(--sh-border-strong); color:var(--sh-text) !important; }
.sh-home .sh-btn-outline:hover{ border-color:var(--sh-blue); color:var(--sh-blue) !important; }
.sh-home .sh-btn-lg{ height:48px; font-size:15px; padding:0 22px; }
.sh-home .sh-btn-block{ width:100%; }

/* Hero */
.sh-hero{ position:relative; background:var(--sh-surface); overflow:hidden; }
.sh-hero::before{ content:""; position:absolute; top:0; right:0; bottom:0; left:52%; background-image:radial-gradient(var(--sh-border-strong) 1px, transparent 1.3px); background-size:20px 20px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity:.7; pointer-events:none; }
.sh-hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:64px; align-items:center; padding-top:72px; padding-bottom:84px; }
.sh-announce{ display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:5px 12px 5px 5px; border-radius:999px; border:1px solid var(--sh-emerald-100); background:var(--sh-emerald-50); color:#065F46 !important; font-size:13px; font-weight:600; text-decoration:none !important; }
.sh-announce:hover{ border-color:#86E4BE; }
.sh-announce b{ flex:none; padding:3px 9px; border-radius:999px; background:var(--sh-emerald); color:#fff; font-size:11.5px; }
.sh-hero h1{ margin-top:22px; font-size:46px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.sh-hero h1 em{ font-style:normal; color:var(--sh-blue); }
.sh-lead{ margin-top:20px !important; font-size:17.5px; color:var(--sh-text-2); max-width:56ch; }
.sh-points{ margin-top:28px !important; display:grid; gap:10px; }
.sh-points li{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; color:var(--sh-text-2); }
.sh-points .fa{ color:var(--sh-emerald); font-size:18px; }

.sh-tracker{ background:var(--sh-surface); border:1px solid var(--sh-border-strong); border-radius:var(--sh-radius); padding:28px; }
.sh-tracker-head{ display:flex; gap:14px; align-items:flex-start; }
.sh-tracker-icon{ width:44px; height:44px; border-radius:10px; background:var(--sh-blue-50); color:var(--sh-blue); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.sh-tracker h2{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
.sh-tracker-head p{ font-size:14px; color:var(--sh-text-3); margin-top:3px; }
.sh-tracker-form{ margin-top:22px; display:grid; gap:12px; }
.sh-input-wrap{ position:relative; }
.sh-input-wrap .fa{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--sh-text-4); }
.sh-input{ width:100%; height:48px; padding:0 14px 0 40px; border:1px solid var(--sh-border-strong); border-radius:var(--sh-radius-sm); font-size:15px; background:var(--sh-surface); color:var(--sh-text); }
.sh-input:focus{ outline:none; border-color:#0F172A; box-shadow:0 0 0 3px var(--sh-focus); }
.sh-tracker-foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--sh-border); }
.sh-tracker-foot p{ font-size:13px; color:var(--sh-text-3); }
.sh-flow-bar{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-top:10px; }
.sh-flow-bar span{ height:6px; border-radius:2px; background:var(--sh-blue-100); }
.sh-flow-bar span:nth-child(-n+3){ background:var(--sh-blue); }
.sh-flow-labels{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--sh-text-4); margin-top:6px; }

/* Kategori */
.sh-cats{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sh-cat{ padding:28px; display:flex; flex-direction:column; gap:18px; transition:border-color .15s; }
.sh-cat:hover{ border-color:var(--sh-blue); }
.sh-cat-green:hover{ border-color:var(--sh-emerald); }
.sh-cat-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.sh-cat-top h3{ margin-top:6px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.sh-cat-icon{ width:52px; height:52px; border-radius:12px; background:var(--sh-blue-50); color:var(--sh-blue); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.sh-cat-green .sh-cat-icon{ background:var(--sh-emerald-50); color:var(--sh-emerald); }
.sh-cat > p{ color:var(--sh-text-2); font-size:15px; }
.sh-who{ display:flex; flex-wrap:wrap; gap:8px; }
.sh-who li{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:8px; background:var(--sh-surface-2); border:1px solid var(--sh-border); font-size:13px; font-weight:600; color:var(--sh-text-2); }
.sh-who .fa{ color:var(--sh-text-3); }
.sh-cat-meta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 16px; border-radius:10px; background:var(--sh-bg); border:1px solid var(--sh-border); }
.sh-cat-meta dt{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sh-text-3); }
.sh-cat-meta dd{ margin-top:2px !important; font-size:14px; font-weight:600; }
.sh-details summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--sh-text-2); padding:6px 0; }
.sh-details summary::-webkit-details-marker{ display:none; }
.sh-details summary .fa{ transition:transform .2s; }
.sh-details[open] summary .fa{ transform:rotate(180deg); }
.sh-check{ display:grid; gap:9px; margin-top:10px !important; padding-top:14px !important; border-top:1px dashed var(--sh-border-strong); }
.sh-check li{ display:flex; gap:10px; font-size:14px; color:var(--sh-text-2); }
.sh-check .fa{ color:var(--sh-emerald); margin-top:4px; }

/* Alur */
.sh-steps{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px; position:relative; }
.sh-steps::before{ content:""; position:absolute; left:24px; right:24px; top:23px; height:2px; background:linear-gradient(90deg, var(--sh-blue-200), var(--sh-emerald-100)); }
.sh-steps li{ position:relative; display:grid; gap:10px; align-content:start; }
.sh-num{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--sh-surface); border:2px solid var(--sh-blue); color:var(--sh-blue); font-weight:800; font-size:16px; position:relative; }
.sh-num-green{ border-color:var(--sh-emerald); color:var(--sh-emerald); }
.sh-steps h3{ font-size:15.5px; font-weight:750; }
.sh-steps p{ font-size:13.5px; color:var(--sh-text-3); line-height:1.55; }

/* Bento transparansi */
.sh-bento{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.sh-tile{ padding:22px; display:flex; flex-direction:column; gap:6px; min-height:180px; }
.sh-span-2{ grid-column:span 2; }
.sh-span-4{ grid-column:span 4; min-height:0; }
.sh-tile-label{ font-size:13px; font-weight:600; color:var(--sh-text-3); display:flex; align-items:center; gap:8px; }
.sh-tile-value{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums; }
.sh-tile-foot{ font-size:13px; color:var(--sh-text-3); margin-top:auto; }
.sh-spark{ width:100%; height:44px; margin-top:auto; display:block; }
.sh-stack{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--sh-surface-2); margin:14px 0 16px; }
.sh-stack span{ display:block; height:100%; min-width:3px; }
.sh-legend{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; }
.sh-legend > div{ display:grid; gap:2px; }
.sh-legend-name{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--sh-text-2); }
.sh-legend-name i{ width:10px; height:10px; border-radius:3px; display:block; }
.sh-legend b{ font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sh-legend small{ font-size:12.5px; color:var(--sh-text-3); }
.sh-kec{ display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; margin-top:12px; }
.sh-kec-row{ display:grid; grid-template-columns:130px 1fr 52px; align-items:center; gap:12px; font-size:13.5px; }
.sh-kec-name{ color:var(--sh-text-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-kec-bar{ height:8px; border-radius:999px; background:var(--sh-surface-2); overflow:hidden; }
.sh-kec-bar span{ display:block; height:100%; background:var(--sh-blue); border-radius:inherit; }
.sh-kec-val{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* Tabel usulan terbaru */
.sh-latest{ margin-top:20px; }
.sh-card-head{ padding:16px 20px; border-bottom:1px solid var(--sh-border); }
.sh-card-head h3{ font-size:15px; font-weight:700; }
.sh-card-head p{ font-size:13px; color:var(--sh-text-3); margin-top:2px !important; }
.sh-table-wrap{ overflow-x:auto; }
.sh-table{ width:100%; border-collapse:collapse; font-size:14px; }
.sh-table th{ text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sh-text-3); background:var(--sh-surface-2); padding:10px 16px; border-bottom:1px solid var(--sh-border); white-space:nowrap; }
.sh-table td{ padding:14px 16px; border-bottom:1px solid var(--sh-border); vertical-align:middle; color:var(--sh-text-2); }
.sh-table tbody tr:last-child td{ border-bottom:0; }
.sh-table .r{ text-align:right; }
.sh-table small{ display:block; font-size:12.5px; color:var(--sh-text-3); }
.sh-home a.sh-strong{ color:var(--sh-text) !important; font-weight:700; }
.sh-home a.sh-strong:hover{ color:var(--sh-blue) !important; }
.sh-num-cell{ white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; color:var(--sh-text); }
.sh-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; border:1px solid; font-size:12px; font-weight:600; white-space:nowrap; }
.sh-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sh-chip-info{ color:var(--sh-blue); background:var(--sh-blue-50); border-color:var(--sh-blue-100); }
.sh-chip-success{ color:var(--sh-emerald-700); background:var(--sh-emerald-50); border-color:var(--sh-emerald-100); }
.sh-chip-danger{ color:var(--sh-red); background:var(--sh-red-50); border-color:var(--sh-red-200); }
.sh-chip-neutral{ color:var(--sh-text-3); background:var(--sh-surface-2); border-color:var(--sh-border); }

/* Regulasi & FAQ */
.sh-reg-faq{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px; align-items:start; }
.sh-reg-list{ display:grid; gap:12px; }
.sh-reg{ display:flex; gap:14px; padding:16px 18px; align-items:flex-start; }
.sh-reg .fa{ color:var(--sh-blue); font-size:18px; margin-top:3px; }
.sh-reg h3{ font-size:14.5px; font-weight:700; }
.sh-reg p{ font-size:13px; color:var(--sh-text-3); margin-top:2px !important; }
.sh-notice{ display:flex; gap:12px; margin-top:16px; padding:14px 16px; border-radius:var(--sh-radius-sm); border:1px solid var(--sh-emerald-100); background:var(--sh-emerald-50); color:#065F46; font-size:14px; }
.sh-notice .fa{ font-size:18px; margin-top:2px; }
.sh-faq details{ border-bottom:1px solid var(--sh-border); }
.sh-faq details:last-child{ border-bottom:0; }
.sh-faq summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-weight:700; font-size:15px; cursor:pointer; color:var(--sh-text); }
.sh-faq summary::-webkit-details-marker{ display:none; }
.sh-faq summary .fa{ color:var(--sh-text-3); font-size:18px; transition:transform .2s; }
.sh-faq details[open] summary .fa{ transform:rotate(180deg); }
.sh-faq details p{ padding:0 22px 20px; color:var(--sh-text-2); font-size:14.5px; max-width:68ch; }

/* Responsif beranda */
@media (max-width:1100px){
  .sh-hero-grid{ grid-template-columns:1fr; gap:40px; padding-top:56px; padding-bottom:64px; }
  .sh-hero::before{ left:0; top:50%; }
  .sh-steps{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:32px; }
  .sh-steps::before{ display:none; }
  .sh-bento{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sh-span-4{ grid-column:span 2; }
  .sh-reg-faq{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .sh-wrap{ padding:0 16px; }
  .sh-section{ padding:56px 0; }
  .sh-sec-head{ flex-direction:column; align-items:flex-start; }
  .sh-sec-head h2{ font-size:26px; }
  .sh-hero-grid{ padding-top:40px; }
  .sh-hero h1{ font-size:31px; }
  .sh-lead{ font-size:16px; }
  .sh-tracker, .sh-cat{ padding:20px; }
  .sh-cats{ grid-template-columns:1fr; }
  .sh-cat-meta{ grid-template-columns:1fr; }
  .sh-steps{ grid-template-columns:1fr; }
  .sh-steps li{ grid-template-columns:48px 1fr; column-gap:14px; }
  .sh-steps .sh-num{ grid-row:span 2; }
  .sh-bento{ grid-template-columns:1fr; }
  .sh-span-2, .sh-span-4{ grid-column:auto; }
  .sh-kec{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------
   13. Halaman publik umum (.sh-page): daftar usulan & halaman informasi CMS
   ------------------------------------------------------------------------- */
.render-content:has(> .sh-page){ padding:0 !important; }
.sh-page{ clear:both; color:var(--sh-text); font-size:15px; line-height:1.65; background:var(--sh-bg); padding-bottom:72px; }
.sh-page :where(h1, h2, h3, p, ul, ol, dl, dd){ margin:0; padding:0; }
.sh-page :where(ul, ol){ list-style:none; }
.sh-page p{ text-align:left; }
.sh-narrow{ max-width:880px; }

/* Tombol (sama dengan beranda) */
.sh-page .sh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--sh-radius-sm); border:1px solid transparent; font-weight:600; font-size:14px; line-height:1; white-space:nowrap; text-decoration:none !important; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s; }
.sh-page .sh-btn-primary{ background:var(--sh-blue); color:#fff !important; }
.sh-page .sh-btn-primary:hover{ background:var(--sh-blue-hover); }
.sh-page .sh-btn-outline{ background:var(--sh-surface); border-color:var(--sh-border-strong); color:var(--sh-text) !important; }
.sh-page .sh-btn-outline:hover{ border-color:var(--sh-blue); color:var(--sh-blue) !important; }

/* Kepala halaman */
.sh-page-head{ background:var(--sh-surface); border-bottom:1px solid var(--sh-border); padding:40px 0 36px; margin-bottom:32px; }
.sh-page-head h1{ margin-top:8px; font-size:34px; font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--sh-text); text-wrap:balance; }
.sh-page-head p{ margin-top:10px; font-size:16px; color:var(--sh-text-2); max-width:62ch; }
.sh-crumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--sh-text-3); margin-bottom:18px; }
.sh-crumb a{ color:var(--sh-text-3) !important; text-decoration:none; }
.sh-crumb a:hover{ color:var(--sh-blue) !important; text-decoration:underline; }
.sh-crumb span[aria-current]{ color:var(--sh-text); font-weight:600; }

/* Tata letak daftar + sidebar */
.sh-page-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.sh-page-side{ display:grid; gap:16px; position:sticky; top:96px; }

/* Kartu usulan */
.sh-pcards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.sh-pcard{ display:flex; flex-direction:column; overflow:hidden; transition:border-color .15s; }
.sh-pcard:hover{ border-color:var(--sh-blue); }
.sh-pcard-img{ display:block; aspect-ratio:16 / 9; background:var(--sh-surface-2); overflow:hidden; border-bottom:1px solid var(--sh-border); }
.sh-pcard-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-pcard-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sh-pcard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sh-pcard-ta{ font-size:12px; font-weight:700; color:var(--sh-text-3); letter-spacing:.04em; }
.sh-pcard h2{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.3; }
.sh-pcard h2 a{ color:var(--sh-text) !important; text-decoration:none; }
.sh-pcard h2 a:hover{ color:var(--sh-blue) !important; }
.sh-pcard-addr{ display:flex; gap:8px; font-size:13.5px; color:var(--sh-text-3); }
.sh-pcard-addr .fa{ margin-top:3px; color:var(--sh-text-4); }
.sh-steps4{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:2px; }
.sh-steps4 span{ height:6px; border-radius:2px; background:var(--sh-border); }
.sh-steps4 span.done{ background:var(--sh-emerald); }
.sh-steps4 span.cur{ background:var(--sh-blue); }
.sh-steps4 span.bad{ background:var(--sh-red); }
.sh-pcard-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:auto !important; padding-top:14px !important; border-top:1px solid var(--sh-border); }
.sh-pcard-meta .sh-pcard-opd{ grid-column:1 / -1; }
.sh-pcard-meta dt{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sh-text-3); }
.sh-pcard-meta dd{ margin-top:2px !important; font-size:14px; font-weight:600; color:var(--sh-text); font-variant-numeric:tabular-nums; }
.sh-pagination{ margin-top:24px; }
.sh-pagination .pagination{ margin:0; }
.sh-empty{ padding:48px 24px; text-align:center; display:grid; justify-items:center; gap:10px; }
.sh-empty .fa{ font-size:32px; color:var(--sh-text-4); }
.sh-empty h2{ font-size:18px; font-weight:800; }
.sh-empty p{ color:var(--sh-text-3); text-align:center !important; }

/* Sidebar penyaring */
.sh-side-card{ padding:18px; }
.sh-side-card h3{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sh-text-3); margin-bottom:10px !important; }
.sh-side-search{ display:flex; gap:8px; }
.sh-side-search .sh-input{ height:40px; padding-left:12px; font-size:14px; }
.sh-side-search .sh-btn{ width:40px; padding:0; flex:none; }
.sh-side-list{ display:grid; gap:2px; max-height:340px; overflow-y:auto; }
.sh-side-list a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px; font-size:13.5px; color:var(--sh-text-2) !important; text-decoration:none; }
.sh-side-list a:hover{ background:var(--sh-surface-2); color:var(--sh-text) !important; }
.sh-side-list a.is-active{ background:var(--sh-blue-50); color:var(--sh-blue) !important; font-weight:700; }
.sh-side-list a span:first-child{ min-width:0; }
.sh-count{ flex:none; min-width:28px; padding:1px 8px; border-radius:999px; background:var(--sh-surface-2); border:1px solid var(--sh-border); font-size:11.5px; font-weight:700; color:var(--sh-text-3); text-align:center; font-variant-numeric:tabular-nums; }
.sh-side-list a.is-active .sh-count{ background:var(--sh-surface); border-color:var(--sh-blue-100); color:var(--sh-blue); }

/* Halaman informasi (konten CMS) */
.sh-page-body{ display:grid; gap:16px; }
.sh-prose{ padding:36px 40px; font-size:16px; line-height:1.75; color:var(--sh-text-2); }
.sh-prose > *:first-child{ margin-top:0 !important; }
.sh-prose p{ margin:0 0 1em !important; text-align:left !important; }
.sh-prose h1, .sh-prose h2, .sh-prose h3, .sh-prose h4{ color:var(--sh-text); font-weight:800; letter-spacing:-.015em; line-height:1.3; margin:1.6em 0 .6em !important; }
.sh-prose h2{ font-size:22px; } .sh-prose h3{ font-size:18px; } .sh-prose h4{ font-size:16px; }
.sh-prose ul, .sh-prose ol{ margin:0 0 1em !important; padding-left:1.4em !important; }
.sh-prose ul{ list-style:disc !important; } .sh-prose ol{ list-style:decimal !important; }
.sh-prose li{ margin-bottom:.35em; }
.sh-prose a{ color:var(--sh-blue) !important; text-decoration:underline; text-underline-offset:3px; }
.sh-prose img{ max-width:100%; height:auto; border-radius:var(--sh-radius-sm); }
.sh-prose table{ width:100%; border-collapse:collapse; margin:0 0 1em; font-size:14px; }
.sh-prose th, .sh-prose td{ border:1px solid var(--sh-border); padding:8px 12px; text-align:left; }
.sh-prose th{ background:var(--sh-surface-2); }
.sh-prose blockquote{ margin:0 0 1em; padding:12px 18px; border-left:3px solid var(--sh-blue-200); background:var(--sh-blue-50); color:var(--sh-text-2); }
.sh-updated{ font-size:13px; color:var(--sh-text-3); display:flex; align-items:center; gap:6px; }

/* -------------------------------------------------------------------------
   14. Formulir masuk (.sh-auth) — halaman & modal
   ------------------------------------------------------------------------- */
.sh-auth{ color:var(--sh-text); }
.sh-auth-page{ min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center; padding:48px 16px; background:var(--sh-bg); }
.sh-auth-page .sh-auth-form{ width:100%; max-width:420px; background:var(--sh-surface); border:1px solid var(--sh-border); border-radius:14px; padding:32px; box-shadow:var(--sh-shadow-sm); }
.sh-auth-modal .sh-auth-form{ max-width:440px; margin:0 auto; padding:8px 8px 4px; }
.sh-auth-form{ display:grid; gap:16px; }
.sh-auth-brand{ display:flex; align-items:center; gap:12px; }
.sh-auth-mark{ width:40px; height:40px; flex:none; }
.sh-auth-name{ display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--sh-text); }
.sh-auth-tag{ display:block; font-size:12px; color:var(--sh-text-3); }
.sh-auth-title{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:4px 0 0; }
.sh-auth-sub{ font-size:14px; color:var(--sh-text-3); margin:0; text-align:left !important; }
.sh-auth .callback-status:empty{ display:none; }
.sh-auth .callback-status .alert{ margin:0; font-size:14px; }
.sh-auth .callback-status .alert p{ margin:0; }
.sh-auth-fields{ display:grid; gap:14px; }
.sh-auth-field{ display:grid; gap:6px; margin:0; font-weight:400; }
.sh-auth-field > label, .sh-auth-label{ font-size:13px; font-weight:600; color:var(--sh-text-2); }
.sh-auth-input{ position:relative; display:block; }
.sh-auth-input > .fa{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--sh-text-4); pointer-events:none; z-index:2; font-size:15px; }
html body .sh-auth .sh-auth-input .form-control{
  height:44px; padding:0 12px 0 38px; font-size:15px; background:var(--sh-surface) !important; color:var(--sh-text) !important;
  border:1px solid var(--sh-border-strong); border-radius:var(--sh-radius-sm); box-shadow:none;
}
html body .sh-auth .sh-auth-input .form-control:focus{ border-color:#0F172A !important; box-shadow:0 0 0 3px var(--sh-focus) !important; }
.sh-auth-select select.form-control{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px !important; padding-right:36px !important; }
.sh-auth-remember{ display:inline-flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:500 !important; color:var(--sh-text-2); cursor:pointer; }
.sh-auth-remember input{ width:17px; height:17px; margin:0; accent-color:var(--sh-blue); }
html body .sh-auth .sh-auth-btn{ height:46px; font-size:15px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--sh-radius-sm); }
.sh-auth-note{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--sh-text-3); margin:0; padding-top:14px; border-top:1px solid var(--sh-border); text-align:left !important; }
.sh-auth-note .fa{ color:var(--sh-emerald); margin-top:2px; }

/* Responsif halaman publik */
@media (max-width:991px){
  .sh-page-grid{ grid-template-columns:1fr; }
  .sh-page-side{ position:static; }
}
@media (max-width:767px){
  .sh-page-head{ padding:28px 0 24px; margin-bottom:20px; }
  .sh-page-head h1{ font-size:26px; }
  .sh-pcards{ grid-template-columns:1fr; }
  .sh-prose{ padding:22px 18px; font-size:15.5px; }
  .sh-auth-page .sh-auth-form{ padding:24px 20px; }
}

/* -------------------------------------------------------------------------
   15. Select2 (dropdown yang dibangun JS dari <select>) — selaras design system
   ------------------------------------------------------------------------- */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple{
  border:1px solid var(--sh-border-strong); border-radius:var(--sh-radius-sm); background:var(--sh-surface);
}
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color:#0F172A; box-shadow:0 0 0 3px var(--sh-focus); outline:none;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--sh-text); }
body .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--sh-text-4); }
body .select2-dropdown{ border:1px solid var(--sh-border); border-radius:var(--sh-radius-sm); box-shadow:var(--sh-shadow-lg); overflow:hidden; }
body .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--sh-blue); color:#fff; }
body .select2-container--default .select2-results__option[aria-selected=true]{ background:var(--sh-blue-50); color:var(--sh-blue); }
body .select2-container--default .select2-search--dropdown .select2-search__field{ border:1px solid var(--sh-border-strong); border-radius:6px; }
body .select2-container--default .select2-selection--multiple .select2-selection__choice{ background:var(--sh-blue-50); border-color:var(--sh-blue-100); color:var(--sh-blue); border-radius:999px; }

/* Select2 di formulir masuk: setinggi input lain dan memberi ruang ikon */
.sh-auth-input .select2-container{ width:100% !important; display:block; height:auto !important; padding:0 !important; border:0 !important; background:transparent !important; }
.sh-auth-input .select2-container .select2-selection--single{ height:44px; }
.sh-auth-input .select2-container .select2-selection--single .select2-selection__rendered{ line-height:42px; padding-left:38px; font-size:15px; }
.sh-auth-input .select2-container .select2-selection--single .select2-selection__arrow{ height:42px; right:8px; }

/* Kartu login di dalam modal (#modal_login pada layout publik) */
.sh-auth-modal{ padding:16px; }
html body .sh-auth-modal .sh-auth-dialog{ max-width:420px; margin:0 auto; padding:24px 28px 22px; background:var(--sh-surface); border-radius:14px; box-shadow:var(--sh-shadow-lg); text-align:left; }
.sh-auth-dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sh-auth-close{ width:34px; height:34px; flex:none; border:0; border-radius:8px; background:transparent; color:var(--sh-text-3); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; }
.sh-auth-close:hover{ background:var(--sh-surface-2); color:var(--sh-text); }
@media (max-width:480px){ html body .sh-auth-modal .sh-auth-dialog{ padding:20px 18px; } }

/* -------------------------------------------------------------------------
   16. Pencarian & detail usulan
   ------------------------------------------------------------------------- */
.sh-search-bar{ display:flex; gap:10px; margin-top:18px; max-width:640px; }
.sh-search-bar .sh-input-wrap{ position:relative; flex:1; }
.sh-search-bar .sh-input-wrap .fa{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--sh-text-4); }
.sh-search-bar .sh-btn{ height:48px; padding:0 22px; }
.sh-pcards-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.sh-detail{ display:grid; gap:20px; }
.sh-detail-head{ display:grid; gap:8px; }
.sh-detail-name{ font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:var(--sh-text); margin:0; }
.sh-detail-photo{ display:block; border-radius:var(--sh-radius); overflow:hidden; border:1px solid var(--sh-border); background:var(--sh-surface-2); aspect-ratio:16 / 9; }
.sh-detail-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-detail-thumbs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:8px; margin-top:-10px; }
.sh-detail-thumbs a{ display:block; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--sh-border); }
.sh-detail-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-detail-kv{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; padding:16px 18px; border-radius:10px; background:var(--sh-bg); border:1px solid var(--sh-border); margin:0; }
.sh-detail-kv dt{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sh-text-3); }
.sh-detail-kv dd{ margin:3px 0 0; font-size:15px; font-weight:700; color:var(--sh-text); }
.sh-detail-kv .sh-amount{ font-variant-numeric:tabular-nums; font-size:17px; letter-spacing:-.01em; }
.sh-green-text{ color:var(--sh-emerald-700) !important; }
.sh-detail-spell{ font-size:13px; color:var(--sh-text-3); margin:-8px 0 0 !important; text-align:left !important; }
.sh-detail-sub{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sh-text-3); margin:0 0 14px !important; }

/* Timeline tahapan */
.sh-tl{ list-style:none; margin:0; padding:0; display:grid; }
.sh-tl-item{ position:relative; display:grid; grid-template-columns:32px 1fr; gap:14px; padding-bottom:18px; }
.sh-tl-item:last-child{ padding-bottom:0; }
.sh-tl-item::before{ content:""; position:absolute; left:15px; top:30px; bottom:-2px; width:2px; background:var(--sh-border); }
.sh-tl-item:last-child::before{ display:none; }
.sh-tl-item.is-done::before{ background:var(--sh-emerald); }
.sh-tl-dot{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--sh-surface); border:2px solid var(--sh-border-strong); color:var(--sh-text-4); font-size:13px; font-weight:800; position:relative; z-index:1; }
.sh-tl-item.is-done .sh-tl-dot{ background:var(--sh-emerald); border-color:var(--sh-emerald); color:#fff; }
.sh-tl-item.is-cur .sh-tl-dot{ border-color:var(--sh-blue); color:var(--sh-blue); box-shadow:0 0 0 5px var(--sh-blue-50); }
.sh-tl-item.is-bad .sh-tl-dot{ background:var(--sh-red); border-color:var(--sh-red); color:#fff; }
.sh-tl-title{ font-weight:700; font-size:14.5px; color:var(--sh-text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:32px; }
.sh-tl-item.is-pending .sh-tl-title{ color:var(--sh-text-3); font-weight:600; }
.sh-tl-meta{ font-size:13.5px; color:var(--sh-text-3); margin-top:-4px; }
.sh-tl-meta b{ color:var(--sh-text-2); }

/* Detail sebagai halaman penuh */
.sh-detail-pagewrap{ padding-top:28px; }
.sh-detail-pagewrap .sh-crumb{ margin-bottom:4px; }
.sh-detail-card{ padding:28px 30px; }
.sh-detail-comments{ padding:22px 24px; }

/* Detail di dalam modal (#modal_ajax) */
.sh-detail-modal{ padding:16px; text-align:left; }
.sh-detail-dialog{ max-width:720px; margin:0 auto; background:var(--sh-surface); border-radius:14px; box-shadow:var(--sh-shadow-lg); padding:20px 28px 22px; color:var(--sh-text); }
.sh-detail-dialog-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sh-detail-dialog-foot{ margin-top:20px; padding-top:14px; border-top:1px solid var(--sh-border); text-align:right; }
.sh-detail-link{ font-size:13.5px; font-weight:600; color:var(--sh-blue) !important; }

@media (max-width:1100px){ .sh-pcards-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:767px){
  .sh-pcards-3{ grid-template-columns:1fr; }
  .sh-search-bar{ flex-direction:column; }
  .sh-detail-kv{ grid-template-columns:1fr; }
  .sh-detail-card, .sh-detail-dialog{ padding:20px 18px; }
  .sh-detail-name{ font-size:20px; }
}

/* -------------------------------------------------------------------------
   17. Formulir CRUD backend (templates/form*.php & form modul) — tipografi
   Tema bawaan bergaya "material": input tanpa padding samping (7px 0) dan
   kontainer Select2 ikut diberi padding+garis sehingga kotaknya dobel.
   ------------------------------------------------------------------------- */
body.backend .form-control,
body.frontend .form-control{
  height:40px; padding:8px 12px; line-height:1.45; background-color:var(--sh-surface);
  font-size:14px; font-variant-numeric:tabular-nums;
}
body.backend textarea.form-control, body.frontend textarea.form-control{ height:auto; min-height:40px; resize:vertical; }
body.backend select.form-control[multiple], body.frontend select.form-control[multiple]{ height:auto; }
body.backend .form-control.input-sm, body.frontend .form-control.input-sm{ height:32px; padding:5px 10px; font-size:13px; line-height:1.4 !important; }
body.backend .form-control.input-xs{ height:26px; padding:2px 8px; line-height:20px; }
body.backend .form-control.input-lg{ height:48px; padding:10px 14px; font-size:17px; }

/* Label: huruf biasa, gelap, tanpa huruf kapital semua */
body.backend .control-label.big-label,
body.frontend .control-label.big-label{
  font-size:13px; font-weight:600; letter-spacing:0; color:var(--sh-text-2) !important; text-transform:none !important;
}
/* Label bertumpuk (bukan kolom form horizontal): penanda wajib jadi bintang merah setelah teks;
   teks "Required/Wajib" tetap ada untuk pembaca layar */
body.backend .control-label.big-label:not([class*="col-"]):not(.pull-left),
body.frontend .control-label.big-label:not([class*="col-"]):not(.pull-left){
  display:flex; align-items:baseline; gap:4px; margin-bottom:6px;
}
body.backend .control-label.big-label:not([class*="col-"]):not(.pull-left) > .text-danger.pull-right,
body.frontend .control-label.big-label:not([class*="col-"]):not(.pull-left) > .text-danger.pull-right{
  order:2; float:none !important; font-size:0; line-height:1; color:var(--sh-red-600) !important;
}
body.backend .control-label.big-label:not([class*="col-"]):not(.pull-left) > .text-danger.pull-right::after,
body.frontend .control-label.big-label:not([class*="col-"]):not(.pull-left) > .text-danger.pull-right::after{ content:"*"; font-size:14px; font-weight:700; }
body.backend .box-body .form-group{ margin-bottom:18px; }

/* Select2 di samping .form-control: kontainernya polos, kotak ada di .select2-selection */
body .form-control ~ .select2.select2-container,
body .form-control.input-sm ~ .select2.select2-container{
  padding:0 !important; border:0 !important; height:auto !important; background:transparent !important; box-shadow:none !important;
}
body .select2-container--default .select2-selection--single{ height:40px; }
body .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:38px; padding-left:12px; padding-right:32px; font-size:14px;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow{ height:38px; right:6px; }
body .select2-container--default .select2-selection--multiple{ min-height:40px; }
body .input-sm ~ .select2-container--default .select2-selection--single{ height:32px; }
body .input-sm ~ .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:30px; padding-left:10px; font-size:13px; }
body .input-sm ~ .select2-container--default .select2-selection--single .select2-selection__arrow{ height:30px; }

/* Keterangan di atas formulir (mis. "Kosongkan bila tidak diubah") */
body.backend .box-body > .row.form-group > .alert{
  margin:0 15px 6px !important; padding:10px 40px 10px 14px; border-radius:var(--sh-radius-sm) !important; font-size:13.5px;
}
body.backend .box-body > .row.form-group > .alert .close{ top:0; right:-26px; }

/* Tombol kaki formulir: Batal (garis) dan Simpan (solid), berjarak */
body.backend .box-footer .callback-status > .btn-group{ display:flex; gap:8px; }
body.backend .box-footer .callback-status > .btn-group > .btn,
body.backend .box-footer .callback-status > .btn-group > .btn-group > .btn{ border-radius:var(--sh-radius-sm) !important; margin:0; }
body.backend .box-footer .submitBtn{ background:var(--sh-blue) !important; border-color:var(--sh-blue) !important; color:#fff !important; }
body.backend .box-footer .submitBtn:hover{ background:var(--sh-blue-hover) !important; }
body.backend .box-footer .submitBtn small, body.backend .box-footer .submitBtn .text-muted{ color:rgba(255,255,255,.75) !important; }
body.backend .box-footer .btn small{ font-size:11px; font-weight:500; }

/* Animasi muncul tiap field: halus, bukan zoom */
@keyframes sh-fade-up{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
body.backend form .form-group.animated.zoomIn{ animation-name:sh-fade-up; animation-duration:.2s; }
@media (prefers-reduced-motion: reduce){ body.backend form .form-group.animated{ animation:none; } }

/* Unggah berkas (fileuploader): bawaan ungu-periwinkle → biru SOHIB */
body .fileuploader{ background:transparent; padding:0; margin:0; }
body .fileuploader-input{ border:0; }
body .fileuploader-input-caption{
  padding:9px 12px; border:1px solid var(--sh-border-strong); border-right:0; border-radius:var(--sh-radius-sm) 0 0 var(--sh-radius-sm);
  color:var(--sh-text-3); font-size:14px; background:var(--sh-surface); box-shadow:none;
}
body .fileuploader-input-button{
  padding:9px 16px; background:var(--sh-blue); border-radius:0 var(--sh-radius-sm) var(--sh-radius-sm) 0; font-size:14px; font-weight:600; box-shadow:none;
}
body .fileuploader-input-button:hover, body .fileuploader-focused .fileuploader-input-button{ background:var(--sh-blue-hover); border-color:var(--sh-blue-hover); }
body .fileuploader-focused .fileuploader-input-caption{ border-color:var(--sh-blue); }
body .fileuploader-action-start, body .fileuploader-action-success, body .fileuploader-action-download, body .fileuploader-action-retry,
body .fileuploader-action-retry i:after, body .fileuploader-item .fileuploader-progressbar .bar{ background:var(--sh-blue); }
body .fileuploader-action-start:hover, body .fileuploader-action-download:hover, body .fileuploader-action-retry:hover{ background:var(--sh-blue-hover); }
body .fileuploader-pending-loader .right-half, body .fileuploader-pending-loader .spinner{ background:var(--sh-blue-200); }
body.backend .input-group-btn > .btn-sm{ height:32px; }