/* =========================================================
   LF Dalarna · Besökshanterare — design primitives
   Aligned to LFDS tokens
   (https://www.lansforsakringar.se/Static/lfds/main.css)

   Embedding contract:
   - All custom properties + selectors are scoped under
     .lf-besokshanterare so this file can drop into the host
     LF site without bleeding into existing styles.
   - Yellow is reserved for warnings; never an active indicator.
   - The host page is responsible for body / html base styles,
     not us.
   ========================================================= */

/* Brand fonts — self-hosted to keep the embed bundle dependency-free.
 * IBM Plex Sans 400/500/600 + 400-italic mirrors the weights LFDS ships;
 * the visitor manager doesn't use 700 so we omit it.
 * Latin subset is sufficient for Swedish (å, ä, ö are in Latin-1 Supplement).
 */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-400-normal-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-500-normal-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-600-normal-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-400-italic-latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "LF Rubrik";
    src: url("/assets/fonts/lf-rubrik.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    font-kerning: normal;
}

.lf-besokshanterare {
    /* Brand */
    --lf-blue-100:  #F6FBFE;  /* hover surface */
    --lf-blue-200:  #E3F4FC;  /* selected / highlight surface */
    --lf-blue-300:  #B6E1F7;
    --lf-blue-700:  #005AA0;  /* primary brand */
    --lf-blue-800:  #00427A;  /* pressed */
    --lf-blue-900:  #00315C;
    --lf-blue-1000: #001629;

    /* State / status */
    --lf-red-100:    #FDEDED;
    --lf-red-500:    #E40523;
    --lf-green-100:  #E1EDDE;
    --lf-green-500:  #3E6237;
    --lf-yellow-100: #FFF7D6;  /* LFDS background-error */
    --lf-yellow-300: #FFD114;  /* brand accent yellow */
    --lf-yellow-400: #AD8C00;  /* warning border / icon */

    /* Neutrals */
    --lf-n-0:   #FFFFFF;
    --lf-n-50:  #FAFAFA;
    --lf-n-100: #F5F5F5;  /* disabled surface, panels */
    --lf-n-150: #E6E6E6;
    --lf-n-200: #D6D6D6;  /* default border */
    --lf-n-250: #C2C2C2;  /* hover border, disabled border */
    --lf-n-300: #7A7A7A;  /* muted text */
    --lf-n-350: #626262;  /* secondary text */
    --lf-n-450: #4D4D4D;
    --lf-n-550: #0F0F0F;  /* ink */

    /* Focus (keyboard only — LFDS standard) */
    --lf-focus-keyboard: #CA14BB;

    /* Radii / shadows — sourced from --lfds-semantic-sizes-radius-* */
    --lf-radius:    4px;   /* sm */
    --lf-radius-md: 8px;   /* md — default for buttons, inputs, cards */
    --lf-radius-lg: 12px;  /* l */
    --lf-radius-xl: 24px;  /* xl — modals, large surfaces */
    --lf-shadow-card: 0 1px 2px rgba(15, 15, 15, .04);

    /* Legacy aliases retained so nothing breaks */
    --lf-blue:       var(--lf-blue-700);
    --lf-blue-hover: var(--lf-blue-800);
    --lf-blue-tint:  var(--lf-blue-200);
    --lf-yellow:     var(--lf-yellow-300);
    --lf-panel:      var(--lf-n-100);
    --lf-panel-edge: var(--lf-n-200);
    --lf-border:     var(--lf-n-200);
    --lf-ink:        var(--lf-n-550);
    --lf-ink-soft:   var(--lf-n-450);
    --lf-muted:      var(--lf-n-300);

    /* Self-contained typography — host page's body font is irrelevant */
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    color: var(--lf-n-550);
    line-height: 1.5;
}

/* Keyboard-only focus ring scoped to the embed root.
   Mouse focus on inputs uses the per-component soft ring instead. */
.lf-besokshanterare :focus { outline: none; }
.lf-besokshanterare :focus-visible {
    outline: 2px solid var(--lf-focus-keyboard);
    outline-offset: 2px;
    border-radius: var(--lf-radius);
}

