/* =================================================================
   SIMRS — Hospital Management System  |  Professional Theme v3.0
   ================================================================= */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
--------------------------------------------------------------- */
:root {
  /* Primary palette — Medical Blue */
  --hs-blue:          #1251aa;
  --hs-blue-dark:     #0c3e88;
  --hs-blue-mid:      #1976d2;
  --hs-blue-light:    #e8f0fd;
  --hs-blue-ultra:    #f4f8ff;

  /* Secondary palette — Teal / Medical Green */
  --hs-teal:          #00796b;
  --hs-teal-dark:     #005f57;
  --hs-teal-light:    #e0f2f1;

  /* Neutrals */
  --hs-bg:            #f0f5fb;
  --hs-surface:       #ffffff;
  --hs-border:        #dae4f0;
  --hs-border-dark:   #c2d3e8;

  /* Text */
  --hs-text:          #1a2d3d;
  --hs-text-soft:     #2e4862;
  --hs-muted:         #6282a0;

  /* Status */
  --hs-success:       #1a7a40;
  --hs-success-bg:    #edf7f1;
  --hs-warning:       #c47a0a;
  --hs-warning-bg:    #fef9e7;
  --hs-danger:        #ba2c2c;
  --hs-danger-bg:     #fdf2f2;
  --hs-info:          #0277bd;
  --hs-info-bg:       #e3f4fd;

  /* Shadows */
  --hs-shadow-xs:     0 2px 8px rgba(18,81,170,.06);
  --hs-shadow-sm:     0 4px 16px rgba(18,81,170,.09);
  --hs-shadow:        0 8px 28px rgba(18,81,170,.12);
  --hs-shadow-lg:     0 16px 44px rgba(18,81,170,.18);

  /* Shape */
  --hs-r-sm:   8px;
  --hs-r:      12px;
  --hs-r-lg:   16px;
  --hs-r-xl:   20px;

  /* Motion */
  --hs-t: .18s ease;
}

/* ---------------------------------------------------------------
   2. RESET & BASE
--------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }

body.app-shell,
body.backend-shell {
  font-family: "Segoe UI","Inter",Tahoma,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hs-text);
  background: var(--hs-bg);
  -webkit-font-smoothing: antialiased;
}

body.app-shell a,
body.backend-shell a {
  color: var(--hs-blue);
  text-decoration: none;
}

/* ---------------------------------------------------------------
   3. PAGE WRAPPER
--------------------------------------------------------------- */
body.app-shell .page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hs-bg);
}

/* ---------------------------------------------------------------
   4. TOPBAR — Two-band Hospital Header
--------------------------------------------------------------- */
body.app-shell .topbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ── Upper white band: Brand + User info ── */
body.app-shell .topbar-upper {
  background: #ffffff;
  border-bottom: 1px solid var(--hs-border);
  box-shadow: var(--hs-shadow-xs);
}

body.app-shell .topbar-upper .topbar-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 22px !important;
  gap: 16px;
}

/* ── Lower blue band: Navigation ── */
body.app-shell .topbar-nav {
  background: linear-gradient(90deg, #0d3d82 0%, #1251aa 45%, #1565c0 100%);
  box-shadow: 0 4px 16px rgba(13,61,130,.32);
  position: relative;
}

/* Subtle cross pattern overlay for medical feel */
body.app-shell .topbar-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(255,255,255,.03) 11px, rgba(255,255,255,.03) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(255,255,255,.03) 11px, rgba(255,255,255,.03) 12px);
  pointer-events: none;
}

body.app-shell .topbar-nav .topbar-wrap {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 22px !important;
  min-height: 46px;
  position: relative;
}

/* ── Shared wrap ── */
body.app-shell .topbar-wrap,
body.app-shell .main,
body.app-shell .footer-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------
   5. BRAND
--------------------------------------------------------------- */
body.app-shell .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--hs-text);
}

body.app-shell .brand img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--hs-blue-ultra);
  border: 2px solid var(--hs-border);
  object-fit: contain;
  padding: 5px;
  box-shadow: var(--hs-shadow-xs);
  transition: transform var(--hs-t);
}

