/* ════════════════════════════════════════════════════
   HouseMarket Pro — Premium Design System v2
   ════════════════════════════════════════════════════ */

/* ── 1. CSS Variables (defaults; theme.php overrides) ── */
:root {
  --hmp-primary:       #3C83F6;
  --hmp-primary-dark:  #1a5cc8;
  --hmp-primary-soft:  #dbeafe;
  --hmp-primary-rgb:   60,131,246;
  --hmp-secondary:     #AF0000;
  --hmp-secondary-dark:#7a0000;
  --hmp-secondary-rgb: 175,0,0;
  --hmp-accent:        #198754;
  --hmp-accent-rgb:    25,135,84;
  --hmp-bg:            #F0F4F8;
  --hmp-surface:       #ffffff;
  --hmp-border:        #e2e8f0;
  --hmp-text:          #1a202c;
  --hmp-muted:         #64748b;
  --hmp-font:          'Inter', system-ui, sans-serif;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl: 0 16px 56px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.06);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --hmp-topbar-h:  72px;
  --hmp-tabnav-h:  50px;
  --ease:          cubic-bezier(.4,0,.2,1);
  --spring:        cubic-bezier(.34,1.56,.64,1);
}

/* ── 2. Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--hmp-font);
  font-size: .9375rem;
  color: var(--hmp-text);
  background: var(--hmp-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
}

/* Subtle dot-grid page texture */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-image:
    radial-gradient(circle, rgba(var(--hmp-primary-rgb),.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── 3. Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--hmp-primary-rgb),.3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--hmp-primary); }

/* ── 4. Top Navbar ── */
.hmp-topbar {
  background: linear-gradient(135deg,
    var(--hmp-primary-dark) 0%,
    var(--hmp-primary) 55%,
    rgba(var(--hmp-primary-rgb),.85) 100%);
  height: var(--hmp-topbar-h);
  position: sticky; top: 0; z-index: 1040;
  box-shadow: 0 4px 24px rgba(var(--hmp-primary-rgb),.45);
  display: flex; align-items: center;
}

/* Animated sheen sweep */
.hmp-topbar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  background-size: 240% 100%;
  background-position: 180% 0;
  animation: navSheen 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes navSheen {
  0%,100% { background-position: 180% 0; }
  50%      { background-position: -180% 0; }
}

.hmp-topbar .navbar-brand {
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -.02em;
  text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
  flex-shrink: 0;
  min-width: 0;
  max-width: min(58vw, 540px);
}
.hmp-topbar .navbar-brand > div { min-width: 0; }
.hmp-topbar .brand-logo {
  max-height: 46px; max-width: 180px;
  width: auto;
  display: block;
  object-fit: contain;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius-xs);
  padding: 4px 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.hmp-topbar .brand-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.hmp-topbar .brand-text {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hmp-topbar .brand-tagline {
  font-size: .72rem; font-weight: 400;
  opacity: .65; letter-spacing: .01em;
  display: none;
}
@media (min-width:1100px) { .hmp-topbar .brand-tagline { display: block; } }

.hmp-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  min-width: 0;
}
.hmp-mobile-nav-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm);
  color: #fff;
  background: rgba(255,255,255,.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.hmp-mobile-nav-toggle:hover,
.hmp-mobile-nav-toggle:focus {
  color: #fff;
  background: rgba(255,255,255,.25);
  outline: none;
}
.hmp-mobile-nav-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,.28);
}

/* Mobile/tablet navigation */
.hmp-mobile-nav {
  position: sticky;
  top: var(--hmp-topbar-h);
  z-index: 1035;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--hmp-border);
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  backdrop-filter: blur(10px);
}
.hmp-mobile-nav-inner {
  width: min(100%, 760px);
  max-height: calc(100dvh - var(--hmp-topbar-h) - 12px);
  margin: 0 auto;
  padding: .65rem;
  overflow-y: auto;
}
.hmp-mobile-nav-section {
  margin-bottom: .35rem;
}
.hmp-mobile-nav-link,
.hmp-mobile-subnav-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--hmp-text);
  text-decoration: none;
  background: transparent;
  text-align: left;
}
.hmp-mobile-nav-link {
  padding: .7rem .75rem;
  font-weight: 700;
}
button.hmp-mobile-nav-link {
  font: inherit;
}
.hmp-mobile-nav-link:hover,
.hmp-mobile-subnav-item:hover,
.hmp-mobile-nav-link.active,
.hmp-mobile-subnav-item.active {
  color: var(--hmp-primary);
  background: rgba(var(--hmp-primary-rgb),.08);
}
.hmp-mobile-nav-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hmp-primary);
  background: rgba(var(--hmp-primary-rgb),.1);
}
.hmp-mobile-nav-parent[aria-expanded="true"] .hmp-mobile-caret {
  transform: rotate(180deg);
}
.hmp-mobile-caret {
  transition: transform .2s var(--ease);
}
.hmp-mobile-subnav {
  margin: .1rem 0 .45rem 2.25rem;
  padding: .3rem 0 .3rem .6rem;
  border-left: 2px solid rgba(var(--hmp-primary-rgb),.12);
}
.hmp-mobile-subnav hr {
  margin: .35rem .5rem;
  border-color: var(--hmp-border);
}
.hmp-mobile-subnav-item {
  padding: .58rem .7rem;
  font-size: .9rem;
  font-weight: 600;
}
.hmp-mobile-subnav-item > span:first-child {
  width: 22px;
  color: var(--hmp-muted);
  text-align: center;
}

/* User dropdown button */
.hmp-topbar .btn-user {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 500;
  padding: .4rem .85rem;
  display: flex; align-items: center; gap: .5rem;
  transition: background .2s var(--ease), transform .15s var(--ease);
  backdrop-filter: blur(6px);
}
.hmp-topbar .btn-user:hover {
  background: rgba(255,255,255,.25);
  color: #fff; transform: translateY(-1px);
}
.hmp-topbar .btn-user .role-badge {
  background: rgba(255,255,255,.25);
  font-size: .68rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .06em;
}
.hmp-topbar .dropdown-menu {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  padding: .5rem;
  min-width: 180px;
  margin-top: .4rem !important;
  animation: dropIn .18s var(--spring);
}
@keyframes dropIn {
  from { opacity:0; transform: translateY(-8px) scale(.97); }
  to   { opacity:1; transform: translateY(0)   scale(1); }
}
.hmp-topbar .dropdown-item {
  border-radius: var(--radius-xs);
  font-size: .875rem; font-weight: 500;
  padding: .5rem .75rem;
  transition: background .15s, color .15s;
}
.hmp-topbar .dropdown-item:hover { background: rgba(var(--hmp-primary-rgb),.08); color: var(--hmp-primary); }
.hmp-topbar .dropdown-item.text-danger:hover { background: rgba(var(--hmp-secondary-rgb),.08); color: var(--hmp-secondary); }

