/* Fonts are loaded via <link rel="preconnect"/stylesheet> in each page's <head> (not @import,
   which serializes the fetch behind this stylesheet and delays text rendering). */

:root {
  /* Brand color: --vwp-primary and --vwp-primary-rgb are overridden at runtime by assets/js/theme.js
     (reads the saved choice from Settings > Brand Color). Everything below derives from those two. */
  --vwp-primary: #1d2a70;
  --vwp-primary-rgb: 29, 42, 112;
  --vwp-primary-dark: #131d52;
  --vwp-primary-light: rgba(var(--vwp-primary-rgb), .08);
  --vwp-accent: #4954c7;
  --vwp-ink: #10152b;
  --vwp-muted: #667085;
  --vwp-bg: #f4f6fb;
  --vwp-border: #e4e7ec;
  --vwp-sidebar-bg: #0d1530;
  --vwp-sidebar-bg-2: #10193a;
  --vwp-sidebar-active: var(--vwp-primary);
  --vwp-radius: 14px;
  --vwp-radius-sm: 10px;
  --vwp-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --vwp-shadow-md: 0 4px 14px rgba(16,24,40,.08);
  --vwp-shadow-lg: 0 20px 50px rgba(16,24,40,.16);
}

/* ---------- Scrollbars: thin, rounded, transparent track, subtle until hovered ---------- */
* { scrollbar-width: thin; scrollbar-color: #d3d7e3 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3d7e3; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b3b9cc; }
::-webkit-scrollbar-corner { background: transparent; }

.sidebar-inner { scrollbar-color: rgba(255,255,255,.2) transparent; }
.sidebar-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.sidebar-inner::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }

html, body { height: 100%; }
body {
  background: var(--vwp-bg); color: var(--vwp-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .925rem; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.02em; }
a { text-decoration: none; }
.text-brand { color: var(--vwp-primary) !important; }
.bg-brand { background: var(--vwp-primary) !important; }
.fw-semibold { font-weight: 600; }

/* ---------- Buttons & forms ---------- */
.btn { border-radius: 9px; font-weight: 600; font-size: .875rem; transition: all .15s ease; }
.btn-primary { background: var(--vwp-primary); border-color: var(--vwp-primary); box-shadow: 0 1px 2px rgba(var(--vwp-primary-rgb),.24); }
.btn-primary:hover, .btn-primary:focus { background: var(--vwp-primary-dark); border-color: var(--vwp-primary-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--vwp-primary); border-color: var(--vwp-primary); }
.btn-outline-primary:hover { background: var(--vwp-primary); border-color: var(--vwp-primary); }
.btn-light { background: #fff; border-color: var(--vwp-border); }
.btn-light:hover { background: #f2f4f9; }
.btn-sm { border-radius: 8px; }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--vwp-primary-rgb),.15); border-color: var(--vwp-primary); }
.btn-pill { border-radius: 999px !important; padding: .7rem 1.6rem; font-weight: 700; }
.btn-pill.btn-sm { padding: .5rem 1.15rem; }