body.app-shell .brand:hover img {
  transform: scale(1.04);
}

body.app-shell .brand-title strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--hs-text);
  letter-spacing: -.25px;
  line-height: 1.2;
}

body.app-shell .brand-title small {
  display: block;
  font-size: 11.5px;
  color: var(--hs-muted);
  margin-top: 2px;
  font-weight: 400;
}

/* ---------------------------------------------------------------
   6. USER INFO (topbar upper right)
--------------------------------------------------------------- */
body.app-shell .topbar-userinfo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

body.app-shell .topbar-datetime {
  font-size: 12.5px;
  color: var(--hs-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: 999px;
  padding: 5px 12px;
}

body.app-shell .welcome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hs-blue-ultra);
  border: 1.5px solid var(--hs-border);
  color: var(--hs-text-soft);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--hs-shadow-xs);
}

body.app-shell .welcome i {
  color: var(--hs-blue);
  font-size: 15px;
}

/* ---------------------------------------------------------------
   7. NAVIGATION
--------------------------------------------------------------- */
body.app-shell .menu {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.app-shell .menu a,
body.app-shell .menu .menu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  height: 100% !important;
  padding: 0 15px !important;
  background: transparent !important;
  color: rgba(255,255,255,.82) !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-top: 3px solid transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transform: none !important;
  transition: background var(--hs-t), color var(--hs-t), border-color var(--hs-t) !important;
  position: relative;
  z-index: 1;
}

body.app-shell .menu a i,
body.app-shell .menu .menu-trigger i {
  font-size: 13.5px !important;
  opacity: .88;
}

body.app-shell .menu a:hover,
body.app-shell .menu .menu-trigger:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.1) !important;
  border-bottom-color: rgba(255,255,255,.4) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell .menu a.active,
body.app-shell .menu .menu-trigger.active {
  color: #ffffff !important;
  background: rgba(255,255,255,.15) !important;
  border-bottom-color: #7dd3fc !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Logout link — right-aligned, subtle red on hover */
body.app-shell .menu a.menu-logout {
  margin-left: auto;
  color: rgba(255,255,255,.65);
  border-bottom-color: transparent !important;
  padding-left: 20px;
}

body.app-shell .menu a.menu-logout:hover {
  color: #fca5a5;
  background: rgba(220,38,38,.22);
}

/* ---------------------------------------------------------------
   8. DROPDOWN MENU
--------------------------------------------------------------- */
body.app-shell .menu-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

body.app-shell .menu-dropdown-list {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 230px;
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-r);
  box-shadow: var(--hs-shadow);
  padding: 7px;
  display: none;
  z-index: 300;
  animation: hs-dropdown-in .13s ease;
}

@keyframes hs-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.app-shell .menu-dropdown.open .menu-dropdown-list,
body.app-shell .menu-dropdown:focus-within .menu-dropdown-list {
  display: block;
}

body.app-shell .menu-dropdown-list a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: var(--hs-r-sm) !important;
  color: var(--hs-text-soft) !important;
  background: transparent !important;
  padding: 10px 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: auto !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  transition: all var(--hs-t) !important;
  white-space: normal !important;
}

body.app-shell .menu-dropdown-list a i {
  font-size: 13px;
  width: 18px;
  text-align: center;
  color: var(--hs-muted);
  flex-shrink: 0;
}

body.app-shell .menu-dropdown-list a:hover,
body.app-shell .menu-dropdown-list a.active {
  background: var(--hs-blue-light) !important;
  color: var(--hs-blue) !important;
}

body.app-shell .menu-dropdown-list a:hover i,
body.app-shell .menu-dropdown-list a.active i {
  color: var(--hs-blue);
}

body.app-shell .menu-dropdown-list .dropdown-sep {
  height: 1px;
  background: var(--hs-border);
  margin: 4px 6px;
}

/* ---------------------------------------------------------------
   9. MAIN CONTENT AREA
--------------------------------------------------------------- */
body.app-shell .main {
  flex: 1;
  padding: 22px 22px 36px !important;
}