/* ── 5. Tab Navigation ── */
.hmp-tabnav {
  background: var(--hmp-surface);
  border-bottom: 1px solid var(--hmp-border);
  position: sticky; top: var(--hmp-topbar-h); z-index: 1030;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  /* overflow must be visible so dropdowns can escape */
  overflow: visible;
}
.hmp-tabs {
  border-bottom: none;
  padding: 0 .75rem;
  gap: 0;
  flex-wrap: nowrap;
  /* NO overflow here — overflow-x:auto coerces overflow-y to auto,
     which clips the dropdowns. With 7 groups there is no horizontal
     overflow anyway. Use the .hmp-tabnav wrapper for any future scroll. */
  overflow: visible;
  position: relative;
  z-index: 1031;
}
.hmp-tabs::-webkit-scrollbar { display: none; }
.hmp-tabs .nav-item { flex-shrink: 0; position: relative; }

/* ── Base tab link ── */
.hmp-tabs .nav-link {
  color: var(--hmp-muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .72rem 1rem;
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
  display: flex; align-items: center; gap: .45rem;
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
  text-decoration: none;
  user-select: none;
}
.hmp-tabs .nav-link > i:first-child { font-size: .82rem; opacity: .8; }
.hmp-tabs .nav-link:hover {
  color: var(--hmp-primary);
  background: rgba(var(--hmp-primary-rgb),.06);
}
.hmp-tabs .nav-link.active {
  color: var(--hmp-primary);
  font-weight: 600;
  border-bottom-color: var(--hmp-primary);
  background: rgba(var(--hmp-primary-rgb),.06);
}
.hmp-tabs .nav-link.active > i:first-child { opacity: 1; }

/* ── Group toggle caret ── */
.hmp-group-toggle { cursor: pointer; }
.hmp-caret {
  font-size: .62rem !important;
  opacity: .55;
  transition: transform .22s var(--ease), opacity .2s;
  margin-left: .1rem;
}
.hmp-nav-group.show .hmp-group-toggle .hmp-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Active group gets left accent dot */
.hmp-nav-group .hmp-group-toggle.active {
  color: var(--hmp-primary);
  border-bottom-color: var(--hmp-primary);
  background: rgba(var(--hmp-primary-rgb),.06);
  font-weight: 600;
}
.hmp-nav-group .hmp-group-toggle.active .hmp-caret { opacity: 1; }

/* ── Sub-navigation dropdown ── */
.hmp-subnav {
  min-width: 210px;
  padding: .4rem .3rem .5rem;
  border: 1px solid var(--hmp-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  background: var(--hmp-surface);
  margin-top: 2px !important;
  animation: subnavIn .18s var(--spring);
  z-index: 1050;
  /* override Bootstrap's overflow clip */
  overflow: visible;
}
@keyframes subnavIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Group header inside dropdown */
.hmp-subnav-header {
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--hmp-primary);
  padding: .35rem .65rem .2rem;
  opacity: .75;
}

/* Each item in the dropdown */
.hmp-subnav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .48rem .65rem;
  border-radius: var(--radius-xs);
  font-size: .855rem;
  font-weight: 500;
  color: var(--hmp-text);
  transition: background .15s var(--ease), color .15s, transform .12s var(--ease);
  position: relative;
}
.hmp-subnav-item:hover {
  background: rgba(var(--hmp-primary-rgb),.07);
  color: var(--hmp-primary);
  transform: translateX(2px);
}
.hmp-subnav-item.active {
  background: linear-gradient(135deg,
    rgba(var(--hmp-primary-rgb),.12),
    rgba(var(--hmp-primary-rgb),.06));
  color: var(--hmp-primary);
  font-weight: 600;
}
.hmp-subnav-item.active:hover { transform: none; }

/* Icon pill inside sub-item */
.hmp-subnav-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 7px;
  background: rgba(var(--hmp-primary-rgb),.1);
  color: var(--hmp-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  transition: background .15s, transform .15s;
}
.hmp-subnav-item:hover .hmp-subnav-icon {
  background: var(--hmp-primary);
  color: #fff;
  transform: scale(1.08);
}
.hmp-subnav-item.active .hmp-subnav-icon {
  background: var(--hmp-primary);
  color: #fff;
}

/* Active indicator dot */
.hmp-subnav-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hmp-primary);
  flex-shrink: 0;
  animation: dotPop .25s var(--spring);
}
@keyframes dotPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Divider inside subnav */
.hmp-subnav .dropdown-divider {
  border-color: var(--hmp-border);
  margin: .3rem .5rem;
  opacity: .5;
}

/* ── 6. Content Area ── */
.hmp-content {
  min-height: calc(100vh - var(--hmp-topbar-h) - var(--hmp-tabnav-h) - 44px);
  animation: pageIn .32s var(--ease);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive page wrapper — one rule fixes all pages */
.hmp-page-wrap {
  width: 100%;
  padding: 1.25rem 1rem 2rem;   /* mobile */
}
@media (min-width: 576px) {
  .hmp-page-wrap { padding: 1.5rem 1.5rem 2.5rem; }
}
@media (min-width: 992px) {
  .hmp-page-wrap { padding: 1.75rem 2rem 3rem; }
}
@media (min-width: 1400px) {
  .hmp-page-wrap { padding: 2rem 2.5rem 3rem; }
}

/* ── 7. Footer ── */
.hmp-footer {
  background: var(--hmp-surface);
  border-top: 1px solid var(--hmp-border);
  padding: .6rem 1rem;
  font-size: .78rem;
  color: var(--hmp-muted);
  text-align: center;
}

/* ── 8. Page Header ── */
.hmp-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--hmp-border);
  position: relative;
}
.hmp-page-header::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--hmp-primary), var(--hmp-primary-soft));
  border-radius: 2px;
}
.hmp-page-header h4 {
  margin: 0; font-weight: 700; font-size: 1.22rem;
  color: var(--hmp-text); letter-spacing: -.02em;
}
.hmp-page-header h4 i { opacity: .75; }

