/* ==========================================================================
   Visitor portal - foundation + shell (2026-10 redesign)

   Loaded by _VisitorLayout and _ExternalLayout AFTER visitor.css and visitor-icons.css,
   and BEFORE Clients/{CLIENTINSTANCE}/css/clientstyle.css (so a school can override
   --vp-brand-primary). Arabic: _LocalizationAssets loads bootstrap.rtl + visitor.rtl.css;
   every rule here uses logical properties (inline-start / inline-end), so nothing in
   this file needs an RTL twin.

   Foundation = the applicant portal's design language (same palette, radius, shadows,
   button shading, Poppins), with the visitor portal's own vp- names.
   Shell = the visitor portal's own structure:
     - one top bar: school logo | Visitor Portal · language · avatar
     - no sidebar (the old one is parked in _VisitorLayout)
     - home ("My visits") is the hub; its Book a visit button opens the form, which links back.
       The Dashboard / Book Visit tabs and the bottom tab bar were parked 2026-10 (home redesign);
       their rules below are kept for that parked markup.
     - public pages: the bar shows only the link to the other public page

   COLOUR: the school colour (--vp-brand-primary) fills the main button ONLY. Everything
   else uses the common palette below (Tailwind gray / blue / red).
   ========================================================================== */

:root {
    /* School: main (filled) button only. Clients/{school}/css/clientstyle.css may set it. */
    --vp-brand-primary: #1B2159;
    --vp-on-brand: #FFFFFF;

    /* Surfaces and lines (Tailwind gray) */
    --vp-bg: #F1F1F1;              /* page */
    --vp-surface: #FFFFFF;         /* header, tab bar, cards, menus */
    --vp-surface-2: #F9FAFB;       /* gray-50   hover inside menus */
    --vp-surface-3: #F3F4F6;       /* gray-100  segmented control track */
    --vp-surface-4: #E5E7EB;       /* gray-200  active bottom-tab pill */
    --vp-line: #E5E7EB;            /* gray-200  borders, dividers */
    --vp-line-strong: #D1D5DB;     /* gray-300  avatar ring */

    /* Text */
    --vp-ink: #111827;             /* gray-900 */
    --vp-ink-2: #4B5563;           /* gray-600 */
    --vp-ink-3: #6B7280;           /* gray-500 */
    --vp-danger-ink: #991B1B;      /* red-800   log out */

    /* Interaction */
    --vp-focus: #2563EB;           /* blue-600  keyboard focus ring */
    --vp-ring-active: #93C5FD;     /* blue-300  avatar ring while its menu is open */

    /* Avatar tint (blue-100 / blue-800) */
    --vp-avatar-bg: #DBEAFE;
    --vp-avatar-ink: #1E40AF;

    /* Radius */
    --vp-radius-sm: 6px;
    --vp-radius-md: 8px;
    --vp-radius-lg: 12px;
    --vp-radius-xl: 16px;
    --vp-radius-full: 999px;

    /* Elevation */
    --vp-shadow-color: 16, 24, 40;
    --vp-shadow-xs: 0 1px 2px rgba(var(--vp-shadow-color), .05);
    --vp-shadow-lg: 0 12px 16px -4px rgba(var(--vp-shadow-color), .08), 0 4px 6px -2px rgba(var(--vp-shadow-color), .03);
    --vp-shadow-card: 0 1px 2px rgba(var(--vp-shadow-color), .04), 0 4px 14px -4px rgba(var(--vp-shadow-color), .08);   /* white cards on the grey page */

    /* Status pills (Tailwind 100 background / 800 text) */
    --vp-amber-bg: #FEF3C7;  --vp-amber-ink: #92400E;   /* pending */
    --vp-green-bg: #DCFCE7;  --vp-green-ink: #166534;   /* approved */
    --vp-blue-bg: #DBEAFE;   --vp-blue-ink: #1E40AF;    /* checked in, upcoming */
    --vp-red-bg: #FEE2E2;    --vp-red-ink: #991B1B;     /* rejected */
    --vp-neutral-bg: #F3F4F6; --vp-neutral-ink: #1F2937; /* completed, cancelled */
    --vp-info-bg: #EFF6FF;   --vp-info-ink: #2563EB;    /* first-visit icon */

    /* Links */
    --vp-link: #2563EB;            /* blue-600 */
    --vp-link-hover: #1D4ED8;      /* blue-700 */

    /* Shell sizes */
    --vp-header-h: 64px;
    --vp-subbar-h: 48px;           /* the trail bar under the header (pages that fill @section SubHeader) */
    --vp-actionbar-h: 72px;        /* the fixed button bar at the bottom of the booking form */
    --vp-tabbar-h: 64px;
    --vp-gutter: 24px;

    --vp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Page. visitor.css paints .visitor-body light blue; this file loads after it. Arabic keeps
   Cairo: visitor.rtl.css sets [dir="rtl"] body, which outranks this class. */
.vp-body {
    background: var(--vp-bg);
    color: var(--vp-ink);
    font-family: var(--vp-font);
}

.vp-body :focus-visible {
    outline: 2px solid var(--vp-focus);
    outline-offset: 2px;
}

/* AngularJS loads at the end of the page: keep {{ }} templates hidden until it has run */
[ng-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.vp-hdr {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--vp-header-h);
    background: var(--vp-surface);
    border-bottom: 1px solid var(--vp-line);
}

.vp-hdr-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
    padding-inline: var(--vp-gutter);
}

/* Brand: school logo (or the school name when the logo file is missing) + portal name */
.vp-hdr-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    color: var(--vp-ink);
    text-decoration: none;
}
.vp-hdr-brand:hover { color: var(--vp-ink); }

.vp-hdr-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 44px;
    max-width: 220px;
}

.vp-hdr-school {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
}

.vp-hdr-title {
    margin-inline-start: 14px;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--vp-line);
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    white-space: nowrap;
}

/* Tabs: Dashboard / Book Visit (the pages the old sidebar linked to) */
.vp-hdr-nav {
    display: flex;
    align-self: stretch;
    gap: 4px;
}

.vp-hdr-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 15px;
    color: var(--vp-ink-2);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -3px 0 transparent;
    --vp-icon-size: 18px;
}
.vp-hdr-tab:hover { color: var(--vp-ink); }
.vp-hdr-tab[aria-current="page"] {
    color: var(--vp-ink);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--vp-ink);
}

