/* ==========================================================================
   VascoFlow Design System
   A deliberate break from the Sembark-style wide-sidebar / heavy-card look:
   flat surfaces, a 4px spacing grid, a tight type scale, one restrained
   accent color, and a rail+panel navigation shell instead of a single wide
   sidebar. Redefining the tokens + shared component classes here (crm-card,
   crm-page, table, buttons, badges, forms) restyles every existing screen
   that already uses them, without having to touch each view individually.
   ========================================================================== */

:root {
    /* type */
    --vf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vf-text-xs: .75rem;     /* 12px */
    --vf-text-sm: .8125rem;   /* 13px */
    --vf-text-md: .875rem;    /* 14px */
    --vf-text-lg: 1rem;       /* 16px */
    --vf-text-xl: 1.25rem;    /* 20px */
    --vf-text-2xl: 1.5rem;    /* 24px */
    --vf-text-3xl: 2rem;      /* 32px */

    /* spacing (4px grid) */
    --vf-sp-1: .25rem;
    --vf-sp-2: .5rem;
    --vf-sp-3: .75rem;
    --vf-sp-4: 1rem;
    --vf-sp-5: 1.5rem;
    --vf-sp-6: 2rem;
    --vf-sp-7: 3rem;

    /* radius */
    --vf-radius-sm: 6px;
    --vf-radius-md: 8px;
    --vf-radius-lg: 12px;

    /* neutrals */
    --vf-bg: #FAFAFA;
    --vf-surface: #FFFFFF;
    --vf-border: #E7E7EB;
    --vf-border-strong: #D6D6DC;
    --vf-text: #15161A;
    --vf-text-muted: #6B6E78;
    --vf-text-subtle: #9A9CA5;

    /* accent + semantics - deliberately restrained, not Bootstrap's saturated blue */
    --vf-accent: #4F46E5;
    --vf-accent-hover: #4338CA;
    --vf-accent-subtle: #EEEDFD;
    --vf-success: #166A46;
    --vf-success-subtle: #E6F6EE;
    --vf-warning: #92590A;
    --vf-warning-subtle: #FFF3DF;
    --vf-danger: #B3261E;
    --vf-danger-subtle: #FBEAE9;
    --vf-info: #0B6E99;
    --vf-info-subtle: #E6F4FA;

    --vf-shadow-sm: 0 1px 2px rgba(15, 15, 20, .05);
    --vf-shadow-md: 0 8px 24px rgba(15, 15, 20, .10);
    --vf-rail-w: 76px;
    --vf-panel-w: 272px;
}

body { font-family: var(--vf-font); background: var(--vf-bg); color: var(--vf-text); font-size: var(--vf-text-md); }
h1, h2, h3, h4, h5, h6 { font-family: var(--vf-font); letter-spacing: -.01em; }

/* ---------- App shell: icon rail + sliding context panel + top bar ---------- */
.vf-shell { display: flex; min-height: 100vh; }

.vf-rail {
    width: var(--vf-rail-w);
    min-width: var(--vf-rail-w);
    background: var(--vf-surface);
    border-right: 1px solid var(--vf-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--vf-sp-3) 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1030;
}
.vf-rail-logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--vf-sp-4); border-radius: var(--vf-radius-md); background: var(--vf-accent-subtle); }
.vf-rail-logo img { width: 34px; height: 34px; object-fit: contain; }
.vf-rail-nav { display: flex; flex-direction: column; gap: var(--vf-sp-1); flex: 1; width: 100%; align-items: center; }
.vf-rail-bottom { display: flex; flex-direction: column; gap: var(--vf-sp-1); align-items: center; padding-top: var(--vf-sp-3); border-top: 1px solid var(--vf-border); width: 100%; }

.vf-rail-item {
    width: 60px; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; border-radius: var(--vf-radius-md);
    color: var(--vf-text-subtle); cursor: pointer; text-decoration: none;
    position: relative; padding: 5px 2px;
}
.vf-rail-item svg { width: 18px; height: 18px; flex: none; }
.vf-rail-item-label { font-size: 9.5px; font-weight: 550; line-height: 1.1; letter-spacing: .01em; text-align: center; }
.vf-rail-item:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-rail-item.active { background: var(--vf-accent-subtle); color: var(--vf-accent); }
.vf-rail-item.active::before {
    content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 2px; background: var(--vf-accent);
}

/* Sliding context panel - the section's sub-views/filters, independent of the rail.
   Replaces the old sidebar's nested accordions: one focused list per section. */