body.app-shell .content-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Page Header ── */
body.app-shell .content-hero {
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-r-lg);
  padding: 16px 22px;
  box-shadow: var(--hs-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

/* Decorative stripe */
body.app-shell .content-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--hs-blue) 0%, var(--hs-teal) 100%);
  border-radius: 0 3px 3px 0;
}

body.app-shell .content-hero h1 {
  margin: 0;
  padding-left: 8px;
  font-size: 21px;
  font-weight: 800;
  color: var(--hs-text);
  letter-spacing: -.3px;
  line-height: 1.25;
}

body.app-shell .content-hero p {
  margin: 3px 0 0;
  padding-left: 8px;
  color: var(--hs-muted);
  font-size: 12.5px;
}

body.app-shell .content-hero-meta {
  flex-shrink: 0;
  text-align: right;
  font-size: 12.5px;
  color: var(--hs-muted);
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   10. CARDS
--------------------------------------------------------------- */
body.app-shell .card,
body.backend-shell .card {
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-r-lg);
  box-shadow: var(--hs-shadow-xs);
  padding: 20px;
  transition: box-shadow var(--hs-t), border-color var(--hs-t);
}

/* ── Headings inside cards ── */
body.app-shell h1, body.app-shell h2,
body.app-shell h3, body.app-shell h4,
body.app-shell h5,
body.backend-shell h2, body.backend-shell h3,
body.backend-shell h4, body.backend-shell h5 {
  color: var(--hs-text);
}

/* ---------------------------------------------------------------
   11. TABLES
--------------------------------------------------------------- */
body.app-shell table,
body.backend-shell table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-r);
  overflow: hidden;
  font-size: 13.5px;
}

body.app-shell th,
body.backend-shell th {
  background: linear-gradient(180deg, #f4f8ff 0%, #ecf3fd 100%);
  color: var(--hs-text);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--hs-border-dark);
  padding: 10px 11px;
  white-space: nowrap;
}

body.app-shell td,
body.backend-shell td {
  border-bottom: 1px solid #f0f5fa;
  padding: 9px 11px;
  vertical-align: middle;
}

body.app-shell tr:last-child td,
body.backend-shell tr:last-child td {
  border-bottom: 0;
}

body.app-shell tbody tr:nth-child(even),
body.backend-shell tbody tr:nth-child(even) {
  background: #f8fbff;
}

body.app-shell tbody tr:hover,
body.backend-shell tbody tr:hover {
  background: var(--hs-blue-ultra) !important;
  transition: background var(--hs-t);
}

/* ---------------------------------------------------------------
   12. BUTTONS
--------------------------------------------------------------- */
body.app-shell button,
body.backend-shell button,
body.app-shell input[type="submit"],
body.backend-shell input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--hs-blue);
  color: #ffffff !important;
  border: 1.5px solid var(--hs-blue);
  border-radius: var(--hs-r-sm);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--hs-t);
  box-shadow: 0 4px 14px rgba(18,81,170,.22);
  line-height: 1.4;
  white-space: nowrap;
}

body.app-shell button:hover,
body.backend-shell button:hover,
body.app-shell input[type="submit"]:hover,
body.backend-shell input[type="submit"]:hover {
  background: var(--hs-blue-dark);
  border-color: var(--hs-blue-dark);
  box-shadow: 0 6px 18px rgba(18,81,170,.3);
  transform: translateY(-1px);
}

body.app-shell button:active,
body.backend-shell button:active {
  transform: translateY(0);
}

/* Secondary action links */
body.app-shell .topbar .actions a.secondary,
body.backend-shell .topbar .actions a.secondary {
  background: #ffffff;
  color: var(--hs-blue) !important;
  border-color: var(--hs-border-dark);
  box-shadow: var(--hs-shadow-xs);
}

body.app-shell .topbar .actions a.secondary:hover,
body.backend-shell .topbar .actions a.secondary:hover {
  background: var(--hs-blue-light);
  border-color: var(--hs-blue);
}

