:root {
    /* ── SMART Tours & Docs — deep forest green + heritage gold ──────────────── */
    --vp-accent: #0f5136;          /* brand green (buttons, links, accents) */
    --vp-accent-dark: #0a3a27;     /* darker green (hover / gradient end) */
    --vp-accent-bg: #e8f2ec;       /* pale green tint (chips, soft fills) */
    --vp-gold: #c8a63e;            /* heritage gold (eagle, premium accents) */
    --vp-gold-dark: #a5842a;
    --vp-gold-bg: #f8f1dd;         /* pale gold tint */
    --vp-bg: #f2f5f2;              /* app background */
    --vp-card: #ffffff;
    --vp-border: #e2e8e3;          /* soft green-grey border */
    --vp-text: #13241b;            /* near-black, green undertone */
    --vp-muted: #647569;           /* muted green-grey */
    --vp-danger: #dc2626;
    --vp-danger-bg: #fef2f2;
    --vp-shadow: 0 1px 2px rgba(16,40,28,.04), 0 6px 20px rgba(16,40,28,.05);
    --vp-shadow-lg: 0 10px 40px rgba(16,40,28,.12);
}

html, body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--vp-bg);
    color: var(--vp-text);
    -webkit-font-smoothing: antialiased;
}

/* A whisper-soft brand wash behind the app so pages never feel flat/empty. */
.vp-app {
    background:
        radial-gradient(1100px 460px at 100% -8%, rgba(200,166,62,.08), transparent 60%),
        radial-gradient(1000px 520px at -10% 0%, rgba(15,81,54,.07), transparent 55%);
}

.vp-app { min-height: 100vh; display: flex; flex-direction: column; }