.vf-panel {
    width: var(--vf-panel-w);
    min-width: var(--vf-panel-w);
    background: var(--vf-surface);
    border-right: 1px solid var(--vf-border);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    transition: margin-left .16s ease, opacity .12s ease;
}
.vf-panel.vf-panel-closed { margin-left: calc(-1 * var(--vf-panel-w)); opacity: 0; }
.vf-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--vf-sp-4) var(--vf-sp-4) var(--vf-sp-2); }
.vf-panel-title { font-size: var(--vf-text-lg); font-weight: 650; letter-spacing: -.01em; }
.vf-panel-close { border: 0; background: transparent; color: var(--vf-text-subtle); width: 28px; height: 28px; border-radius: var(--vf-radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vf-panel-close:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-panel-body { padding: 0 var(--vf-sp-3) var(--vf-sp-4); display: flex; flex-direction: column; gap: var(--vf-sp-1); }
.vf-panel-content { display: none; flex-direction: column; gap: var(--vf-sp-1); }
.vf-panel-content.active { display: flex; }

.vf-panel-group-label { font-size: var(--vf-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vf-text-subtle); padding: var(--vf-sp-3) var(--vf-sp-2) var(--vf-sp-1); }
.vf-panel-link {
    display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-2);
    padding: var(--vf-sp-2) var(--vf-sp-2); border-radius: var(--vf-radius-sm);
    color: var(--vf-text-muted); font-size: var(--vf-text-sm); font-weight: 550; text-decoration: none;
}
.vf-panel-link:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-panel-link.active { background: var(--vf-accent-subtle); color: var(--vf-accent); font-weight: 650; }
.vf-panel-link .vf-count { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); font-weight: 600; }
.vf-panel-link.active .vf-count { color: var(--vf-accent); }

.vf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--vf-bg); }

.vf-topbar {
    display: flex; align-items: center; gap: var(--vf-sp-3);
    padding: var(--vf-sp-3) var(--vf-sp-5);
    background: var(--vf-surface); border-bottom: 1px solid var(--vf-border);
    position: sticky; top: 0; z-index: 1020;
}
.vf-panel-toggle {
    border: 1px solid var(--vf-border); background: var(--vf-surface); color: var(--vf-text-muted);
    width: 32px; height: 32px; border-radius: var(--vf-radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.vf-panel-toggle:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-cmdk-trigger {
    display: flex; align-items: center; gap: var(--vf-sp-2);
    border: 1px solid var(--vf-border); background: var(--vf-bg); color: var(--vf-text-subtle);
    border-radius: var(--vf-radius-md); padding: var(--vf-sp-2) var(--vf-sp-3); font-size: var(--vf-text-sm);
    width: 360px; max-width: 100%; cursor: pointer; text-align: left;
}
.vf-cmdk-trigger:hover { border-color: var(--vf-border-strong); color: var(--vf-text-muted); }
.vf-cmdk-trigger kbd {
    margin-left: auto; font-size: var(--vf-text-xs); background: var(--vf-surface); border: 1px solid var(--vf-border);
    border-radius: var(--vf-radius-sm); padding: 1px 6px; color: var(--vf-text-subtle); font-family: var(--vf-font);
}
.vf-topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--vf-sp-2); }

/* Config/admin tools group, moved out of the vertical rail into the topbar so the
   rail stays short (daily workflow only) instead of growing one icon per module.
   Reuses .vf-rail-item as-is (icon-over-label column) - this container just lays
   several of them out in a row instead of a column. */
.vf-topbar-tools {
    display: flex; align-items: center; gap: 2px;
    padding: 0 var(--vf-sp-2); margin-right: var(--vf-sp-2);
    border-left: 1px solid var(--vf-border); border-right: 1px solid var(--vf-border);
}
.vf-topbar-tools .vf-rail-item { width: 52px; min-height: 40px; }
.vf-topbar-tools .vf-rail-item.active::before {
    left: 50%; top: auto; bottom: -3px; transform: translateX(-50%);
    width: 18px; height: 3px;
}

.vf-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--vf-accent); color: #fff; font-weight: 650; font-size: var(--vf-text-sm);
}

.vf-content { flex: 1; padding: var(--vf-sp-5) var(--vf-sp-6) var(--vf-sp-7); }
.vf-footer { background: var(--vf-surface); border-top: 1px solid var(--vf-border); color: var(--vf-text-subtle); padding: var(--vf-sp-3) var(--vf-sp-6); font-size: var(--vf-text-xs); }