.vp-hdr-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Bar under the header (2026-10, as the applicant portal's .ap-subbar): filled by a page
   through the layout's optional @section SubHeader - e.g. Book a visit's
   "My visits › Book a visit" trail. Sticky right under the (sticky) header.
   -------------------------------------------------------------------------- */
.vp-subbar {
    position: sticky;
    top: var(--vp-header-h);
    z-index: 1029;                       /* just under the header, so its account menu opens over the bar */
    display: flex;
    align-items: center;
    height: var(--vp-subbar-h);
    padding-inline: var(--vp-gutter);
    background: var(--vp-surface);
    border-bottom: 1px solid var(--vp-line);
}

/* Trail: links in the link colour, the current page in grey, chevron separators */
.vp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--vp-ink-3);
    white-space: nowrap;
    --vp-icon-size: 16px;
}
.vp-breadcrumb a { color: var(--vp-link); font-weight: 500; text-decoration: none; }
.vp-breadcrumb a:hover { color: var(--vp-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.vp-breadcrumb .vp-icon { color: #9CA3AF; }
.vp-breadcrumb [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; color: var(--vp-ink-2); }

/* --------------------------------------------------------------------------
   Language switch - every language visible, the current one raised
   (same control as the applicant portal's header). Links only, no script.
   -------------------------------------------------------------------------- */
.vp-lang {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--vp-radius-md);
    background: var(--vp-surface-3);
}

.vp-lang a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: var(--vp-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.vp-lang a:hover { color: var(--vp-ink); }
.vp-lang a[aria-current="true"] {
    background: var(--vp-surface);
    color: var(--vp-ink);
    box-shadow: var(--vp-shadow-xs);
}
.vp-lang a[lang="ar"] { font-family: 'Cairo', var(--vp-font); }

/* Short code (EN / AR / FR): only used on phones when there are three or more languages */
.vp-lang-short { display: none; }

/* --------------------------------------------------------------------------
   Buttons in the bar (public pages). Same shading as the applicant portal.
   -------------------------------------------------------------------------- */
.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 0;
    border-radius: var(--vp-radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    --vp-icon-size: 18px;
}

.vp-btn-primary {
    padding-inline: 16px;
    background: var(--vp-brand-primary);
    color: var(--vp-on-brand);
    box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, .8),
                inset 0 0 0 1px var(--vp-brand-primary),
                inset 0 .5px 0 1.5px rgba(255, 255, 255, .25);
}
.vp-btn-primary:hover {
    background: color-mix(in srgb, var(--vp-brand-primary) 85%, #000000);
    color: var(--vp-on-brand);
}

.vp-btn-secondary {
    background: var(--vp-surface);
    color: var(--vp-ink);
    box-shadow: inset 0 -1px 0 #B5B5B5, inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 .5px 0 1.5px #FFFFFF;
}
.vp-btn-secondary:hover {
    background: #F7F7F7;
    color: var(--vp-ink);
    box-shadow: inset 0 1px 0 #EBEBEB, inset -1px 0 0 #EBEBEB, inset 1px 0 0 #EBEBEB, inset 0 -1px 0 #CCCCCC;
}

/* --------------------------------------------------------------------------
   Account: initials avatar in the bar, Bootstrap dropdown with email + Logout
   -------------------------------------------------------------------------- */
.vp-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--vp-radius-full);
    background: transparent;
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--vp-surface), 0 0 0 3px var(--vp-line-strong);
    transition: box-shadow .15s ease;
}
.vp-avatar-btn::after { display: none; }   /* Bootstrap's dropdown caret */
.vp-avatar-btn:hover,
.vp-avatar-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--vp-surface), 0 0 0 4px var(--vp-ring-active);
}

.vp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-avatar-bg);
    color: var(--vp-avatar-ink);
    font-family: var(--vp-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.vp-avatar-lg { width: 44px; height: 44px; font-size: 16px; }

.dropdown-menu.vp-menu {
    width: 280px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-lg);
    background: var(--vp-surface);
    box-shadow: var(--vp-shadow-lg);
    font-family: var(--vp-font);
    text-align: start;
}

.vp-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-bottom: 1px solid var(--vp-line);
}

.vp-menu-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--vp-ink);
}

.vp-menu-body { padding: 8px; }

.vp-menu .dropdown-item.vp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--vp-radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-ink);
    white-space: nowrap;
    --vp-icon-size: 18px;
}
.vp-menu .dropdown-item.vp-menu-item:hover,
.vp-menu .dropdown-item.vp-menu-item:focus { background: var(--vp-surface-2); }
.vp-menu .dropdown-item.vp-menu-item.is-danger { color: var(--vp-danger-ink); }

/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */
.vp-main {
    display: block;
    min-width: 0;
    padding: var(--vp-gutter);
}

/* Public pages keep their own .container; this only spaces them under the bar.
   Footer height (about 50px) is site.css's body margin-bottom. */
.vp-main-public {
    display: block;
    padding: 32px 0 48px;
    min-height: calc(100vh - var(--vp-header-h) - 50px);
}

/* --------------------------------------------------------------------------
   Buttons: sizes (types are above)
   -------------------------------------------------------------------------- */
.vp-btn-lg { height: 44px; padding-inline: 20px; font-size: 15px; }
.vp-btn-primary.vp-btn-lg { padding-inline: 20px; }
.vp-btn-sm { height: 32px; padding-inline: 12px; font-size: 13px; }

/* --------------------------------------------------------------------------
   My visits home (Views/Home/Index.cshtml, 2026-10 home redesign)
   Order: welcome + Book a visit · Open requests · Visit history; or the first-visit card.
   -------------------------------------------------------------------------- */
.vp-page {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.vp-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}
.vp-page-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.vp-page-cta { margin-inline-start: auto; }

.vp-title {
    margin: 0;
    font-family: inherit;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--vp-ink);
}

.vp-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--vp-ink-3);
    overflow-wrap: anywhere;
}
.vp-subtitle strong { font-weight: 600; color: var(--vp-ink); }

/* Welcome line (2026-10-24): visitor number chip, shown only when the visitor has a number */
.vp-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    max-width: 100%;
    margin: 4px 0 0;
    padding: 4px 12px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-surface-2);
    border: 1px solid var(--vp-line);
    font-size: 13px;
    line-height: 20px;
    color: var(--vp-ink-3);
    overflow-wrap: anywhere;
}
.vp-id-chip strong {
    font-weight: 600;
    color: var(--vp-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Sections and cards */
.vp-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vp-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vp-section-title {
    margin: 0;
    font-family: inherit;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--vp-ink);
}
.vp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-surface-4);
    font-size: 12px;
    font-weight: 600;
    color: var(--vp-neutral-ink);
}

.vp-card {
    background: var(--vp-surface);
    border-radius: var(--vp-radius-xl);
    box-shadow: var(--vp-shadow-card);
}

/* Status pill: tone classes come from dashboardController.js (STATUS_TONES) */
.vp-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-neutral-bg);
    color: var(--vp-neutral-ink);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.vp-pill.tone-amber   { background: var(--vp-amber-bg);   color: var(--vp-amber-ink); }