/* ---------------------------------------------------------------
   13. PILLS / ACTION BUTTONS
--------------------------------------------------------------- */
body.app-shell a.pill,
body.backend-shell a.pill,
body.app-shell button.pill,
body.backend-shell button.pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px;
  padding: 7px 13px !important;
  border-radius: var(--hs-r-sm) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  transition: all var(--hs-t) !important;
  cursor: pointer;
  background: var(--hs-blue) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--hs-blue) !important;
  box-shadow: 0 3px 10px rgba(18,81,170,.2) !important;
  text-decoration: none !important;
}

body.app-shell a.pill:hover,
body.backend-shell a.pill:hover,
body.app-shell button.pill:hover,
body.backend-shell button.pill:hover {
  background: var(--hs-blue-dark) !important;
  border-color: var(--hs-blue-dark) !important;
  box-shadow: 0 5px 14px rgba(18,81,170,.3) !important;
  transform: translateY(-1px);
}

/* Inline status pills (non-action) */
body.app-shell span.pill {
  background: var(--hs-blue-light) !important;
  color: var(--hs-blue) !important;
  border-color: #c5d9f8 !important;
  box-shadow: none !important;
  cursor: default;
  transform: none !important;
}

/* ---------------------------------------------------------------
   14. FORM INPUTS
--------------------------------------------------------------- */
body.app-shell input[type="text"],
body.app-shell input[type="password"],
body.app-shell input[type="date"],
body.app-shell input[type="time"],
body.app-shell input[type="number"],
body.app-shell input[type="email"],
body.app-shell input[type="search"],
body.app-shell select,
body.app-shell textarea,
body.backend-shell input[type="text"],
body.backend-shell input[type="password"],
body.backend-shell input[type="date"],
body.backend-shell input[type="time"],
body.backend-shell input[type="number"],
body.backend-shell input[type="email"],
body.backend-shell input[type="search"],
body.backend-shell select,
body.backend-shell textarea {
  min-height: 42px;
  background: #ffffff !important;
  border: 1.5px solid var(--hs-border) !important;
  border-radius: var(--hs-r-sm) !important;
  color: var(--hs-text);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color var(--hs-t), box-shadow var(--hs-t);
  width: 100%;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus,
body.backend-shell input:focus,
body.backend-shell select:focus,
body.backend-shell textarea:focus {
  outline: none;
  border-color: var(--hs-blue) !important;
  box-shadow: 0 0 0 3.5px rgba(18,81,170,.12) !important;
}

body.app-shell label,
body.backend-shell label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hs-text-soft);
  margin-bottom: 5px;
  display: block;
  letter-spacing: .01em;
}

body.app-shell .field { margin-bottom: 12px; }

/* ---------------------------------------------------------------
   15. TABLE CELL ACTION LINKS
--------------------------------------------------------------- */
body.app-shell td a,
body.backend-shell td a {
  text-decoration: none !important;
}

body.app-shell td a[href*="edit"],
body.app-shell td a[href*="detail"],
body.app-shell td a[href*="module="],
body.app-shell td a[href*="page="],
body.backend-shell td a[href*="edit"],
body.backend-shell td a[href*="detail"],
body.backend-shell td a[href*="module="],
body.backend-shell td a[href*="page="] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 33px;
  padding: 6px 12px !important;
  border-radius: var(--hs-r-sm) !important;
  background: var(--hs-blue-light) !important;
  border: 1px solid #c5d9f8 !important;
  color: var(--hs-blue) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  transition: all var(--hs-t) !important;
}

body.app-shell td a[href*="edit"]:hover,
body.app-shell td a[href*="detail"]:hover,
body.app-shell td a[href*="module="]:hover,
body.app-shell td a[href*="page="]:hover,
body.backend-shell td a[href*="edit"]:hover,
body.backend-shell td a[href*="detail"]:hover,
body.backend-shell td a[href*="module="]:hover,
body.backend-shell td a[href*="page="]:hover {
  background: var(--hs-blue) !important;
  color: #ffffff !important;
  border-color: var(--hs-blue) !important;
}

body.app-shell td form button,
body.backend-shell td form button,
body.app-shell .card form button,
body.backend-shell .card form button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px;
  padding: 7px 14px !important;
}