@media (max-width: 991.98px) {
    .vf-panel { position: fixed; left: var(--vf-rail-w); top: 0; bottom: 0; z-index: 1035; box-shadow: var(--vf-shadow-md); }
    .vf-rail { position: fixed; left: 0; top: 0; bottom: 0; }
    .vf-main { margin-left: var(--vf-rail-w); }
    .vf-content { padding: var(--vf-sp-4); }
    /* Icon-only in the topbar tools group below ~992px - keeps Setup/HR/Admin/
       Settings reachable (never hidden outright - just denser) without crowding
       out the search box on a tablet/phone. */
    .vf-topbar-tools .vf-rail-item-label { display: none; }
    .vf-topbar-tools .vf-rail-item { width: 36px; min-height: 36px; }
    .vf-cmdk-trigger span { display: none; }
}

@media (max-width: 575.98px) {
    /* Out of room for the full topbar row on a phone - let this one group scroll
       horizontally rather than disappearing, so every item stays reachable. */
    .vf-topbar { flex-wrap: nowrap; }
    .vf-cmdk-trigger { width: auto; flex: 0 0 auto; }
    .vf-topbar-tools { overflow-x: auto; flex: 0 1 auto; border-right: none; -webkit-overflow-scrolling: touch; }
    .vf-topbar-tools .vf-rail-item { flex: none; }
}

/* ---------- Command palette ---------- */
.vf-cmdk-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 15, 20, .45); z-index: 1200;
    align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.vf-cmdk-overlay.open { display: flex; }
.vf-cmdk { width: min(560px, 92vw); background: var(--vf-surface); border-radius: var(--vf-radius-lg); box-shadow: var(--vf-shadow-md); overflow: hidden; }
.vf-cmdk-input { width: 100%; border: 0; border-bottom: 1px solid var(--vf-border); padding: var(--vf-sp-4); font-size: var(--vf-text-lg); outline: 0; }
.vf-cmdk-list { max-height: 360px; overflow-y: auto; padding: var(--vf-sp-2); }
.vf-cmdk-group { font-size: var(--vf-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vf-text-subtle); padding: var(--vf-sp-2) var(--vf-sp-3) var(--vf-sp-1); }
.vf-cmdk-item {
    display: flex; align-items: center; gap: var(--vf-sp-3); padding: var(--vf-sp-2) var(--vf-sp-3);
    border-radius: var(--vf-radius-sm); color: var(--vf-text); text-decoration: none; cursor: pointer; font-size: var(--vf-text-sm);
}
.vf-cmdk-item svg { width: 16px; height: 16px; color: var(--vf-text-subtle); flex: 0 0 auto; }
.vf-cmdk-item.active, .vf-cmdk-item:hover { background: var(--vf-accent-subtle); color: var(--vf-accent); }
.vf-cmdk-item.active svg, .vf-cmdk-item:hover svg { color: var(--vf-accent); }
.vf-cmdk-empty { padding: var(--vf-sp-5); text-align: center; color: var(--vf-text-subtle); font-size: var(--vf-text-sm); }

/* ==========================================================================
   Shared component restyle - same class names as before so every existing
   screen (Bookings, Packages, Suppliers, Settings, ...) inherits this
   automatically; only the navigation shell and flagship screens (Dashboard,
   Leads & Trips) needed bespoke markup changes.
   ========================================================================== */
.crm-page { max-width: 1240px; margin: 0 auto; }
.crm-page-wide { max-width: none; }
.crm-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vf-sp-4); margin-bottom: var(--vf-sp-5); }
.crm-page-header h1, .crm-page-header h2 { margin: 0; font-weight: 650; font-size: var(--vf-text-2xl); letter-spacing: -.02em; color: var(--vf-text); }
.crm-page-subtitle { margin: var(--vf-sp-1) 0 0; color: var(--vf-text-muted); font-size: var(--vf-text-sm); }

.crm-card { background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-lg); box-shadow: var(--vf-shadow-sm); }
.crm-card-body { padding: var(--vf-sp-5); }

.btn { font-size: var(--vf-text-sm); font-weight: 550; border-radius: var(--vf-radius-sm); padding: .5rem .9rem; }
.btn-primary, .btn-success { background: var(--vf-accent); border-color: var(--vf-accent); }
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background: var(--vf-accent-hover); border-color: var(--vf-accent-hover); }
.btn-outline-primary { color: var(--vf-accent); border-color: var(--vf-accent); }
.btn-outline-primary:hover { background: var(--vf-accent); border-color: var(--vf-accent); }
.btn-outline-secondary, .btn-light { border-color: var(--vf-border); color: var(--vf-text-muted); }
.btn-outline-secondary:hover { background: var(--vf-bg); color: var(--vf-text); border-color: var(--vf-border-strong); }