.vp-pill.tone-green   { background: var(--vp-green-bg);   color: var(--vp-green-ink); }
.vp-pill.tone-blue    { background: var(--vp-blue-bg);    color: var(--vp-blue-ink); }
.vp-pill.tone-red     { background: var(--vp-red-bg);     color: var(--vp-red-ink); }
.vp-pill.tone-neutral { background: var(--vp-neutral-bg); color: var(--vp-neutral-ink); }

/* Open requests: one row card per visit - date tile · purpose + time/host · status · Edit */
.vp-requests {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vp-request {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 76px;
    grid-template-areas: "tile main status action";
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
}

.vp-datetile {
    grid-area: tile;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 64px;
    border-radius: var(--vp-radius-lg);
    background: var(--vp-surface-3);
    font-family: var(--vp-font);   /* the date comes in English digits and month names, also on the Arabic page */
}
.vp-datetile-month { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .06em; color: var(--vp-ink-3); }
.vp-datetile-day { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--vp-ink); }

.vp-request-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vp-request-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--vp-ink); overflow-wrap: anywhere; }
.vp-request-meta { font-size: 14px; line-height: 20px; color: var(--vp-ink-2); overflow-wrap: anywhere; }

.vp-request-status {
    grid-area: status;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.vp-request-hint { font-size: 13px; line-height: 18px; color: var(--vp-ink-3); white-space: nowrap; }

.vp-request-action {
    grid-area: action;
    display: flex;
    justify-content: flex-end;
}

/* Visit history: a table on wide screens, stacked rows on phones (below) */
.vp-history { overflow: hidden; }

.vp-history-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}
.vp-history-table th {
    height: 44px;
    padding: 0 20px;
    background: var(--vp-surface-2);
    border-bottom: 1px solid var(--vp-line);
    text-align: start;
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-ink-3);
    white-space: nowrap;
}
.vp-history-table td {
    height: 64px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--vp-line);
    vertical-align: middle;
    color: var(--vp-ink-2);
}
.vp-history-table tbody tr:last-child td { border-bottom: 0; }

.vp-history-title { display: block; font-weight: 500; color: var(--vp-ink); }
.vp-history-name { display: block; font-size: 13px; color: var(--vp-ink-3); }
.vp-history-status { white-space: nowrap; }
.vp-history-status .vp-btn { margin-inline-start: 8px; }

/* No visits yet */
.vp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 56px 24px;
    text-align: center;
}
.vp-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-info-bg);
    color: var(--vp-info-ink);
    --vp-icon-size: 28px;
}
.vp-empty-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 440px;
}
.vp-empty-title {
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--vp-ink);
}
.vp-empty-desc { margin: 0; font-size: 15px; line-height: 24px; color: var(--vp-ink-2); }
.vp-empty .vp-btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Book a visit page head (Views/Home/BookVisit.cshtml): "My visits" back link + title
   -------------------------------------------------------------------------- */
.vp-form-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.vp-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    min-height: 32px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-ink-2);
    text-decoration: none;
    --vp-icon-size: 18px;
}
.vp-back:hover { color: var(--vp-ink); }

/* --------------------------------------------------------------------------
   Phones: home and booking page
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .vp-page { gap: 24px; }

    .vp-title { font-size: 20px; line-height: 28px; }

    /* Book a visit runs full width under the welcome line */
    .vp-page-cta { flex-basis: 100%; height: 48px; margin-inline-start: 0; }

    .vp-section-title { font-size: 16px; line-height: 24px; }

    .vp-request {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "tile main main"
            "status status action";
        gap: 12px;
        padding: 16px;
    }
    .vp-datetile { width: 52px; height: 60px; }
    .vp-datetile-day { font-size: 20px; line-height: 26px; }
    .vp-request-title { font-size: 15px; line-height: 22px; }
    .vp-request-meta { font-size: 13px; }
    .vp-request-status { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
    .vp-request-hint { white-space: normal; }
    .vp-request-action .vp-btn { height: 44px; padding-inline: 18px; }

    /* History rows stack: purpose + status, then date, then who */
    .vp-history-table thead { display: none; }
    .vp-history-table,
    .vp-history-table tbody { display: block; }
    .vp-history-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "purpose status"
            "date date"
            "meeting meeting";
        column-gap: 12px;
        row-gap: 2px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--vp-line);
    }
    .vp-history-table tbody tr:last-child { border-bottom: 0; }
    .vp-history-table td { display: block; height: auto; padding: 0; border: 0; }
    .vp-history-purpose { grid-area: purpose; }
    .vp-history-status { grid-area: status; align-self: start; }
    .vp-history-date { grid-area: date; font-size: 13px; }
    .vp-history-meeting { grid-area: meeting; font-size: 13px; }
    .vp-history-status .vp-btn { height: 36px; }

    .vp-empty { padding: 40px 20px 24px; }
    .vp-empty .vp-btn { align-self: stretch; height: 48px; }
}

@media (max-width: 575.98px) {
    /* phones show the visitor number only (email + mobile would wrap into a third line) */
    .vp-subtitle-extra { display: none; }

    .vp-back { min-height: 44px; }
}

/* ==========================================================================
   Booking form (.vp-form on Views/Home/BookVisit + Views/Visitor/BookVisit, 2026-10 form redesign)

   Same fields, order and bindings; this only changes how they look:
   - every .visitor-section is its own white card on the grey page (the outer .visitor-card goes flat)
   - fields = the applicant portal's field design (its --ap-field-* values, as --vp-field-* here):
     48px box (44 on phones), one 2px edge in every state, 12px corners, regular grey label above,
     typing = dark edge (no glow), red edge + red line with an info icon on error
   - label and section-title icons hidden, section titles 18px sentence case
   - Fetch is a secondary button beside the box; Submit is the school-colour main button at the end,
     pinned to the bottom of the screen on phones
   The rules carry .vp-form so they beat visitor.css / Bootstrap without touching them.
   ========================================================================== */
:root {
    --vp-field-h: 48px;
    --vp-field-radius: var(--vp-radius-lg);
    --vp-field-edge: 2px;
    --vp-field-line: var(--vp-line);            /* resting edge */
    --vp-field-line-hover: #9CA3AF;              /* gray-400 */
    --vp-field-line-active: var(--vp-ink);      /* typing in it */
    --vp-field-line-error: #DC2626;              /* red-600 */
    --vp-field-bg: var(--vp-surface);
    --vp-field-bg-hover: var(--vp-surface-3);   /* typing + hovered; disabled */
    --vp-field-bg-error-hover: #FEF2F2;          /* red-50 */
    --vp-field-label: var(--vp-ink-2);
    --vp-field-placeholder: var(--vp-ink-3);
    --vp-field-disabled-ink: #9CA3AF;

    --vp-list-row-h: 48px;
    --vp-list-max-h: 240px;

    --vp-section-pad: 24px;
    --vp-section-gap: 16px;

    /* Chevrons (data URIs cannot read tokens: dark = #111827, pale = #9CA3AF) */
    --vp-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23111827' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --vp-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 12.5l5-5 5 5' fill='none' stroke='%23111827' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --vp-chevron-down-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Reading width: one comfortable column */
.vp-form > .row > .col-lg-8 { max-width: 760px; }

/* ---- Sections as cards ---- */
.vp-form .visitor-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;          /* the employee list and the pinned Submit must not be clipped */
}