.vp-topbar {
    height: 64px; background: var(--vp-card);
    border-bottom: 1px solid var(--vp-border);
    box-shadow: 0 1px 0 rgba(16,40,28,.02), 0 2px 12px rgba(16,40,28,.04);
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
    position: sticky; top: 0; z-index: 50;
}
/* Thin gold hairline under the top bar — the brand's signature accent. */
.vp-topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--vp-gold) 0%, rgba(200,166,62,0) 55%);
}
.vp-brand { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 700; letter-spacing: .2px; color: var(--vp-accent); }
.vp-brand-link { background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; }
.vp-brand-link:hover { opacity: 0.85; }
.vp-logo {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.vp-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vp-brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.vp-brand-name small { font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px; color: var(--vp-gold-dark); text-transform: uppercase; }
.vp-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.vp-role {
    background: var(--vp-accent-bg); color: var(--vp-accent-dark); font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
}
.vp-name { color: var(--vp-muted); }
.vp-logout {
    display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--vp-border);
    color: var(--vp-text); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.vp-logout:hover { background: var(--vp-bg); }

.vp-main { flex: 1; }

.vp-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vp-card {
    width: 100%; max-width: 380px; background: var(--vp-card); border: 1px solid var(--vp-border);
    border-radius: 16px; padding: 32px 28px;
}
.vp-auth-head { text-align: center; margin-bottom: 24px; }
.vp-auth-logo {
    width: 52px; height: 52px; border-radius: 13px; background: var(--vp-accent-bg); color: var(--vp-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 12px;
}
.vp-auth-title { font-size: 20px; font-weight: 600; margin: 0; }
.vp-auth-sub { font-size: 14px; color: var(--vp-muted); margin: 4px 0 0; }

.vp-field { margin-bottom: 16px; }
.vp-label { display: block; font-size: 13px; font-weight: 500; color: var(--vp-muted); margin-bottom: 6px; }
.vp-input {
    width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; font-size: 15px;
    border: 1px solid var(--vp-border); border-radius: 9px; background: #fff; color: var(--vp-text);
}
.vp-input:focus { outline: none; border-color: var(--vp-accent); box-shadow: 0 0 0 3px var(--vp-accent-bg); }
.vp-code-input { text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 600; }

.vp-btn {
    width: 100%; height: 44px; border: none; border-radius: 9px; font-size: 15px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.vp-btn-primary {
    background: linear-gradient(135deg, var(--vp-accent), var(--vp-accent-dark));
    color: #fff; box-shadow: 0 2px 8px rgba(15,81,54,.22);
}
.vp-btn-primary:hover { background: linear-gradient(135deg, #12603f, var(--vp-accent-dark)); box-shadow: 0 4px 14px rgba(15,81,54,.30); }
.vp-btn-primary:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

/* Gold call-to-action for premium/primary owner actions */
.vp-btn-gold { background: linear-gradient(135deg, var(--vp-gold), var(--vp-gold-dark)); color: #3a2e07; box-shadow: 0 2px 8px rgba(200,166,62,.28); }
.vp-btn-gold:hover { filter: brightness(1.03); box-shadow: 0 4px 14px rgba(200,166,62,.36); }

.vp-error {
    background: var(--vp-danger-bg); color: var(--vp-danger); border: 1px solid #fecaca;
    border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px;
}
.vp-hint { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--vp-muted); font-size: 12px; margin-top: 18px; }

.vp-qr { display: flex; justify-content: center; margin: 8px 0 16px; }
.vp-qr img { width: 180px; height: 180px; border: 1px solid var(--vp-border); border-radius: 12px; padding: 8px; background: #fff; }
.vp-secret {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; text-align: center; letter-spacing: 2px;
    background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 8px; padding: 10px; margin-bottom: 16px; word-break: break-all;
}

.vp-page { max-width: 1000px; margin: 0 auto; padding: 32px 24px; }
.vp-page h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.vp-page-sub { color: var(--vp-muted); margin: 0 0 28px; }
.vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.vp-tile {
    background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.vp-tile-icon {
    width: 40px; height: 40px; border-radius: 10px; background: var(--vp-accent-bg); color: var(--vp-accent);
    display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.vp-tile-title { font-weight: 600; font-size: 15px; }
.vp-tile-desc { color: var(--vp-muted); font-size: 13px; line-height: 1.5; }
.vp-tile-tag { font-size: 11px; font-weight: 600; color: var(--vp-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.vp-tile { box-shadow: var(--vp-shadow); transition: border-color .14s, box-shadow .14s, transform .14s; position: relative; overflow: hidden; }
.vp-tile-link { cursor: pointer; }
.vp-tile-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vp-gold); opacity: 0; transition: opacity .14s; }
.vp-tile-link:hover { border-color: var(--vp-accent); box-shadow: var(--vp-shadow-lg); transform: translateY(-2px); }
.vp-tile-link:hover::before { opacity: 1; }
.vp-tile-icon { background: linear-gradient(135deg, var(--vp-accent-bg), #dcebe1); }

/* ── Wider content pages (lists, forms) ───────────────────────────────────── */
.vp-page-wide { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
.vp-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.vp-page-head h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }

.vp-row { display: flex; align-items: center; gap: 10px; }
.vp-spacer { flex: 1; }

/* ── Buttons (inline / secondary / sizes) ─────────────────────────────────── */
.vp-btn-inline { width: auto; padding: 0 18px; }
.vp-btn-secondary { background: #fff; border: 1px solid var(--vp-border); color: var(--vp-text); }
.vp-btn-secondary:hover { background: var(--vp-bg); }
.vp-btn-sm { height: 38px; font-size: 14px; padding: 0 14px; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.vp-panel { background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px; overflow: hidden; }
.vp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vp-table th { text-align: left; padding: 12px 16px; color: var(--vp-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--vp-border); }
.vp-table td { padding: 13px 16px; border-bottom: 1px solid var(--vp-border); }
.vp-table tr:last-child td { border-bottom: none; }
.vp-table tbody tr { cursor: pointer; }
.vp-table tbody tr:hover { background: var(--vp-bg); }
.vp-ref { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 600; }

/* ── Status pills ─────────────────────────────────────────────────────────── */
.vp-status { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.vp-status-draft { background: #f1f5f9; color: #475569; }
.vp-status-submitted { background: #eff6ff; color: #1d4ed8; }
.vp-status-inprocess { background: #eef2ff; color: #4338ca; }
.vp-status-moredocumentsrequired { background: #fffbeb; color: #b45309; }
.vp-status-approved { background: #ecfdf5; color: #047857; }
.vp-status-rejected { background: #fef2f2; color: #b91c1c; }
.vp-status-superseded { background: #f5f3ff; color: #6d28d9; }
.vp-status-issued { background: #fffbeb; color: #b45309; }
.vp-status-paid { background: #ecfdf5; color: #047857; }
.vp-status-voided { background: #f1f5f9; color: #64748b; text-decoration: line-through; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.vp-empty { text-align: center; padding: 56px 24px; color: var(--vp-muted); }
.vp-empty i { font-size: 34px; color: var(--vp-border); display: block; margin-bottom: 10px; }

/* ── Cards / sections for the New Application page ─────────────────────────── */
.vp-card-wide { background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px; padding: 24px; margin-bottom: 20px; }
.vp-section-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.vp-section-num { width: 24px; height: 24px; border-radius: 999px; background: var(--vp-accent); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.vp-section-sub { color: var(--vp-muted); font-size: 13px; margin: 0 0 18px 34px; }

/* ── Upload dropzone ──────────────────────────────────────────────────────── */
.vp-drop { position: relative; border: 2px dashed var(--vp-border); border-radius: 12px; padding: 32px; text-align: center; background: var(--vp-bg); transition: border-color .12s, background .12s; }
.vp-drop:hover { border-color: var(--vp-accent); background: var(--vp-accent-bg); }
.vp-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vp-drop-icon { font-size: 30px; color: var(--vp-accent); }
.vp-drop-title { font-weight: 600; margin: 8px 0 2px; }
.vp-drop-hint { color: var(--vp-muted); font-size: 13px; }

/* Partner "visa ready" alert — sidebar/tile badge, list chip and row tint */
.vp-nav-badge {
    margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px;
    background: var(--vp-accent); color: #fff; font-size: 12px; font-weight: 700; text-align: center;
}
.vp-ready-chip {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px;
    border-radius: 999px; background: #e7f6ee; color: #17603a; font-size: 12px; font-weight: 600;
}
.vp-table tbody tr.vp-row-ready { background: #f4fbf7; }

/* eVisa drop — review-before-deliver table */
.vp-evisa-review { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.vp-evisa-review input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--vp-accent); cursor: pointer; }
.vp-evisa-basis { color: var(--vp-muted); font-size: 12px; }
.vp-evisa-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vp-border); }

.vp-scan-busy { display: flex; align-items: center; gap: 12px; padding: 18px; color: var(--vp-muted); font-size: 14px; }
.vp-spin { width: 20px; height: 20px; border: 2.5px solid var(--vp-border); border-top-color: var(--vp-accent); border-radius: 50%; animation: vp-rotate .7s linear infinite; }
@keyframes vp-rotate { to { transform: rotate(360deg); } }

.vp-preview-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.vp-preview-img { width: 240px; max-width: 100%; border: 1px solid var(--vp-border); border-radius: 10px; background: #fff; }
.vp-preview-meta { flex: 1; min-width: 220px; }

/* ── Review form ──────────────────────────────────────────────────────────── */
.vp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.vp-form-grid .vp-field { margin-bottom: 0; }
.vp-field-full { grid-column: 1 / -1; }
.vp-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
select.vp-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* ── Date entry (type DDMMYYYY or pick from the calendar) ─────────────────── */
.vp-dateentry { position: relative; }
.vp-dateentry-text { width: 100%; padding-right: 42px; }
.vp-dateentry-cal {
    position: absolute; top: 0; right: 0; height: 42px; width: 42px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vp-muted); font-size: 18px; pointer-events: none;
}
/* A transparent native date input sits over the calendar icon: clicking it opens the OS picker,
   so both fast typing and calendar picking work without any extra JavaScript. */
.vp-dateentry-native {
    position: absolute; top: 0; right: 0; height: 42px; width: 42px;
    margin: 0; padding: 0; border: 0; background: transparent; color: transparent;
    opacity: 0; cursor: pointer;
}
.vp-dateentry-native::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; width: 42px; height: 42px; }
.vp-dateentry:focus-within .vp-dateentry-cal { color: var(--vp-accent); }

/* ── Confidence badges ────────────────────────────────────────────────────── */
.vp-conf { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.vp-conf-high { background: #ecfdf5; color: #047857; }
.vp-conf-med { background: #fffbeb; color: #b45309; }
.vp-conf-low { background: #fef2f2; color: #b91c1c; }

/* ── Warnings / info banners ──────────────────────────────────────────────── */
.vp-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.vp-warn ul { margin: 6px 0 0; padding-left: 18px; }
.vp-info { background: var(--vp-accent-bg); border: 1px solid #c3ddcd; color: var(--vp-accent-dark); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
.vp-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }

.vp-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

/* ── Detail page ──────────────────────────────────────────────────────────── */
.vp-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.vp-detail-item .vp-detail-label { font-size: 12px; color: var(--vp-muted); text-transform: uppercase; letter-spacing: .4px; }
.vp-detail-item .vp-detail-value { font-size: 15px; margin-top: 2px; }
.vp-back { display: inline-flex; align-items: center; gap: 6px; color: var(--vp-muted); text-decoration: none; font-size: 14px; margin-bottom: 14px; cursor: pointer; background: none; border: none; padding: 0; }
.vp-back:hover { color: var(--vp-accent); }

/* ── Language switcher ────────────────────────────────────────────────────── */
.vp-lang-switcher { display: inline-flex; align-items: center; gap: 2px; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 8px; padding: 3px 4px; }
.vp-lang-btn { background: none; border: none; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--vp-muted); cursor: pointer; letter-spacing: 0.3px; transition: color .12s, background .12s; }
.vp-lang-btn:hover { color: var(--vp-text); background: var(--vp-card); }
.vp-lang-active { color: var(--vp-accent) !important; background: var(--vp-accent-bg) !important; }
.vp-lang-sep { color: var(--vp-border); font-size: 12px; user-select: none; }

/* ── Settings page ────────────────────────────────────────────────────────── */
.vp-settings-section { background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px; padding: 20px 24px; margin-bottom: 20px; }
.vp-settings-section-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.vp-settings-section-desc { color: var(--vp-muted); font-size: 13px; margin: 0 0 16px; }
.vp-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; }
.vp-account-item .vp-account-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--vp-muted); margin-bottom: 4px; }
.vp-account-item .vp-account-value { font-size: 15px; color: var(--vp-text); }

/* ── Module 3: filters + decision actions (teammate B) ── */

/* ── Search / filter bar ─────────────────────────────────────────────────── */
.vp-filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.vp-filter-search { position: relative; flex: 1; min-width: 200px; }
.vp-filter-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vp-muted); pointer-events: none; }
.vp-filter-input { padding-left: 36px !important; }
.vp-filter-select { width: auto; min-width: 190px; }

/* ── Action panel (reject / request-docs form) ───────────────────────────── */
.vp-action-panel { border-left: 4px solid var(--vp-accent); }
.vp-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; resize: vertical;
    border: 1px solid var(--vp-border); border-radius: 9px; background: #fff; color: var(--vp-text); font-family: inherit; }
.vp-textarea:focus { outline: none; border-color: var(--vp-accent); box-shadow: 0 0 0 3px var(--vp-accent-bg); }

/* ── Button colour variants ──────────────────────────────────────────────── */
:root { --vp-success: #059669; --vp-success-dark: #047857; --vp-success-bg: #ecfdf5; }
.vp-btn-success { background: var(--vp-success); color: #fff; }
.vp-btn-success:hover { background: var(--vp-success-dark); }
.vp-btn-success:disabled { opacity: 0.6; cursor: default; }
.vp-btn-danger { background: var(--vp-danger); color: #fff; }
.vp-btn-danger:hover { background: #b91c1c; }
.vp-btn-danger:disabled { opacity: 0.6; cursor: default; }

/* ── Visa photo + applicant photo (teammate C) ── */

/* ── Visa photo result layout (Module 2) ──────────────────────────────────── */
.vp-photo-result-wrap { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; margin-top: 18px; }
.vp-photo-preview-col { flex: 0 0 auto; }
.vp-photo-img { width: 200px; border: 1px solid var(--vp-border); border-radius: 10px; display: block; background: #fff; }
.vp-checklist-col { flex: 1; min-width: 280px; }

/* ── Compliance checklist ─────────────────────────────────────────────────── */
.vp-checklist { display: flex; flex-direction: column; gap: 6px; }
.vp-check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; font-size: 14px; border: 1px solid transparent; }
.vp-check-row-pass  { background: #f0fdf4; border-color: #bbf7d0; }
.vp-check-row-error { background: #fef2f2; border-color: #fecaca; }
.vp-check-row-warn  { background: #fffbeb; border-color: #fde68a; }
.vp-check-icon { flex: 0 0 auto; font-size: 16px; margin-top: 1px; }
.vp-check-row-pass  .vp-check-icon { color: #16a34a; }
.vp-check-row-error .vp-check-icon { color: #dc2626; }
.vp-check-row-warn  .vp-check-icon { color: #d97706; }
.vp-check-body { flex: 1; }
.vp-check-name { font-weight: 600; }
.vp-check-vals { display: flex; gap: 16px; font-size: 12px; color: var(--vp-muted); margin-top: 2px; flex-wrap: wrap; }
.vp-check-detail { font-size: 12px; color: var(--vp-muted); margin-top: 3px; line-height: 1.4; }

/* ── Pass/fail summary badge in section header ────────────────────────────── */
.vp-check-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-left: 8px; }
.vp-check-pass { background: #ecfdf5; color: #047857; }
.vp-check-fail { background: #fef2f2; color: #b91c1c; }

/* ── Applicant photo inline section (NewApplication) ─────────────────────── */
.vp-photo-inline-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.vp-photo-inline-preview { flex: 0 0 auto; }
.vp-photo-inline-img { width: 120px; border: 1px solid var(--vp-border); border-radius: 8px; display: block; background: #fff; }
.vp-photo-inline-checklist { flex: 1; min-width: 220px; }

.vp-req { color: var(--vp-danger); font-weight: 700; }

/* ── Reports ── */
.vp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.vp-stat-card { background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px; padding: 20px; }
.vp-stat-value { font-size: 30px; font-weight: 700; color: var(--vp-text); }
.vp-stat-label { color: var(--vp-muted); font-size: 13px; margin-top: 4px; }
.vp-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vp-bar-label { width: 170px; flex-shrink: 0; }
.vp-bar-track { flex: 1; height: 10px; background: var(--vp-bg); border-radius: 999px; overflow: hidden; }
.vp-bar-fill { height: 100%; background: var(--vp-accent); border-radius: 999px; min-width: 2px; }
.vp-bar-count { width: 40px; text-align: right; font-weight: 600; }
.vp-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--vp-border); }
.vp-toggle-row:last-child { border-bottom: none; }

/* ── Family / group application ─────────────────────────────────────────────── */

/* Button group for the Applications header (New application / New family group side-by-side) */
.vp-btn-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Badge shown on list rows and inside group summary table */
.vp-group-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px;
    background: var(--vp-accent-bg); color: var(--vp-accent); border: 1px solid #c3ddcd;
    margin-left: 6px; vertical-align: middle; white-space: nowrap;
}
.vp-group-badge i { font-size: 12px; }

/* Group summary card (rendered above the add-member form) */
.vp-group-summary { background: #f8fafc; border: 1.5px solid var(--vp-accent); }
.vp-group-summary .vp-section-title { color: var(--vp-accent); }

/* Sub-section letters (a, b, c) inside the member form */
.vp-section-num-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 999px; font-size: 12px;
    font-weight: 700; background: var(--vp-accent-bg); color: var(--vp-accent);
    margin-right: 6px;
}

/* Action panel (reject / doc-request panels) reused in group page */
.vp-action-panel { border: 1.5px solid var(--vp-border); background: var(--vp-card); }

/* ── Accounting (teammate) ── */

/* ── Accounting module ── */
.vp-acct-money { font-size: 28px; font-weight: 700; color: var(--vp-text); }
.vp-acct-money-sub { font-size: 13px; color: var(--vp-muted); margin-top: 2px; }
.vp-acct-usd { font-size: 14px; color: var(--vp-muted); margin-left: 6px; }

/* Line chart */
.vp-chart-wrap { width: 100%; overflow-x: auto; }
.vp-chart-toggle { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.vp-chart-toggle-btn {
    padding: 5px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--vp-border); background: var(--vp-card); color: var(--vp-muted);
    transition: border-color .12s, color .12s, background .12s;
}
.vp-chart-toggle-btn:hover { border-color: var(--vp-accent); color: var(--vp-accent); }
.vp-chart-toggle-btn-active { background: var(--vp-accent-bg) !important; color: var(--vp-accent) !important; border-color: var(--vp-accent) !important; }

/* Price table override highlight */
.vp-price-override { background: var(--vp-accent-bg); color: var(--vp-accent-dark); font-weight: 600; border-radius: 6px; padding: 2px 8px; }

/* Edit rate modal */
.vp-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.vp-modal {
    background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 16px;
    padding: 28px; width: 100%; max-width: 420px; box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.vp-modal-title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.vp-modal-desc { color: var(--vp-muted); font-size: 13px; margin: 0 0 20px; }
.vp-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* ── Urgent processing (surcharge tickbox + badge) ───────────────────────────── */

.vp-urgent-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 18px; padding: 12px 14px;
    border: 1.5px solid #fed7aa; background: #fff7ed; border-radius: 10px;
    cursor: pointer;
}
.vp-urgent-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ea580c; cursor: pointer; }
.vp-urgent-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: #9a3412; }
.vp-urgent-label i { color: #ea580c; }
.vp-urgent-surcharge { font-weight: 700; color: #ea580c; font-size: 13px; }

/* Badge shown next to the status pill on the application detail page */
.vp-urgent-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px;
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
    margin-left: 8px; vertical-align: middle; white-space: nowrap;
}
.vp-urgent-badge i { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Premium polish — SMART Tours & Docs
   Soft elevation on surfaces, a branded hero band, a split-screen sign-in,
   and a footer so no page ever feels empty.
   ══════════════════════════════════════════════════════════════════════════ */

/* Lift the flat surfaces off the page */
.vp-panel, .vp-card-wide, .vp-stat-card, .vp-settings-section { box-shadow: var(--vp-shadow); }
.vp-stat-card { position: relative; overflow: hidden; }
.vp-stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--vp-accent); opacity: .0; transition: opacity .14s; }
.vp-stat-card:hover::before { opacity: .8; }

/* ── Dashboard / page hero band ─────────────────────────────────────────────── */
.vp-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--vp-accent) 0%, var(--vp-accent-dark) 62%, #072a1c 100%);
    color: #fff; border-radius: 18px; padding: 30px 32px; margin-bottom: 26px;
    box-shadow: 0 14px 40px rgba(10,58,39,.28);
}
.vp-hero::after {
    content: ""; position: absolute; right: -60px; top: -70px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(200,166,62,.30), transparent 68%);
}
.vp-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--vp-gold); margin: 0 0 8px; }
.vp-hero h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; color: #fff; letter-spacing: .2px; }
.vp-hero p { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; max-width: 620px; line-height: 1.55; }
.vp-hero-stats { display: flex; gap: 26px; margin-top: 20px; flex-wrap: wrap; position: relative; }
.vp-hero-stat { display: flex; flex-direction: column; }
.vp-hero-stat b { font-size: 24px; font-weight: 700; line-height: 1; }
.vp-hero-stat span { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 5px; letter-spacing: .3px; }
.vp-hero-divider { width: 1px; background: rgba(255,255,255,.18); }
.vp-hero-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; position: relative; }
.vp-hero-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: filter .12s, background .12s; }
.vp-hero-btn-gold { background: linear-gradient(135deg, var(--vp-gold), var(--vp-gold-dark)); color: #3a2e07; box-shadow: 0 4px 14px rgba(200,166,62,.30); }
.vp-hero-btn-gold:hover { filter: brightness(1.05); }
.vp-hero-btn-ghost { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.30); }
.vp-hero-btn-ghost:hover { background: rgba(255,255,255,.18); }

/* Section heading used to group content and break up empty space */
.vp-section-heading { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--vp-muted); margin: 4px 0 14px; }

/* ── Split-screen sign-in ───────────────────────────────────────────────────── */
.vp-auth-split { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.vp-auth-brandpanel {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    padding: 56px 60px; color: #fff;
    background: linear-gradient(150deg, var(--vp-accent) 0%, var(--vp-accent-dark) 58%, #06251a 100%);
}
.vp-auth-brandpanel::after {
    content: ""; position: absolute; right: -120px; bottom: -140px; width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(200,166,62,.22), transparent 66%);
}
.vp-auth-brand-lockup { position: relative; margin-bottom: 36px; }
.vp-auth-brand-logo { width: 104px; margin-bottom: 14px; }
.vp-auth-brand-logo img { width: 100%; display: block; }
/* The real logo art has a white background, so present it as a clean white card on the green panel. */
.vp-auth-brand-fulllogo { width: 232px; max-width: 70%; display: block; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.vp-auth-brand-word { display: flex; flex-direction: column; line-height: 1; }
.vp-auth-brand-smart { font-size: 44px; font-weight: 800; letter-spacing: 9px; color: #fff; }
.vp-auth-brand-td { font-size: 12.5px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: var(--vp-gold); margin-top: 10px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.20); width: max-content; }
.vp-auth-brandpanel h2 { font-size: 30px; font-weight: 700; margin: 0 0 14px; line-height: 1.2; max-width: 420px; }
.vp-auth-brandpanel p { font-size: 15px; color: rgba(255,255,255,.82); margin: 0; max-width: 400px; line-height: 1.6; position: relative; }
.vp-auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.vp-auth-points li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.9); }
.vp-auth-points i { color: var(--vp-gold); font-size: 18px; }
.vp-auth-formside { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--vp-bg); }
.vp-auth-split .vp-card { border: 1px solid var(--vp-border); box-shadow: var(--vp-shadow-lg); }
/* Real logo has its own white background — show it plainly (no green tile, no padding box). */
.vp-auth-logo { width: 88px !important; height: 88px !important; border-radius: 14px !important; background: transparent !important; overflow: hidden; }
.vp-auth-logo img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 860px) { .vp-auth-split { grid-template-columns: 1fr; } .vp-auth-brandpanel { display: none; } }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.vp-footer {
    margin-top: auto; padding: 20px 24px; border-top: 1px solid var(--vp-border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    color: var(--vp-muted); font-size: 12.5px; background: var(--vp-card);
}
.vp-footer .vp-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--vp-accent); }
.vp-footer .vp-footer-brand img { width: 22px; height: 22px; object-fit: contain; }

/* ── Multi-select on the applications list (link / delete) ─────────────────────── */
.vp-check-cell { width: 40px; text-align: center; }
.vp-check-cell input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--vp-accent); cursor: pointer; }
.vp-table tbody tr.vp-row-selected { background: var(--vp-accent-bg); }
.vp-table tbody tr.vp-row-selected:hover { background: #dcebe1; }

/* Sticky action bar that appears when rows are selected */
.vp-bulkbar {
    position: sticky; bottom: 16px; z-index: 40;
    max-width: 1100px; margin: 16px auto 0;
    display: flex; align-items: center; gap: 10px;
    background: var(--vp-card); border: 1px solid var(--vp-border);
    border-radius: 12px; padding: 10px 16px; box-shadow: var(--vp-shadow-lg);
}
.vp-bulkbar-count { font-weight: 700; color: var(--vp-accent); }

/* Wider modal for the group table */
.vp-modal-wide { max-width: 760px; }
.vp-modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vp-modal-head-note { color: var(--vp-muted); font-size: 13px; }
.vp-iconbtn { background: none; border: none; cursor: pointer; color: var(--vp-muted); font-size: 16px; padding: 4px; border-radius: 6px; }
.vp-iconbtn:hover { background: var(--vp-bg); color: var(--vp-danger); }
.vp-delete-list { margin: 0 0 14px; padding-left: 18px; color: var(--vp-text); font-size: 14px; }
.vp-delete-list li { margin: 3px 0; }

/* ── Table pager (‹ 1 2 3 ›) ─────────────────────────────────────────────────── */
.vp-pager { display: flex; gap: 4px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.vp-pager-btn {
    min-width: 32px; height: 30px; padding: 0 8px; border-radius: 7px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--vp-border); background: var(--vp-card); color: var(--vp-muted); cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.vp-pager-btn:hover:not(:disabled) { border-color: var(--vp-accent); color: var(--vp-accent); }
.vp-pager-btn:disabled { opacity: .45; cursor: default; }
.vp-pager-active { background: var(--vp-accent) !important; color: #fff !important; border-color: var(--vp-accent) !important; }

/* ── Printable invoice sheet (Billing → View invoice) ─────────────────────────── */
.vp-invoice-sheet {
    background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 14px;
    padding: 32px; max-width: 860px; margin: 0 auto; box-shadow: var(--vp-shadow);
}
.vp-invoice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--vp-accent); }
.vp-invoice-brand { font-size: 18px; font-weight: 700; color: var(--vp-accent); }
.vp-invoice-sub { font-size: 12.5px; color: var(--vp-muted); margin-top: 4px; }
.vp-invoice-headright { text-align: right; }
.vp-invoice-title { font-size: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--vp-text); }
.vp-invoice-number { font-size: 13px; color: var(--vp-muted); margin: 4px 0 8px; font-family: monospace; }
.vp-invoice-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 22px 0; }
.vp-invoice-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--vp-muted); margin-bottom: 4px; }
.vp-invoice-meta-value { font-size: 14px; font-weight: 600; }
.vp-invoice-table { margin-top: 8px; }
.vp-invoice-footnote { margin-top: 24px; font-size: 11.5px; color: var(--vp-muted); text-align: center; }

@media print {
    .vp-print-hide, .vp-topbar, .vp-footer, .vp-sidebar { display: none !important; }
    .vp-invoice-sheet { box-shadow: none; border: none; padding: 0; max-width: 100%; }
    body { background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar app shell — persistent left nav + slim topbar (Stripe/Linear feel)
   Signed-in users only; the login page's full-screen split view is untouched
   (it renders through MainLayout's <NotAuthorized> branch, no shell chrome).
   ══════════════════════════════════════════════════════════════════════════ */

.vp-shell {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
    align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.vp-sidebar {
    grid-column: 1;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: var(--vp-card); border-right: 1px solid var(--vp-border);
    overflow-y: auto; z-index: 60;
}
.vp-sidebar-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 18px; margin: 0;
    border-bottom: 1px solid var(--vp-border);
    flex-shrink: 0;
}
/* Full logo lockup (bird + wordmark) in the sidebar header — replaces the old mark + text. */
.vp-sidebar-logo-img { width: 150px; max-width: 100%; height: auto; display: block; }
.vp-sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.vp-sidebar-section { margin-bottom: 18px; }
.vp-sidebar-section:last-child { margin-bottom: 0; }
.vp-sidebar-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--vp-muted); padding: 0 10px; margin: 0 0 6px;
}
.vp-sidebar-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; margin: 2px 0; border-radius: 9px;
    font-size: 14px; font-weight: 500; color: var(--vp-text); text-decoration: none;
    position: relative; border-left: 3px solid transparent;
    transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.vp-sidebar-link i { font-size: 17px; color: var(--vp-muted); transition: color .13s ease; flex-shrink: 0; }
.vp-sidebar-link:hover { background: var(--vp-bg); color: var(--vp-text); }
.vp-sidebar-link.active {
    background: var(--vp-accent-bg); color: var(--vp-accent-dark); font-weight: 600;
    border-left-color: var(--vp-gold);
}
.vp-sidebar-link.active i { color: var(--vp-accent); }

/* ── Sidebar footer: user chip + sign out ────────────────────────────────── */
.vp-sidebar-footer {
    flex-shrink: 0; padding: 14px; border-top: 1px solid var(--vp-border);
    display: flex; flex-direction: column; gap: 10px;
}
.vp-sidebar-userchip { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.vp-sidebar-user-avatar {
    width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
    background: var(--vp-accent-bg); color: var(--vp-accent);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.vp-sidebar-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.vp-sidebar-user-meta .vp-name { color: var(--vp-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-sidebar-user-meta .vp-role { color: var(--vp-muted); font-size: 11.5px; background: none; padding: 0; border-radius: 0; }
.vp-sidebar-logout { width: 100%; justify-content: center; }

/* ── Shell main column: slim topbar + content + footer ───────────────────── */
.vp-shell-main { grid-column: 2; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.vp-topbar-slim { height: 56px; padding: 0 20px; gap: 12px; }
.vp-breadcrumb { flex: 1; color: var(--vp-muted); font-size: 13px; }
.vp-hamburger {
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--vp-border);
    background: var(--vp-card); color: var(--vp-text); font-size: 17px; cursor: pointer;
}
.vp-hamburger:hover { background: var(--vp-bg); }

/* ── Content fade-in on navigation (no reloads — pure CSS on the Body wrapper) ── */
.vp-content-fade { animation: vp-content-fade-in .15s ease-out; }
@keyframes vp-content-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive: collapse sidebar into an overlay drawer below ~900px ────── */
.vp-sidebar-scrim { display: none; }
@media (max-width: 900px) {
    .vp-shell { grid-template-columns: 1fr; }
    .vp-hamburger { display: inline-flex; }
    .vp-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 260px;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--vp-shadow-lg);
    }
    .vp-sidebar-open { transform: translateX(0); }
    .vp-sidebar-scrim {
        display: block; position: fixed; inset: 0; background: rgba(10,20,15,.35); z-index: 55;
    }
}