.badge { font-weight: 600; letter-spacing: 0; border-radius: var(--vf-radius-sm); }
.text-bg-light { background: var(--vf-bg) !important; color: var(--vf-text-muted) !important; }
.text-bg-success { background: var(--vf-success-subtle) !important; color: var(--vf-success) !important; }
.text-bg-warning { background: var(--vf-warning-subtle) !important; color: var(--vf-warning) !important; }
.text-bg-danger { background: var(--vf-danger-subtle) !important; color: var(--vf-danger) !important; }
.text-bg-info { background: var(--vf-info-subtle) !important; color: var(--vf-info) !important; }
.text-bg-primary-subtle { background: var(--vf-accent-subtle) !important; color: var(--vf-accent) !important; }
.text-bg-secondary { background: var(--vf-bg) !important; color: var(--vf-text-muted) !important; }

.table { --bs-table-border-color: var(--vf-border); font-size: var(--vf-text-sm); }
.table thead th { color: var(--vf-text-subtle); font-size: var(--vf-text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom-width: 1px; padding: var(--vf-sp-3) var(--vf-sp-3); }
.table tbody td { padding: var(--vf-sp-3) var(--vf-sp-3); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--vf-bg); }

.form-control, .form-select { border-color: var(--vf-border); border-radius: var(--vf-radius-sm); font-size: var(--vf-text-md); }
.form-control:focus, .form-select:focus { border-color: var(--vf-accent); box-shadow: 0 0 0 3px var(--vf-accent-subtle); }
.form-label { font-size: var(--vf-text-sm); font-weight: 600; color: var(--vf-text-muted); margin-bottom: var(--vf-sp-1); }

.crm-status-menu .list-group-item { border: 0; border-radius: var(--vf-radius-sm); padding: var(--vf-sp-2) var(--vf-sp-3); color: var(--vf-text-muted); font-size: var(--vf-text-sm); font-weight: 550; }
.crm-status-menu .list-group-item:hover { background: var(--vf-bg); color: var(--vf-text); }
.crm-status-menu .list-group-item.active { background: var(--vf-accent-subtle); color: var(--vf-accent); font-weight: 650; border: 0; }

/* ---------- Settings hub: left-nested categories + right content pane
   (HubSpot pattern), consolidating what used to be a plain stack of cards ---------- */
.vf-settings { display: grid; grid-template-columns: 220px 1fr; gap: var(--vf-sp-6); align-items: start; }
@media (max-width: 767.98px) { .vf-settings { grid-template-columns: 1fr; } }
.vf-settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--vf-sp-4); }
.vf-settings-nav button, .vf-settings-nav a { display: flex; align-items: center; gap: var(--vf-sp-2); border: 0; background: transparent; text-align: left; padding: var(--vf-sp-2) var(--vf-sp-3); border-radius: var(--vf-radius-sm); font-size: var(--vf-text-sm); font-weight: 550; color: var(--vf-text-muted); cursor: pointer; text-decoration: none; }
.vf-settings-nav button:hover, .vf-settings-nav a:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-settings-nav button.active, .vf-settings-nav a.active { background: var(--vf-accent-subtle); color: var(--vf-accent); font-weight: 650; }
.vf-settings-pane { display: none; }
.vf-settings-pane.active { display: block; }
.vf-settings-pane h2 { font-size: var(--vf-text-lg); font-weight: 650; margin-bottom: var(--vf-sp-1); }
.vf-settings-pane-desc { color: var(--vf-text-muted); font-size: var(--vf-text-sm); margin-bottom: var(--vf-sp-4); }

/* ---------- Slide-over drawer - quick-view a record without leaving the list.
   Generic: any link with data-drawer-link fetches its href and shows the
   fetched page's .crm-page content here instead of navigating away. ---------- */