/* Tiny scoped reset — restores the parts of Tailwind preflight we
   actually need without leaking into the host page.
   - border-box: prevents inputs/buttons with width:100% + padding from
     overflowing their grid cells and visually colliding with neighbours
   - list-style: none on ul/ol since we use cards for separation, not bullets
*/
.lf-besokshanterare,
.lf-besokshanterare *,
.lf-besokshanterare *::before,
.lf-besokshanterare *::after {
    box-sizing: border-box;
}
.lf-besokshanterare ul,
.lf-besokshanterare ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* ---- Tabs ---- */
.lf-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 14px 16px;
    border-radius: var(--lf-radius-md);
    color: var(--lf-n-350);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    text-align: center;
}
.lf-tab:hover {
    background: var(--lf-blue-100);
    color: var(--lf-n-550);
}
.lf-tab-active {
    background: var(--lf-n-0);
    color: var(--lf-blue-700);
    box-shadow: var(--lf-shadow-card), 0 0 0 1px var(--lf-n-200);
}
.lf-tab-active:hover { background: var(--lf-n-0); }

/* ---- Section panel ---- */
.lf-section { border: 0; padding: 0; margin: 0; }
.lf-section-title {
    display: block;
    font-family: "LF Rubrik", Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--lf-blue-700);
    margin-bottom: 10px;
    padding: 0;
    letter-spacing: -0.005em;
}
.lf-section-body {
    background: var(--lf-n-100);
    border-radius: var(--lf-radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lf-section--no-bg .lf-section-body { background: transparent; padding: 0; }

/* ---- Fields ---- */
.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--lf-n-550);
}

.lf-input {
    appearance: none;
    width: 100%;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    line-height: 22px;
    color: var(--lf-n-550);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.lf-input::placeholder { color: var(--lf-n-300); }
.lf-input:hover:not(:disabled):not(.is-invalid) {
    border-color: var(--lf-blue-700);
    background: var(--lf-blue-100);
}
.lf-input:focus,
.lf-input:focus-visible {
    outline: none;
    border-color: var(--lf-blue-700);
    box-shadow: 0 0 0 3px rgba(0, 90, 160, .18);
    background: var(--lf-n-0);
}
.lf-input:focus-visible {
    /* Keyboard focus inherits the magenta outline globally — let it through. */
    outline: 2px solid var(--lf-focus-keyboard);
    outline-offset: 2px;
}
.lf-input:disabled {
    background: var(--lf-n-100);
    border-color: var(--lf-n-250);
    color: var(--lf-n-300);
    cursor: not-allowed;
}
.lf-input.is-invalid {
    border-color: var(--lf-red-500);
    background: var(--lf-red-100);
}
.lf-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(228, 5, 35, .18);
}

/* Tint native date/time pickers to LF blue */
.lf-input[type="date"]::-webkit-calendar-picker-indicator,
.lf-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(28%) sepia(99%) saturate(1565%) hue-rotate(186deg) brightness(94%);
    cursor: pointer;
}

/* Time-field root needs to anchor the absolute-positioned popover */
[data-time-field] { position: relative; }

/* The visible "input" is actually a button so we can fully control
   the picker UI. Style it to match .lf-input exactly + a clock icon. */
button.lf-time-display {
    text-align: left;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23005AA0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.5'/><path d='M8 4.5V8l2.2 1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 36px;
}
button.lf-time-display [data-time-display] { color: var(--lf-n-550); }
button.lf-time-display.is-empty [data-time-display] { color: var(--lf-n-300); }

