/* =========================================================================
   Vantage HR — shared design tokens & components
   Matches the approved UI design concept (Main.dc.html / Login.dc.html /
   ESSHome.dc.html). Kept as plain CSS (no framework) so the whole app —
   Admin console and the mobile-first ESS portal — shares one visual system.
   ========================================================================= */

:root {
  --vhr-primary: #4338CA;
  --vhr-primary-hover: #362DA8;
  --vhr-primary-tint: #EEEDFC;
  --vhr-bg: #F5F6FA;
  --vhr-surface: #FFFFFF;
  --vhr-border: #E7E9F0;
  --vhr-border-soft: #EFEFF4;
  --vhr-text: #1B1E2A;
  --vhr-text-muted: #5B6070;
  --vhr-text-faint: #9AA0B1;
  --vhr-success: #1B9C63;
  --vhr-success-tint: #E7F8EF;
  --vhr-warning: #C2790A;
  --vhr-warning-tint: #FCF1DE;
  --vhr-danger: #D5372B;
  --vhr-danger-tint: #FBE7E5;
  --vhr-radius-lg: 14px;
  --vhr-radius-md: 10px;
  --vhr-radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--vhr-bg);
  color: var(--vhr-text);
  font-family: 'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
}

h1, h2, h3, .vhr-brand {
  font-family: 'Sora', system-ui, sans-serif;
}

a { color: var(--vhr-primary); text-decoration: none; }
a:hover { color: var(--vhr-primary-hover); }

/* ---- Layout shells ------------------------------------------------- */

.vhr-app {
  display: flex;
  min-height: 100vh;
}

.vhr-sidebar {
  width: 264px;
  min-width: 264px;
  background: var(--vhr-surface);
  border-right: 1px solid var(--vhr-border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.vhr-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 28px 8px;
}

.vhr-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--vhr-radius-md);
  background: var(--vhr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.vhr-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--vhr-text-faint);
  padding: 18px 12px 6px;
}
.vhr-nav-label:first-child { padding-top: 10px; }

.vhr-navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--vhr-radius-md);
  color: var(--vhr-text-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
  min-height: 44px;
}
.vhr-navitem:hover { background: #F1F0FC; color: var(--vhr-text); }
.vhr-navitem.active {
  background: var(--vhr-primary-tint);
  color: var(--vhr-primary);
  font-weight: 600;
}
.vhr-navitem svg { flex-shrink: 0; }

.vhr-sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #FAFAFC;
  border: 1px solid var(--vhr-border-soft);
}

.vhr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--vhr-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vhr-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vhr-topbar {
  min-height: 76px;
  border-bottom: 1px solid var(--vhr-border);
  display: flex;
  align-items: center;
  padding: 14px 32px;
  gap: 20px;
  background: var(--vhr-surface);
  flex-wrap: wrap;
}

.vhr-topbar-title h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.vhr-topbar-title .vhr-subtitle {
  font-size: 12.5px;
  color: var(--vhr-text-faint);
}

.vhr-topbar-spacer { flex: 1; }

.vhr-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--vhr-bg);
  border: 1px solid var(--vhr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vhr-text-muted);
  position: relative;
}

.vhr-content {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Cards & tables -------------------------------------------------- */

.vhr-card {
  background: var(--vhr-surface);
  border: 1px solid var(--vhr-border);
  border-radius: var(--vhr-radius-lg);
  padding: 22px;
}

.vhr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.vhr-card-header h2, .vhr-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.vhr-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.vhr-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--vhr-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vhr-kpi-value {
  font-size: 28px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
}

.vhr-kpi-label {
  font-size: 13px;
  color: var(--vhr-text-muted);
  margin-top: 2px;
}

.vhr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.vhr-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--vhr-text-faint);
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--vhr-border-soft);
  white-space: nowrap;
}

.vhr-table td {
  padding: 14px 8px;
  border-bottom: 1px solid #F5F5F8;
  vertical-align: middle;
}