/* Guest page: its title bar shows as the page title (the signed-in page has .vp-form-head instead) */
.vp-form .visitor-card-header {
    margin: 0 0 16px;
    padding: 0;
    background: none;
    color: var(--vp-ink);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}
.vp-form .visitor-card-header > i { display: none; }

.vp-form .visitor-card-body,
.vp-form .visitor-card-body > form {
    display: flex;
    flex-direction: column;
    gap: var(--vp-section-gap);
    padding: 0;
}

.vp-form .visitor-section {
    margin: 0;
    padding: var(--vp-section-pad);
    border-radius: var(--vp-radius-xl);
    background: var(--vp-surface);
    box-shadow: var(--vp-shadow-card);
}

.vp-form .visitor-section-title {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    color: var(--vp-ink);
    font-family: inherit;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
.vp-form .visitor-section-title > i { display: none; }

/* No extra space under the last row of a card (Bootstrap's mb-3 is !important) */
.vp-form .visitor-section > .mb-3:last-child,
.vp-form .visitor-section > .row:last-child > [class*="col-"] { margin-bottom: 0 !important; }

/* ---- Labels ---- */
:is(.vp-form, .vp-login) label.visitor-label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--vp-field-label);
}
:is(.vp-form, .vp-login) label.visitor-label > i { display: none; }

/* ---- Fields: text, email, tel, date-time, textarea, select, the employee picker ---- */
:is(.vp-form, .vp-login) .form-control,
.vp-form .form-select {
    display: block;
    width: 100%;
    height: var(--vp-field-h);
    padding: 10px 14px;
    border: var(--vp-field-edge) solid var(--vp-field-line);
    border-radius: var(--vp-field-radius);
    background-color: var(--vp-field-bg);
    color: var(--vp-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.vp-form textarea.form-control { height: auto; min-height: 112px; resize: vertical; }
:is(.vp-form, .vp-login) .form-control::placeholder { color: var(--vp-field-placeholder); font-weight: 400; opacity: 1; }

:is(.vp-form, .vp-login) .form-control:hover,
.vp-form .form-select:hover { border-color: var(--vp-field-line-hover); }

:is(.vp-form, .vp-login) .form-control:focus,
.vp-form .form-select:focus {
    border-color: var(--vp-field-line-active);
    box-shadow: none;
    outline: none;
}
:is(.vp-form, .vp-login) .form-control:focus:hover,
.vp-form .form-select:focus:hover { background-color: var(--vp-field-bg-hover); }
:is(.vp-form, .vp-login) .form-control:focus-visible,
.vp-form .form-select:focus-visible { outline: none; }   /* the dark edge is the focus mark */

:is(.vp-form, .vp-login) .form-control:disabled,
:is(.vp-form, .vp-login) .form-control[readonly],
.vp-form .form-select:disabled {
    border-color: var(--vp-field-line);
    background-color: var(--vp-field-bg-hover);
    color: var(--vp-field-disabled-ink);
    cursor: not-allowed;
}

/* Error edge - always at the same moment as the field's error line:
   - booking form: once the field has been left, or anywhere after Submit (its lines show on "touched || submitted")
   - sign-in pages (Login, Register, Forgot / Reset password): only after Sign in / Register / Send is pressed,
     because their lines only show then. 2026-10-24: they used to go red as soon as you clicked into a
     required box and moved on, before trying to submit (the old rule was `:is(.vp-form, .vp-login) …ng-touched`). */
.vp-form form.ng-submitted .form-control.ng-invalid,
.vp-form form.ng-submitted .form-select.ng-invalid,
.vp-form .form-control.ng-invalid.ng-touched,
.vp-form .form-select.ng-invalid.ng-touched,
.vp-login form.ng-submitted .form-control.ng-invalid { border-color: var(--vp-field-line-error); }
.vp-form form.ng-submitted .form-control.ng-invalid:hover,
.vp-form form.ng-submitted .form-select.ng-invalid:hover,
.vp-form .form-control.ng-invalid.ng-touched:hover,
.vp-form .form-select.ng-invalid.ng-touched:hover,
.vp-login form.ng-submitted .form-control.ng-invalid:hover { background-color: var(--vp-field-bg-error-hover); }

:is(.vp-form, .vp-login) .vp-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--vp-red-ink) !important;     /* Bootstrap's .text-danger is !important */
}
:is(.vp-form, .vp-login) .vp-field-error::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: var(--vp-field-line-error);
    -webkit-mask: var(--vp-glyph-info) center / contain no-repeat;
    mask: var(--vp-glyph-info) center / contain no-repeat;
}

/* Dropdowns: our chevron 14px in from the end edge (points up while open) */
.vp-form .form-select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 44px;
    background-image: var(--vp-chevron-down);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer;
}
[dir="rtl"] .vp-form .form-select { background-position: left 14px center; }
.vp-form .form-select:disabled { background-image: var(--vp-chevron-down-disabled); }
.vp-form select.form-select.ng-empty { color: var(--vp-field-placeholder); font-weight: 400; }   /* "Select …" still showing */
.vp-form select.form-select option { color: var(--vp-ink); font-weight: 400; }

/* The open list. Browsers with the customisable dropdown (Chrome / Edge, desktop and Android) draw
   it as the applicant portal's panel; Safari and Firefox keep their own list. Same <select>, so
   ng-options and validation are untouched. */
@supports (appearance: base-select) {
    .vp-form select.form-select { appearance: base-select; height: auto; min-height: var(--vp-field-h); white-space: normal; overflow-wrap: anywhere; }
    .vp-form select.form-select:open { border-color: var(--vp-field-line-active); background-image: var(--vp-chevron-up); }
    .vp-form select.form-select::picker-icon { display: none; }
    .vp-form select.form-select::picker(select) {
        appearance: base-select;
        margin-block: 4px;
        padding: 0;
        border: 1px solid var(--vp-line);
        border-radius: var(--vp-radius-lg);
        background: var(--vp-surface);
        box-shadow: var(--vp-shadow-lg);
        max-height: var(--vp-list-max-h);
        overflow-y: auto;
        font-family: inherit;
    }
    .vp-form select.form-select option {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: var(--vp-list-row-h);
        padding: calc((var(--vp-list-row-h) - 24px) / 2) 16px;
        font-size: 15px;
        line-height: 24px;
        white-space: normal;
        cursor: pointer;
    }
    .vp-form select.form-select option:hover,
    .vp-form select.form-select option:focus-visible { background: var(--vp-surface-3); outline: none; }
    .vp-form select.form-select option:checked { font-weight: 500; }
    .vp-form select.form-select option::checkmark {
        order: 1;
        content: "";
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-inline-start: auto;
        background-color: var(--vp-ink);
        -webkit-mask: var(--vp-glyph-checkmark) center / contain no-repeat;
        mask: var(--vp-glyph-checkmark) center / contain no-repeat;
    }
}