/* ---- Custom time picker popover ---- */
.lf-time-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 25;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    box-shadow: 0 8px 24px rgba(15, 15, 15, .12);
    animation: lf-popover-in .15s ease;
}
.lf-time-divider {
    align-self: center;
    color: var(--lf-n-300);
    font-weight: 600;
    padding: 0 2px;
}
.lf-time-column {
    height: 220px;
    width: 56px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lf-n-250) transparent;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
}
.lf-time-column::-webkit-scrollbar { width: 6px; }
.lf-time-column::-webkit-scrollbar-thumb { background: var(--lf-n-250); border-radius: 3px; }
.lf-time-option {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 0;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-radius: var(--lf-radius);
    font: inherit;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--lf-n-550);
    transition: background-color .12s ease, color .12s ease;
    flex-shrink: 0;
}
.lf-time-option:hover { background: var(--lf-blue-100); }
.lf-time-option.is-selected {
    background: var(--lf-blue-700);
    color: var(--lf-n-0);
    font-weight: 600;
}
.lf-time-option.is-selected:hover { background: var(--lf-blue-800); }

/* ---- Custom date picker ---- */
[data-date-field] { position: relative; }

button.lf-date-display {
    position: relative;
    text-align: left;
    cursor: pointer;
    padding-right: 36px;
}
button.lf-date-display::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--lf-blue-700);
    -webkit-mask: url("/assets/Icons/date.svg") no-repeat center / 18px 18px;
            mask: url("/assets/Icons/date.svg") no-repeat center / 18px 18px;
    pointer-events: none;
}
button.lf-date-display [data-date-display] { color: var(--lf-n-550); }
button.lf-date-display.is-empty [data-date-display] { color: var(--lf-n-300); }

.lf-date-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 25;
    width: 280px;
    padding: 12px;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    box-shadow: 0 8px 24px rgba(15, 15, 15, .12);
    animation: lf-popover-in .15s ease;
}
.lf-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.lf-date-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lf-n-550);
    text-transform: capitalize;
}
.lf-date-nav {
    appearance: none;
    background: transparent;
    border: 0;
    width: 28px; height: 28px;
    border-radius: var(--lf-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--lf-blue-700);
}
.lf-date-nav:hover { background: var(--lf-blue-100); }
.lf-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.lf-date-weekday {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lf-n-300);
    text-align: center;
    padding: 4px 0;
}
.lf-date-cell {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--lf-radius);
    padding: 0;
    height: 32px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    color: var(--lf-n-550);
    font-variant-numeric: tabular-nums;
    transition: background-color .12s ease, color .12s ease;
}
.lf-date-cell:hover:not(:disabled) { background: var(--lf-blue-100); }
.lf-date-cell.is-other-month { color: var(--lf-n-250); }
.lf-date-cell.is-today { box-shadow: inset 0 0 0 1px var(--lf-blue-700); }
.lf-date-cell.is-selected {
    background: var(--lf-blue-700);
    color: var(--lf-n-0);
    font-weight: 600;
}
.lf-date-cell.is-selected:hover { background: var(--lf-blue-800); }
.lf-date-cell:disabled {
    color: var(--lf-n-200);
    cursor: not-allowed;
}
.lf-date-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--lf-n-150);
}

/* ---- Inline error text ---- */
.lf-error {
    color: var(--lf-red-500);
    font-size: 13px;
    line-height: 18px;
    margin: 0;
}

/* ---- Chip input ---- */
.lf-chip-input {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    padding: 6px 8px;
    min-height: 42px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lf-chip-input:hover { border-color: var(--lf-blue-700); background: var(--lf-blue-100); }
.lf-chip-input:focus-within {
    border-color: var(--lf-blue-700);
    background: var(--lf-n-0);
    box-shadow: 0 0 0 3px rgba(0, 90, 160, .18);
}
.lf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius);
    padding: 4px 8px;
    font-size: 14px;
    color: var(--lf-n-550);
}
.lf-chip-remove {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--lf-blue-700);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    border-radius: 3px;
    transition: background-color .15s ease;
}
.lf-chip-remove:hover { background: var(--lf-blue-200); }
.lf-chip-input-field {
    flex: 1 1 120px;
    min-width: 80px;
    border: 0;
    outline: none;
    font: inherit;
    font-size: 15px;
    padding: 4px 4px;
    background: transparent;
    color: var(--lf-n-550);
}