/* ---------------------------------------------------------------
   16. AKSI / ICON ACTION BUTTONS
--------------------------------------------------------------- */
body.app-shell .aksi-trigger,
body.backend-shell .aksi-trigger {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--hs-r-sm) !important;
  border: 1.5px solid var(--hs-border-dark) !important;
  background: #ffffff !important;
  color: var(--hs-blue) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: var(--hs-shadow-xs) !important;
  transition: all var(--hs-t) !important;
}

body.app-shell .aksi-trigger:hover,
body.backend-shell .aksi-trigger:hover,
body.app-shell .aksi-wrap.open .aksi-trigger,
body.backend-shell .aksi-wrap.open .aksi-trigger {
  background: var(--hs-blue) !important;
  color: #ffffff !important;
  border-color: var(--hs-blue) !important;
  box-shadow: 0 4px 12px rgba(18,81,170,.28) !important;
}

body.app-shell .aksi-trigger svg,
body.backend-shell .aksi-trigger svg,
body.app-shell .icon-action-btn svg,
body.backend-shell .icon-action-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

body.app-shell .aksi-menu,
body.backend-shell .aksi-menu {
  background: #ffffff !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-r) !important;
  box-shadow: var(--hs-shadow) !important;
  padding: 8px !important;
  gap: 4px !important;
}

body.app-shell .icon-action-btn,
body.backend-shell .icon-action-btn,
body.app-shell a.icon-action-btn,
body.backend-shell a.icon-action-btn,
body.app-shell button.icon-action-btn,
body.backend-shell button.icon-action-btn {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: var(--hs-r-sm) !important;
  border: 1.5px solid var(--hs-border) !important;
  background: #ffffff !important;
  color: var(--hs-blue) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: var(--hs-shadow-xs) !important;
  transition: all var(--hs-t) !important;
}

body.app-shell .icon-action-btn:hover,
body.backend-shell .icon-action-btn:hover,
body.app-shell a.icon-action-btn:hover,
body.backend-shell a.icon-action-btn:hover,
body.app-shell button.icon-action-btn:hover,
body.backend-shell button.icon-action-btn:hover {
  background: var(--hs-blue) !important;
  color: #ffffff !important;
  border-color: var(--hs-blue) !important;
  box-shadow: 0 4px 12px rgba(18,81,170,.22) !important;
}

body.app-shell .icon-action-btn::after,
body.backend-shell .icon-action-btn::after {
  background: #1f2937 !important;
  color: #ffffff !important;
  border-radius: var(--hs-r-sm) !important;
  padding: 5px 9px !important;
}

/* ---------------------------------------------------------------
   17. CARD LINK VISIBILITY
--------------------------------------------------------------- */
body.app-shell .card a:not(.pill):not(.brand):not(.menu-card),
body.backend-shell .card a:not(.pill):not(.brand) {
  color: var(--hs-blue);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   18. MUTED / BADGE / STAT
--------------------------------------------------------------- */
body.app-shell .muted,
body.backend-shell .muted { color: var(--hs-muted); }

body.app-shell .badge,
body.backend-shell .stat { color: var(--hs-blue); }

/* ---------------------------------------------------------------
   19. ALERT MODAL
--------------------------------------------------------------- */
body.app-shell .app-alert-backdrop {
  background: rgba(10,25,50,.48) !important;
  backdrop-filter: blur(2px);
}

body.app-shell .app-alert-modal {
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-r-xl);
  box-shadow: var(--hs-shadow-lg);
  overflow: hidden;
}