/* Employee picker (the searchable list built in markup): same box, same panel */
.vp-form .search-dropdown-selected { display: flex; align-items: center; }
.vp-form .search-dropdown-arrow { display: none; }   /* the box draws the chevron */
.vp-form .search-dropdown.open .search-dropdown-selected {
    border-color: var(--vp-field-line-active);
    background-image: var(--vp-chevron-up);
}
.vp-form .search-dropdown-menu {
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-lg);
    background: var(--vp-surface);
    box-shadow: var(--vp-shadow-lg);
}
.vp-form .search-dropdown-search {
    gap: 10px;
    min-height: var(--vp-list-row-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--vp-line);
}
.vp-form .search-dropdown-search i { color: var(--vp-ink-3); font-size: 16px; }
.vp-form .search-dropdown-search input {
    min-width: 0;
    height: calc(var(--vp-list-row-h) - 2px);
    background: transparent;
    color: var(--vp-ink);
    font-family: inherit;
    font-size: 15px;
}
.vp-form .search-dropdown-list { max-height: var(--vp-list-max-h); }
.vp-form .search-dropdown-list li {
    display: flex;
    align-items: center;
    min-height: var(--vp-list-row-h);
    padding: 12px 16px;
    font-size: 15px;
    line-height: 24px;
    color: var(--vp-ink);
}
.vp-form .search-dropdown-list li:hover { background: var(--vp-surface-3); }
.vp-form .search-dropdown-list li.active { background: var(--vp-surface-2); font-weight: 500; }
.vp-form .search-dropdown-list li.no-results { justify-content: center; color: var(--vp-ink-3); font-style: normal; }
.vp-form .search-dropdown-hint {
    padding: 8px 16px;
    border-top: 1px solid var(--vp-line);
    font-size: 13px;
    color: var(--vp-ink-3);
}

/* ---- Existing / returning visitor: box + secondary Fetch button side by side ---- */
.vp-form .vp-lookup {
    flex-wrap: nowrap;
    gap: 8px;
}
.vp-form .vp-lookup > .form-control { border-radius: var(--vp-field-radius) !important; }   /* Bootstrap squares the inner corners of an input group */
.vp-form .vp-lookup > .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--vp-field-h);
    margin-inline-start: 0 !important;
    padding: 0 18px;
    border: 0;
    border-radius: var(--vp-radius-md) !important;
    background: var(--vp-surface);
    color: var(--vp-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: inset 0 -1px 0 #B5B5B5, inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 .5px 0 1.5px #FFFFFF;
}
.vp-form .vp-lookup > .btn.btn-primary:focus {
    background: var(--vp-surface);
    color: var(--vp-ink);
    box-shadow: inset 0 -1px 0 #B5B5B5, inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 .5px 0 1.5px #FFFFFF;
}
.vp-form .vp-lookup > .btn.btn-primary:hover {
    background: #F7F7F7;
    color: var(--vp-ink);
    box-shadow: inset 0 1px 0 #EBEBEB, inset -1px 0 0 #EBEBEB, inset 1px 0 0 #EBEBEB, inset 0 -1px 0 #CCCCCC;
}
.vp-form .vp-lookup > .btn.btn-primary:disabled { opacity: .6; }
.vp-form .vp-lookup > .btn span { display: inline-flex; align-items: center; gap: 6px; }

.vp-form .alert-warning {
    margin-top: 12px !important;
    margin-bottom: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--vp-radius-lg);
    background: #FFFBEB;                 /* amber-50 */
    color: var(--vp-amber-ink);
    font-size: 14px;
    line-height: 20px;
}
.vp-form .visitor-section small.text-muted {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--vp-ink-3) !important;
}

/* ---- ID copy: dashed drop area, uploaded files as rows ---- */
.vp-form .visitor-upload-area {
    padding: 28px 24px;
    border: 2px dashed var(--vp-line-strong);
    border-radius: var(--vp-radius-lg);
    background: var(--vp-surface-2);
    transition: border-color .15s ease, background-color .15s ease;
}
.vp-form .visitor-upload-area:hover,
.vp-form .visitor-upload-area.drag-over {
    border-color: var(--vp-focus);
    background: var(--vp-info-bg);
}
.vp-form .visitor-upload-area:focus-within { border-color: var(--vp-focus); }   /* keyboard focus on the hidden file input */

.vp-form .visitor-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-surface);
    box-shadow: 0 0 0 1px var(--vp-line);
    color: var(--vp-ink-2);
    font-size: 0;
}
.vp-form .visitor-upload-icon > i { display: none; }
.vp-form .visitor-upload-icon::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--vp-glyph-arrow-upload) center / contain no-repeat;
    mask: var(--vp-glyph-arrow-upload) center / contain no-repeat;
}
.vp-form .visitor-upload-text { margin-bottom: 2px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--vp-ink); }
.vp-form .visitor-upload-hint { font-size: 13px; line-height: 20px; color: var(--vp-ink-3); }

/* The file list sits ABOVE the invisible full-size file input, so Remove can be clicked */
.vp-form .vp-files {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 !important;
    text-align: start;
}
.vp-form .vp-file {
    min-height: 52px;
    margin: 0 !important;
    padding: 8px;
    padding-inline-start: 12px;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius-lg);
    background: var(--vp-surface);
}
.vp-form .vp-file .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: var(--vp-radius-full);
    background: var(--vp-surface-3) !important;
    color: var(--vp-ink-2);
    font-size: 12px;
}
.vp-form .vp-file-name {
    flex: 1;
    min-width: 0;
    max-width: none !important;          /* the guest page set 200px inline */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--vp-ink);
}
.vp-form .vp-file .btn-outline-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--vp-radius-md);
    background: transparent;
    color: #B91C1C;
}
.vp-form .vp-file .btn-outline-danger:hover { background: var(--vp-field-bg-error-hover); color: #B91C1C; }

/* ---- Submit: a white bar FIXED to the bottom of the screen (2026-10 bars, as the applicant
   portal's application form) - required-fields note at the start, the school-colour Submit at the
   end, both lined up with the form column (736px = the 760px column minus its 12px gutters).
   The bar is still inside the <form>, so Submit works exactly as before. ---- */
.vp-form .vp-form-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;                       /* under the header (1030), dropdown lists (1050), loader and toasts */
    display: flex !important;            /* was d-grid (full-width blue bar) */
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: 0 !important;
    padding: 12px max(var(--vp-gutter), calc((100% - 736px) / 2));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--vp-surface);
    border-top: 1px solid var(--vp-line);
    box-shadow: 0 -4px 12px -8px rgba(var(--vp-shadow-color), .12);
}