/* ---- Autocomplete ---- */
.lf-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    box-shadow: 0 8px 24px rgba(15, 15, 15, .10);
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
}
.lf-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    transition: background-color .12s ease;
}
.lf-autocomplete-item:hover,
.lf-autocomplete-item.is-active { background: var(--lf-blue-100); }
.lf-autocomplete-item .lf-ac-name  { font-weight: 500; color: var(--lf-n-550); }
.lf-autocomplete-item .lf-ac-email { font-size: 12px; color: var(--lf-n-300); }
.lf-autocomplete-empty {
    padding: 12px;
    text-align: center;
    color: var(--lf-n-300);
    font-size: 13px;
}

/* ---- Notice cards (avisering) ----
   All three cards share the same resting/hover/selected treatment.
   The "no-notification" card carries a yellow warning ICON only,
   not a full yellow background — yellow is reserved for warning
   semantics in LFDS, not for an "active" indicator. */
.lf-notice-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
    color: var(--lf-n-550);
    font-size: 15px;
    line-height: 22px;
}
.lf-notice-card:hover {
    background: var(--lf-blue-100);
    border-color: var(--lf-blue-700);
}
.lf-notice-card:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 90, 160, .18);
    border-color: var(--lf-blue-700);
}
.lf-notice-card.is-disabled {
    background: var(--lf-n-100);
    border-color: var(--lf-n-250);
    color: var(--lf-n-300);
    cursor: not-allowed;
}
.lf-notice-card.is-disabled:hover { background: var(--lf-n-100); }

.lf-notice-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lf-n-550);
    flex-shrink: 0;
}
.lf-notice-text { flex: 1; }

/* Selected state — applied via JS toggling .lf-notice-selected */
.lf-notice-selected {
    background: var(--lf-blue-200);
    border-color: var(--lf-blue-700);
    box-shadow: inset 0 0 0 1px var(--lf-blue-700);
}
.lf-notice-selected .lf-notice-icon { color: var(--lf-blue-700); }
.lf-notice-selected .lf-notice-text { color: var(--lf-blue-800); font-weight: 500; }

/* ---- Visitor row ---- */
.lf-visitor-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 1fr auto auto;
    gap: 12px;
    align-items: end;
}
@media (max-width: 900px) {
    .lf-visitor-row { grid-template-columns: 1fr 1fr; }
    .lf-visitor-row > .lf-field { min-width: 0; }
    .lf-visitor-row .lf-visitor-toggle,
    .lf-visitor-row .lf-visitor-remove { grid-column: span 1; align-self: center; }
}
.lf-visitor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--lf-n-450);
    height: 42px;
}
.lf-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--lf-n-250);
    border-radius: 999px;
    transition: background-color .15s ease;
    flex-shrink: 0;
}
.lf-toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--lf-n-0);
    border-radius: 999px;
    transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(15, 15, 15, .2);
}
.lf-visitor-toggle input { display: none; }
.lf-visitor-toggle:hover .lf-toggle { background: var(--lf-n-300); }
.lf-visitor-toggle input:checked + .lf-toggle { background: var(--lf-blue-700); }
.lf-visitor-toggle:hover input:checked + .lf-toggle { background: var(--lf-blue-800); }
.lf-visitor-toggle input:checked + .lf-toggle::after { transform: translateX(16px); }

.lf-visitor-remove {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--lf-n-300);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--lf-radius);
    height: 42px;
    transition: background-color .15s ease, color .15s ease;
}
.lf-visitor-remove:hover { color: var(--lf-blue-700); background: var(--lf-blue-200); }
/* Hide the remove button when the row is the only one — there's
   nothing to remove if it'd leave the form empty. */
.lf-visitor-row:only-child .lf-visitor-remove { display: none; }

/* Per-row inline errors sit absolutely in the gap below so they
   never push the row taller (which would knock the other inputs
   in the row out of alignment via `align-items: end`). */
.lf-visitor-row .lf-field { position: relative; }
.lf-visitor-row [data-row-error] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1;
}