.vf-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,15,20,.35); z-index: 1210; }
.vf-drawer-overlay.open { display: block; }
.vf-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 92vw); background: var(--vf-surface); box-shadow: var(--vf-shadow-md); z-index: 1211; transform: translateX(100%); transition: transform .18s ease; display: flex; flex-direction: column; }
.vf-drawer-overlay.open .vf-drawer { transform: translateX(0); }
.vf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--vf-sp-3) var(--vf-sp-4); border-bottom: 1px solid var(--vf-border); flex: 0 0 auto; }
.vf-drawer-head a { font-size: var(--vf-text-xs); color: var(--vf-accent); text-decoration: none; font-weight: 600; }
.vf-drawer-close { border: 0; background: transparent; color: var(--vf-text-subtle); width: 28px; height: 28px; border-radius: var(--vf-radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vf-drawer-close:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-drawer-body { flex: 1; overflow-y: auto; padding: var(--vf-sp-4); }
.vf-drawer-body .crm-page { max-width: none; margin: 0; }
.vf-drawer-body .crm-page-header .btn,
.vf-drawer-body .crm-page-header a.btn-light { display: none; }
.vf-drawer-loading { color: var(--vf-text-subtle); font-size: var(--vf-text-sm); padding: var(--vf-sp-5) 0; text-align: center; }

/* ---------- Card gallery (Suppliers, and anything else that's really a set of
   named entities rather than comparable rows - Attio/Airtable "gallery view") ---------- */
.vf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--vf-sp-4); }
.vf-gallery-card { background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-lg); padding: var(--vf-sp-4); display: flex; flex-direction: column; gap: var(--vf-sp-2); }
.vf-gallery-avatar { width: 38px; height: 38px; border-radius: var(--vf-radius-md); background: var(--vf-accent-subtle); color: var(--vf-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--vf-text-lg); }
.vf-gallery-title { font-weight: 650; font-size: var(--vf-text-md); margin-top: var(--vf-sp-1); }
.vf-gallery-sub { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-gallery-sub-label { color: var(--vf-text-subtle); font-weight: 600; margin-top: var(--vf-sp-1); }
.vf-gallery-actions { margin-top: auto; padding-top: var(--vf-sp-2); border-top: 1px solid var(--vf-border); display: flex; gap: var(--vf-sp-2); }
.vf-gallery-empty { grid-column: 1 / -1; text-align: center; color: var(--vf-text-subtle); padding: var(--vf-sp-6) 0; }

/* ---------- Destination thumbnails (Transport Services list, Destinations settings) ---------- */
.vf-dest-thumb { width: 56px; height: 56px; border-radius: var(--vf-radius-md); object-fit: cover; display: block; flex-shrink: 0; }
.vf-dest-thumb-placeholder { background: var(--vf-accent-subtle); color: var(--vf-accent); display: flex; align-items: center; justify-content: center; }
.vf-dest-thumb-sm { width: 36px; height: 36px; }

/* ---------- Dashboard: "Today" command center (hero metric + unified pulse +
   a live-trips card rail) instead of a grid of equal-weight stat tiles ---------- */
.vf-dash-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vf-sp-3); flex-wrap: wrap; margin-bottom: var(--vf-sp-5); }
.vf-dash-greeting { font-size: var(--vf-text-2xl); font-weight: 650; letter-spacing: -.02em; margin: 0; }
.vf-dash-date { color: var(--vf-text-subtle); font-size: var(--vf-text-sm); margin-top: 2px; }

.vf-hero-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--vf-sp-4); margin-bottom: var(--vf-sp-5); align-items: stretch; }
@media (max-width: 991.98px) { .vf-hero-row { grid-template-columns: 1fr; } }

.vf-hero-card { background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-lg); padding: var(--vf-sp-5); display: none; flex-direction: column; }
.vf-hero-card.active { display: flex; }
.vf-hero-label { font-size: var(--vf-text-sm); color: var(--vf-text-subtle); font-weight: 600; }
.vf-hero-value { font-size: 2.75rem; font-weight: 700; letter-spacing: -.02em; margin: var(--vf-sp-1) 0 var(--vf-sp-4); }
.vf-hero-sub-stats { display: flex; gap: var(--vf-sp-6); margin-top: auto; padding-top: var(--vf-sp-3); border-top: 1px solid var(--vf-border); }
.vf-hero-sub-stats div span { display: block; font-size: var(--vf-text-xs); color: var(--vf-text-subtle); }
.vf-hero-sub-stats div strong { font-size: var(--vf-text-xl); font-weight: 650; }

.vf-pulse-card { background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-lg); padding: var(--vf-sp-4); display: flex; flex-direction: column; }
.vf-pulse-title { font-size: var(--vf-text-sm); font-weight: 650; margin-bottom: var(--vf-sp-2); }
.vf-pulse-row { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-2); padding: var(--vf-sp-2) 0; border-bottom: 1px solid var(--vf-border); font-size: var(--vf-text-sm); }
.vf-pulse-row:last-child { border-bottom: 0; }
.vf-pulse-label { color: var(--vf-text-muted); font-weight: 550; }
.vf-pulse-stats { display: flex; gap: var(--vf-sp-4); }
.vf-pulse-stats div { text-align: right; }
.vf-pulse-stats span { display: block; font-size: 10px; color: var(--vf-text-subtle); text-transform: uppercase; letter-spacing: .03em; }
.vf-pulse-stats strong { font-size: var(--vf-text-md); font-weight: 650; }
.vf-pulse-stats strong.vf-check { color: var(--vf-success); }
.vf-pulse-stats strong.vf-zero { color: var(--vf-text-subtle); font-weight: 500; }