.vhr-table tbody tr:hover { background: #FAFAFC; }
.vhr-table tbody tr:last-child td { border-bottom: none; }

/* Tighter variant for wide tables (many columns + action buttons) that need to fit a
   1280/1366px-wide (17" monitor) viewport without horizontal scrolling — scoped with
   .vhr-table-compact rather than changing .vhr-table itself, so every other report/
   list table in the app keeps its current spacing (client request, 17 Sep 2026,
   first applied to Admin -> Conveyance Bills). */
.vhr-table-compact th,
.vhr-table-compact td {
  padding: 8px 6px;
}

.vhr-table-compact {
  font-size: 12.5px;
}

/* Single-line ellipsis truncation with the full text available via the element's
   title attribute — used for free-text columns (e.g. a bill's "Details") that can be
   long, on wide tables where every column has to stay narrow. */
.vhr-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact inline quick-edit control inside a table cell — an amount box + Save
   button on one line, with an optional remarks line underneath. Scoped here rather
   than changing .vhr-input itself (whose 46px min-height and 100% width are sized
   for ordinary full-width form fields) so every other form in the app keeps its
   current sizing; this is specifically for a narrow table cell where several of
   these sit side by side (first needed for Payroll Run Details' TDS/Loan Ded./Other
   Ded. quick-edit cells, client request, 3 Oct 2026 — before this, the inputs and
   Save buttons had mismatched heights and no fixed width, which is what made them
   look cramped/scattered on screen). */
.vhr-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
}

.vhr-inline-edit-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.vhr-inline-edit input[type="number"] {
  flex: 0 0 84px;
  width: 84px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 13px;
}

.vhr-inline-edit .vhr-btn {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.vhr-inline-edit input[type="text"] {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11.5px;
}

.vhr-inline-edit-hint {
  font-size: 11px;
  color: var(--vhr-text-faint);
  min-height: 14px;
}

.vhr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.vhr-badge-success { color: var(--vhr-success); background: var(--vhr-success-tint); }
.vhr-badge-warning { color: var(--vhr-warning); background: var(--vhr-warning-tint); }
.vhr-badge-danger { color: var(--vhr-danger); background: var(--vhr-danger-tint); }
.vhr-badge-neutral { color: var(--vhr-text-muted); background: var(--vhr-bg); }

/* ---- Buttons ----------------------------------------------------------- */

.vhr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--vhr-radius-md);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.vhr-btn:hover { text-decoration: none; }

.vhr-btn-primary { background: var(--vhr-primary); color: #fff; }
.vhr-btn-primary:hover { background: var(--vhr-primary-hover); color: #fff; }

.vhr-btn-ghost { background: var(--vhr-surface); color: var(--vhr-text); border-color: var(--vhr-border); }
.vhr-btn-ghost:hover { background: var(--vhr-bg); color: var(--vhr-text); }

.vhr-btn-danger { background: var(--vhr-danger); color: #fff; }
.vhr-btn-danger:hover { background: #B92E24; color: #fff; }

.vhr-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* ---- Forms --------------------------------------------------------------- */

.vhr-form-row { margin-bottom: 18px; }

.vhr-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vhr-input,
.vhr-select,
textarea.vhr-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #E1E3EA;
  border-radius: var(--vhr-radius-md);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--vhr-text);
  background: var(--vhr-surface);
}

.vhr-input:focus, .vhr-select:focus, textarea.vhr-input:focus {
  outline: none;
  border-color: var(--vhr-primary);
  box-shadow: 0 0 0 3px var(--vhr-primary-tint);
}

.vhr-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vhr-text-muted);
}

.vhr-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
}

.vhr-field-error {
  color: var(--vhr-danger);
  font-size: 12.5px;
  margin-top: 4px;
}

.vhr-validation-summary {
  background: var(--vhr-danger-tint);
  color: var(--vhr-danger);
  border: 1px solid #F3C7C2;
  border-radius: var(--vhr-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.vhr-alert-success {
  background: var(--vhr-success-tint);
  color: var(--vhr-success);
  border: 1px solid #BFE9D3;
  border-radius: var(--vhr-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.vhr-alert-error {
  background: var(--vhr-danger-tint);
  color: var(--vhr-danger);
  border: 1px solid #F3C6C1;
  border-radius: var(--vhr-radius-md);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---- Attendance (ESS) --------------------------------------------------- */

.vhr-attendance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--vhr-border-soft);
  font-size: 13.5px;
}
.vhr-attendance-row:last-child { border-bottom: none; }
.vhr-attendance-row > span { color: var(--vhr-text-muted); }

.vhr-type-options { display: flex; flex-direction: column; gap: 8px; }

.vhr-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--vhr-border);
  border-radius: var(--vhr-radius-md);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--vhr-surface);
  font-size: 14px;
}
.vhr-type-option input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; }
.vhr-type-option.selected {
  border-color: var(--vhr-primary);
  background: var(--vhr-primary-tint);
  color: var(--vhr-primary);
  font-weight: 600;
}