/* ---- Buttons ---- */
.lf-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--lf-radius-md);
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    user-select: none;
}
.lf-btn:disabled {
    background: var(--lf-n-100);
    color: var(--lf-n-300);
    border-color: var(--lf-n-250);
    cursor: not-allowed;
    box-shadow: none;
}

.lf-btn-primary {
    background: var(--lf-blue-700);
    color: var(--lf-n-0);
    min-width: 96px;
}
.lf-btn-primary:hover:not(:disabled) { background: var(--lf-blue-800); }
.lf-btn-primary:active:not(:disabled) { background: var(--lf-blue-900); }

.lf-btn-secondary {
    background: var(--lf-n-0);
    color: var(--lf-blue-700);
    border-color: var(--lf-blue-700);
}
.lf-btn-secondary:hover:not(:disabled) { background: var(--lf-blue-100); }
.lf-btn-secondary:active:not(:disabled) { background: var(--lf-blue-200); }

.lf-btn-ghost {
    background: transparent;
    color: var(--lf-blue-700);
    padding: 6px 12px;
    border-color: transparent;
}
.lf-btn-ghost:hover:not(:disabled) { background: var(--lf-blue-100); }
.lf-btn-ghost:active:not(:disabled) { background: var(--lf-blue-200); }

.lf-btn-danger {
    background: var(--lf-n-0);
    color: var(--lf-red-500);
    border-color: var(--lf-red-500);
}
.lf-btn-danger:hover:not(:disabled) { background: var(--lf-red-100); }
.lf-btn-danger:active:not(:disabled) { background: var(--lf-red-100); }

/* Spinner inside primary button */
.lf-btn-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: var(--lf-n-0);
    border-radius: 999px;
    animation: lf-spin .7s linear infinite;
}
@keyframes lf-spin { to { transform: rotate(360deg); } }

/* ---- Search input (used in Kommande besök) ---- */
.lf-search {
    position: relative;
    width: 100%;
    max-width: 360px;
}
.lf-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--lf-n-300);
    pointer-events: none;
}
.lf-search-input {
    padding-left: 36px;
    padding-right: 36px;
}
.lf-search-input::-webkit-search-cancel-button { display: none; } /* using our own clear */
.lf-search-clear {
    appearance: none;
    background: transparent;
    border: 0;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: var(--lf-radius);
    color: var(--lf-n-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.lf-search-clear:hover { background: var(--lf-blue-100); color: var(--lf-blue-700); }

/* ---- Booking cards (entire card is the click target) ---- */
.lf-booking-card {
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lf-booking-card:hover {
    border-color: var(--lf-blue-700);
    background: var(--lf-blue-100);
    box-shadow: var(--lf-shadow-card);
}
.lf-booking-card:active { transform: translateY(1px); }
.lf-booking-card:hover .lf-booking-chevron {
    color: var(--lf-blue-700);
    transform: translateX(2px);
}
.lf-booking-chevron { transition: color .15s ease, transform .15s ease; }
.lf-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.lf-status-checked-in {
    background: var(--lf-blue-200);
    color: var(--lf-blue-800);
}
.lf-status-no-show {
    background: var(--lf-red-100);
    color: var(--lf-red-500);
}

/* Visual cue for a card whose visitor has checked in but not yet checked out */
.lf-booking-card.is-checked-in {
    background: var(--lf-blue-100);
    border-left: 4px solid var(--lf-blue-700);
    padding-left: 15px; /* compensate for thicker border */
}
.lf-booking-card.is-checked-in:hover { background: var(--lf-blue-200); }

/* Card-level Checka ut action — only visible on checked-in cards */
.lf-booking-card .lf-card-checkout-btn { display: none; }
.lf-booking-card.is-checked-in .lf-card-checkout-btn {
    display: inline-flex;
    align-self: center;
    flex-shrink: 0;
}
.lf-booking-card.is-checked-in .lf-booking-chevron { display: none; }

/* ---- Empty state ---- */
.lf-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--lf-n-100);
    border-radius: var(--lf-radius-md);
}

/* ---- Popover (anchored, used by the bulk-add-visitor picker) ---- */
.lf-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 25;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-radius: var(--lf-radius-md);
    padding: 16px;
    min-width: 320px;
    box-shadow: 0 8px 24px rgba(15, 15, 15, .12);
    animation: lf-popover-in .15s ease;
}
@keyframes lf-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Modal (booking detail) ---- */
.lf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
    animation: lf-modal-bg-in .15s ease;
}
.lf-modal {
    background: var(--lf-n-0);
    border-radius: var(--lf-radius-lg);
    box-shadow: 0 20px 60px rgba(15, 15, 15, .25);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lf-modal-in .18s ease;
}
.lf-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--lf-n-150);
}
.lf-modal-title {
    font-family: "LF Rubrik", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--lf-blue-700);
    line-height: 1.2;
    margin: 0 0 8px;
}
.lf-modal-close {
    appearance: none;
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--lf-radius);
    color: var(--lf-n-450);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}