.vp-form .vp-form-note {
    margin: 0;
    margin-inline-end: auto;
    font-size: 13px;
    line-height: 18px;
    color: var(--vp-ink-3);
}

/* Room for the fixed bar, so the last card (and the guest page's footer) scroll clear of it.
   site.css's 60px body margin is for a footer these pages do not pin, so it gives way here. */
body:has(.vp-form-actions) {
    margin-bottom: 0;
    padding-bottom: calc(var(--vp-actionbar-h) + env(safe-area-inset-bottom, 0px));
}

/* Same column at every width: the form column is min(100%, 760px), so the bars line up with it */
.vp-form > .row > .col-lg-8 { flex: 0 0 100%; }
:is(.vp-form, .vp-login) .visitor-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--vp-radius-md);
    background: var(--vp-brand-primary);
    color: var(--vp-on-brand);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: normal;
    box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, .8),
                inset 0 0 0 1px var(--vp-brand-primary),
                inset 0 .5px 0 1.5px rgba(255, 255, 255, .25);
}
:is(.vp-form, .vp-login) .visitor-submit-btn:hover,
:is(.vp-form, .vp-login) .visitor-submit-btn:focus {
    background: color-mix(in srgb, var(--vp-brand-primary) 85%, #000000);
    color: var(--vp-on-brand);
    /* keep the button's own edges; site.css gives every focused .btn a blue ring (keyboard focus still gets the outline) */
    box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, .8),
                inset 0 0 0 1px var(--vp-brand-primary),
                inset 0 .5px 0 1.5px rgba(255, 255, 255, .25);
}
:is(.vp-form, .vp-login) .visitor-submit-btn:disabled { opacity: .6; }
:is(.vp-form, .vp-login) .visitor-submit-btn > i { display: none; }

/* ---- Loader while fetching / submitting ---- */
.vp-form .visitor-screen-loader { background: rgba(241, 241, 241, .7); }
.vp-form .visitor-screen-loader-content {
    padding: 24px 32px;
    border-radius: var(--vp-radius-xl);
    background: var(--vp-surface);
    box-shadow: var(--vp-shadow-lg);
    color: var(--vp-ink-2);
    font-size: 14px;
}
.vp-form .visitor-screen-loader .spinner-border { color: var(--vp-brand-primary) !important; }

/* ---- Phones and touch screens ---- */
@media (max-width: 767.98px), (pointer: coarse) {
    :root { --vp-field-h: 44px; --vp-list-row-h: 44px; }
    :is(.vp-form, .vp-login) .form-control,
    .vp-form .form-select { padding-block: 8px; font-size: 16px; }   /* 16px: iPhones do not zoom on focus */
}

@media (max-width: 767.98px) {
    :root { --vp-section-pad: 16px; --vp-section-gap: 12px; }

    .vp-form .visitor-card-header { font-size: 20px; line-height: 28px; }
    .vp-form .visitor-section-title { margin-bottom: 16px; font-size: 16px; line-height: 24px; }
    .vp-form .visitor-upload-area { padding: 20px 16px; }

    /* Phones: Submit fills the fixed bar; the note gives way (each required label has its red *) */
    .vp-form .vp-form-note { display: none; }
    :is(.vp-form, .vp-login) .visitor-submit-btn { width: 100%; }
}

/* ==========================================================================
   Toasts (2026-10) - toastr drawn as the applicant portal's toast: white card, Fluent status
   icon in the status colour, close button, top centre just under the header. Behaviour
   (times, limit, close button) is in wwwroot/app/toast-defaults.js. toastr's own sheet uses
   #toast-container and !important, so these rules use the same id and !important where it does.
   ========================================================================== */
#toast-container.toast-top-center {
    top: calc(var(--vp-header-h) + 12px);
    right: auto;
    left: 50%;
    width: calc(100% - 24px);
    max-width: 440px;
    transform: translateX(-50%);
    z-index: 10060;                      /* above the header, the account menu and the form's loading overlay (9999) */
}
/* Pages with the trail bar: toasts start under it, never over the trail */
body:has(.vp-subbar) #toast-container.toast-top-center { top: calc(var(--vp-header-h) + var(--vp-subbar-h) + 12px); }

#toast-container > div.toast {
    position: relative;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 12px 48px 12px 48px;       /* status icon at the start, close button at the end */
    border-radius: var(--vp-radius-lg);
    background-color: var(--vp-surface) !important;
    background-image: none !important;   /* toastr's own icons */
    box-shadow: var(--vp-shadow-lg) !important;
    color: var(--vp-ink);
    font-family: var(--vp-font);
    opacity: 1;
    --vp-toast-icon-color: var(--vp-focus);
    --vp-toast-glyph: var(--vp-glyph-info);
}
#toast-container > div.toast:hover {
    box-shadow: var(--vp-shadow-lg) !important;
    opacity: 1;
    cursor: default;
}
[dir="rtl"] #toast-container > div.toast { font-family: 'Cairo', var(--vp-font); }

/* visitor.rtl.css (a developers' change merged 2026-10-22) restores toastr's old dark look for
   Arabic with [dir="rtl"] #toast-container > .toast. The !important rules above already win for
   colour, width and shadow; [dir] lifts the corners and opacity above it too, in every language. */
[dir] #toast-container > div.toast,
[dir] #toast-container > div.toast:hover {
    border-radius: var(--vp-radius-lg);
    opacity: 1;
}

/* Status icon */
#toast-container > div.toast::before {
    content: "";
    position: absolute;
    top: 12px;
    inset-inline-start: 16px;
    width: 20px;
    height: 20px;
    background-color: var(--vp-toast-icon-color);
    -webkit-mask: var(--vp-toast-glyph) center / contain no-repeat;
    mask: var(--vp-toast-glyph) center / contain no-repeat;
}
#toast-container > div.toast-error   { --vp-toast-icon-color: #DC2626; --vp-toast-glyph: var(--vp-glyph-error-circle); }       /* red-600 */
#toast-container > div.toast-success { --vp-toast-icon-color: #16A34A; --vp-toast-glyph: var(--vp-glyph-checkmark-circle); }   /* green-600 */
#toast-container > div.toast-warning { --vp-toast-icon-color: #D97706; --vp-toast-glyph: var(--vp-glyph-warning); }            /* amber-600 */
#toast-container > div.toast-info    { --vp-toast-icon-color: var(--vp-focus); --vp-toast-glyph: var(--vp-glyph-info); }