.vf-trip-rail { display: flex; gap: var(--vf-sp-3); overflow-x: auto; padding-bottom: var(--vf-sp-2); }
.vf-trip-card { flex: 0 0 auto; width: 220px; background: var(--vf-bg); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); padding: var(--vf-sp-3); }
.vf-trip-card-dest { font-weight: 650; font-size: var(--vf-text-sm); }
.vf-trip-card-guest { font-size: var(--vf-text-xs); color: var(--vf-text-muted); margin-bottom: var(--vf-sp-2); }
.vf-trip-card-dates { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); display: flex; justify-content: space-between; }
.vf-trip-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--vf-sp-2); padding-top: var(--vf-sp-2); border-top: 1px solid var(--vf-border); font-size: var(--vf-text-xs); }
.vf-trip-card-foot a { color: var(--vf-accent); text-decoration: none; font-weight: 600; }

/* ---------- Dashboard: bento widget grid (replaces the old stacked cards) ---------- */
.vf-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vf-sp-4); margin-bottom: var(--vf-sp-4); }
.vf-bento.vf-bento-2 { grid-template-columns: 2fr 1fr; }
.vf-bento-section-title { font-size: var(--vf-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vf-text-subtle); margin: var(--vf-sp-5) 0 var(--vf-sp-2); }

.vf-widget { background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-lg); padding: var(--vf-sp-4); }
.vf-widget-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--vf-sp-2); margin-bottom: var(--vf-sp-3); }
.vf-widget-title { font-size: var(--vf-text-sm); font-weight: 650; color: var(--vf-text); }
.vf-widget-title a { font-size: var(--vf-text-xs); color: var(--vf-accent); text-decoration: none; font-weight: 600; margin-left: var(--vf-sp-2); }

.vf-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vf-sp-4); }
@media (max-width: 860px) { .vf-charts-row { grid-template-columns: 1fr; } }

.vf-activity-list { display: flex; flex-direction: column; }
.vf-activity-item { display: flex; align-items: flex-start; gap: var(--vf-sp-3); padding: var(--vf-sp-2) 0; border-bottom: 1px solid var(--vf-border); }
.vf-activity-item:last-child { border-bottom: 0; }
.vf-activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--vf-accent); }
.vf-activity-dot-lead { background: var(--vf-accent); }
.vf-activity-dot-quote { background: #7C76EF; }
.vf-activity-dot-booking { background: var(--vf-success); }
.vf-activity-dot-payment { background: var(--vf-warning); }
.vf-activity-body { display: flex; flex-direction: column; gap: 2px; }
.vf-activity-desc { font-size: var(--vf-text-sm); color: var(--vf-text); text-decoration: none; font-weight: 550; }
a.vf-activity-desc:hover { color: var(--vf-accent); }
.vf-activity-time { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); }

.vf-segment { display: inline-flex; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-sm); overflow: hidden; }
.vf-segment button { border: 0; border-left: 1px solid var(--vf-border); background: var(--vf-surface); padding: .3rem .7rem; font-size: var(--vf-text-xs); font-weight: 600; color: var(--vf-text-muted); cursor: pointer; }
.vf-segment button:first-child { border-left: 0; }
.vf-segment button.active { background: var(--vf-accent-subtle); color: var(--vf-accent); }

.vf-kpi-grid { display: none; grid-template-columns: repeat(4, 1fr); gap: var(--vf-sp-4); }
.vf-kpi-grid.active { display: grid; }
.vf-kpi-label { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); margin-bottom: var(--vf-sp-1); }
.vf-kpi-value { font-size: var(--vf-text-2xl); font-weight: 650; color: var(--vf-text); letter-spacing: -.01em; }

.vf-mini-list { display: flex; flex-wrap: wrap; gap: var(--vf-sp-4); }
.vf-mini-item { min-width: 70px; }
.vf-mini-label { display: block; font-size: var(--vf-text-xs); color: var(--vf-text-subtle); margin-bottom: var(--vf-sp-1); }
.vf-mini-value { font-size: var(--vf-text-xl); font-weight: 650; color: var(--vf-text); }
.vf-mini-value.vf-check { color: var(--vf-success); }
.vf-mini-value.vf-zero { color: var(--vf-text-subtle); font-weight: 500; }