.lf-modal-close:hover { background: var(--lf-n-100); color: var(--lf-n-550); }
.lf-modal-body {
    padding: 8px 24px 16px;
    overflow-y: auto;
    flex: 1;
}
.lf-modal-section { padding: 14px 0; border-bottom: 1px solid var(--lf-n-150); }
.lf-modal-section:last-child { border-bottom: 0; }
.lf-modal-section h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lf-n-350);
    margin: 0 0 8px;
}
.lf-modal-section p { margin: 0; font-size: 15px; line-height: 22px; color: var(--lf-n-550); }

.lf-modal-visitors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lf-modal-visitor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--lf-n-50);
    border: 1px solid var(--lf-n-150);
    border-radius: var(--lf-radius);
}
.lf-modal-visitor-name { font-weight: 500; font-size: 14px; color: var(--lf-n-550); }
.lf-modal-visitor-meta { font-size: 13px; color: var(--lf-n-350); margin-top: 2px; }
.lf-modal-visitor-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lf-blue-200);
    color: var(--lf-blue-800);
    flex-shrink: 0;
    margin-top: 1px;
}

.lf-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--lf-n-150);
    background: var(--lf-n-50);
}

/* Confirmation variant — narrower, no header/close, centred icon + summary */
.lf-modal-narrow { max-width: 440px; }
.lf-modal-success-icon {
    display: flex;
    justify-content: center;
    padding: 28px 0 4px;
}
.lf-modal-success-icon svg {
    width: 56px;
    height: 56px;
    color: var(--lf-n-0);
    background: var(--lf-green-500);
    border-radius: 999px;
    padding: 14px;
}
.lf-modal-confirm-body { padding: 8px 24px 20px; text-align: center; }
.lf-modal-confirm-title {
    font-family: "LF Rubrik", Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--lf-blue-700);
    margin: 8px 0 4px;
}
.lf-modal-confirm-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--lf-n-550);
    margin: 0 0 16px;
}
.lf-modal-confirm-grid {
    text-align: left;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    background: var(--lf-n-50);
    border: 1px solid var(--lf-n-150);
    border-radius: var(--lf-radius);
    padding: 14px 16px;
}
.lf-modal-confirm-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-modal-confirm-grid dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lf-n-350);
}
.lf-modal-confirm-grid dd {
    margin: 0;
    font-size: 14px;
    color: var(--lf-n-550);
    word-break: break-word;
}

@keyframes lf-modal-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lf-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Toast ---- */
.lf-toast {
    pointer-events: auto;
    background: var(--lf-n-0);
    border: 1px solid var(--lf-n-200);
    border-left: 4px solid var(--lf-blue-700);
    border-radius: var(--lf-radius-md);
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(15, 15, 15, .10);
    min-width: 280px;
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: lf-toast-in .2s ease;
}
.lf-toast--success { border-left-color: var(--lf-green-500); }
.lf-toast--error   { border-left-color: var(--lf-red-500); }
.lf-toast-title { font-weight: 600; font-size: 14px; color: var(--lf-n-550); }
.lf-toast-body  { font-size: 13px; color: var(--lf-n-450); margin-top: 2px; }
@keyframes lf-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Visually hidden ---- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}