/* ── 9. Stat Cards ── */
.stat-card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--spring), box-shadow .22s var(--ease);
  overflow: hidden;
  position: relative;
  background: var(--hmp-surface);
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  transform: translate(20px,-20px);
  opacity: .07;
  background: var(--card-accent, var(--hmp-primary));
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.stat-card .card-body {
  padding: 1.35rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.stat-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.stat-value {
  font-size: 1.85rem; font-weight: 800;
  line-height: 1; letter-spacing: -.04em;
}
.stat-label {
  font-size: .75rem; color: var(--hmp-muted);
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; margin-top: .25rem;
}
.stat-trend {
  font-size: .75rem; font-weight: 600;
  display: flex; align-items: center; gap: .2rem;
  margin-top: .3rem;
}

/* Gradient icon presets */
.grad-1  { background: linear-gradient(135deg,#667eea,#764ba2); }
.grad-2  { background: linear-gradient(135deg,#11998e,#38ef7d); }
.grad-3  { background: linear-gradient(135deg,#4facfe,#00f2fe); }
.grad-4  { background: linear-gradient(135deg,#fa709a,#fee140); }
.grad-5  { background: linear-gradient(135deg,#a18cd1,#fbc2eb); }
.grad-6  { background: linear-gradient(135deg,#f093fb,#f5576c); }
.grad-7  { background: linear-gradient(135deg,#43e97b,#38f9d7); }
.grad-8  { background: linear-gradient(135deg,#fccb90,#d57eeb); }
.grad-green   { background: linear-gradient(135deg,#11998e,#38ef7d); }
.grad-red     { background: linear-gradient(135deg,#cb2d3e,#ef473a); }
.grad-blue    { background: linear-gradient(135deg,#2193b0,#6dd5ed); }
.grad-orange  { background: linear-gradient(135deg,#f7971e,#ffd200); }
.grad-purple  { background: linear-gradient(135deg,#7f00ff,#e100ff); }
.grad-primary { background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary)); }

/* Financial stat cards */
.fin-card {
  border: none; border-radius: var(--radius-lg);
  background: var(--hmp-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .22s var(--spring), box-shadow .22s var(--ease);
}
.fin-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fin-card .fin-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--bar-color,var(--hmp-primary)), transparent);
}

/* ── 10. Regular Cards ── */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--hmp-surface);
  transition: box-shadow .22s var(--ease);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
  font-weight: 600; font-size: .9rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hmp-border);
  background: var(--hmp-surface);
  display: flex; align-items: center;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.card-header i { color: var(--hmp-primary); opacity: .85; }
.card-body { padding: 1.25rem; }

/* Coloured left-border cards */
.card-accent-left { border-left: 4px solid var(--hmp-primary) !important; border-radius: 0 var(--radius) var(--radius) 0; }
.card-accent-success { border-left: 4px solid var(--hmp-accent)    !important; border-radius: 0 var(--radius) var(--radius) 0; }
.card-accent-danger  { border-left: 4px solid var(--hmp-secondary) !important; border-radius: 0 var(--radius) var(--radius) 0; }
.card-accent-warning { border-left: 4px solid #f59e0b !important;              border-radius: 0 var(--radius) var(--radius) 0; }

/* ── Financial Summary Boxes (view pages) ── */
.fsb {
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: transform .2s var(--spring), box-shadow .2s var(--ease);
  border: 1px solid transparent;
  position: relative; overflow: hidden;
}
.fsb:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fsb::before {
  content: ''; position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  border-radius: 50%; opacity: .06;
  background: currentColor; pointer-events: none;
}
.fsb-primary { background: rgba(var(--hmp-primary-rgb),.07);   border-color: rgba(var(--hmp-primary-rgb),.15); }
.fsb-success { background: rgba(var(--hmp-accent-rgb),.07);    border-color: rgba(var(--hmp-accent-rgb),.15); }
.fsb-danger  { background: rgba(var(--hmp-secondary-rgb),.07); border-color: rgba(var(--hmp-secondary-rgb),.15); }
.fsb-warning { background: rgba(245,158,11,.07);               border-color: rgba(245,158,11,.2); }
.fsb-amount  { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.fsb-label   { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--hmp-muted); margin-top: .4rem; }

/* ── Detail Grid (property/contract view) ── */
.detail-item { padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.04); }
.detail-item:last-child { border-bottom: none; }
.detail-label { font-size: .73rem; color: var(--hmp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2rem; }
.detail-value { font-weight: 500; color: var(--hmp-text); word-break: break-word; }

/* ── Contact / Info Card ── */
.info-person { display: flex; align-items: center; gap: .85rem; padding: .25rem 0; }
.info-person .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--hmp-primary-dark), var(--hmp-primary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.info-person .name  { font-weight: 700; font-size: .95rem; }
.info-person .meta  { font-size: .8rem; color: var(--hmp-muted); margin-top: .1rem; }
.info-person .meta i { width: 14px; }

/* ── Inline status table rows ── */
.table-sm td, .table-sm th { font-size: .82rem; }

/* ── Quick Action Buttons ── */
.action-btn-grid { display: grid; gap: .6rem; }
.action-btn-grid .btn { text-align: left; font-weight: 500; }

/* ── Stats row for reports ── */
.report-stat { border-radius: var(--radius); padding: 1rem 1.25rem; }
.report-stat .rs-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.report-stat .rs-label { font-size: .73rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--hmp-muted); margin-top: .25rem; }

/* ── 11. Buttons ── */
.btn {
  font-weight: 500; border-radius: var(--radius-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.96) !important; }

/* Ripple */
.btn::after {
  content: '';
  position: absolute; inset: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: width .4s var(--ease), height .4s var(--ease), inset .4s var(--ease), opacity .4s;
  opacity: 0;
  pointer-events: none;
}
.btn:active::after { width: 200px; height: 200px; inset: calc(50% - 100px); opacity: 1; }

.btn-primary {
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--hmp-primary-rgb),.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg,var(--hmp-primary),var(--hmp-primary-dark));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(var(--hmp-primary-rgb),.5);
  transform: translateY(-1px);
}
.btn-danger {
  background: linear-gradient(135deg,var(--hmp-secondary-dark),var(--hmp-secondary));
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(var(--hmp-secondary-rgb),.3);
}
.btn-danger:hover {
  background: linear-gradient(135deg,var(--hmp-secondary),var(--hmp-secondary-dark));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(var(--hmp-secondary-rgb),.45);
  transform: translateY(-1px);
}
.btn-hmp-secondary {
  background: linear-gradient(135deg,var(--hmp-secondary-dark),var(--hmp-secondary));
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(var(--hmp-secondary-rgb),.3);
}
.btn-hmp-secondary:hover {
  background: linear-gradient(135deg,var(--hmp-secondary),var(--hmp-secondary-dark));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(var(--hmp-secondary-rgb),.45);
  transform: translateY(-1px);
}
.btn-success {
  background: linear-gradient(135deg,#0f5132,var(--hmp-accent));
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(var(--hmp-accent-rgb),.3);
}
.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--hmp-accent-rgb),.45);
  color: #fff;
}
.btn-outline-primary { border-color: var(--hmp-primary); color: var(--hmp-primary); }
.btn-outline-primary:hover {
  background: var(--hmp-primary); border-color: var(--hmp-primary);
  color: #fff; transform: translateY(-1px);
}
.btn-sm { font-size: .82rem; padding: .35rem .75rem; border-radius: var(--radius-xs); }

/* ── 12. Forms ── */
.form-label {
  font-weight: 500; font-size: .85rem;
  color: #374151; margin-bottom: .35rem;
}
.form-control, .form-select {
  border: 1.5px solid var(--hmp-border);
  border-radius: var(--radius-sm);
  font-size: .9rem; padding: .5rem .85rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  background: var(--hmp-surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hmp-primary);
  box-shadow: 0 0 0 3px rgba(var(--hmp-primary-rgb),.15);
  outline: none;
}
.form-control::placeholder { color: #a0aec0; }
.input-group .input-group-text {
  background: #f8fafc; border: 1.5px solid var(--hmp-border);
  border-right: none; color: var(--hmp-muted);
}
.input-group .form-control {
  border-left: none;
}
.input-group .form-control:focus { border-left: 1.5px solid var(--hmp-primary); }

.table-responsive {
  -webkit-overflow-scrolling: touch;
}
.table th,
.table td {
  vertical-align: middle;
}
.table td {
  overflow-wrap: anywhere;
}
.table td:last-child {
  white-space: nowrap;
}

/* ── 13. DataTables ── */
table.dataTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* ── Table Header ── */
table.dataTable thead th,
table.dataTable thead td {
  background: #f8fafc;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hmp-muted);
  border-bottom: 2px solid var(--hmp-border) !important;
  border-top: none !important;
  padding: .55rem .875rem;
  white-space: nowrap;
  vertical-align: middle;
}
table.dataTable thead th:first-child { border-radius: 0; }

/* ── Table Body ── */
table.dataTable tbody td {
  padding: .5rem .875rem;
  vertical-align: middle;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  font-size: .875rem;
  line-height: 1.45;
}
table.dataTable tbody tr {
  transition: background .12s var(--ease);
}
table.dataTable tbody tr:hover td {
  background: rgba(var(--hmp-primary-rgb),.05) !important;
}

/* Subtle alternating stripe */
table.dataTable tbody tr:nth-child(even) td {
  background: rgba(0,0,0,.015);
}
table.dataTable tbody tr:nth-child(even):hover td {
  background: rgba(var(--hmp-primary-rgb),.05) !important;
}

/* Row slide-in animation (only first draw, not on search/sort redraws) */
table.dataTable.first-draw tbody tr {
  animation: rowIn .22s var(--ease) both;
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── DataTables Controls ── */
.dataTables_wrapper {
  font-size: .875rem;
}
.dataTables_wrapper .dataTables_info {
  font-size: .8rem;
  color: var(--hmp-muted);
  padding-top: .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-xs) !important;
  padding: .3rem .65rem !important;
  margin: 0 2px;
  font-size: .8rem !important;
  border: 1.5px solid transparent !important;
  color: var(--hmp-muted) !important;
  transition: all .15s !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(var(--hmp-primary-rgb),.08) !important;
  border-color: rgba(var(--hmp-primary-rgb),.2) !important;
  color: var(--hmp-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--hmp-primary-rgb),.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #ccc !important;
  cursor: default !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: .82rem;
  color: var(--hmp-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}
.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--hmp-border);
  border-radius: var(--radius-xs);
  padding: .3rem .55rem;
  font-size: .82rem;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--hmp-border);
  border-radius: var(--radius-sm);
  padding: .35rem .75rem .35rem 2rem;
  font-size: .82rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat .65rem center;
  transition: border-color .2s, box-shadow .2s;
  width: 220px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--hmp-primary);
  box-shadow: 0 0 0 3px rgba(var(--hmp-primary-rgb),.12);
  outline: none;
  background-color: #fff;
}
/* Remove the default "Search:" label text, keep just the input */
.dataTables_wrapper .dataTables_filter label { flex-direction: row-reverse; }

/* ── DT controls inside card-body.p-0 ── */
.card-body.p-0 .dataTables_wrapper {
  padding: .75rem 1.25rem .75rem;
}
.card-body.p-0 .dataTables_wrapper table.dataTable {
  margin-top: .25rem !important;
  margin-bottom: 0 !important;
}

/* DT top/bottom bar */
.hmp-dt-top  { padding: .1rem 0 .3rem; }
.hmp-dt-bottom { padding: .4rem 0 .1rem; border-top: 1px solid var(--hmp-border); margin-top: 0 !important; }

/* ── 14. Modals ── */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.modal-header {
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  color: #fff; border: none;
  padding: 1.1rem 1.5rem;
}
.modal-header .btn-close { filter: invert(1) brightness(2); opacity: .8; }
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--hmp-border); }
.modal.fade .modal-dialog { transition: transform .25s var(--spring); }
.modal.show .modal-dialog { transform: none; }

/* Modal backdrop blur */
.modal-backdrop.show { backdrop-filter: blur(4px); background: rgba(0,0,0,.45); }

/* ── 15. Badges ── */
.badge {
  font-size: .72rem; font-weight: 600;
  padding: .3em .7em; border-radius: 6px;
  letter-spacing: .02em;
}
.badge.bg-success   { background: linear-gradient(135deg,#0f5132,var(--hmp-accent)) !important; }
.badge.bg-primary   { background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary)) !important; }
.badge.bg-danger    { background: linear-gradient(135deg,var(--hmp-secondary-dark),var(--hmp-secondary)) !important; }
.badge.bg-warning   { background: linear-gradient(135deg,#b45309,#f59e0b) !important; color:#fff !important; }
.badge.bg-info      { background: linear-gradient(135deg,#0369a1,#0ea5e9) !important; }
.badge.bg-secondary { background: linear-gradient(135deg,#374151,#6b7280) !important; }
.badge.bg-dark      { background: linear-gradient(135deg,#111827,#374151) !important; }

/* Pulsing expiry badge */
.badge-pulse {
  animation: badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--hmp-secondary-rgb),.5); }
  60%     { box-shadow: 0 0 0 6px rgba(var(--hmp-secondary-rgb),0); }
}

/* ── 16. Alerts ── */
.alert {
  border: none; border-radius: var(--radius);
  font-size: .9rem; font-weight: 500;
  padding: .85rem 1.1rem;
  animation: alertIn .3s var(--ease);
  box-shadow: var(--shadow-xs);
}
@keyframes alertIn {
  from { opacity:0; transform: translateX(12px); }
  to   { opacity:1; transform: translateX(0); }
}
.alert-success  { background:#f0fdf4; color:#166534; border-left:4px solid var(--hmp-accent); }
.alert-danger   { background:#fff1f2; color:#9f1239; border-left:4px solid var(--hmp-secondary); }
.alert-warning  { background:#fffbeb; color:#92400e; border-left:4px solid #f59e0b; }
.alert-info     { background:#eff6ff; color:#1e40af; border-left:4px solid var(--hmp-primary); }

/* ── 17. Nav Pills (filter tabs) ── */
.nav-pills .nav-link {
  border-radius: var(--radius-sm);
  font-size: .83rem; font-weight: 500;
  color: var(--hmp-muted);
  padding: .4rem .9rem;
  transition: all .18s var(--ease);
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--hmp-primary-rgb),.35);
}
.nav-pills .nav-link:hover:not(.active) {
  background: rgba(var(--hmp-primary-rgb),.08);
  color: var(--hmp-primary);
}

/* Flat tabs (settings etc.) */
.nav-tabs .nav-link {
  border: none; border-bottom: 3px solid transparent;
  border-radius: 0; color: var(--hmp-muted);
  font-weight: 500; font-size: .875rem;
  padding: .65rem 1rem;
  transition: color .18s, border-color .18s;
}
.nav-tabs .nav-link:hover { color: var(--hmp-primary); border-bottom-color: rgba(var(--hmp-primary-rgb),.3); }
.nav-tabs .nav-link.active { color: var(--hmp-primary); border-bottom-color: var(--hmp-primary); font-weight: 600; }
.nav-tabs { border-bottom: 2px solid var(--hmp-border); }

/* ── 18. Progress Bars ── */
.progress { background: rgba(var(--hmp-primary-rgb),.1); border-radius: 99px; overflow: hidden; }
.progress-bar {
  background: linear-gradient(90deg,var(--hmp-primary-dark),var(--hmp-primary));
  border-radius: 99px;
  transition: width 1s var(--ease);
}
.progress-bar.bg-success { background: linear-gradient(90deg,#0f5132,var(--hmp-accent)); }
.progress-bar.bg-danger  { background: linear-gradient(90deg,var(--hmp-secondary-dark),var(--hmp-secondary)); }

/* ── 19. Expiry Alert Banner ── */
.alert-expiry {
  background: linear-gradient(135deg,#fffbeb,#fef3c7);
  border-left: 5px solid #f59e0b;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .85rem 1.1rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: var(--shadow-xs);
  animation: alertIn .3s var(--ease);
}

/* ── 20. Section Divider ── */
.section-divider {
  color: var(--hmp-primary); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .5rem 0; border-bottom: 1px solid var(--hmp-border);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.section-divider::after {
  content: ''; flex: 1;
  height: 1px;
  background: linear-gradient(90deg,rgba(var(--hmp-primary-rgb),.2),transparent);
}

/* ── 21. Receipt ── */
.receipt-wrapper { max-width: 620px; margin: auto; }
.receipt {
  background: #fff; padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.receipt-header {
  text-align: center;
  border-bottom: 3px solid var(--hmp-primary);
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
}
.receipt-amount-box {
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  color: #fff; border-radius: var(--radius);
  padding: 1.5rem; text-align: center; margin: 1.25rem 0;
  box-shadow: 0 4px 20px rgba(var(--hmp-primary-rgb),.4);
}
.receipt-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; }

/* ── 22. Login Page ── */
.login-page {
  min-height: 100vh;
  background:
    linear-gradient(160deg,var(--hmp-primary-dark) 0%,var(--hmp-primary) 50%, rgba(var(--hmp-primary-rgb),.7) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  position: relative; overflow: hidden;
}
/* Animated background circles */
.login-page::before, .login-page::after {
  content: '';
  position: absolute; border-radius: 50%; opacity: .12;
  background: #fff;
  animation: floatBg 8s ease-in-out infinite alternate;
}
.login-page::before { width: 500px; height: 500px; top: -150px; right: -100px; }
.login-page::after  { width: 350px; height: 350px; bottom: -100px; left: -80px; animation-delay: -4s; }
@keyframes floatBg {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.15) rotate(10deg); }
}

.login-card {
  width: 100%; max-width: 430px;
  background: rgba(255,255,255,.97);
  border-radius: var(--radius-xl);
  padding: 2.75rem;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.2);
  position: relative; z-index: 1;
  animation: cardIn .45s var(--spring);
  backdrop-filter: blur(12px);
}
@keyframes cardIn {
  from { opacity:0; transform: translateY(30px) scale(.95); }
  to   { opacity:1; transform: translateY(0)    scale(1); }
}
.login-logo {
  width: 76px; height: 76px;
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; margin: 0 auto 1.25rem;
  box-shadow: 0 8px 24px rgba(var(--hmp-primary-rgb),.45);
  animation: logoIn .5s var(--spring) .1s both;
}
@keyframes logoIn {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0); }
}
.login-logo img {
  max-height: 64px; max-width: 100%;
  width: auto; height: auto;
  display: block;
  object-fit: contain;
}
.login-logo.has-brand-logo {
  width: min(220px, 82%);
  min-height: 76px;
  height: auto;
  background: #fff;
  padding: .45rem .65rem;
  box-shadow: none;
  animation: none;
}

/* ── 23. Property Cards ── */
.property-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .22s var(--spring), box-shadow .22s var(--ease);
  border: none;
}
.property-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.property-card .prop-img { width: 100%; height: 185px; object-fit: cover; }
.property-card .prop-code { font-size: .72rem; color: var(--hmp-muted); font-weight: 600; }

/* ── 24. Branding Color Swatch ── */
.color-swatch-preview {
  width: 100%; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hmp-border);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.color-swatch-preview:hover { transform: scale(1.04); box-shadow: var(--shadow-md); }

.brand-preview-bar {
  height: 8px; border-radius: 99px; margin-top: .5rem;
  background: linear-gradient(90deg, var(--hmp-primary), var(--hmp-secondary), var(--hmp-accent));
  transition: background .3s;
}

/* ── 25. Tooltip ── */
[data-bs-toggle="tooltip"] { cursor: help; }
.tooltip .tooltip-inner {
  background: #1a202c;
  border-radius: var(--radius-xs);
  font-size: .78rem; font-weight: 500;
  padding: .35rem .65rem;
}

/* ── 26. Utility Classes ── */
.text-primary   { color: var(--hmp-primary)   !important; }
.bg-primary     { background: var(--hmp-primary) !important; }
.text-hmp-red   { color: var(--hmp-secondary)  !important; }
.bg-hmp-red     { background: var(--hmp-secondary) !important; }
.border-primary { border-color: var(--hmp-primary) !important; }

.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fs-13  { font-size: .8125rem !important; }
.ls-1   { letter-spacing: .05em; }

/* Hover lift utility */
.hover-lift { transition: transform .2s var(--spring), box-shadow .2s var(--ease); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Shine overlay on any element */
.shine {
  position: relative; overflow: hidden;
}
.shine::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.shine:hover::after { left: 150%; }

/* Select2 */
.select2-container--bootstrap-5 .select2-selection { border-radius: var(--radius-sm) !important; border: 1.5px solid var(--hmp-border) !important; }
.select2-container--bootstrap-5 .select2-selection--single { min-height: 38px !important; display: flex; align-items: center; }
.select2-container--bootstrap-5 .select2-dropdown { border-radius: var(--radius-sm); border-color: var(--hmp-border); box-shadow: var(--shadow-lg); }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background: rgba(var(--hmp-primary-rgb),.1) !important; color: var(--hmp-primary) !important; }

/* Device responsive layer */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .hmp-tabs .nav-link,
  .hmp-mobile-nav-link,
  .hmp-mobile-subnav-item,
  .dropdown-item {
    min-height: 40px;
  }
  .btn-sm {
    padding: .45rem .75rem;
  }
}

@media (max-width: 991.98px) {
  :root {
    --hmp-tabnav-h: 0px;
  }

  .hmp-page-wrap {
    padding: 1rem .9rem 2rem;
  }
  .hmp-page-header {
    gap: .65rem;
    margin-bottom: 1rem;
  }
  .hmp-page-header h4 {
    font-size: 1.08rem;
  }
  .card-header {
    flex-wrap: wrap;
    gap: .55rem;
  }
  .card-header .btn {
    margin-left: 0 !important;
  }
  .dash-welcome {
    padding: 1.25rem 1.35rem;
  }
  .dash-welcome h2 {
    font-size: 1.28rem;
  }
  .dash-welcome::before {
    right: .8rem;
    font-size: 4rem;
  }
  .dataTables_wrapper .hmp-dt-top,
  .dataTables_wrapper .hmp-dt-bottom {
    align-items: stretch !important;
  }
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
  .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .hmp-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .hmp-page-header > * {
    min-width: 0;
  }
  .hmp-page-header .btn,
  .hmp-page-header .btn-group {
    align-self: flex-start;
  }
  .stat-card .card-body,
  .fin-card .card-body {
    padding: 1rem;
  }
  .stat-card .stat-value,
  .fin-card .stat-value {
    font-size: 1.35rem;
    overflow-wrap: anywhere;
  }
  .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
  .fsb-amount {
    font-size: 1.28rem;
  }
  .report-stat .rs-value {
    font-size: 1.35rem;
  }
  .modal-dialog {
    margin: .75rem;
  }
  .modal-body {
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .hmp-topbar {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .hmp-topbar .navbar-brand {
    gap: .5rem;
    max-width: calc(100vw - 132px);
  }
  .hmp-topbar .brand-logo {
    max-width: 124px;
    max-height: 40px;
  }
  .hmp-topbar .brand-icon {
    width: 34px;
    height: 34px;
  }
  .hmp-topbar .brand-text {
    font-size: .98rem;
  }
  .hmp-topbar .btn-user {
    padding: .4rem .58rem;
  }
  .hmp-page-wrap {
    padding: .85rem .7rem 1.75rem;
  }
  .hmp-page-header .btn,
  .landing-actions .btn,
  .landing-cta-band .btn {
    width: 100%;
  }
  .card {
    border-radius: var(--radius-sm);
  }
  .card-body {
    padding: .9rem;
  }
  .card-body.p-0 .dataTables_wrapper {
    padding: .7rem .75rem;
  }
  .row {
    --bs-gutter-x: .75rem;
  }
  .btn-group,
  .input-group {
    min-width: 0;
  }
  .btn-group {
    flex-wrap: wrap;
  }
  .dataTables_wrapper .hmp-dt-top,
  .dataTables_wrapper .hmp-dt-bottom {
    flex-direction: column;
  }
  .dataTables_wrapper .dataTables_length label {
    justify-content: space-between;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_length select {
    flex: 0 0 auto;
  }
  .dataTables_wrapper .dataTables_info {
    text-align: center;
  }
  .hmp-card-table-wrap {
    overflow-x: visible;
  }
  table.hmp-responsive-card-table {
    display: block;
    width: 100% !important;
    border-collapse: separate !important;
  }
  table.hmp-responsive-card-table thead {
    display: none;
  }
  table.hmp-responsive-card-table tbody {
    display: grid;
    gap: .75rem;
  }
  table.hmp-responsive-card-table tbody tr {
    display: block;
    border: 1px solid var(--hmp-border);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  table.hmp-responsive-card-table tbody td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    min-width: 0;
    padding: .6rem .75rem !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    text-align: right;
    white-space: normal !important;
  }
  table.hmp-responsive-card-table tbody td:first-child {
    border-top: 0 !important;
  }
  table.hmp-responsive-card-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 42%;
    color: var(--hmp-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
  }
  table.hmp-responsive-card-table tbody td[data-label=""]::before,
  table.hmp-responsive-card-table tbody td[colspan]::before {
    display: none;
  }
  table.hmp-responsive-card-table tbody td[colspan] {
    display: block !important;
    text-align: center;
  }
  table.hmp-responsive-card-table tbody td:last-child {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  table.hmp-responsive-card-table tbody td > * {
    min-width: 0;
  }
  table.hmp-responsive-card-table .btn {
    margin-bottom: .25rem;
  }
  .login-page {
    min-height: 100dvh;
    padding: 1rem;
  }
  .login-card {
    padding: 1.5rem 1.1rem;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 420px) {
  .hmp-topbar {
    height: 56px;
  }
  :root {
    --hmp-topbar-h: 56px;
  }
  .hmp-mobile-nav-toggle {
    width: 38px;
    height: 38px;
  }
  .hmp-topbar .navbar-brand {
    max-width: calc(100vw - 116px);
  }
  .hmp-topbar .brand-logo {
    max-width: 100px;
    max-height: 36px;
    padding: 3px 4px;
  }
  .hmp-topbar .brand-icon {
    width: 32px;
    height: 32px;
  }
  .hmp-topbar .brand-text {
    font-size: .9rem;
  }
  .hmp-topbar .btn-user {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .hmp-page-wrap {
    padding: .75rem .55rem 1.5rem;
  }
  .hmp-page-header h4 {
    font-size: 1rem;
  }
  .row > .col-6 {
    width: 100%;
  }
  .stat-card .card-body,
  .fin-card .card-body {
    gap: .75rem;
  }
  table.hmp-responsive-card-table tbody td {
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    text-align: left;
  }
  table.hmp-responsive-card-table tbody td::before {
    flex-basis: auto;
    max-width: none;
  }
  table.hmp-responsive-card-table tbody td:last-child {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .landing-main,
  .landing-nav,
  .landing-footer,
  .public-request-main,
  .public-request-nav {
    width: min(100% - 20px, 1180px);
  }
  .landing-links a {
    padding: .5rem .6rem;
  }
}

/* ── 27. Print ── */
@media print {
  .hmp-topbar, .hmp-tabnav, .hmp-footer, .no-print,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_length { display: none !important; }
  .hmp-content { margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
  body::before { display: none; }
}

/* ── 28. Responsive ── */
/* ── 29. Dashboard specific ── */
.dash-welcome {
  background: linear-gradient(135deg,var(--hmp-primary-dark) 0%,var(--hmp-primary) 60%,rgba(var(--hmp-primary-rgb),.75) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(var(--hmp-primary-rgb),.4);
  margin-bottom: 1.5rem;
}
.dash-welcome h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.dash-welcome p  { opacity: .8; margin: 0; font-size: .9rem; }
.dash-welcome::before {
  content: '\f015';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
  font-size: 5rem; opacity: .08; color: #fff; pointer-events: none;
}

/* Number count-up animation class */
.count-up { display: inline-block; }

/* Public Landing Page */
.landing-body {
  background: #f8fafc;
  color: var(--hmp-text);
  overflow-x: hidden;
}
.landing-body::before { display: none; }
.landing-nav {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hmp-text);
  font-weight: 800;
  text-decoration: none;
  min-width: 0;
}
.landing-brand.has-wide-logo .landing-brand-name { display: none; }
.landing-brand img {
  max-width: 190px;
  max-height: 54px;
  display: block;
  object-fit: contain;
}
.landing-brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  box-shadow: 0 8px 18px rgba(var(--hmp-primary-rgb),.2);
}
.landing-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.landing-links a {
  color: var(--hmp-muted);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  padding: .55rem .75rem;
  border-radius: 8px;
}
.landing-links a:hover {
  color: var(--hmp-primary);
  background: rgba(var(--hmp-primary-rgb),.08);
}
.landing-login-link {
  color: #fff !important;
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  box-shadow: 0 10px 22px rgba(var(--hmp-primary-rgb),.24);
}
.landing-links a.landing-login-link:hover {
  color: #fff !important;
  background: linear-gradient(135deg,var(--hmp-secondary-dark),var(--hmp-secondary)) !important;
  box-shadow: 0 10px 22px rgba(var(--hmp-secondary-rgb),.24);
}
.landing-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}
.landing-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .92fr);
  gap: clamp(24px, 5vw, 58px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px) 0 clamp(8px, 1.6vw, 18px);
}
.landing-hero-copy,
.landing-hero-media { min-width: 0; }
.landing-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--hmp-primary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.landing-hero h1 {
  max-width: 780px;
  margin: 0 0 16px;
  font-size: clamp(2.35rem, 6vw, 4.8rem);
  line-height: .96;
  font-weight: 900;
  letter-spacing: 0;
}
.landing-hero p {
  max-width: 640px;
  margin: 0;
  color: #475569;
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  line-height: 1.7;
}
.landing-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.landing-hero-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  aspect-ratio: 16 / 10;
  padding: clamp(8px, 1.6vw, 14px);
  border: 1px solid rgba(var(--hmp-primary-rgb),.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    linear-gradient(135deg, rgba(var(--hmp-primary-rgb),.1), rgba(var(--hmp-accent-rgb),.08));
  box-shadow: 0 24px 80px rgba(15,23,42,.12);
  overflow: hidden;
}
.landing-slider {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(420px, 54vw);
}
.landing-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .65s var(--ease);
  pointer-events: none;
}
.landing-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.landing-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
}
.landing-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  color: #fff;
  background: rgba(15,23,42,.58);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.landing-slider-arrow:hover {
  background: var(--hmp-primary);
}
.landing-slider-prev { left: 12px; }
.landing-slider-next { right: 12px; }
.landing-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}
.landing-slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(15,23,42,.32);
}
.landing-slider-dots button.is-active {
  width: 24px;
  background: var(--hmp-primary);
}
.landing-image-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
}
.landing-image-fallback i { font-size: 3rem; }
.landing-ad-board {
  padding: clamp(6px, 1.2vw, 14px) 0 clamp(28px, 5vw, 54px);
}
.landing-ad-board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.landing-ad-board-head h2 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}
.landing-ad-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .48rem .72rem;
  border: 1px solid rgba(var(--hmp-secondary-rgb),.18);
  border-radius: 8px;
  color: var(--hmp-secondary);
  background: rgba(var(--hmp-secondary-rgb),.08);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.landing-ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
  gap: 12px;
  padding: clamp(8px, 1.4vw, 14px);
  border: 1px solid var(--hmp-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)),
    linear-gradient(135deg, rgba(var(--hmp-primary-rgb),.08), rgba(var(--hmp-secondary-rgb),.06));
  box-shadow: 0 18px 52px rgba(15,23,42,.10);
}
.landing-ad-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  background: #fff;
  color: var(--hmp-text);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  transition: transform .2s var(--spring), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.landing-ad-card:hover {
  color: var(--hmp-primary);
  border-color: rgba(var(--hmp-primary-rgb),.3);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.landing-ad-card img {
  display: block;
  width: 100%;
  height: clamp(220px, 27vw, 340px);
  max-height: 48vh;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: #f8fafc;
}
.landing-ad-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px 0;
  font-size: .85rem;
  font-weight: 800;
  flex-shrink: 0;
}
.landing-ad-card span i {
  color: var(--hmp-muted);
  font-size: .78rem;
}
.landing-info-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hmp-border);
  border-radius: 8px;
  background: var(--hmp-border);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
.landing-info-strip > div {
  min-width: 0;
  padding: 20px;
  background: #fff;
}
.landing-info-strip span,
.landing-service-card span {
  display: block;
  color: var(--hmp-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.landing-info-strip strong,
.landing-info-strip a {
  color: var(--hmp-text);
  font-size: .96rem;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.landing-info-strip a:hover { color: var(--hmp-primary); }
.landing-section {
  padding: clamp(34px, 5vw, 56px) 0;
}
.landing-section-head {
  max-width: 720px;
  margin-bottom: 20px;
}
.landing-section-head h2,
.landing-cta-band h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.5vw, 2.8rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}
.landing-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.landing-service-card {
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--hmp-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(15,23,42,.06);
}
.landing-service-card span {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  border-radius: 8px;
  margin-bottom: 18px;
}
.landing-service-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 900;
}
.landing-service-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.65;
}
.landing-cta-band {
  margin-bottom: 32px;
  padding: clamp(26px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg,var(--hmp-primary-dark),var(--hmp-primary));
  box-shadow: 0 22px 56px rgba(var(--hmp-primary-rgb),.28);
}
.landing-cta-band .landing-kicker,
.landing-cta-band h2 { color: #fff; }
.landing-cta-band h2 {
  max-width: 760px;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
}
.landing-cta-band .btn-light:hover {
  color: #fff;
  border-color: var(--hmp-secondary);
  background: linear-gradient(135deg,var(--hmp-secondary-dark),var(--hmp-secondary));
}
.landing-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--hmp-muted);
  border-top: 1px solid var(--hmp-border);
}
.public-request-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(var(--hmp-primary-rgb),.13), transparent 34%),
    #f8fafc;
  color: var(--hmp-text);
}
.public-request-nav {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.public-request-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--hmp-text);
  font-weight: 900;
  text-decoration: none;
}
.public-request-main {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(20px, 5vw, 48px) 0 48px;
}
.public-request-card {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--hmp-border);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 52px rgba(15,23,42,.10);
}
.public-request-card h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}
.public-contact-summary {
  padding: 10px 12px;
  border: 1px solid var(--hmp-border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--hmp-muted);
  font-size: .84rem;
  line-height: 1.7;
}
.public-request-success-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg,#0f5132,var(--hmp-accent));
  font-size: 1.8rem;
}
.public-request-code {
  display: inline-flex;
  padding: .65rem 1rem;
  border-radius: 8px;
  background: rgba(var(--hmp-primary-rgb),.09);
  color: var(--hmp-primary);
  font-weight: 900;
  letter-spacing: .08em;
}

/* App install prompt */
.hmp-install-prompt {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2050;
  width: min(370px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 52px rgba(15, 23, 42, .2);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.hmp-install-prompt.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.hmp-install-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--hmp-muted);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hmp-install-close:hover {
  color: var(--hmp-text);
  background: rgba(15, 23, 42, .06);
}
.hmp-install-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
}
.hmp-install-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--hmp-primary-dark), var(--hmp-primary));
  overflow: hidden;
}
.hmp-install-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  background: #fff;
}
.hmp-install-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hmp-install-copy strong {
  color: var(--hmp-text);
  font-size: .96rem;
  line-height: 1.25;
  padding-right: 2px;
}
.hmp-install-copy span {
  color: var(--hmp-muted);
  font-size: .82rem;
  line-height: 1.45;
}
.hmp-install-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 575.98px) {
  .hmp-install-prompt {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
  .hmp-install-actions .btn {
    flex: 1 1 0;
  }
}
@media (min-width: 1180px) {
  .landing-ad-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 992px) {
  .landing-hero,
  .landing-service-grid,
  .landing-info-strip {
    grid-template-columns: 1fr 1fr;
  }
  .landing-hero { min-height: 0; }
  .landing-hero-copy { grid-column: 1 / -1; }
  .landing-ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-ad-card img {
    height: clamp(240px, 44vw, 390px);
    max-height: none;
  }
}
@media (max-width: 640px) {
  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }
  .landing-links {
    width: 100%;
    justify-content: flex-start;
  }
  .landing-brand img { max-width: min(190px, 72vw); }
  .landing-hero { padding-top: 18px; }
  .landing-hero,
  .landing-service-grid,
  .landing-info-strip {
    grid-template-columns: 1fr;
  }
  .landing-hero-media { min-height: 240px; }
  .landing-slider { min-height: 250px; }
  .landing-slider-arrow {
    width: 34px;
    height: 34px;
  }
  .landing-actions .btn,
  .landing-cta-band .btn { width: 100%; }
  .landing-ad-board-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .landing-ad-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px;
  }
  .landing-ad-card {
    padding: 6px;
  }
  .landing-ad-card img {
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }
  .landing-cta-band,
  .landing-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Final overrides for sections declared late in this file */
@media (max-width: 991.98px) {
  .dash-welcome {
    padding: 1.25rem 1.35rem;
  }
  .dash-welcome h2 {
    font-size: 1.28rem;
  }
  .dash-welcome::before {
    right: .8rem;
    font-size: 4rem;
  }
}

@media (max-width: 420px) {
  .landing-main,
  .landing-nav,
  .landing-footer,
  .public-request-main,
  .public-request-nav {
    width: min(100% - 20px, 1180px);
  }
  .landing-links a {
    padding: .5rem .6rem;
  }
}