.form-label { font-size: .8rem; font-weight: 600; color: #344054; margin-bottom: 6px; }
.form-label.required::after { content: " *"; color: #d92d20; }
.form-control, .form-select { border-radius: 9px; border-color: var(--vwp-border); font-size: .875rem; padding: .5rem .75rem; }
.form-control::placeholder { color: #a5abbd; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #d92d20; }
.invalid-feedback { font-size: .78rem; }
.input-group-text { background: #fff; border-color: var(--vwp-border); }

/* ---------- Dropdowns (Bootstrap menus + native selects) ---------- */
.form-select { cursor: pointer; background-color: #fff; }
.form-select:focus { border-color: var(--vwp-primary); box-shadow: 0 0 0 3px rgba(var(--vwp-primary-rgb),.15); }
.form-select.rounded-pill { padding-right: 2.2rem; }

/* Compact icon-prefixed select, used for header/nav controls (e.g. gate scanner guard/gate pickers) */
.nav-select-group { position: relative; }
.nav-select-group .fig-icon { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; color: #98a2b3; font-size: .8rem; pointer-events: none; z-index: 1; }
.nav-select-group select { background: #f8f9fc; border: 1px solid var(--vwp-border); border-radius: 999px; padding: 8px 30px 8px 34px; font-size: .82rem; font-weight: 600; color: var(--vwp-ink); cursor: pointer; transition: all .15s ease; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2398a2b3'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4h-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.nav-select-group select:hover { background-color: #f0f1f5; border-color: #d0d4e0; }
.nav-select-group select:focus { outline: none; border-color: var(--vwp-primary); box-shadow: 0 0 0 3px rgba(var(--vwp-primary-rgb),.12); background-color: #fff; }
/* searchable-select.js replaces the native <select> above with a button.ss-trigger, which knows
   nothing about this container's absolutely-positioned .fig-icon - without this, the trigger's text
   starts flush left and renders directly under the icon instead of leaving room for it. */
.nav-select-group .ss-trigger { background: #f8f9fc; border: 1px solid var(--vwp-border); border-radius: 999px; padding: 8px 12px 8px 34px; font-size: .82rem; font-weight: 600; color: var(--vwp-ink); }
.nav-select-group .ss-trigger:hover { background-color: #f0f1f5; border-color: #d0d4e0; }
.nav-select-group .ss-trigger.open { outline: none; border-color: var(--vwp-primary); box-shadow: 0 0 0 3px rgba(var(--vwp-primary-rgb),.12); background-color: #fff; }
.dropdown-toggle::after { vertical-align: .16em; }
.dropdown-menu { border: 1px solid var(--vwp-border); border-radius: 14px; box-shadow: var(--vwp-shadow-lg); padding: 8px; font-size: .875rem; margin-top: 8px !important; }
.dropdown-item { border-radius: 9px; padding: 9px 12px; font-weight: 500; color: var(--vwp-ink); transition: background .12s ease, color .12s ease; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--vwp-primary-light); color: var(--vwp-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--vwp-primary); color: #fff; }
.dropdown-item-text { padding: 9px 12px; }
.dropdown-divider { margin: 6px 4px; border-color: var(--vwp-border); }
.dropdown-item i { width: 18px; display: inline-block; text-align: center; opacity: .85; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; font-size: .72rem; padding: .38em .7em; letter-spacing: .01em; }

/* ---------- App shell (dashboard) ---------- */
.app-topbar { background: #fff; border-bottom: 1px solid var(--vwp-border); height: 60px; position: sticky; top: 0; z-index: 1030; }
.app-shell { display: flex; min-height: calc(100vh - 60px); }
#app-sidebar { width: 264px; flex-shrink: 0; background: linear-gradient(180deg, var(--vwp-sidebar-bg), var(--vwp-sidebar-bg-2)); color: #cbd5f5; }
.sidebar-inner { position: sticky; top: 60px; padding: 16px 12px; height: calc(100vh - 60px); overflow-y: auto; }
.sidebar-group-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #5f74b0; margin: 18px 10px 8px; font-weight: 700; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: #c3cdf0; text-decoration: none; font-size: .87rem; margin-bottom: 2px; transition: background .12s ease; }
.sidebar-link i { font-size: 1rem; width: 18px; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: var(--vwp-sidebar-active); color: #fff; font-weight: 600; box-shadow: 0 4px 10px rgba(var(--vwp-primary-rgb),.35); }
.app-main { flex: 1; padding: 24px 28px 64px; min-width: 0; }
.avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--vwp-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }

@media (max-width: 991px) {
  #app-sidebar { position: fixed; left: -280px; top: 60px; bottom: 0; z-index: 1040; transition: left .2s ease; box-shadow: 4px 0 16px rgba(0,0,0,.15); }
  #app-sidebar.show { left: 0; }
  .app-main { padding: 18px 16px 48px; }
}
.sidebar-backdrop { display: none; position: fixed; inset: 60px 0 0 0; background: rgba(0,0,0,.35); z-index: 1035; }
.sidebar-backdrop.show { display: block; }

/* ---------- Cards / stat tiles ---------- */
.stat-card { border: 1px solid var(--vwp-border); border-radius: var(--vwp-radius); background: #fff; padding: 18px 20px; box-shadow: var(--vwp-shadow-sm); transition: box-shadow .15s ease; }
.stat-card:hover { box-shadow: var(--vwp-shadow-md); }
.stat-card .stat-value { font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.section-card { border: 1px solid var(--vwp-border); border-radius: var(--vwp-radius); background: #fff; box-shadow: var(--vwp-shadow-sm); }
.page-title { font-weight: 800; font-size: 1.4rem; }
.page-subtitle { color: var(--vwp-muted); font-size: .875rem; }

/* ---------- Tables ---------- */
.table { font-size: .84rem; margin-bottom: 0; }
.table thead th { text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; color: #98a2b3; font-weight: 700; border-bottom: 1px solid var(--vwp-border); padding: .65rem .75rem; white-space: nowrap; }
.table tbody td { padding: .65rem .75rem; border-bottom: 1px solid #f0f1f5; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: #f8f9fd; }
.table-sortable th { cursor: pointer; user-select: none; }
.table-sortable th:hover { color: var(--vwp-primary); }
.table-sortable th .bi { font-size: .7rem; opacity: .5; margin-left: 3px; }
.table-hover-link tbody tr { cursor: pointer; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 46px 20px; color: var(--vwp-muted); }
.empty-state i { font-size: 2.2rem; color: #c6cbe0; display: block; margin-bottom: 10px; }
.empty-state .empty-title { font-weight: 600; color: #475467; margin-bottom: 2px; }
.empty-state .empty-sub { font-size: .82rem; }

/* ---------- Pagination ---------- */
.vwp-pagination { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.vwp-pagination button { border: 1px solid var(--vwp-border); background: #fff; border-radius: 7px; width: 30px; height: 30px; font-size: .78rem; color: #344054; }
.vwp-pagination button.active { background: var(--vwp-primary); color: #fff; border-color: var(--vwp-primary); }
.vwp-pagination button:disabled { opacity: .4; }

/* ---------- Steps / wizard (used in dashboard forms too) ---------- */
.step-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--vwp-primary-light); color: var(--vwp-primary); font-size: .78rem; font-weight: 700; }
.step-pill .num { width: 20px; height: 20px; border-radius: 50%; background: var(--vwp-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; }

/* ---------- Public pages: shared light landing theme (login, kiosk, worker, gate-scan) ---------- */
.public-page { min-height: 100vh; background: radial-gradient(circle at 12% 0%, #eef0fc 0%, #ffffff 42%, #f5f6fc 100%); display: flex; flex-direction: column; }

/* Floating glass navbar */
.floating-nav-wrap { padding: 22px clamp(14px, 4vw, 32px) 0; }
.floating-nav { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px 10px 24px; border-radius: 999px; background: rgba(255,255,255,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 8px 30px rgba(16,24,40,.07); }
.public-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--vwp-ink); display: flex; align-items: center; gap: 8px; }
.public-logo .accent { color: var(--vwp-primary); }
.public-nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
.public-nav-links a { color: #4b5165; font-weight: 700; font-size: .92rem; }
.public-nav-links a:hover, .public-nav-links a.active { color: var(--vwp-primary); }
.public-body { flex: 1; display: flex; align-items: center; padding: clamp(24px, 5vw, 56px) clamp(14px, 4vw, 32px) 56px; }
.public-body > .container { width: 100%; }

/* Hero badge, title, subtext (primary-colored headline, matching the reference pattern) */
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--vwp-primary-rgb),.08); color: var(--vwp-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.hero-title { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.14; color: var(--vwp-primary); }
.hero-sub { font-size: 1.05rem; color: #667085; font-weight: 500; line-height: 1.6; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; background: #f1f2f8; border-radius: 999px; padding: 8px 16px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #4b5165; }
.trust-chip i { color: var(--vwp-primary); }

/* Rounded icon-inset inputs with focus ring */
.form-label-hero { display: block; color: var(--vwp-primary); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; margin-left: 2px; }
.form-icon-group { position: relative; }
.form-icon-group .fig-icon { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; padding-left: 20px; color: #98a2b3; font-size: 1.1rem; pointer-events: none; transition: color .2s ease; }
.form-icon-group input, .form-icon-group select { border: 1px solid var(--vwp-border); background: #fff; border-radius: 16px; padding: 15px 20px 15px 52px; font-size: 1rem; font-weight: 600; width: 100%; transition: all .2s ease; }
.form-icon-group input::placeholder { color: #c2c6d6; font-weight: 500; }
.form-icon-group input:focus, .form-icon-group select:focus { outline: none; border-color: var(--vwp-primary); box-shadow: 0 0 0 4px rgba(var(--vwp-primary-rgb),.07); }
.form-icon-group:focus-within .fig-icon { color: var(--vwp-primary); }
.form-control-hero, select.form-control-hero { border: 1px solid var(--vwp-border); background: #fff; border-radius: 14px; padding: 13px 16px; font-size: .92rem; font-weight: 600; width: 100%; transition: all .2s ease; }
.form-control-hero::placeholder { color: #c2c6d6; font-weight: 500; }
.form-control-hero:focus { outline: none; border-color: var(--vwp-primary); box-shadow: 0 0 0 4px rgba(var(--vwp-primary-rgb),.07); }
textarea.form-control-hero { resize: vertical; }
.card-section-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; color: var(--vwp-primary); margin-bottom: 22px; }
.card-section-title i { font-size: 1.05rem; }
.segmented-toggle { display: flex; gap: 6px; padding: 4px; background: #f9fafb; border-radius: 12px; border: 1px solid var(--vwp-border); }
.segmented-toggle input { display: none; }
.segmented-toggle label { flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-weight: 700; font-size: .85rem; color: #667085; cursor: pointer; transition: all .15s ease; }
.segmented-toggle input:checked + label { background: var(--vwp-primary); color: #fff; }

/* Pill CTA buttons with sliding chevron icon-box */
.btn-primary-custom, .btn-secondary-custom { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 15px 24px; font-weight: 700; font-size: .98rem; border: none; transition: all .2s ease; text-decoration: none; white-space: nowrap; }
.btn-primary-custom { background: var(--vwp-primary); color: #fff; box-shadow: 0 10px 24px rgba(var(--vwp-primary-rgb),.28); }
.btn-primary-custom:hover { background: var(--vwp-primary-dark); color: #fff; transform: translateY(-1px); }
.btn-secondary-custom { background: #f1f2f8; color: #344054; }
.btn-secondary-custom:hover { background: #e6e8f2; color: #344054; }
.btn-icon-box { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; }
.btn-icon-box i { transition: transform .2s ease; display: block; }
.btn-primary-custom:hover .btn-icon-box i { transform: translateX(2px); }
.btn-row-split { display: flex; align-items: stretch; gap: 16px; }
.btn-row-split > * { flex: 1; }
.btn-row-split > .btn-flex-2 { flex: 2; }

/* Spinning dashed-frame illustration panel (original artwork, no external assets) */
.illustration-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.illustration-spin-frame { position: absolute; inset: 8%; border: 2px dashed rgba(var(--vwp-primary-rgb),.16); border-radius: 40px; animation: spinSlow 32s linear infinite; }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.illustration-glass-card { position: relative; background: rgba(255,255,255,.8); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.85); border-radius: 32px; padding: 24px; width: min(320px, 88%); box-shadow: var(--vwp-shadow-lg); }
.float-chip { position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--vwp-shadow-md); padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; color: var(--vwp-ink); }
.float-chip i { color: #10b981; }
.float-chip.chip-1 { top: 4%; right: 0; }
.float-chip.chip-2 { bottom: 8%; left: -4%; }

.login-card-panel { background: #fff; border-radius: 22px; box-shadow: var(--vwp-shadow-lg); border: 1px solid var(--vwp-border); overflow: hidden; }
.demo-user-btn { text-align: left; width: 100%; border-radius: 10px; transition: all .12s ease; }
.demo-user-btn:hover { border-color: var(--vwp-primary) !important; background: var(--vwp-primary-light) !important; }

/* ---------- Kiosk ---------- */
.kiosk-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(12px,3vw,20px); }
.kiosk-card { background: #fff; border-radius: 26px; width: 100%; max-width: 920px; padding: clamp(24px,4vw,42px); box-shadow: var(--vwp-shadow-lg); border: 1px solid var(--vwp-border); }
.kiosk-btn { border: 2px solid var(--vwp-border); border-radius: 18px; padding: 32px 18px; background: #fff; text-align: center; transition: all .15s ease; height: 100%; }
.kiosk-btn:hover { border-color: var(--vwp-primary); transform: translateY(-4px); box-shadow: 0 14px 28px rgba(var(--vwp-primary-rgb),.16); }
.kiosk-btn i { font-size: 2.5rem; color: var(--vwp-primary); }
.kiosk-step { display: none; animation: fadeIn .2s ease; }
.kiosk-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.kiosk-photo-frame { width: 220px; height: 220px; border-radius: 16px; overflow: hidden; background: #0f1830; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.kiosk-photo-frame video, .kiosk-photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kiosk step progress ---------- */
.step-progress { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin-bottom: 30px; }
.step-progress-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
.step-progress-dot { width: 30px; height: 30px; border-radius: 50%; background: #eef0f5; color: #98a2b3; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; border: 2px solid #eef0f5; transition: all .2s ease; }
.step-progress-label { font-size: .72rem; color: #98a2b3; font-weight: 600; text-align: center; }
.step-progress-line { flex: 1; height: 2px; background: #eef0f5; margin-top: 15px; max-width: 60px; }
.step-progress-item.active .step-progress-dot { background: var(--vwp-primary); border-color: var(--vwp-primary); color: #fff; box-shadow: 0 0 0 4px var(--vwp-primary-light); }
.step-progress-item.active .step-progress-label { color: var(--vwp-primary); }
.step-progress-item.done .step-progress-dot { background: #10b981; border-color: #10b981; color: #fff; }
.step-progress-item.done .step-progress-dot::before { content: "\f633"; font-family: "bootstrap-icons"; }
.step-progress-item.done .step-progress-label { color: #10b981; }
.step-progress-line.done { background: #10b981; }

/* ---------- Badge / ID card ---------- */
.id-badge { width: 340px; border-radius: 18px; border: 1px solid var(--vwp-border); overflow: hidden; background: #fff; margin: 0 auto; box-shadow: var(--vwp-shadow-lg); }
.id-badge-header { background: var(--vwp-primary); color: #fff; padding: 14px 18px; }
.id-badge-photo { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; border: 3px solid #fff; margin-top: -34px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }

/* ---------- Gate scan ---------- */
.scan-wrap { min-height: 100vh; background: radial-gradient(circle at 12% 0%, #eef0fc 0%, #ffffff 42%, #f5f6fc 100%); color: var(--vwp-ink); }
.scan-result-card { border-radius: 20px; }

/* ---------- Worker portal ---------- */
.worker-wrap { min-height: 100vh; background: radial-gradient(circle at 12% 0%, #eef0fc 0%, #ffffff 42%, #f5f6fc 100%); padding: 28px 16px; }
.worker-card { max-width: 560px; margin: 0 auto; }

/* ---------- Misc ---------- */
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.divider-label { display: flex; align-items: center; gap: 10px; color: var(--vwp-muted); font-size: .78rem; }
.divider-label hr { flex: 1; margin: 0; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--vwp-border); }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item::before { content: ""; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--vwp-primary); }
.timeline-item.pending::before { border-color: var(--vwp-border); }
.timeline-item.rejected::before { border-color: #d92d20; }

@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; }
  .app-main { padding: 0 !important; }
  #app-sidebar, #app-topbar { display: none !important; }
  .section-card { border: none !important; box-shadow: none !important; }
}

/* Searchable select (assets/js/searchable-select.js) - the trigger button inherits the original
   <select>'s own classes so form-select-sm / rounded-pill / form-control-hero sizing all still apply
   automatically; only the box model (text-align, flex layout) is added on top here. */
.ss-wrap { position: relative; }
.ss-native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ss-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background-color: #fff; }
.ss-trigger.disabled { opacity: .6; cursor: not-allowed; }
.ss-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-trigger.ss-placeholder .ss-trigger-label { color: #98a2b3; }
.ss-caret { font-size: .7rem; color: #98a2b3; transition: transform .12s ease; flex-shrink: 0; }
.ss-trigger.open .ss-caret { transform: rotate(180deg); color: var(--vwp-primary); }
.ss-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1060; background: #fff; border: 1px solid var(--vwp-border); border-radius: 12px; box-shadow: var(--vwp-shadow-lg); overflow: hidden; min-width: 220px; }
.ss-search-wrap { position: relative; border-bottom: 1px solid var(--vwp-border); }
.ss-search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #98a2b3; font-size: .82rem; }
.ss-search { width: 100%; border: none; padding: 9px 12px 9px 32px; font-size: .85rem; outline: none; }
.ss-list { max-height: 240px; overflow-y: auto; padding: 6px; }
.ss-item { padding: 8px 10px; border-radius: 8px; font-size: .85rem; cursor: pointer; color: #344054; }
.ss-item.highlighted { background: var(--vwp-primary-light); }
.ss-item.active { color: var(--vwp-primary); font-weight: 600; }
.ss-empty { padding: 14px 10px; text-align: center; color: #98a2b3; font-size: .82rem; }
.print-only { display: none; }