.vhr-bottom-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  background: var(--vhr-surface);
  border-top: 1px solid var(--vhr-border);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}

.vhr-bottom-nav a {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vhr-text-faint);
  border-radius: var(--vhr-radius-sm);
}
.vhr-bottom-nav a.active { color: var(--vhr-primary); background: var(--vhr-primary-tint); }
.vhr-bottom-nav a.disabled { opacity: .5; pointer-events: none; }

/* Pending-count badge on a bottom-nav icon (e.g. Tasks) — same idea as an unread
   count next to an email Inbox. Positioned relative to the icon glyph, not the
   whole tab, so it doesn't shift when the label wraps on narrow phones. */
.vhr-nav-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--vhr-danger, #D6455D);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.vhr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.vhr-filter-bar .vhr-form-row { margin-bottom: 0; min-width: 180px; }

.vhr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.vhr-empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--vhr-text-faint);
  font-size: 14px;
}

/* ---- Login page ------------------------------------------------------ */

.vhr-login-shell {
  display: flex;
  min-height: 100vh;
  background: #FFFFFF;
}

.vhr-login-brand-panel {
  width: 480px;
  min-width: 320px;
  background: #211B70;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.vhr-login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(255,255,255,0.08), transparent),
    radial-gradient(500px 500px at 10% 90%, rgba(255,255,255,0.06), transparent);
}

.vhr-login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFBFD;
  padding: 32px;
}

.vhr-login-form {
  width: 100%;
  max-width: 380px;
}

.vhr-login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
}

.vhr-login-feature-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--vhr-radius-sm);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vhr-login-headline {
  font-size: 32px;
}

.vhr-login-subtext {
  font-size: 15px;
}

/* Mobile-only copy of the credit line, rendered after the form panel (see
   markup in Login.cshtml) so it sits at the true bottom of the page instead
   of up near the logo inside the brand panel. Hidden on desktop, where
   .vhr-login-copyright (inside the brand panel) already shows it. */
.vhr-login-bottom-credit {
  display: none;
}

/* Below this width the two-column layout (fixed 480px brand panel + form
   panel) no longer fits a phone viewport and forces horizontal scrolling —
   stack the brand panel above the form instead, and trim its content down
   to what's still useful once it's no longer a full-height side panel. */
@media (max-width: 860px) {
  .vhr-login-shell {
    flex-direction: column;
    min-height: 0;
  }

  .vhr-login-brand-panel {
    width: 100%;
    min-width: 0;
    padding: 32px 24px;
    gap: 24px;
  }

  /* The headline + supporting paragraph ("One place for your people,
     attendance and pay." / "Location-verified attendance...") pushed the
     actual username/password fields too far down a phone screen — hidden
     on mobile so the form panel starts right after the logo row. */
  .vhr-login-headline,
  .vhr-login-subtext {
    display: none !important;
  }

  .vhr-login-feature-list {
    display: none !important;
  }

  /* The brand-panel copy of the credit line moves out of the way on mobile —
     .vhr-login-bottom-credit (below) shows the same text at the actual
     bottom of the page instead. */
  .vhr-login-copyright {
    display: none;
  }

  .vhr-login-form-panel {
    padding: 28px 20px 12px;
  }

  .vhr-login-bottom-credit {
    display: block;
    text-align: center;
    padding: 0 20px 28px;
    font-size: 12px;
    color: var(--vhr-text-faint);
    line-height: 1.7;
  }

  .vhr-login-bottom-credit a {
    color: var(--vhr-text-muted);
  }
}

/* ---- Mobile-first ESS shell -------------------------------------------- */

.vhr-ess-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--vhr-bg);
  display: flex;
  flex-direction: column;
}

.vhr-ess-header {
  background: var(--vhr-surface);
  border-bottom: 1px solid var(--vhr-border);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vhr-ess-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vhr-tap-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .vhr-sidebar { display: none; }
  .vhr-content { padding: 20px; }
  .vhr-topbar { padding: 14px 20px; }
}

/* ---- "Developed by" credit line — login screen, Admin console, ESS portal ---- */

.vhr-credit-footer {
  text-align: center;
  font-size: 12px;
  color: var(--vhr-text-faint);
  padding: 12px 20px 16px;
}