#toast-container > div.toast .toast-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--vp-ink);
}
#toast-container > div.toast .toast-message {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--vp-ink);
    overflow-wrap: anywhere;
}

/* Close: a small icon button at the end edge */
#toast-container > div.toast > .toast-close-button {
    position: absolute;
    top: 8px;
    left: auto;
    right: auto;
    inset-inline-end: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--vp-radius-sm);
    background: transparent;
    color: var(--vp-ink-3);
    font-size: 0;
    opacity: 1;
    text-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}
#toast-container > div.toast > .toast-close-button::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--vp-glyph-dismiss) center / contain no-repeat;
    mask: var(--vp-glyph-dismiss) center / contain no-repeat;
}
#toast-container > div.toast > .toast-close-button:hover,
#toast-container > div.toast > .toast-close-button:focus {
    background: rgba(var(--vp-shadow-color), .06);
    color: var(--vp-ink);
    opacity: 1;
}

/* ==========================================================================
   Login (Views/Account/Login.cshtml, 2026-10 split layout - user's pick)
   Form on the start side (400px column, centred), the school's photo on the end side
   (Clients/{CLIENTINSTANCE}/img/login-hero.jpg, a brand-colour panel when there is none)
   with a "First time here? Book a visit" card on it. Below 992px: the form only.
   Fields, labels, error lines and the Sign in button share the booking form's rules
   (the :is(.vp-form, .vp-login) selectors above).
   ========================================================================== */
.vp-main-public:has(.vp-login) { padding: 0; }   /* the split fills the space between the bar and the footer */

.vp-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - var(--vp-header-h) - 46px);   /* 46px = the footer */
    background: var(--vp-surface);
}

.vp-login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.vp-login-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 400px;
}

.vp-login-head { display: flex; flex-direction: column; gap: 6px; }
.vp-login-title {
    margin: 0;
    font-family: inherit;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    color: var(--vp-ink);
}
.vp-login-sub { margin: 0; font-size: 15px; line-height: 24px; color: var(--vp-ink-2); }

.vp-login-form { display: flex; flex-direction: column; gap: 20px; }
.vp-login-field { display: flex; flex-direction: column; }

/* Two fields side by side (Register: first + last name); one column on phones */
.vp-login-row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 575.98px) {
    .vp-login-row2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.vp-link { color: var(--vp-link); font-size: 14px; font-weight: 500; text-decoration: none; }
.vp-link:hover { color: var(--vp-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* "Forgot password?" right under the password box, at its end edge (as the applicant portal) */
.vp-login-forgot { align-self: flex-end; margin-top: 8px; }

/* Password with a show / hide button inside the box */
.vp-password { position: relative; }
.vp-password .form-control { padding-inline-end: 52px; }
/* Arabic: visitor.rtl.css keeps password boxes left-to-right (so the typed characters read in order),
   which turns padding-inline-end into right padding - but the eye button sits on the left in Arabic.
   Reserve the left side instead, whether the box currently shows dots or text. */
[dir="rtl"] .vp-password .form-control { padding-left: 52px; padding-right: 14px; }
.vp-password-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--vp-radius-md);
    background: transparent;
    color: var(--vp-ink-3);
    cursor: pointer;
    transform: translateY(-50%);
    --vp-icon-size: 20px;
}
.vp-password-toggle:hover { background: var(--vp-surface-3); color: var(--vp-ink); }
.vp-password-toggle .vp-icon-eye-off,
.vp-password-toggle[aria-pressed="true"] .vp-icon-eye { display: none; }
.vp-password-toggle[aria-pressed="true"] .vp-icon-eye-off { display: inline-block; }

/* Keep me signed in */
.vp-login .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    margin: 0;
    padding: 0;
}
.vp-login .form-check .form-check-input {
    float: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid var(--vp-line-strong);
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
}
.vp-login .form-check .form-check-input:checked { border-color: var(--vp-focus); background-color: var(--vp-focus); }
.vp-login .form-check-label { font-size: 14px; line-height: 20px; color: var(--vp-ink-2); cursor: pointer; }

.vp-login .visitor-submit-btn { width: 100%; }

/* Server messages (wrong password, signed in) */
.vp-login .alert {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--vp-radius-lg);
    font-size: 14px;
    line-height: 20px;
}
.vp-login .alert-danger { background: var(--vp-field-bg-error-hover); color: var(--vp-red-ink); }
.vp-login .alert-success { background: #F0FDF4; color: var(--vp-green-ink); }   /* green-50 */

.vp-login-alt { margin: 0; font-size: 14px; line-height: 20px; color: var(--vp-ink-2); text-align: center; }
.vp-login-guest { display: none; margin: 0; text-align: center; }   /* phones only: the photo card has it on desktop */

/* The photo side */
.vp-login-hero {
    position: relative;
    margin: 16px;
    margin-inline-start: 0;
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(135deg, var(--vp-brand-primary), color-mix(in srgb, var(--vp-brand-primary) 55%, #000000));
    background-position: center;
    background-size: cover;
}
.vp-login-hero::after {            /* a soft shade at the bottom so the card sits on the photo */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 24, 39, .35), rgba(17, 24, 39, 0) 55%);
    pointer-events: none;
}

.vp-login-card {
    position: absolute;
    z-index: 1;
    bottom: 32px;
    inset-inline: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 380px;
    padding: 24px;
    border-radius: var(--vp-radius-xl);
    background: var(--vp-surface);
    box-shadow: var(--vp-shadow-lg);
}
.vp-login-card-title { margin: 0; font-family: inherit; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--vp-ink); }
.vp-login-card-text { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: var(--vp-ink-2); }

@media (max-width: 991.98px) {
    .vp-login { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .vp-login-hero { display: none; }
    .vp-login-guest { display: block; }
    .vp-login-main { align-items: flex-start; padding: 40px 16px 48px; }
    .vp-login-title { font-size: 24px; line-height: 32px; }
}

/* --------------------------------------------------------------------------
   Bottom tab bar (below 992px the top tabs move here)
   -------------------------------------------------------------------------- */
.vp-tabbar { display: none; }

@media (max-width: 991.98px) {
    .vp-hdr-nav,
    .vp-hdr-title { display: none; }

    .vp-tabbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: calc(var(--vp-tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--vp-surface);
        border-top: 1px solid var(--vp-line);
    }

    .vp-tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--vp-tabbar-h);
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        color: var(--vp-ink-2);
        text-decoration: none;
    }
    .vp-tabbar-item:hover { color: var(--vp-ink); }

    .vp-tabbar-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 28px;
        border-radius: var(--vp-radius-full);
    }

    .vp-tabbar-item[aria-current="page"] {
        color: var(--vp-ink);
        font-weight: 600;
    }
    .vp-tabbar-item[aria-current="page"] .vp-tabbar-pill { background: var(--vp-surface-4); }

    /* Room for the fixed tab bar under the last thing on the page.
       Off since the tab bar was parked (2026-10 home redesign); turn back on with it.
    .vp-main { padding-bottom: calc(var(--vp-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--vp-gutter)); }
    */
}