.vf-tabs { display: flex; gap: var(--vf-sp-2); margin-bottom: var(--vf-sp-3); flex-wrap: wrap; }
.vf-tabs button { border: 1px solid var(--vf-border); background: var(--vf-surface); border-radius: var(--vf-radius-sm); padding: .3rem .75rem; font-size: var(--vf-text-xs); font-weight: 600; color: var(--vf-text-muted); cursor: pointer; }
.vf-tabs button.active { background: var(--vf-accent-subtle); border-color: var(--vf-accent-subtle); color: var(--vf-accent); }
.vf-tab-panel { display: none; }
.vf-tab-panel.active { display: block; }

@media (max-width: 1100px) { .vf-bento { grid-template-columns: repeat(2, 1fr); } .vf-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) { .vf-bento.vf-bento-2 { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .vf-bento { grid-template-columns: 1fr; } .vf-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Airtable-style filter bar (destination / sales team / tag / date range) ---------- */
.vf-filter-bar { display: flex; align-items: center; gap: var(--vf-sp-2); flex-wrap: wrap; margin-bottom: var(--vf-sp-4); padding: var(--vf-sp-2) var(--vf-sp-3); background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); }
.vf-filter-icon { color: var(--vf-text-subtle); flex: 0 0 auto; }
.vf-filter-bar .form-select, .vf-filter-bar .form-control { width: auto; min-width: 120px; }

/* ---------- Pager - shared by every paginated list screen ---------- */
.vf-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--vf-sp-3); margin-top: var(--vf-sp-3); padding: var(--vf-sp-2) 0; }
.vf-pager-info { font-size: var(--vf-text-sm); color: var(--vf-text-muted); }
.vf-pager-controls { display: flex; gap: var(--vf-sp-2); }
.vf-pager-controls .disabled { pointer-events: none; opacity: .45; }

/* ---------- Board (Kanban) view - Leads & Trips, and any future pipeline list ---------- */
.vf-view-toggle { display: inline-flex; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-sm); overflow: hidden; }
.vf-view-toggle a { display: flex; align-items: center; gap: var(--vf-sp-1); padding: .4rem .75rem; font-size: var(--vf-text-sm); font-weight: 600; color: var(--vf-text-muted); text-decoration: none; border-left: 1px solid var(--vf-border); }
.vf-view-toggle a:first-child { border-left: 0; }
.vf-view-toggle a.active { background: var(--vf-accent-subtle); color: var(--vf-accent); }
.vf-view-toggle svg { width: 14px; height: 14px; }

.vf-board-groups { display: flex; gap: var(--vf-sp-6); align-items: flex-start; overflow-x: auto; padding-bottom: var(--vf-sp-3); }
.vf-board-group { display: flex; flex-direction: column; gap: var(--vf-sp-2); }
.vf-board-group-label { font-size: var(--vf-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vf-text-subtle); }
.vf-board-cols { display: flex; gap: var(--vf-sp-3); }
.vf-board-col { width: 250px; min-width: 250px; display: flex; flex-direction: column; }
.vf-board-col-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--vf-sp-1); margin-bottom: var(--vf-sp-2); }
.vf-board-col-head span:first-child { font-size: var(--vf-text-sm); font-weight: 650; color: var(--vf-text); }
.vf-board-col-head .vf-count { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); font-weight: 600; background: var(--vf-bg); border-radius: 999px; padding: .05rem .5rem; }
.vf-board-col-body { background: var(--vf-bg); border-radius: var(--vf-radius-md); padding: var(--vf-sp-2); display: flex; flex-direction: column; gap: var(--vf-sp-2); min-height: 90px; max-height: calc(100vh - 220px); overflow-y: auto; border: 2px solid transparent; }

/* The column a nav-panel link (e.g. "In Progress") pointed at - board view never
   filters itself out, so this is the only visual cue the click did something. */
