/* ==========================================================================
   CleanPro Theme Stylesheet - High Contrast Non-Bleeding Buttons
   JakSIMPUS v2 Health Theme (Zero Color Bleed: Buttons Never Match Container BG)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Surface & Base Colors */
  --win-bg-base: #f8fafc;
  --win-surface: #ffffff;
  --win-surface-subtle: #f1f5f9;
  --win-border: #cbd5e1;
  --win-border-subtle: #e2e8f0;
  
  --win-text-main: #0f172a;
  --win-text-sub: #475569;
  --win-text-muted: #64748b;

  /* Solid Flat Accent Palette */
  --win-accent-brand: #047857;      /* Health Emerald, 5.48:1 with white */
  --win-accent-brand-dark: #065f46;
  --win-accent-dark: #064e3b;
  --win-accent-blue: #0369a1;
  --win-accent-amber: #b45309;
  --win-accent-red: #dc2626;
  --win-accent-purple: #7c3aed;

  /* Geometry & Elevation */
  --win-radius-lg: 14px;
  --win-radius-md: 10px;
  --win-radius-sm: 6px;
  --win-radius-pill: 9999px;
  --win-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --win-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  --win-shadow-dropdown: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   1. Base Reset & Font Assignment
   ========================================================================== */
body, html {
  font-family: var(--win-font);
  color: #0f172a;
  background-color: var(--win-bg-base) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--win-bg-base) !important;
}

/* Base Headings - Only Dark in Light Containers */
.box h1, .box h2, .box h3, .box h4, .box h5, .box h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.content-wrapper h1, .content-wrapper h2, .content-wrapper h3, .content-wrapper h4, .content-wrapper h5, .content-wrapper h6,
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
  font-family: var(--win-font);
  font-weight: 700;
  color: #0f172a !important;
  letter-spacing: 0;
}

.content-header h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.content-header h1 small,
.content-header small,
.breadcrumb > li,
.breadcrumb > li > a {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* ==========================================================================
   2. FontAwesome, Ionicons & Glyphicons Protection
   ========================================================================== */
i.fa,
i.fas,
i.far,
i.fal,
i.fab,
i.glyphicon,
i.ion,
.fa,
.glyphicon,
.ion,
[class^="fa-"],
[class*=" fa-"],
[class^="ion-"],
[class*=" ion-"],
[class^="glyphicon-"],
[class*=" glyphicon-"] {
  font-family: FontAwesome, Ionicons, 'Glyphicons Halflings' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin-right: 6px !important;
  margin-left: 0 !important;
  vertical-align: middle !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  float: none !important;
}

.hold-transition,
body.layout-top-nav,
body.skin-green,
body.skin-green-light,
.content-wrapper,
.login-page,
.main-sidebar,
.wrapper {
  background: var(--win-bg-base) !important;
}

.content-wrapper {
  min-height: 100vh;
  padding-top: 58px !important;
  padding-bottom: 54px !important;
}

/* ==========================================================================
   3. Solid Header Navigation Bar (STICKY TOP 46PX, PURE WHITE TEXT)
   ========================================================================== */
.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important;
}

body.skin-green .main-header .navbar,
body.skin-green .main-header .logo,
body.skin-green .main-header .navbar .sidebar-toggle,
.main-header,
.main-header .navbar,
.navbar-static-top,
.navbar-default,
.navbar-inverse {
  background-color: #064e3b !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 0 10px 10px;
  margin-bottom: 0 !important;
  height: auto !important;
  min-height: 46px !important;
}

.main-header .container-fluid {
  background-color: #064e3b !important;
  min-height: 46px !important;
  height: auto !important;
}

.main-header .container-fluid:after {
  content: "";
  display: table;
  clear: both;
}

.main-header *,
.main-header a,
.main-header span,
.main-header p,
.main-header div,
.main-header i {
  color: #ffffff !important;
}