/* Phones */
@media (max-width: 575.98px) {
    :root {
        --vp-header-h: 60px;
        --vp-gutter: 16px;
    }

    .vp-hdr-inner { gap: 8px; }
    .vp-hdr-actions { gap: 8px; }

    .vp-hdr-logo { max-height: 36px; max-width: 120px; }
    .vp-hdr-school { max-width: 140px; font-size: 15px; }

    .vp-lang a { min-width: 44px; height: 36px; padding: 0 8px; font-size: 13px; }

    /* Three or more languages: show EN / AR / FR so the bar still fits */
    .vp-lang.vp-lang-many .vp-lang-full { display: none; }
    .vp-lang.vp-lang-many .vp-lang-short { display: inline; }

    .vp-btn { height: 40px; padding-inline: 12px; }

    .vp-main-public { padding: 16px 0 32px; }
}

/* Narrow phones (under 360px): logo smaller, languages as EN / AR so the bar stays one row */
@media (max-width: 359.98px) {
    .vp-hdr-logo { max-width: 100px; }
    .vp-hdr-school { max-width: 110px; }
    .vp-lang .vp-lang-full { display: none; }
    .vp-lang .vp-lang-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-avatar-btn { transition: none; }
}

/* ==========================================================================
   Portal identity (2026-10-24, user: "use brand colour accent")
   The visitor portal keeps every control of the shared design (fields, buttons, errors) and gets
   its own character from two things only:
   - an ACCENT = the school's own colour (--vp-brand-primary from Clients/{school}/clientstyle.css),
     used for identity pieces, never for actions: the "Visitor Portal" chip in the header, the
     avatar, the first-visit badge and the visit pass
   - the VISIT PASS: an Approved / Checked-in visit on My visits is drawn as a ticket - date tile in
     the accent, perforated stub with the reference (VB-00042); Checked in stamps the stub.
   Tints are mixed from the school colour, so every school gets its own without a new setting.
   ========================================================================== */
:root {
    --vp-accent-ink: var(--vp-brand-primary);                                       /* text / icons on the tints */
    --vp-accent-tint: color-mix(in srgb, var(--vp-brand-primary) 12%, #FFFFFF);     /* chips, tiles, avatar */
    --vp-accent-tint-2: color-mix(in srgb, var(--vp-brand-primary) 5%, #FFFFFF);    /* pass stub */
    --vp-pass-stub-w: 140px;
}

/* Header: "Visitor Portal" stays plain text after the thin divider (user, 2026-10-24: the coloured
   pill with the portal mark was dropped; the .vp-hdr-title rule in "Top bar" applies). */

.vp-avatar { background: var(--vp-accent-tint); color: var(--vp-accent-ink); }
.vp-empty-icon { background: var(--vp-accent-tint); color: var(--vp-accent-ink); border-radius: 18px; }

/* ---- Visit pass ---- */
.vp-request.vp-pass {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto var(--vp-pass-stub-w);
    grid-template-areas: "tile main status stub";
}
.vp-pass .vp-datetile { background: var(--vp-accent-tint); }
.vp-pass .vp-datetile-month,
.vp-pass .vp-datetile-day { color: var(--vp-accent-ink); }

.vp-pass-stub {
    grid-area: stub;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    margin-block: -16px;
    margin-inline-end: -20px;                 /* to the card's edges */
    padding: 16px 20px;
    border-inline-start: 2px dashed var(--vp-line);
    border-start-end-radius: var(--vp-radius-xl);
    border-end-end-radius: var(--vp-radius-xl);
    background: var(--vp-accent-tint-2);
}
.vp-pass-label { font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vp-accent-ink); }
.vp-pass-ref { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--vp-ink); font-variant-numeric: tabular-nums; direction: ltr; }
.vp-pass-stub .vp-btn { margin-top: 6px; }

.vp-pass-stamp {
    align-self: center;
    display: inline-flex;
    padding: 6px 10px;
    border: 2px solid var(--vp-accent-ink);
    border-radius: var(--vp-radius-md);
    color: var(--vp-accent-ink);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-8deg);
}

/* The two "punched" notches where the stub tears off */
.vp-request.vp-pass::before,
.vp-request.vp-pass::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(var(--vp-pass-stub-w) + 20px - 9px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--vp-bg);
}
.vp-request.vp-pass::before { top: -9px; }
.vp-request.vp-pass::after { bottom: -9px; }

/* Phones: the stub becomes a strip along the bottom of the card */
@media (max-width: 767.98px) {
    .vp-request.vp-pass {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "tile main"
            "status status"
            "stub stub";
    }
    .vp-pass-stub {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 12px;
        margin: 0 -16px -16px;
        padding: 12px 16px;
        border-inline-start: 0;
        border-top: 2px dashed var(--vp-line);
        border-radius: 0 0 var(--vp-radius-xl) var(--vp-radius-xl);
    }
    .vp-pass-stamp { align-self: flex-start; }
    .vp-request.vp-pass::before,
    .vp-request.vp-pass::after { display: none; }
}

/* ==========================================================================
   Sign-in layout (2026-10-24, _AuthLayout: Login, Register, Forgot / Reset password)
   No header bar and no footer: the split fills the whole screen. The form column carries the
   school logo + "Visitor Portal" + language switch at the top (_AuthTop), the form in the middle
   and the copyright line at the bottom (_AuthFoot); the photo panel runs the full height.
   ========================================================================== */
.vp-auth-page .vp-main-public { padding: 0; min-height: 0; }
.vp-auth-page .vp-login { min-height: 100vh; min-height: 100dvh; }

.vp-auth-page .vp-login-main {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
    padding: 24px 40px;
}
.vp-auth-page .vp-login-panel { align-self: center; margin-block: auto; }

.vp-auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
}
.vp-auth-top .vp-hdr-title { display: inline; }   /* the header hides it below 992px; here it stays */

.vp-auth-foot {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--vp-ink-3);
    text-align: center;
}

/* No header to sit under: toasts start near the top of the screen */
.vp-auth-page #toast-container.toast-top-center { top: 16px; }

@media (max-width: 991.98px) {
    .vp-auth-page .vp-login-main { padding: 16px; gap: 24px; }
}
@media (max-width: 575.98px) {
    .vp-auth-top .vp-hdr-title { display: none; }   /* phones: logo + language only */
}