.vhr-credit-footer a {
  color: var(--vhr-text-muted);
  font-weight: 600;
  text-decoration: none;
}

.vhr-credit-footer a:hover {
  text-decoration: underline;
}

/* ---- Custom date picker (wwwroot/js/datepicker.js) — always day/month/year,
   never the visitor's browser/OS locale --------------------------------------- */

.vhr-dp-wrap {
  display: block;
  position: relative;
}

.vhr-dp-display {
  cursor: pointer;
  padding-right: 40px;
  background: var(--vhr-surface);
}

.vhr-dp-wrap.vhr-dp-open .vhr-dp-display {
  outline: none;
  border-color: var(--vhr-primary);
  box-shadow: 0 0 0 3px var(--vhr-primary-tint);
}

.vhr-dp-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vhr-text-faint);
  cursor: pointer;
  display: flex;
  pointer-events: none;
}

.vhr-dp-popup {
  position: absolute;
  z-index: 90;
  width: 272px;
  background: var(--vhr-surface);
  border: 1px solid var(--vhr-border);
  border-radius: var(--vhr-radius-md);
  box-shadow: 0 12px 32px rgba(20, 22, 40, 0.16);
  padding: 12px;
}

.vhr-dp-header {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}

.vhr-dp-nav-btn {
  border: none;
  background: none;
  color: var(--vhr-text-muted);
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: var(--vhr-radius-sm);
  cursor: pointer;
}

.vhr-dp-nav-btn:hover {
  background: var(--vhr-bg);
  color: var(--vhr-text);
}

.vhr-dp-label {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vhr-text);
}

.vhr-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.vhr-dp-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--vhr-text-faint);
  padding: 4px 0;
}

.vhr-dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.vhr-dp-day {
  border: none;
  background: none;
  font-size: 13px;
  color: var(--vhr-text);
  height: 32px;
  border-radius: var(--vhr-radius-sm);
  cursor: pointer;
}

.vhr-dp-day:hover {
  background: var(--vhr-bg);
}

.vhr-dp-day.is-muted {
  color: var(--vhr-text-faint);
}

.vhr-dp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--vhr-primary);
}

.vhr-dp-day.is-selected {
  background: var(--vhr-primary);
  color: #fff;
  font-weight: 600;
}

.vhr-dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--vhr-border-soft);
}

.vhr-dp-footer-btn {
  border: none;
  background: none;
  color: var(--vhr-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}

.vhr-dp-footer-btn:hover {
  text-decoration: underline;
}

/* ---- Printing (individual payslip print option, Sep 2026) -------------
   .vhr-no-print marks anything that should disappear when a page is sent
   to a printer or "printed" to PDF from the browser — the Print button
   itself, "Back to ..." links, and success/error banners — so only the
   actual document (the payslip, letterhead included) ends up on paper.
   Generic on purpose: any future "printable page" in the app can reuse
   this the same way, not just payslips. */
@media print {
  .vhr-no-print,
  .vhr-sidebar,
  .vhr-topbar,
  .vhr-credit-footer,
  .vhr-ess-header,
  .vhr-bottom-nav,
  [data-auto-dismiss] {
    display: none !important;
  }

  .vhr-app, .vhr-main, .vhr-ess-shell {
    display: block !important;
    min-height: 0 !important;
  }

  .vhr-content, .vhr-ess-content {
    padding: 0 !important;
    gap: 12px !important;
  }

  .vhr-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body {
    background: #fff !important;
  }
}

/* ---- Location modal (Conveyance Bill GPS map, Sep 2026) ---------------
   A single reusable overlay + card, shared by the Conveyance Bill oversight
   list's "Map" buttons — one instance lives on the page, its contents swap
   per bill. Excluded from print (.vhr-no-print) since it's always closed
   by default and has no business on paper. */
.vhr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 30, 42, 0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.vhr-modal {
  background: var(--vhr-surface);
  border-radius: var(--vhr-radius-lg);
  box-shadow: 0 20px 60px rgba(20, 20, 40, 0.25);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
}

.vhr-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vhr-modal-header h3 {
  margin: 0;
  font-size: 15.5px;
}

.vhr-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--vhr-text-faint);
  cursor: pointer;
  padding: 0 2px;
}

.vhr-modal-close:hover {
  color: var(--vhr-text);
}

.vhr-location-map {
  height: 280px;
  border-radius: var(--vhr-radius-md);
  border: 1px solid var(--vhr-border);
}