.vf-board-col-focused .vf-board-col-head span:first-child { color: var(--vf-accent); }
.vf-board-col-focused .vf-board-col-body { border-color: var(--vf-accent-subtle); background: var(--vf-accent-subtle); }
.vf-board-col-focused .vf-board-card { background: var(--vf-surface); }
.vf-board-col-focused .vf-board-col-head .vf-count { background: var(--vf-accent); color: #fff; }

.vf-board-card { display: block; background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); padding: var(--vf-sp-3); text-decoration: none; color: var(--vf-text); transition: border-color .1s ease, box-shadow .1s ease; }
.vf-board-card:hover { border-color: var(--vf-border-strong); box-shadow: var(--vf-shadow-sm); color: var(--vf-text); }
.vf-board-card-id { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); font-weight: 600; margin-bottom: var(--vf-sp-1); }
.vf-board-card-title { font-size: var(--vf-text-sm); font-weight: 650; margin-bottom: 2px; }
.vf-board-card-sub { font-size: var(--vf-text-xs); color: var(--vf-text-muted); }
.vf-board-card-tags { margin-top: var(--vf-sp-2); display: flex; flex-wrap: wrap; gap: 4px; }
.vf-board-card-tags .badge { font-weight: 500; font-size: 10px; }
.vf-board-empty { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); text-align: center; padding: var(--vf-sp-3) 0; }

/* ---------- Record page: Notion-style document header + Attio-style property
   rail/activity feed, replacing the old "stack of Bootstrap cards" detail page ---------- */
.vf-record-back { font-size: var(--vf-text-sm); color: var(--vf-text-subtle); text-decoration: none; display: inline-block; margin-bottom: var(--vf-sp-3); }
.vf-record-back:hover { color: var(--vf-text-muted); }
.vf-record-header { margin-bottom: var(--vf-sp-5); }
.vf-record-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vf-sp-3); flex-wrap: wrap; }
.vf-record-title { font-size: var(--vf-text-3xl); font-weight: 650; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: var(--vf-sp-2); }
.vf-record-edit-btn { border: 0; background: transparent; color: var(--vf-text-subtle); width: 30px; height: 30px; border-radius: var(--vf-radius-sm); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vf-record-edit-btn svg { width: 16px; height: 16px; }
.vf-record-edit-btn:hover { background: var(--vf-bg); color: var(--vf-text); }
.vf-record-meta { display: flex; align-items: center; gap: var(--vf-sp-2); margin-top: var(--vf-sp-1); font-size: var(--vf-text-sm); color: var(--vf-text-subtle); }
.vf-record-actions { display: flex; align-items: center; gap: var(--vf-sp-2); }

.vf-record-body { display: grid; grid-template-columns: 1fr 300px; gap: var(--vf-sp-6); align-items: start; }
@media (max-width: 991.98px) { .vf-record-body { grid-template-columns: 1fr; } }
.vf-record-main { min-width: 0; }
.vf-record-section { margin-bottom: var(--vf-sp-6); }
.vf-record-section-title { font-size: var(--vf-text-md); font-weight: 650; margin-bottom: var(--vf-sp-1); }
.vf-record-section-hint { font-size: var(--vf-text-sm); color: var(--vf-text-subtle); margin-bottom: var(--vf-sp-3); }

.vf-record-rail { position: sticky; top: calc(var(--vf-sp-5) + 52px); display: flex; flex-direction: column; gap: var(--vf-sp-5); }
.vf-prop-group { display: flex; flex-direction: column; }
.vf-prop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vf-sp-3); padding: var(--vf-sp-2) 0; border-bottom: 1px solid var(--vf-border); font-size: var(--vf-text-sm); }
.vf-prop:last-child { border-bottom: 0; }
.vf-prop-label { color: var(--vf-text-subtle); flex: 0 0 auto; }
.vf-prop-value { color: var(--vf-text); font-weight: 550; text-align: right; }
.vf-prop-value .badge { font-weight: 500; margin: 1px 0 1px 4px; }

.vf-activity-title { font-size: var(--vf-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vf-text-subtle); margin-bottom: var(--vf-sp-2); }
.vf-activity-item { padding: var(--vf-sp-2) 0; border-bottom: 1px solid var(--vf-border); font-size: var(--vf-text-sm); }
.vf-activity-item:last-child { border-bottom: 1px solid var(--vf-border); margin-bottom: var(--vf-sp-3); }
.vf-activity-item-meta { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); margin-top: 2px; }

.vf-quote-card { display: flex; align-items: center; gap: var(--vf-sp-3); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); padding: var(--vf-sp-3); margin-bottom: var(--vf-sp-2); background: var(--vf-surface); }
.vf-quote-card-main { flex: 1; min-width: 0; }
.vf-quote-card-title { font-weight: 650; font-size: var(--vf-text-sm); }
.vf-quote-card-sub { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); }
.vf-quote-card-price { text-align: right; flex: 0 0 auto; }
.vf-quote-card-price strong { font-size: var(--vf-text-lg); display: block; }
.vf-quote-card-price span { font-size: var(--vf-text-xs); color: var(--vf-text-subtle); }
.vf-quote-card-actions { display: flex; gap: var(--vf-sp-1); flex: 0 0 auto; }