.main-header .logo {
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 16px !important;
  font-family: var(--win-font) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

.main-header .logo img,
.navbar-brand img,
.brand-image {
  max-height: 26px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px;
}

.navbar-brand {
  font-family: var(--win-font);
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #ffffff !important;
  padding: 0 10px 0 14px !important;
  height: 46px !important;
  line-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: -0.2px;
}

.navbar-nav > li > a,
body.skin-green .main-header .navbar .nav > li > a {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 12px;
  /* padding 6px: teks 12px lebih lebar dari 11.5px; tanpa ini navbar pecah dua baris di layar 1280 px */
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 6px !important;
  margin: 7px 1px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em;
}

.navbar-nav > li > a i,
body.skin-green .main-header .navbar .nav > li > a i {
  margin-right: 4px !important;
  font-size: 12px !important;
}

.navbar-nav > li > a .caret,
body.skin-green .main-header .navbar .nav > li > a .caret {
  margin-left: 3px !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li.open > a,
body.skin-green .main-header .navbar .nav > li > a:hover,
body.skin-green .main-header .navbar .nav > li > a:active,
body.skin-green .main-header .navbar .nav > li > a:focus,
body.skin-green .main-header .navbar .nav .open > a {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.navbar-custom-menu .navbar-nav > li > a {
  height: 46px !important;
  line-height: 46px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.navbar-custom-menu .user-image {
  width: 26px !important;
  height: 26px !important;
  margin-top: 0 !important;
  margin-right: 6px !important;
  border-radius: 50% !important;
}

/* ==========================================================================
   4. User Profile Dropdown Menu (.user-menu) - PURE WHITE TEXT ON DARK BG
   ========================================================================== */
.navbar-nav > .user-menu > .dropdown-menu {
  border-radius: var(--win-radius-lg) !important;
  border: 1px solid var(--win-border) !important;
  box-shadow: var(--win-shadow-dropdown) !important;
  width: 270px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  height: auto !important;
  padding: 20px 16px !important;
  background-color: #064e3b !important;
  background-image: none !important;
  text-align: center !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header img {
  width: 72px !important;
  height: 72px !important;
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header p,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header p small,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header small,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header span,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header div {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
  font-size: 15px !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header small {
  display: block !important;
  font-size: 12px !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
  background-color: #f8fafc !important;
  padding: 12px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer a {
  color: #334155 !important;
}

/* Override text color inside search results dropdown box */
.main-header #quickMenuSearchResults,
.main-header #quickMenuSearchResults *,
.main-header .quick-menu-results-box,
.main-header .quick-menu-results-box * {
  color: #0f172a !important;
}

.main-header #quickMenuSearchResults .quick-menu-item-link,
.main-header .quick-menu-results-box .quick-menu-item-link {
  background-color: #ffffff !important;
}

.main-header #quickMenuSearchResults .quick-menu-item-link:hover,
.main-header .quick-menu-results-box .quick-menu-item-link:hover {
  background-color: #f0fdf4 !important;
}

.main-header #quickMenuSearchResults .menu-item-title,
.main-header .quick-menu-results-box .menu-item-title {
  color: #0f172a !important;
}

.main-header #quickMenuSearchResults .quick-menu-item-link:hover .menu-item-title,
.main-header .quick-menu-results-box .quick-menu-item-link:hover .menu-item-title {
  color: #15803d !important;
}

.main-header #quickMenuSearchResults .menu-item-category,
.main-header .quick-menu-results-box .menu-item-category {
  color: #0369a1 !important;
}

.main-header #quickMenuSearchResults .quick-menu-item-link:hover .menu-item-category,
.main-header .quick-menu-results-box .quick-menu-item-link:hover .menu-item-category {
  color: #075985 !important;
}
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid #e2e8f0 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn {
  border-radius: var(--win-radius-sm) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-default {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-default:hover {
  background-color: #f1f5f9 !important;
}

/* Scrollable Navigation Dropdown Menu */
.dropdown-menu,
.navbar-nav .dropdown-menu {
  border-radius: var(--win-radius-md) !important;
  border: 1px solid var(--win-border) !important;
  background-color: #064e3b !important;
  background-image: none !important;
  box-shadow: var(--win-shadow-dropdown) !important;
  padding: 6px !important;
  max-height: calc(100vh - 90px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: 99999 !important;
}

.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}

.dropdown-menu > li > a {
  color: #ffffff !important;
  border-radius: var(--win-radius-sm);
  padding: 8px 12px !important;
  font-weight: 600;
  font-size: 13px;
}

.dropdown-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   5. Vertical Sidebar Navigation (PURE WHITE TEXT)
   ========================================================================== */
.main-sidebar,
body.skin-green .main-sidebar,
body.skin-green .left-side {
  background-color: #064e3b !important;
}

.sidebar-menu,
.sidebar-menu *,
.sidebar-menu li a,
.sidebar-menu li a span,
.sidebar-menu li a i {
  color: #ffffff !important;
}

.sidebar-menu > li > a,
body.skin-green .sidebar-menu > li > a {
  border-radius: var(--win-radius-sm);
  margin: 4px 8px;
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 14px !important;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
body.skin-green .sidebar-menu > li.active > a,
body.skin-green .sidebar-menu > li:hover > a {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.sidebar-menu li a i {
  width: 18px;
  text-align: center;
  margin-right: 6px !important;
  display: inline-block !important;
}

/* ==========================================================================
   6. Clean White Cards & Surfaces (PURE DARK TEXT ON WHITE BG)
   ========================================================================== */
.box,
.card,
.card-glass,
.login-box-body,
.panel {
  background: #ffffff !important;
  border-radius: var(--win-radius-lg) !important;
  border: 1px solid var(--win-border) !important;
  box-shadow: var(--win-shadow-card) !important;
  margin-bottom: 18px;
  overflow: hidden;
}

.box-header,
.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.box-title,
.card-title {
  font-family: var(--win-font);
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#accordion-mcu .box-header::before,
#accordion-mcu .box-header::after {
  display: none !important;
}

#accordion-mcu .box-header {
  justify-content: flex-start !important;
  text-align: left !important;
}

#accordion-mcu .box-title {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

#accordion-mcu .box-title > a {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

.box-body,
.card-body {
  padding: 18px !important;
  color: #0f172a !important;
}

.box-body p, .box-body span, .box-body label, .box-body td, .box-body th, .box-body div,
.card-body p, .card-body span, .card-body label, .card-body td, .card-body th, .card-body div {
  color: #0f172a;
}

.box-header > .box-tools,
.box-header .box-tools,
.box-tools,
.pull-right,
.box-header .btn-group,
.box-tools .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
}

/* ==========================================================================
   7. Solid Metric Summary Widgets (.info-box & .small-box)
   ========================================================================== */
.info-box {
  min-height: 80px;
  background: #ffffff !important;
  border-radius: var(--win-radius-lg) !important;
  border: 1px solid var(--win-border) !important;
  box-shadow: var(--win-shadow-card) !important;
  margin-bottom: 16px;
  overflow: hidden;
  display: block;
  position: relative;
}

.info-box-icon {
  border-radius: var(--win-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: left;
  height: 60px !important;
  width: 60px !important;
  margin: 10px !important;
  text-align: center;
  font-size: 28px !important;
  line-height: 60px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--win-accent-brand) !important;
  position: static !important;
}

.info-box-content {
  padding: 12px 16px 12px 0 !important;
  margin-left: 80px !important;
}

.info-box-number {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.info-box-text {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 2px 0 !important;
}

.small-box {
  border-radius: var(--win-radius-lg) !important;
  position: relative;
  display: block;
  margin-bottom: 16px;
  box-shadow: var(--win-shadow-card) !important;
  overflow: hidden;
  padding: 0 !important;
  /* Kartu ringkasan netral (reviu formal A-H2): warna hanya sebagai garis kiri 4 px, bukan latar.
     Angka #0f172a 17,85:1, label #475569 7,58:1 di putih. */
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 4px solid #047857 !important;
}

.small-box .inner {
  padding: 16px 18px !important;
}

.small-box h3 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
}

.small-box p {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin: 0 !important;
}

.small-box .icon {
  position: absolute;
  top: -8px;
  right: 10px;
  z-index: 0;
  font-size: 72px !important;
  color: rgba(15, 23, 42, 0.06) !important;
}

.small-box[class*="bg-"] {
  color: #0f172a !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
/* Kelas warna lama tetap berarti, tetapi hanya pada garis kiri: merah dan jingga untuk masalah. */
.small-box.bg-yellow, .small-box.bg-orange {
  border-left-color: #b45309 !important;
}
.small-box.bg-red, .small-box.bg-maroon {
  border-left-color: #b91c1c !important;
}
.info-box.bg-green, .info-box.bg-teal {
  background-color: #047857 !important;
  background-image: none !important;
}
.info-box.bg-aqua, .info-box.bg-blue {
  background-color: #0369a1 !important;
  background-image: none !important;
}
.info-box.bg-yellow, .info-box.bg-orange {
  background-color: #b45309 !important;
  background-image: none !important;
}
.info-box.bg-red, .info-box.bg-maroon {
  background-color: #dc2626 !important;
  background-image: none !important;
}
.info-box.bg-purple {
  background-color: #7c3aed !important;
  background-image: none !important;
}

/* PURE WHITE TEXT FOR ALL COLORED METRIC BOXES (info-box) */
.info-box.bg-green *, .info-box.bg-teal *,
.info-box.bg-aqua *, .info-box.bg-blue *,
.info-box.bg-yellow *, .info-box.bg-orange *,
.info-box.bg-red *, .info-box.bg-purple * {
  color: #ffffff !important;
}

.small-box-footer,
.small-box > .small-box-footer {
  display: block;
  padding: 6px 14px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  color: #047857 !important; /* 5,24:1 di #f8fafc */
  font-weight: 600 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  text-align: center;
}

.small-box-footer:hover,
.small-box > .small-box-footer:hover {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

/* ==========================================================================
   8. Buttons - Non-Bleeding Contrast System
   ========================================================================== */
.btn {
  border-radius: var(--win-radius-sm) !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 2px !important;
  transition: all 0.12s ease !important;
  letter-spacing: 0.1px;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.box-tools .btn,
.box-header .btn,
.btn-group .btn,
.table .btn,
.btn-sm,
.btn-xs {
  border-radius: var(--win-radius-sm) !important;
  padding: 5px 12px !important;
  min-height: 28px !important;
  min-width: 28px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 2px !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.btn-lg,
.btn-login-primary,
.btn-hero {
  border-radius: var(--win-radius-md) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
}

/* Default / Neutral Button: Soft Grey Surface (#f1f5f9) so it NEVER bleeds into White Cards! */
.btn-default,
.btn-default *,
.btn-secondary,
.btn-secondary * {
  background-color: #f1f5f9 !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.btn-default:hover,
.btn-secondary:hover {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Primary Button (Dark Emerald) */
.btn-primary,
.btn-primary *,
.btn-dark-clean,
.btn-dark-clean * {
  background-color: #064e3b !important;
  border: 1px solid #022c22 !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-dark-clean:hover {
  background-color: #022c22 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Success Button (Mint Emerald) */
.btn-success,
.btn-success * {
  background-color: #047857 !important;
  border: 1px solid #065f46 !important;
  color: #ffffff !important;
}
.btn-success:hover {
  background-color: #065f46 !important;
  border-color: #064e3b !important;
  color: #ffffff !important;
}

/* Danger Button (Rose Red) */
.btn-danger,
.btn-danger * {
  background-color: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  color: #ffffff !important;
}
.btn-danger:hover {
  background-color: #b91c1c !important;
  border-color: #991b1b !important;
  color: #ffffff !important;
}

/* Warning Button (Warm Amber) */
.btn-warning,
.btn-warning * {
  background-color: #b45309 !important;
  border: 1px solid #92400e !important;
  color: #ffffff !important;
}
.btn-warning:hover {
  background-color: #92400e !important;
  border-color: #78350f !important;
  color: #ffffff !important;
}

/* Info Button (Ocean Blue) */
.btn-info,
.btn-info * {
  background-color: #0369a1 !important;
  border: 1px solid #075985 !important;
  color: #ffffff !important;
}
.btn-info:hover {
  background-color: #075985 !important;
  border-color: #0c4a6e !important;
  color: #ffffff !important;
}

/* HIGH-CONTRAST OVERRIDES: Buttons Inside Dark Containers (e.g., .dark-action-bar, .main-header, .user-header, .small-box) */
.dark-action-bar .btn,
.main-header .btn,
.dark-action-bar .btn-default,
.main-header .btn-default {
  background-color: #ffffff !important;
  color: #064e3b !important;
  border: 1px solid #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.dark-action-bar .btn *,
.main-header .btn *,
.dark-action-bar .btn-default *,
.main-header .btn-default * {
  color: #064e3b !important;
}

.dark-action-bar .btn-primary,
.dark-action-bar .btn-success,
.main-header .btn-primary,
.main-header .btn-success {
  background-color: #b45309 !important;
  border-color: #92400e !important;
  color: #ffffff !important;
}

.dark-action-bar .btn-primary *,
.dark-action-bar .btn-success *,
.main-header .btn-primary *,
.main-header .btn-success * {
  color: #ffffff !important;
}

/* ==========================================================================
   9. Form Controls, DataTables & Search Bar Alignment
   ========================================================================== */
label, .form-label {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 4px;
}

.form-control,
.select2-container--default .select2-selection--single {
  border-radius: var(--win-radius-sm) !important;
  border: 1px solid #78879c !important; /* 3.66:1 on white, 3.49:1 on #f8fafc (control boundary) */
  padding: 6px 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

/* Tinggi tetap hanya untuk input/select; textarea memanjang mengikuti isi (lihat aturan textarea di bawah). */
.form-control:not(textarea),
.select2-container--default .select2-selection--single {
  height: 36px !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

.input-group-addon {
  border-radius: var(--win-radius-sm) !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
}

/* DataTables Search & Filter Inputs */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--win-radius-sm) !important;
  border: 1px solid #78879c !important;
  padding: 4px 10px !important;
  height: 32px !important;
  font-size: 13px !important;
  display: inline-block !important;
}

/* ==========================================================================
   10. Table Styling
   ========================================================================== */
.table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.table thead th {
  border-bottom: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.5px;
  padding: 10px 14px !important;
  background: #f8fafc !important;
}

.table tbody tr {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.12s ease;
}

.table tbody tr:hover {
  background: #f0fdf4 !important;
}

.table tbody td {
  padding: 10px 14px !important;
  color: #0f172a !important;
  vertical-align: middle !important;
  font-size: 13px !important;
}

/* ==========================================================================
   11. Neat Left Sidebar Settings Menu (.setting-tabs-sidebar)
   ========================================================================== */
.setting-tabs-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  background: #f8fafc !important;
  border-radius: 14px !important;
  padding: 10px !important;
  border: 1px solid #cbd5e1 !important;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 0 20px 0 !important;
}

.setting-tabs-sidebar > li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  list-style: none !important;
  list-style-type: none !important;
}

.setting-tabs-sidebar > li > a {
  height: 44px !important;
  width: 100% !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  text-decoration: none !important;
}

.setting-tabs-sidebar > li > a i {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(5, 150, 105, 0.1) !important;
  color: #059669 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.setting-tabs-sidebar > li > a span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.setting-tabs-sidebar > li:hover > a {
  background: #ffffff !important;
  border-color: #059669 !important;
  color: #064e3b !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12) !important;
}

.setting-tabs-sidebar > li.active > a,
.setting-tabs-sidebar > li.active > a:hover,
.setting-tabs-sidebar > li.active > a:focus,
.setting-tabs-sidebar > li.active > a span,
.setting-tabs-sidebar > li.active > a:hover span,
.setting-tabs-sidebar > li.active > a:focus span {
  background: #064e3b !important;
  border-color: #042f2e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.25) !important;
}

.setting-tabs-sidebar > li.active > a i,
.setting-tabs-sidebar > li.active > a:hover i,
.setting-tabs-sidebar > li.active > a:focus i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.nav-tabs-custom,
.nav-tabs,
.nav-pills:not(.nav-stacked):not(.setting-tabs-metro) {
  border-bottom: none !important;
  background: #f1f5f9 !important;
  border-radius: var(--win-radius-md) !important;
  padding: 4px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
  border: 1px solid #e2e8f0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.nav-tabs-custom > .nav-tabs > li > a,
.nav-tabs > li > a,
.nav-pills > li > a {
  border-radius: var(--win-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: #475569 !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs > li.active > a,
.nav-pills > li.active > a {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   MILITARY-NEAT FILTER BAR GRID SYSTEM
   ========================================================================== */
.filter-box-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

.filter-grid-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

.filter-col {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.filter-col-search {
  flex: 1 1 200px !important;
  min-width: 180px !important;
}

.filter-col-date {
  width: 125px !important;
  flex: 0 0 125px !important;
}

.filter-col-select {
  flex: 1 1 150px !important;
  min-width: 140px !important;
}

.filter-col-btn {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.filter-input-item {
  height: 38px !important;
  line-height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid #78879c !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  width: 100% !important;
  background-color: #ffffff !important;
}

.filter-btn-action {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   12. Badges, Status Pills & Alerts
   ========================================================================== */
.badge, .label {
  border-radius: var(--win-radius-pill) !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  display: inline-flex;
  align-items: center;
}

.label-success, .badge-success {
  background-color: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.label-info, .badge-info {
  background-color: #e0f2fe !important;
  color: #075985 !important;
  border: 1px solid #bae6fd !important;
}

.label-warning, .badge-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

.label-danger, .badge-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

.alert, .callout {
  border-radius: var(--win-radius-md) !important;
  padding: 12px 16px !important;
  font-weight: 500;
  margin-bottom: 16px;
}

.alert-success {
  background-color: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.alert-info {
  background-color: #e0f2fe !important;
  color: #075985 !important;
  border: 1px solid #bae6fd !important;
}

.alert-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

.alert-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

/* ==========================================================================
   13. Translucent Sticky Bottom Footer (Perfect Left & Right Alignment)
   ========================================================================== */
.main-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  padding: 0 24px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05) !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.footer-container {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-left-content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #475569 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-right-content {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.footer-dot {
  color: #94a3b8 !important;
  margin: 0 2px !important;
}

.main-footer strong,
.main-footer span,
.main-footer b {
  color: #1e293b !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.footer-brand-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  background: rgba(5, 150, 105, 0.08) !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
  color: #047857 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.footer-brand-badge i {
  color: #047857 !important;
}

.footer-guide-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #047857 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.footer-guide-link i {
  color: #047857 !important;
}

.footer-guide-link:hover {
  background: rgba(5, 150, 105, 0.1) !important;
  color: #065f46 !important;
  text-decoration: underline !important;
}

.content-wrapper {
  padding-bottom: 54px !important;
}

.dark-action-bar {
  background-color: #064e3b !important;
  background-image: none !important;
  color: #ffffff;
  border-radius: var(--win-radius-lg);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--win-shadow-card);
  margin-top: 20px;
}

.dark-action-bar .action-text {
  font-weight: 700;
  font-size: 15px;
  color: #ffffff !important;
}

.login-box {
  width: 440px !important;
  margin: 5% auto !important;
}

/* ==========================================================================
   14. Accessibility baseline: keyboard focus and reduced motion
   Keyboard focus ring: 3px #0f766e on light surfaces (5.47:1 on #ffffff),
   white on dark green surfaces (9.72:1 on #064e3b).
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.btn:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #0f766e !important;
  outline-offset: 2px !important;
}

.main-header a:focus-visible,
.main-header button:focus-visible,
.main-header input:focus-visible,
.main-sidebar a:focus-visible,
.main-header .dropdown-menu a:focus-visible,
.dark-action-bar .btn:focus-visible {
  outline-color: #ffffff !important;
}

/* White panels that sit inside the dark header keep the dark ring */
.navbar-nav > .user-menu > .dropdown-menu a:focus-visible,
.main-header #quickMenuSearchResults a:focus-visible,
.dropdown-menu-searchable .dropdown-search-wrap input:focus-visible {
  outline-color: #0f766e !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Tema menulis transition: all ... !important pada .btn, tab, dan tautan (spesifisitas kelas) sehingga
     aturan * di atas kalah. :not(#km-rm) memberi bobot id supaya transisi tetap nol di reduced motion. */
  *:not(#km-rm),
  *:not(#km-rm)::before,
  *:not(#km-rm)::after {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   15. Accessibility baseline: placeholder and dialog buttons
   ========================================================================== */
/* Placeholder: Bootstrap default #999 is 2.85:1 on white. #64748b is 4.76:1. */
.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.dataTables_wrapper .dataTables_filter input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: #64748b !important;
}

/* SweetAlert v1 confirm button: library default white on #7cd1f9 is 1.70:1.
   #047857 with white is 5.48:1 and matches .btn-success. */
.swal-button--confirm:not(.swal-button--danger),
.swal-button:not(.swal-button--cancel):not(.swal-button--danger) {
  background-color: #047857 !important;
  color: #ffffff !important;
}
.swal-button--confirm:not(.swal-button--danger):not([disabled]):hover,
.swal-button:not(.swal-button--cancel):not(.swal-button--danger):not([disabled]):hover {
  background-color: #065f46 !important;
}

/* Destructive confirm (dangerMode): red, white text 6.47:1; hover 8.3:1. */
.swal-button--danger {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}
.swal-button--danger:not([disabled]):hover {
  background-color: #991b1b !important;
}

/* ==========================================================================
   16. Callouts: AdminLTE paints them white on #00c0ef (2.15:1), #00a65a
   (3.18:1), #f39c12 (2.16:1), #dd4b39 (4.00:1). Use the same tinted palette
   as .alert-* (6.4 to 6.8:1 text on tint).
   ========================================================================== */
.callout.callout-info {
  background-color: #e0f2fe !important;
  color: #075985 !important;
  border-color: #0369a1 !important;
}
.callout.callout-success {
  background-color: #dcfce7 !important;
  color: #166534 !important;
  border-color: #047857 !important;
}
.callout.callout-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-color: #b45309 !important;
}
.callout.callout-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #b91c1c !important;
}
.callout a,
.callout h4,
.callout p {
  color: inherit !important;
}

/* ==========================================================================
   17. Strip identitas pasien lengket (partials/patient-strip.blade.php).
   Menempel di bawah navbar (48px terukur) agar petugas selalu melihat rekam siapa yang
   sedang dibuka. Teks #0f172a di putih 17,85:1; label #475569 7,58:1; alergi
   #991b1b di #fee2e2 6,8:1.
   ========================================================================== */
.wrapper:has(.patient-strip),
.wrapper:has(table.dataTable) {
  /* .wrapper (AdminLTE) memotong gulir sehingga sticky mati; clip tidak membuat wadah gulir */
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.patient-strip {
  position: sticky;
  top: 48px;
  z-index: 1020;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin: 0 15px 8px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid var(--win-border);
  border-left: 4px solid #047857;
  border-radius: var(--win-radius-sm);
  box-shadow: var(--win-shadow-card);
  font-size: 13px;
  color: var(--win-text-main);
}
.patient-strip .ps-name {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}
.patient-strip .ps-k {
  margin-right: 4px;
  font-size: 12px;
  color: var(--win-text-sub);
}
.patient-strip .ps-muted {
  color: var(--win-text-sub);
}
.patient-strip .ps-allergy {
  padding: 1px 8px;
  border-radius: var(--win-radius-sm);
  background: #fee2e2;
  color: #991b1b;
  font-weight: 600;
}
.patient-strip .ps-allergy .ps-k {
  color: #991b1b;
}
@media print {
  .patient-strip { display: none; }
}

/* ==========================================================================
   18. Tabel data: header lengket, keadaan kosong, indikator memuat.
   Header menempel di bawah navbar (48px) saat daftar panjang digulir; tidak
   berlaku di modal dan di dalam .table-responsive (di sana tetap statis).
   Teks #475569 di #f8fafc 7,2:1. Tabel yang kosong atau sedang memuat
   mengatakan keadaannya (loading.md, feedback.md), bukan baris kosong.
   ========================================================================== */
.box:has(table.dataTable) {
  /* clip tetap memotong sudut membulat tetapi tidak menjadi wadah gulir, jadi sticky hidup */
  overflow: clip;
}
.content-wrapper table.dataTable thead th {
  position: sticky;
  top: 48px;
  z-index: 3;
  box-shadow: inset 0 -1px 0 #cbd5e1;
}
.modal table.dataTable thead th {
  position: static;
  box-shadow: none;
}
table.dataTable td.dataTables_empty {
  padding: 28px 14px !important;
  text-align: center;
  color: var(--win-text-sub) !important;
  font-size: 14px !important;
}
div.dataTables_wrapper div.dataTables_processing {
  background: #ffffff;
  border: 1px solid var(--win-border);
  border-radius: var(--win-radius-sm);
  box-shadow: var(--win-shadow-dropdown);
  color: var(--win-text-main);
  font-weight: 600;
  padding: 10px 16px;
  z-index: 5;
}

/* ==========================================================================
   19. Tumpah dan tumpuk (audit teks tumpah 2026-10-11).
   a) Tombol di kolom sempit (btn-block, lebar 100%) membungkus teks, bukan menumpah keluar.
   b) Kotak cari DataTables mengecil di dalam wadahnya, tidak keluar dari kartu.
   c) Header lengket tidak dipakai di dalam kontainer gulir DataTables / .table-responsive
      (di sana menghasilkan pita kosong di atas header); thead bertingkat dua baris
      melengket sebagai satu blok supaya baris kedua tidak menimpa baris pertama.
   d) Lompatan fokus dan jangkar tidak berhenti di bawah navbar, strip pasien, atau footer.
   ========================================================================== */
.btn.btn-block,
.btn[style*="width: 100%"] {
  white-space: normal !important;
  text-align: center;
}
div.dataTables_wrapper div.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 0;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_filter input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: 0 !important;
}
.dataTables_scrollHead table.dataTable thead th,
.dataTables_scrollBody table.dataTable thead th,
.dataTables_scrollFoot table.dataTable thead th,
.table-responsive table.dataTable thead th {
  position: static;
}
.content-wrapper table.dataTable thead:has(tr + tr) {
  position: sticky;
  top: 48px;
  z-index: 3;
}
.content-wrapper table.dataTable thead:has(tr + tr) th {
  position: static;
}
html {
  /* navbar 48 + strip pasien dua baris (alergi panjang di 1366 px) sekitar 66 = 114 px */
  scroll-padding-top: 120px;
  scroll-padding-bottom: 46px;
}

/* ==========================================================================
   20. Ruang kerja vertikal dan sasaran klik (reviu formal 2026-10-11, A-H1, A-H4).
   a) Kaki halaman tidak lagi tetap di layout navigasi atas (jacksimpus, puskesmas): di PC
      1366x768 area kerja nyata sekitar 625 px; navbar 48 + kaki 38 + strip 44 = 130 px (21%)
      menjadi 92 px (15%). Layout dengan sidebar (klinik) tetap memakai kaki tetap.
   b) Kotak centang dan radio 18x18 px (bawaan 13x13). :where() membuat aturan ini kalah dari
      aturan lain mana pun, jadi sakelar dan plugin yang mengatur ukuran sendiri tidak berubah.
   c) Tautan teks kecil di kaki dan breadcrumb setinggi 24 px.
   ========================================================================== */
body.layout-top-nav .main-footer {
  position: static !important;
}
/* Kaki statis tetap di dasar layar saat isi halaman pendek. Tinggi minimum dari JS AdminLTE
   mengurangi tinggi header padahal header di sini melayang (fixed), dan pada beberapa halaman
   kaki berada di luar .wrapper; jadi tinggi minimum diambil dari layar dikurangi tinggi kaki (38 px). */
body.layout-top-nav .content-wrapper {
  min-height: calc(100vh - 38px) !important;
}
body.layout-top-nav .content-wrapper {
  padding-bottom: 16px !important;
}
:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
}
.footer-guide-link {
  min-height: 24px !important;
}
.breadcrumb > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Tombol yang disembunyikan (style inline display:none, jQuery .hide(), atribut hidden, kelas hidden/d-none)
   tetap tersembunyi: aturan .btn { display: inline-flex !important } di atas menimpa display:none inline,
   sehingga tombol lama seperti tautan GET /selesai di halaman pemeriksaan ikut tampil. */
.btn[style*="display:none"],
.btn[style*="display: none"],
.btn[hidden],
.btn.hidden,
.btn.d-none {
  display: none !important;
}

/* Kotak teks: bisa ditarik ke samping dan ke bawah, dan memanjang mengikuti isi (termasuk isi dari
   template/JS) lewat field-sizing: content. Browser tanpa dukungan memakai cadangan di js/gerak.js. */
textarea {
  resize: both !important;
}
textarea.form-control {
  field-sizing: content;
  min-height: 38px;
}