body.app-shell .app-alert-head {
  background: linear-gradient(90deg, var(--hs-blue-light) 0%, var(--hs-teal-light) 100%);
  color: var(--hs-text);
  border-bottom: 1px solid var(--hs-border);
  padding: 14px 18px;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.app-shell .app-alert-head::before {
  content: '\f05a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 16px;
  color: var(--hs-blue);
}

body.app-shell .app-alert-body {
  padding: 18px;
  color: var(--hs-text-soft);
  line-height: 1.65;
  font-size: 13.5px;
}

/* ---------------------------------------------------------------
   20. FOOTER
--------------------------------------------------------------- */
body.app-shell .footer {
  margin-top: auto;
  background: linear-gradient(90deg, #0b2d5c 0%, #1251aa 55%, #00695c 100%);
  color: rgba(255,255,255,.82);
  border-top: 0;
}

body.app-shell .footer-wrap {
  padding: 14px 22px !important;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body.app-shell .footer-wrap strong {
  color: #ffffff;
  font-weight: 700;
}

body.app-shell .footer a {
  color: rgba(255,255,255,.75);
  transition: color var(--hs-t);
}

body.app-shell .footer a:hover {
  color: #ffffff;
}

body.app-shell .footer-copy {
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------------
   21. BACKEND SHELL (sidebar layout)
--------------------------------------------------------------- */
body.backend-shell {
  background: var(--hs-bg);
}

body.backend-shell .shell {
  min-height: 100vh;
  grid-template-columns: 280px 1fr;
}

body.backend-shell .sidebar {
  background: linear-gradient(180deg, #0b2d5c 0%, #1251aa 100%);
  color: #d7e8f7;
  border-right: 0;
  box-shadow: 4px 0 22px rgba(11,45,92,.24);
}

body.backend-shell .brand {
  display: block;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #ffffff;
}

body.backend-shell .brand strong {
  display: block;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 3px;
}

body.backend-shell .brand small,
body.backend-shell .userbox .role {
  color: rgba(255,255,255,.52);
  font-size: 11.5px;
}

body.backend-shell .userbox {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--hs-r);
  margin-bottom: 20px;
}

body.backend-shell .userbox .name {
  color: #ffffff;
}

body.backend-shell .nav { gap: 4px; }

body.backend-shell .nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hs-r);
  padding: 11px 13px;
  font-weight: 600;
  transition: all var(--hs-t);
}

body.backend-shell .nav a span {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  font-weight: 400;
}

body.backend-shell .nav a:hover,
body.backend-shell .nav a.active {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.16);
  color: #ffffff;
}

body.backend-shell .nav a:hover span,
body.backend-shell .nav a.active span { color: rgba(255,255,255,.68); }

body.backend-shell .sidebar-footer { border-top: 1px solid rgba(255,255,255,.1); }
body.backend-shell .sidebar-footer a { color: rgba(255,255,255,.55); }

body.backend-shell .content { padding: 24px; }

body.backend-shell .topbar {
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-r-lg);
  padding: 16px 22px;
  box-shadow: var(--hs-shadow-xs);
  background: linear-gradient(90deg, #ffffff 0%, #f4f8ff 100%);
  border-color: var(--hs-border-dark);
}

body.backend-shell .topbar h1 {
  margin: 0;
  font-size: 22px;
  color: var(--hs-text);
}

body.backend-shell .stat { color: var(--hs-blue); }

/* ---------------------------------------------------------------
   22. STATUS BADGES (utility classes)
--------------------------------------------------------------- */
.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.hs-badge-blue    { background: var(--hs-blue-light);  color: var(--hs-blue);    border: 1px solid #c5d9f8; }
.hs-badge-teal    { background: var(--hs-teal-light);  color: var(--hs-teal);    border: 1px solid #b2dfdb; }
.hs-badge-success { background: var(--hs-success-bg);  color: var(--hs-success); border: 1px solid #b7e0c7; }
.hs-badge-warning { background: var(--hs-warning-bg);  color: var(--hs-warning); border: 1px solid #f9d476; }
.hs-badge-danger  { background: var(--hs-danger-bg);   color: var(--hs-danger);  border: 1px solid #f4b8b8; }
.hs-badge-info    { background: var(--hs-info-bg);     color: var(--hs-info);    border: 1px solid #b3d9f4; }

/* Status dot */
.hs-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hs-dot-blue    { background: var(--hs-blue); }
.hs-dot-teal    { background: var(--hs-teal); }
.hs-dot-success { background: var(--hs-success); }
.hs-dot-warning { background: var(--hs-warning); }
.hs-dot-danger  { background: var(--hs-danger); }

/* ---------------------------------------------------------------
   23. MENU UTAMA CARDS (dashboard)
--------------------------------------------------------------- */
body.app-shell .menu-card {
  background: linear-gradient(135deg, #1251aa 0%, #1565c0 60%, #1976d2 100%) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 12px 32px rgba(18,81,170,.28) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

body.app-shell .menu-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 44px rgba(18,81,170,.36) !important;
}

body.app-shell .menu-card .badge { color: rgba(255,255,255,.7) !important; }

/* ---------------------------------------------------------------
   24. RESPONSIVE
--------------------------------------------------------------- */
@media (max-width: 980px) {
  body.backend-shell .shell { grid-template-columns: 1fr; }
  body.backend-shell .content { padding: 16px; }
}

@media (max-width: 992px) {
  body.app-shell .topbar-upper .topbar-wrap,
  body.app-shell .topbar-nav .topbar-wrap,
  body.app-shell .main,
  body.app-shell .footer-wrap,
  body.backend-shell .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.app-shell .card,
  body.backend-shell .card {
    padding: 14px !important;
  }

  body.app-shell .menu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.app-shell .menu::-webkit-scrollbar { display: none; }

  body.app-shell .menu a,
  body.app-shell .menu .menu-trigger { flex: 0 0 auto; }

  body.app-shell .menu-dropdown-list {
    left: 0; right: auto;
    max-width: min(92vw, 280px);
  }

  body.app-shell .row,
  body.backend-shell .row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.app-shell .field input,
  body.app-shell .field select,
  body.app-shell .field textarea,
  body.backend-shell .field input,
  body.backend-shell .field select,
  body.backend-shell .field textarea,
  body.app-shell input[type="text"],
  body.app-shell input[type="search"],
  body.app-shell input[type="date"],
  body.app-shell input[type="password"],
  body.app-shell select,
  body.app-shell textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-shell .filter-row-wrap,
  body.backend-shell .filter-row-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.app-shell .filter-row-1,
  body.backend-shell .filter-row-1 {
    min-width: 980px !important;
  }
}

@media (max-width: 768px) {
  body.app-shell .brand img { width: 44px; height: 44px; }
  body.app-shell .brand-title strong { font-size: 14.5px; }
  body.app-shell .brand-title small { font-size: 11px; }
  body.app-shell .topbar-datetime { display: none; }
  body.app-shell .welcome { padding: 6px 11px; font-size: 12px; }
  body.app-shell .main { padding: 14px 14px 28px !important; }

  body.app-shell .content-hero { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.app-shell .content-hero-meta { text-align: left; }

  body.app-shell .card,
  body.backend-shell .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  body.app-shell table,
  body.backend-shell table { min-width: 700px; font-size: 13px; }

  body.app-shell .aksi-menu,
  body.backend-shell .aksi-menu {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    top: auto !important; bottom: 8px !important;
    width: auto !important;
    max-height: 72vh !important;
    overflow: auto !important;
    z-index: 999 !important;
  }

  body.app-shell .icon-action-btn,
  body.backend-shell .icon-action-btn {
    min-height: 40px !important;
    height: 40px !important;
    width: 40px !important;
  }

  body.app-shell .service-modal-panel,
  body.backend-shell .service-modal-panel,
  body.app-shell .modal-panel,
  body.backend-shell .modal-panel {
    left: 8px !important; right: 8px !important;
    top: 8px !important; bottom: 8px !important;
    width: auto !important; height: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: var(--hs-r) !important;
  }

  body.backend-shell .topbar { padding: 14px !important; }
  body.backend-shell .topbar h1 { font-size: 18px !important; }
}

/* ---------------------------------------------------------------
   25. HAMBURGER / MOBILE NAV
--------------------------------------------------------------- */
body.app-shell .nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.1) !important;
  color: #ffffff !important;
  border-radius: var(--hs-r-sm) !important;
  box-shadow: none !important;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--hs-t) !important;
  transform: none !important;
}

body.app-shell .nav-hamburger:hover,
body.app-shell .nav-hamburger[aria-expanded="true"] {
  background: rgba(255,255,255,.22) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-shell .nav-hamburger i {
  font-size: 17px !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  body.app-shell .nav-hamburger { display: inline-flex; }

  body.app-shell .topbar-nav .topbar-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 8px 14px !important;
    min-height: 52px;
    position: relative;
  }

  /* Menu mobile TIDAK memakai position:fixed/absolute lagi - dulu jadi kotak
     overlay dengan overflow-y sendiri, tapi di sebagian HP (Android Chrome)
     gestur geser di dalam kotak itu tidak terdeteksi sebagai scroll sama
     sekali. Sekarang menu didorong sebagai bagian normal dari halaman (flex
     item yang wrap ke baris baru, lebar penuh), jadi yang di-scroll adalah
     scroll bawaan seluruh halaman - mekanisme yang sudah pasti berfungsi di
     semua browser/HP. */
  body.app-shell .menu {
    display: none !important;
    flex: 1 0 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: linear-gradient(180deg, #0c3570 0%, #1251aa 100%) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    padding: 8px !important;
    gap: 2px !important;
    box-shadow: 0 14px 40px rgba(8,18,50,.35) !important;
  }

  body.app-shell .menu.nav-open {
    display: flex !important;
  }

  body.app-shell .menu a,
  body.app-shell .menu .menu-trigger {
    border-radius: var(--hs-r-sm) !important;
    padding: 12px 14px !important;
    border: 1px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    height: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    font-size: 14px !important;
    gap: 10px !important;
  }

  body.app-shell .menu a:hover,
  body.app-shell .menu .menu-trigger:hover,
  body.app-shell .menu a.active,
  body.app-shell .menu .menu-trigger.active {
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.16) !important;
    border-bottom-color: rgba(255,255,255,.16) !important;
  }

  body.app-shell .menu .menu-dropdown {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.app-shell .menu.nav-open .menu-dropdown-list {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
    background: rgba(0,0,0,.2) !important;
    border-radius: var(--hs-r-sm) !important;
    padding: 4px !important;
    margin: 2px 0 4px !important;
    animation: none !important;
    min-width: 0 !important;
  }

  body.app-shell .menu.nav-open .menu-dropdown-list a {
    color: rgba(255,255,255,.82) !important;
    background: transparent !important;
    border-radius: var(--hs-r-sm) !important;
    padding: 10px 14px 10px 32px !important;
    height: auto !important;
    font-size: 13.5px !important;
    border: 0 !important;
  }

  body.app-shell .menu.nav-open .menu-dropdown-list a:hover,
  body.app-shell .menu.nav-open .menu-dropdown-list a.active {
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
  }

  body.app-shell .menu a.menu-logout {
    margin-left: 0 !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    padding-top: 13px !important;
    color: rgba(255,190,190,.88) !important;
  }
}

/* ---------------------------------------------------------------
   26. VERY SMALL SCREENS (≤480px)
--------------------------------------------------------------- */
@media (max-width: 480px) {
  body.app-shell .topbar-upper .topbar-wrap {
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  body.app-shell .brand img {
    width: 38px !important;
    height: 38px !important;
  }

  body.app-shell .brand-title strong { font-size: 13px !important; }
  body.app-shell .brand-title small  { display: none !important; }

  body.app-shell .welcome {
    font-size: 11.5px !important;
    padding: 5px 10px !important;
  }

  body.app-shell .main {
    padding: 10px 10px 24px !important;
  }

  body.app-shell .content-hero {
    padding: 12px 14px !important;
    gap: 6px !important;
  }

  body.app-shell .content-hero h1 {
    font-size: 17px !important;
    letter-spacing: -.2px !important;
  }

  body.app-shell .card,
  body.backend-shell .card {
    padding: 12px !important;
  }

  body.app-shell .footer-wrap {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 11.5px !important;
  }

  body.app-shell .footer-copy { display: none !important; }
}

/* ---------------------------------------------------------------
   27. PRINT
--------------------------------------------------------------- */
@media print {
  body.app-shell.print-result-page .topbar,
  body.app-shell.print-result-page .footer,
  body.app-shell.print-result-page .content-hero {
    display: none !important;
  }
  body.app-shell.print-result-page .main {
    padding: 0 !important;
  }
}