/*
 * IkokoHub admin design system - the component layer.
 *
 * Loaded straight after ikokohub.css (layouts/partials/css.blade.php), which owns the
 * colour tokens (--lh-*) and the restyle of the legacy Bootstrap/AdminLTE base classes.
 * This file adds the non-colour tokens and the lh-* components that new screens and the
 * Blade components in resources/views/components/ui/ are built from.
 * Reference: .ai/rules/admin-ui.md. Same three-state theme contract as ikokohub.css:
 * a new colour goes on :root AND in both dark blocks.
 */

:root {
    /* Brand constants, for decoration only - text colours come from the --lh-*-fg pairs. */
    --lh-ink: #14110F;
    --lh-jollof: #E8552D;
    --lh-jollof-bright: #F06A43;
    --lh-palm: #F2B33D;
    --lh-leaf: #DCEFE2;
    --lh-pepper: #B42318;

    /* Jollof as a tone: small text needs the darker fg (brand: Jollof on cream is large-only). */
    --lh-accent-fg: #A63A17;
    --lh-accent-bg: #FDE9E2;
    --lh-neutral-fg: #5E564D;
    --lh-neutral-bg: #F4EEE3;

    /* Spacing: 4px steps */
    --lh-space-1: 4px;
    --lh-space-2: 8px;
    --lh-space-3: 12px;
    --lh-space-4: 16px;
    --lh-space-5: 20px;
    --lh-space-6: 24px;
    --lh-space-8: 32px;
    --lh-space-10: 40px;

    --lh-radius-sm: 6px;
    --lh-radius-xl: 16px;
    --lh-radius-pill: 999px;

    /* Type scale */
    --lh-fs-xs: 11px;
    --lh-fs-sm: 12.5px;
    --lh-fs-base: 13.5px;
    --lh-fs-md: 15px;
    --lh-fs-lg: 18px;
    --lh-fs-xl: 22px;
    --lh-fs-2xl: 28px;
    --lh-fs-3xl: 34px;

    --lh-ease: cubic-bezier(.2, .7, .2, 1);
    --lh-duration: .16s;

    --lh-control-h: 38px;
    --lh-control-h-sm: 32px;
    --lh-tap: 44px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lh-accent-fg: #FF9C7A;
        --lh-accent-bg: rgba(255, 156, 122, .13);
        --lh-neutral-fg: #C4BBAE;
        --lh-neutral-bg: rgba(255, 255, 255, .07);
    }
}

:root[data-theme="dark"] {
    --lh-accent-fg: #FF9C7A;
    --lh-accent-bg: rgba(255, 156, 122, .13);
    --lh-neutral-fg: #C4BBAE;
    --lh-neutral-bg: rgba(255, 255, 255, .07);
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visually hidden but read by screen readers */
.lh-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.lh-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- page header */

.lh-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--lh-space-3) var(--lh-space-4);
}
section.content-header.lh-page-header { padding: 22px 24px 6px; }
.lh-page-header__main { min-width: 0; flex: 1 1 280px; }
.lh-page-header__title,
section.content-header.lh-page-header > .lh-page-header__main > h1 {
    margin: 0;
    font-family: var(--lh-display);
    font-size: var(--lh-fs-3xl) !important;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--lh-text) !important;
    text-wrap: balance;
}
.lh-page-header__subtitle {
    margin: 6px 0 0;
    font-size: var(--lh-fs-base);
    font-weight: 500;
    color: var(--lh-text-muted);
    max-width: 70ch;
}
.lh-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lh-space-2);
}

.lh-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    font-size: var(--lh-fs-sm);
    font-weight: 600;
    color: var(--lh-text-faint);
}
.lh-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.lh-crumbs li + li::before {
    content: "";
    width: 5px; height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .6;
}
.lh-crumbs a { color: var(--lh-text-muted); text-decoration: none; }
.lh-crumbs a:hover { color: var(--lh-gold-ink); text-decoration: underline; }
.lh-crumbs [aria-current="page"] { color: var(--lh-text-faint); }

@media (max-width: 767px) {
    section.content-header.lh-page-header { padding: 16px 16px 4px; }
    .lh-page-header__title,
    section.content-header.lh-page-header > .lh-page-header__main > h1 { font-size: var(--lh-fs-2xl) !important; }
    .lh-page-header__actions { width: 100%; }
    .lh-page-header__actions > .lh-btn,
    .lh-page-header__actions > .btn { flex: 1 1 auto; }
}

/* -------------------------------------------------------------- cards */

.lh-card {
    background-color: var(--lh-surface);
    color: var(--lh-text);
    border: 1px solid var(--lh-line);
    border-radius: var(--lh-radius-lg);
    box-shadow: var(--lh-shadow-card);
    margin-bottom: var(--lh-space-4);
    min-width: 0;
}
.lh-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lh-space-2) var(--lh-space-3);
    padding: 14px 18px;
    border-bottom: 1px solid var(--lh-line-soft);
}
.lh-card__title {
    margin: 0;
    font-family: var(--lh-display);
    font-size: var(--lh-fs-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--lh-text);
}
.lh-card__subtitle { margin: 2px 0 0; font-size: var(--lh-fs-sm); color: var(--lh-text-muted); }
.lh-card__actions { display: flex; flex-wrap: wrap; gap: var(--lh-space-2); }
.lh-card__body { padding: 18px; }
.lh-card__footer {
    padding: 12px 18px;
    border-top: 1px solid var(--lh-line-soft);
    background-color: var(--lh-surface-2);
    border-radius: 0 0 var(--lh-radius-lg) var(--lh-radius-lg);
}
.lh-card--flush > .lh-card__body { padding: 0; }
.lh-card--tint { background-color: var(--lh-tint); border-color: var(--lh-gold-line); }

@media (max-width: 575px) {
    .lh-card__header { padding: 12px 14px; }
    .lh-card__body { padding: 14px; }
    .lh-card__footer { padding: 10px 14px; }
}

/* components.widget: the legacy card every index screen is wrapped in. */
.lh-widget { border-radius: var(--lh-radius-lg); }
.lh-widget > .tw-p-2 > .box-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lh-space-2) var(--lh-space-3);
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--lh-line-soft);
    margin-bottom: 4px;
}
.lh-widget > .tw-p-2 > .box-header > .box-title { font-size: var(--lh-fs-lg); font-weight: 700; flex: 1 1 auto; }
.lh-widget > .tw-p-2 > .box-header > .box-tools { position: static; margin-left: auto; }
@media (max-width: 575px) {
    .lh-widget > .tw-p-2 { padding: 6px; }
}

/* --------------------------------------------------------- stat tiles */

.lh-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1279px) { .lh-stat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    .lh-stat-grid, .lh-stat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 379px) {
    .lh-stat-grid, .lh-stat-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.lh-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: var(--lh-shadow-card);
}
.lh-stat__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lh-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background-color: var(--lh-gold-tint);
    color: var(--lh-gold-ink);
}
.lh-stat__icon svg { width: 18px; height: 18px; }
.lh-stat__meta { margin-top: 6px; font-size: var(--lh-fs-sm); color: var(--lh-text-muted); }
.lh-stat--jollof .lh-stat__icon { background-color: var(--lh-accent-bg); color: var(--lh-accent-fg); }
.lh-stat--gold .lh-stat__icon { background-color: var(--lh-warning-bg); color: var(--lh-warning-fg); }
.lh-stat--pepper .lh-stat__icon { background-color: var(--lh-danger-bg); color: var(--lh-danger-fg); }
.lh-stat--neutral .lh-stat__icon { background-color: var(--lh-neutral-bg); color: var(--lh-neutral-fg); }
.lh-stat--accent { box-shadow: inset 3px 0 0 var(--lh-gold), var(--lh-shadow-card); }

.lh-stat-group + .lh-stat-group { margin-top: var(--lh-space-5); }
.lh-stat-group__title {
    margin: 0 0 10px;
    font-size: var(--lh-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lh-text-faint);
}

@media (max-width: 575px) {
    .lh-stat { padding: 12px 14px; }
    .lh-stat__value { font-size: 20px; }
    .lh-stat__icon { width: 28px; height: 28px; }
}

/* ------------------------------------------------------------- tables */

.lh-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--lh-line);
    border-radius: var(--lh-radius-lg);
    background-color: var(--lh-surface);
}
.lh-table-wrap > table.table { margin-bottom: 0; }
.lh-card--flush .lh-table-wrap { border: 0; border-radius: 0 0 var(--lh-radius-lg) var(--lh-radius-lg); }

/* Tables scroll inside their own box; the page never scrolls sideways. */
.table-responsive { border: 0; }
@media (max-width: 767px) {
    .table-responsive,
    .dataTables_wrapper .dataTables_scrollBody { -webkit-overflow-scrolling: touch; }
    .dataTables_wrapper > .row:not(:first-child) > div[class*="col-"] { overflow-x: auto; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; max-width: 220px; margin-left: 6px; }
    .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; margin-top: 8px; }
    .dataTables_wrapper .dataTables_info { text-align: center; }
    .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
    .dataTables_wrapper .dt-buttons .dt-button,
    .dataTables_wrapper .dt-buttons .btn { margin-right: 0; }
}

/* Status labels DataTables columns render as AdminLTE bg-* spans become soft pills. */
.label.bg-green, .badge.bg-green, span.bg-green.label, .label-success { background-color: var(--lh-success-bg) !important; color: var(--lh-success-fg) !important; }
.label.bg-yellow, .badge.bg-yellow, .label.bg-orange, .badge.bg-orange { background-color: var(--lh-warning-bg) !important; color: var(--lh-warning-fg) !important; }
.label.bg-red, .badge.bg-red { background-color: var(--lh-danger-bg) !important; color: var(--lh-danger-fg) !important; }
.label.bg-info, .label.bg-aqua, .label.bg-light-blue, .label.bg-blue,
.badge.bg-info, .badge.bg-aqua, .badge.bg-light-blue, .badge.bg-blue { background-color: var(--lh-info-bg) !important; color: var(--lh-info-fg) !important; }
.label.bg-gray, .label-default, .badge.bg-gray { background-color: var(--lh-neutral-bg) !important; color: var(--lh-neutral-fg) !important; }
.label, .badge { border-radius: var(--lh-radius-pill); padding: 3px 9px; line-height: 1.4; }

/* Row action menus in tables */
table .btn-group .dropdown-toggle.btn-xs,
table .btn-xs { border-radius: var(--lh-radius-sm); padding: 3px 9px; font-size: 12px; }

/* ------------------------------------------------------------- forms */

.lh-field { margin-bottom: var(--lh-space-4); min-width: 0; }
.lh-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lh-text);
}
.lh-field__label .lh-req { color: var(--lh-danger-fg); margin-left: 2px; }
.lh-field__help, .help-block {
    display: block;
    margin-top: 5px;
    font-size: var(--lh-fs-sm);
    line-height: 1.45;
    color: var(--lh-text-muted);
}
.lh-field__error {
    display: block;
    margin-top: 5px;
    font-size: var(--lh-fs-sm);
    font-weight: 600;
    color: var(--lh-danger-fg);
}

/* Validation: Bootstrap's has-* plus jQuery Validate's .error classes */
.lh-field--error .form-control,
.form-control.is-invalid,
.form-control.error,
.has-error .select2-container--default .select2-selection { border-color: var(--lh-danger-fg) !important; }
.lh-field--error .form-control:focus,
.form-control.is-invalid:focus,
.form-control.error:focus { box-shadow: 0 0 0 3px var(--lh-danger-bg); }
label.error, span.error, .invalid-feedback {
    display: block;
    margin-top: 5px;
    font-size: var(--lh-fs-sm);
    font-weight: 600;
    color: var(--lh-danger-fg);
}
.has-success .form-control, .form-control.is-valid { border-color: var(--lh-success-fg); }
.has-success .help-block { color: var(--lh-success-fg); }
.has-warning .form-control { border-color: var(--lh-warning-fg); }
.has-warning .help-block { color: var(--lh-warning-fg); }
.has-error .control-label, .has-success .control-label, .has-warning .control-label { color: var(--lh-text); }

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%237A7168' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}
select.form-control[multiple], select.form-control[size] { background-image: none; padding-right: 11px; }

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: var(--lh-radius-pill); padding: 1px 9px; }
.select2-container { max-width: 100%; }

/* select2 dropdown, every instance: rounded panel, soft row hover, check on the chosen row, styled search.
   Skin only; select2 itself and its JS hooks are untouched. Surfaces follow the theme tokens (light and dark). */
.select2-container--open .select2-dropdown { margin-top: 4px; padding: 6px; border: 0; border-radius: var(--lh-radius-lg); background-color: var(--lh-surface); box-shadow: 0 0 0 1px var(--lh-line), var(--lh-shadow-pop); overflow: hidden; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }
.select2-container--default .select2-search--dropdown { padding: 0 0 6px; }
.select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 10px; border: 0; border-radius: var(--lh-radius); background-color: var(--lh-surface-2); box-shadow: inset 0 0 0 1px var(--lh-line); color: var(--lh-text); font-size: 13px; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lh-gold); }
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; }
.select2-container--default .select2-results__option { position: relative; margin: 1px 0; padding: 8px 32px 8px 10px; border-radius: var(--lh-radius-sm); font-size: 13px; transition: background-color var(--lh-duration) var(--lh-ease); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--lh-tint); color: var(--lh-text); }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected { background-color: transparent; color: var(--lh-gold-ink); font-weight: 600; }
.select2-container--default .select2-results__option[aria-selected=true]::after,
.select2-container--default .select2-results__option--selected::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10-10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.select2-container--default .select2-results__group { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.select2-container--default .select2-results__message { padding: 8px 10px; color: var(--lh-text-muted); }
@media (prefers-reduced-motion: reduce) {
    .select2-container--default .select2-results__option { transition: none; }
}

/* Phone: one comfortable column, 16px text so iOS does not zoom on focus. */
@media (max-width: 767px) {
    .form-control,
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .dataTables_wrapper .dataTables_filter input { font-size: 16px; }
    .form-control, .select2-container--default .select2-selection--single { min-height: 42px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
}

/* -------------------------------------------------------- switch (toggle) */

.lh-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
}
.lh-switch__input {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 26px;
    margin: 0;
    cursor: pointer;
}
.lh-switch__track {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: var(--lh-radius-pill);
    background-color: var(--lh-line);
    box-shadow: inset 0 0 0 1px rgba(20, 17, 15, .08);
    transition: background-color var(--lh-duration) var(--lh-ease);
}
.lh-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(20, 17, 15, .3);
    transition: transform var(--lh-duration) var(--lh-ease);
}
.lh-switch__input:checked + .lh-switch__track { background-color: var(--lh-gold); }
.lh-switch__input:checked + .lh-switch__track::after { transform: translateX(18px); }
.lh-switch__input:focus-visible + .lh-switch__track { outline: 2px solid var(--lh-focus); outline-offset: 2px; }
.lh-switch__input:disabled,
.lh-switch__input:disabled + .lh-switch__track { cursor: not-allowed; opacity: .55; }
[dir="rtl"] .lh-switch__track::after { left: auto; right: 3px; }
[dir="rtl"] .lh-switch__input:checked + .lh-switch__track::after { transform: translateX(-18px); }

/* ------------------------------------------------------- toggle cards */

.lh-toggle-group + .lh-toggle-group { margin-top: var(--lh-space-6); }
.lh-toggle-group__head { margin-bottom: var(--lh-space-3); }
.lh-toggle-group__title {
    margin: 0;
    font-family: var(--lh-display);
    font-size: var(--lh-fs-lg);
    font-weight: 700;
    color: var(--lh-text);
}
.lh-toggle-group__desc { margin: 2px 0 0; font-size: var(--lh-fs-sm); color: var(--lh-text-muted); }

.lh-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.lh-toggle-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--lh-line);
    border-radius: var(--lh-radius-lg);
    background-color: var(--lh-surface);
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--lh-duration) var(--lh-ease), background-color var(--lh-duration) var(--lh-ease);
}
.lh-toggle-card:hover { border-color: var(--lh-gold-line); }
.lh-toggle-card:has(.lh-switch__input:checked) {
    border-color: var(--lh-gold-line);
    background-color: var(--lh-tint);
}
.lh-toggle-card:has(.lh-switch__input:focus-visible) { outline: 2px solid var(--lh-focus); outline-offset: 2px; }
.lh-toggle-card__body { flex: 1 1 auto; min-width: 0; }
.lh-toggle-card__title {
    display: block;
    font-size: var(--lh-fs-base);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lh-text);
}
.lh-toggle-card__desc {
    display: block;
    margin-top: 3px;
    font-size: var(--lh-fs-sm);
    line-height: 1.45;
    color: var(--lh-text-muted);
}
.lh-toggle-card .lh-switch { margin-top: 1px; }
.lh-toggle-card--locked { cursor: not-allowed; background-color: var(--lh-surface-2); border-style: dashed; }
.lh-toggle-card--locked:hover { border-color: var(--lh-line); }
.lh-toggle-card--locked .lh-toggle-card__title { color: var(--lh-text-muted); }
.lh-toggle-card__lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: var(--lh-fs-sm);
    font-weight: 700;
    color: var(--lh-accent-fg);
    text-decoration: none;
}
.lh-toggle-card__lock svg { width: 14px; height: 14px; }
a.lh-toggle-card__lock:hover { color: var(--lh-accent-fg); text-decoration: underline; }

/* ------------------------------------------------------------- buttons */

.lh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--lh-control-h);
    padding: 8px 16px;
    border: 1px solid var(--lh-line);
    border-radius: var(--lh-radius);
    background-color: var(--lh-surface);
    color: var(--lh-text);
    font-family: var(--lh-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--lh-duration) var(--lh-ease), border-color var(--lh-duration) var(--lh-ease), color var(--lh-duration) var(--lh-ease);
}
.lh-btn:hover, .lh-btn:focus { text-decoration: none; background-color: var(--lh-tint); border-color: var(--lh-gold-line); color: var(--lh-text); }
.lh-btn:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 2px; }
.lh-btn svg { width: 17px; height: 17px; flex: none; }
.lh-btn--primary { background-color: var(--lh-gold); border-color: var(--lh-gold-deep); color: var(--lh-btn-ink); }
.lh-btn--primary:hover, .lh-btn--primary:focus { background-color: var(--lh-gold-bright); border-color: var(--lh-gold-deep); color: var(--lh-btn-ink); }
/* Jollof carries ink text: white on Jollof is 3.6:1 (brand guide). */
.lh-btn--accent { background-color: var(--lh-jollof); border-color: #C8431F; color: var(--lh-ink); }
.lh-btn--accent:hover, .lh-btn--accent:focus { background-color: var(--lh-jollof-bright); border-color: #C8431F; color: var(--lh-ink); }
.lh-btn--ghost { background-color: transparent; border-color: transparent; color: var(--lh-gold-ink); }
.lh-btn--ghost:hover, .lh-btn--ghost:focus { background-color: var(--lh-gold-tint); border-color: transparent; color: var(--lh-gold-ink); }
.lh-btn--danger { background-color: var(--lh-surface); border-color: var(--lh-danger-fg); color: var(--lh-danger-fg); }
.lh-btn--danger:hover, .lh-btn--danger:focus { background-color: var(--lh-danger-bg); border-color: var(--lh-danger-fg); color: var(--lh-danger-fg); }
.lh-btn--sm { min-height: var(--lh-control-h-sm); padding: 5px 11px; font-size: 12.5px; }
.lh-btn--lg { min-height: 46px; padding: 11px 22px; font-size: 15px; }
.lh-btn--icon { width: var(--lh-control-h); padding: 0; }
.lh-btn--block { display: flex; width: 100%; }
.lh-btn[disabled], .lh-btn.is-disabled {
    background-color: var(--lh-btn-disabled-bg);
    border-color: var(--lh-line);
    color: var(--lh-btn-disabled-fg);
    cursor: not-allowed;
    pointer-events: none;
}

/* Bootstrap buttons the legacy screens still use */
.btn-success { background-color: var(--lh-gold); border-color: var(--lh-gold-deep); color: var(--lh-btn-ink); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--lh-gold-bright); border-color: var(--lh-gold-deep); color: var(--lh-btn-ink); }
.btn-danger { background-color: var(--lh-pepper); border-color: #912018; color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: #912018; border-color: #7A271A; color: #fff; }
.btn-warning { background-color: var(--lh-palm); border-color: #D69A28; color: var(--lh-ink); }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: #F5C25E; border-color: #D69A28; color: var(--lh-ink); }
.btn-xs { border-radius: var(--lh-radius-sm); }
.btn-lg { padding: 10px 20px; font-size: 15px; }
.btn-flat { border-radius: var(--lh-radius); }

/* ----------------------------------------------------- badges and pills */

.lh-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--lh-radius-pill);
    background-color: var(--lh-neutral-bg);
    color: var(--lh-neutral-fg);
    font-size: var(--lh-fs-xs);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: middle;
}
.lh-badge--success { background-color: var(--lh-success-bg); color: var(--lh-success-fg); }
.lh-badge--warning { background-color: var(--lh-warning-bg); color: var(--lh-warning-fg); }
.lh-badge--danger { background-color: var(--lh-danger-bg); color: var(--lh-danger-fg); }
.lh-badge--info { background-color: var(--lh-info-bg); color: var(--lh-info-fg); }
.lh-badge--accent { background-color: var(--lh-accent-bg); color: var(--lh-accent-fg); }
.lh-badge--solid { background-color: var(--lh-gold); color: var(--lh-btn-ink); }
/* A status pill: a badge with a leading dot. */
.lh-badge--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* The count bubble on a chrome icon (notifications). */
.lh-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--lh-radius-pill);
    background-color: var(--lh-jollof);
    color: var(--lh-ink);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--lh-chrome);
}
.lh-count:empty { display: none; }

/* ---------------------------------------------------------------- tabs */

.lh-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.lh-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
/* Legacy tab strips swipe on phones instead of stacking; desktop keeps Bootstrap's
   floats so tab dropdown menus are not clipped by an overflow box. */
@media (max-width: 767px) {
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .nav-tabs > li { float: none; flex: none; }
    .nav-tabs::before, .nav-tabs::after { display: none; }
}
.lh-tabs {
    gap: 4px;
    margin: 0 0 var(--lh-space-4);
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--lh-line);
}
.lh-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--lh-text-muted);
    font-size: var(--lh-fs-base);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.lh-tabs__tab:hover { color: var(--lh-text); text-decoration: none; border-bottom-color: var(--lh-line); }
.lh-tabs__tab[aria-selected="true"], .lh-tabs__tab.is-active {
    color: var(--lh-text);
    border-bottom-color: var(--lh-gold-deep);
}

/* AdminLTE's boxed tab container */
.nav-tabs-custom {
    background-color: var(--lh-surface);
    border: 1px solid var(--lh-line);
    border-radius: var(--lh-radius-lg);
    box-shadow: var(--lh-shadow-card);
}
.nav-tabs-custom > .nav-tabs { border-bottom-color: var(--lh-line); padding: 0 8px; }
.nav-tabs-custom > .nav-tabs > li { border-top: 0; margin-bottom: -1px; }
.nav-tabs-custom > .nav-tabs > li > a { color: var(--lh-text-muted); }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: transparent; }
.nav-tabs-custom > .nav-tabs > li.active > a { color: var(--lh-text); background-color: transparent; }
.nav-tabs-custom > .tab-content { background-color: transparent; padding: 16px; }

/* Settings tab shells (business settings, POS settings): a side list on desktop,
   a swipeable chip row on phones. The tab JS only reads .list-group > a order. */
div.pos-tab-container {
    background-color: transparent;
    border: 0;
    border-radius: var(--lh-radius-lg);
    padding: 0;
}
div.pos-tab-menu { padding-right: 0; }
div.pos-tab-menu div.list-group { margin-bottom: 0; }
div.pos-tab-menu div.list-group > a {
    display: block;
    margin: 0 0 2px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--lh-radius);
    background-color: transparent;
    color: var(--lh-text-muted);
    font-size: var(--lh-fs-base) !important;
    font-weight: 600 !important;
    text-align: left !important;
}
div.pos-tab-menu div.list-group > a:hover { background-color: var(--lh-tint); color: var(--lh-text); }
div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active:hover,
div.pos-tab-menu div.list-group > a.active:focus {
    background-color: var(--lh-gold-tint);
    background-image: none;
    color: var(--lh-text);
    box-shadow: inset 3px 0 0 var(--lh-gold);
}
div.pos-tab-menu div.list-group > a.active::after { display: none; }
div.pos-tab-menu div.list-group > a .glyphicon,
div.pos-tab-menu div.list-group > a .fa { color: inherit; }
div.pos-tab { padding: 0 0 0 18px; }
div.pos-tab .pos-tab-content > h4:first-child,
div.pos-tab .pos-tab-content > .row > h4:first-child {
    font-family: var(--lh-display);
    font-size: var(--lh-fs-xl);
    font-weight: 700;
    margin: 4px 0 8px;
    color: var(--lh-text);
}
@media (max-width: 767px) {
    div.pos-tab-container div.pos-tab-menu,
    div.pos-tab-container div.pos-tab {
        float: none;
        width: 100%;
        padding: 0;
    }
    div.pos-tab-menu div.list-group {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 2px 2px 10px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--lh-line);
        scrollbar-width: none;
    }
    div.pos-tab-menu div.list-group::-webkit-scrollbar { display: none; }
    div.pos-tab-menu div.list-group > a {
        flex: none;
        margin: 0;
        padding: 8px 14px;
        border: 1px solid var(--lh-line);
        border-radius: var(--lh-radius-pill);
        white-space: nowrap;
    }
    div.pos-tab-menu div.list-group > a.active { box-shadow: none; border-color: var(--lh-gold-line); }
}

/* -------------------------------------------------------- empty states */

.lh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    text-align: center;
    color: var(--lh-text-muted);
}
.lh-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 16px;
    background-color: var(--lh-gold-tint);
    color: var(--lh-gold-ink);
}
.lh-empty__icon svg { width: 26px; height: 26px; }
.lh-empty__title {
    margin: 0;
    font-family: var(--lh-display);
    font-size: var(--lh-fs-lg);
    font-weight: 700;
    color: var(--lh-text);
}
.lh-empty__text { margin: 0; max-width: 46ch; font-size: var(--lh-fs-base); }
.lh-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* -------------------------------------------------------------- modals */

.modal-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.modal-header::before, .modal-header::after { display: none; }
.modal-header .modal-title { flex: 1 1 auto; order: 0; font-weight: 700; font-size: var(--lh-fs-xl); }
.modal-header .close {
    order: 1;
    float: none;
    width: 34px;
    height: 34px;
    margin: -6px -8px -6px 0;
    border-radius: var(--lh-radius);
    font-size: 22px;
    line-height: 1;
}
.modal-header .close:hover { background-color: var(--lh-surface-3); opacity: 1; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.modal-footer::before, .modal-footer::after { display: none; }
.modal-footer .btn + .btn { margin-left: 0; }
@media (max-width: 767px) {
    .modal-dialog { margin: 8px; width: auto; }
    .modal-body { padding: 16px; }
    .modal-footer > .btn, .modal-footer > .tw-dw-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------- toasts */

#toast-container > div {
    width: min(360px, calc(100vw - 24px));
    padding: 14px 16px 14px 46px;
    border-radius: var(--lh-radius-lg);
    background-position: 16px center;
    background-color: var(--lh-chrome);
    color: var(--lh-chrome-text);
    box-shadow: var(--lh-shadow-pop);
    opacity: 1;
    font-family: var(--lh-font);
    font-size: var(--lh-fs-base);
    font-weight: 500;
    border-left: 4px solid var(--lh-chrome-accent);
}
#toast-container > div:hover { box-shadow: var(--lh-shadow-modal); }
#toast-container > .toast-success { border-left-color: #6FCF97; }
#toast-container > .toast-error { border-left-color: #FF8B8B; }
#toast-container > .toast-warning { border-left-color: var(--lh-palm); }
#toast-container > .toast-info { border-left-color: var(--lh-chrome-accent); }
#toast-container .toast-title { font-weight: 700; }
#toast-container .toast-progress { background-color: var(--lh-chrome-accent); opacity: .5; }
@media (max-width: 480px) {
    #toast-container.toast-top-right, #toast-container.toast-bottom-right { right: 12px; left: 12px; }
    #toast-container > div { width: 100%; }
}

/* ---------------------------------------------------------- filter bar */

/* Inline filters: a wrapping row of fields with the actions at the end. */
.lh-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: var(--lh-space-4);
    background-color: var(--lh-surface);
    border: 1px solid var(--lh-line);
    border-radius: var(--lh-radius-lg);
}
.lh-filter-bar > .lh-field,
.lh-filter-bar > .form-group { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
.lh-filter-bar__actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 575px) {
    .lh-filter-bar > .lh-field, .lh-filter-bar > .form-group { flex-basis: 100%; }
    .lh-filter-bar__actions { width: 100%; }
    .lh-filter-bar__actions > * { flex: 1 1 auto; }
}

/* components.filters: the collapsible filter panel on index screens */
.lh-filters { border-radius: var(--lh-radius-lg); box-shadow: var(--lh-shadow-card); }
.lh-filters .pf-btn { min-height: var(--lh-tap); }
.lh-filters .pf-inner > div > .row,
.lh-filters .pf-inner > div { row-gap: 4px; }
@media (max-width: 767px) {
    .lh-filters .pf-inner [class*="col-md-"],
    .lh-filters .pf-inner [class*="col-sm-"] { width: 100%; }
}

/* ------------------------------------------------------------ alerts */

.lh-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--lh-gold-line);
    border-radius: var(--lh-radius);
    background-color: var(--lh-tint);
    color: var(--lh-text);
    font-size: var(--lh-fs-base);
}
.lh-alert--warning { border-color: var(--lh-warning-fg); background-color: var(--lh-warning-bg); }
.lh-alert--danger { border-color: var(--lh-danger-fg); background-color: var(--lh-danger-bg); }
.lh-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ===================================================================
 * Shell: sidebar, header
 * =================================================================== */

/* Section headings between sidebar groups (App\Support\SidebarGroups) */
#side-bar .lh-nav-group {
    padding: 16px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lh-chrome-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#side-bar > .lh-nav-group:first-child { padding-top: 6px; }
#side-bar > a, #side-bar > div > a.drop_down { min-height: 38px; border-radius: var(--lh-radius); }
#side-bar .chiled a { padding-top: 5px; padding-bottom: 5px; }

/* Collapsed rail (desktop): icons only. The state is body.sidebar-collapse, which the
   layout restores from localStorage upos_sidebar_collapse before first paint. */
@media (min-width: 992px) {
    body.sidebar-collapse aside.side-bar { width: 72px !important; }
    body.sidebar-collapse aside.side-bar .lh-brand { padding: 0; justify-content: center; }
    body.sidebar-collapse aside.side-bar .lh-brand__name { display: none; }
    body.sidebar-collapse aside.side-bar .lh-brand__logo { max-width: 44px; }
    body.sidebar-collapse aside.side-bar .lh-side-search,
    body.sidebar-collapse #side-bar .lh-nav-group,
    body.sidebar-collapse #side-bar .chiled,
    body.sidebar-collapse #side-bar a > span,
    body.sidebar-collapse #side-bar a > .svg,
    body.sidebar-collapse aside.side-bar .lh-side-foot__label { display: none !important; }
    body.sidebar-collapse #side-bar { padding-left: 10px; padding-right: 10px; }
    body.sidebar-collapse #side-bar > a,
    body.sidebar-collapse #side-bar > div > a.drop_down { justify-content: center; padding-left: 0; padding-right: 0; }
    body.sidebar-collapse #side-bar .lh-nav-group + *,
    body.sidebar-collapse #side-bar > div + .lh-nav-group { margin-top: 0; }
    body.sidebar-collapse #side-bar > .lh-nav-sep { display: block; }
}
/* The business's own identity (App\Support\PanelBrand): logo or monogram, then its name. */
.lh-brand { gap: 10px; padding: 0 18px; min-width: 0; text-decoration: none; }
.lh-brand__logo { display: block; flex: none; height: 36px; width: auto; max-width: 120px; object-fit: contain; }
.lh-brand__mono {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lh-gold); color: var(--lh-btn-ink);
    font: 800 17px/1 var(--lh-display);
}
.lh-brand__name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--lh-chrome-text); font: 700 15px/1.2 var(--lh-display);
}

.lh-side-switcher:empty { display: none; }
.lh-side-switcher { padding: 10px 12px 2px; }
.lh-side-switcher .lh-chip-select { display: flex; width: 100%; height: 38px; }
.lh-side-switcher .lh-chip-select select { flex: 1 1 auto; min-width: 0; max-width: none; }
.lh-side-switcher .lh-chip-select__label { display: none; }
/* Popover select (<x-ui.popover-select>; public/js/ikokohub-ui.js adds .is-enhanced, without it the native select stays).
   Used by the sidebar business switcher (.lh-bizsw) and the header location picker (.lh-locsel). */
.lh-popsel__ui { display: none; }
.lh-popsel.is-enhanced .lh-popsel__native { display: none; }
.lh-popsel.is-enhanced .lh-popsel__ui { display: block; }
.lh-popsel__trigger {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 0; text-align: left; cursor: pointer;
    color: var(--lh-chrome-text); transition: background-color var(--lh-duration) var(--lh-ease);
}
.lh-popsel__trigger:focus-visible, .lh-popsel__footer:focus-visible, .lh-popsel__search:focus-visible { outline: 2px solid var(--lh-chrome-accent); outline-offset: 1px; }
.lh-popsel__chevron { flex: none; color: var(--lh-chrome-label); transition: transform var(--lh-duration) var(--lh-ease); }
.lh-popsel__trigger[aria-expanded="true"] .lh-popsel__chevron { transform: rotate(180deg); }
.lh-popsel__panel {
    position: fixed; z-index: 1060; display: flex; flex-direction: column; max-height: min(70vh, 420px); padding: 6px;
    border-radius: var(--lh-radius-lg); background-color: var(--lh-chrome-2);
    box-shadow: 0 0 0 1px var(--lh-chrome-line), 0 16px 40px rgba(0, 0, 0, .45);
    animation: lh-popsel-in var(--lh-duration) var(--lh-ease);
}
.lh-popsel__panel[hidden] { display: none; }
@keyframes lh-popsel-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.lh-popsel__search {
    flex: none; width: 100%; height: 36px; margin-bottom: 6px; padding: 0 10px; border: 0; border-radius: var(--lh-radius);
    background-color: rgba(255, 255, 255, .07); color: var(--lh-chrome-text); font-size: 13px;
}
.lh-popsel__list { margin: 0; padding: 0; list-style: none; overflow-y: auto; flex: 1 1 auto; }
.lh-popsel__option {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: var(--lh-radius);
    color: var(--lh-chrome-text); cursor: pointer;
}
.lh-popsel__option:hover, .lh-popsel__option:focus { background-color: rgba(255, 255, 255, .08); outline: none; }
.lh-popsel__option:focus-visible { outline: 2px solid var(--lh-chrome-accent); outline-offset: -2px; }
.lh-popsel__option[hidden], .lh-popsel__group[hidden] { display: none; }
.lh-popsel__check { flex: none; color: var(--lh-chrome-accent); visibility: hidden; }
.lh-popsel__option[aria-selected="true"] .lh-popsel__check { visibility: visible; }
.lh-popsel__group { margin: 8px 8px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-chrome-label); }
.lh-popsel__empty { margin: 8px; font-size: 12.5px; color: var(--lh-chrome-label); }
.lh-popsel__empty[hidden] { display: none; }
.lh-popsel__footer {
    flex: none; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 8px 6px;
    border-top: 1px solid var(--lh-chrome-line); color: var(--lh-chrome-accent); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.lh-popsel__footer:hover { color: var(--lh-chrome-text); text-decoration: none; }
@media (max-width: 575px) {
    .lh-popsel__panel {
        left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 75vh;
        border-radius: var(--lh-radius-lg) var(--lh-radius-lg) 0 0; padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    .lh-popsel__panel { animation: none; }
    .lh-popsel__chevron, .lh-popsel__trigger { transition: none; }
}

/* Sidebar business switcher */
.lh-bizsw .lh-popsel__trigger {
    min-height: 46px; padding: 6px 8px; border-radius: var(--lh-radius); background-color: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px var(--lh-chrome-line);
}
.lh-bizsw .lh-popsel__trigger:hover, .lh-bizsw .lh-popsel__trigger[aria-expanded="true"] { background-color: rgba(255, 255, 255, .09); }
.lh-bizsw__avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: var(--lh-radius); overflow: hidden; background-color: var(--lh-gold); color: #fff;
    font-size: var(--lh-fs-xs); font-weight: 700; letter-spacing: .02em;
}
.lh-bizsw__avatar img { width: 100%; height: 100%; object-fit: cover; background-color: #fff; }
.lh-bizsw__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lh-bizsw__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--lh-chrome-text); }
.lh-bizsw__sub { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 11.5px; color: var(--lh-chrome-label); }
.lh-bizsw__pill { flex: none; padding: 1px 7px; border-radius: var(--lh-radius-pill); font-size: 10.5px; font-weight: 700; line-height: 1.5; }
.lh-bizsw__pill--restaurant { background-color: var(--lh-gold); color: #fff; }
.lh-bizsw__pill--catering { background-color: var(--lh-palm); color: var(--lh-ink); }
@media (min-width: 992px) {
    body.sidebar-collapse .lh-side-switcher { padding-left: 8px; padding-right: 8px; }
    body.sidebar-collapse .lh-bizsw__meta, body.sidebar-collapse .lh-bizsw .lh-popsel__chevron { display: none; }
    body.sidebar-collapse .lh-bizsw .lh-popsel__trigger { justify-content: center; padding: 6px 0; background-color: transparent; box-shadow: none; }
}

/* Header location picker: same chip as .lh-chip-select, rows carry a type icon, code and pill */
.lh-locsel .lh-popsel__trigger {
    gap: 6px; height: 34px; width: auto; max-width: 100%; padding: 0 8px 0 10px; border-radius: var(--lh-radius);
    background-color: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(242, 179, 61, .22);
    font-size: 12.5px; font-weight: 600;
}
.lh-locsel .lh-popsel__trigger:hover, .lh-locsel .lh-popsel__trigger[aria-expanded="true"] { background-color: rgba(255, 255, 255, .09); }
.lh-locsel .lh-popsel__trigger > svg:first-child { width: 16px; height: 16px; flex: none; color: var(--lh-chrome-accent); }
.lh-locsel__label { color: var(--lh-chrome-label); white-space: nowrap; }
.lh-locsel__current { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-locsel__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: var(--lh-radius); background-color: rgba(255, 255, 255, .07); color: var(--lh-chrome-accent);
}
.lh-locsel__icon svg { width: 17px; height: 17px; }
.lh-locsel__name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lh-locsel__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.lh-locsel__code { font-size: 11.5px; color: var(--lh-chrome-label); }
.lh-locsel__pill {
    flex: none; padding: 1px 7px; border-radius: var(--lh-radius-pill); font-size: 10.5px; font-weight: 700; line-height: 1.5;
    background-color: rgba(255, 255, 255, .1); color: var(--lh-chrome-label);
}
.lh-locsel .lh-popsel__option--divided { margin-bottom: 5px; position: relative; }
.lh-locsel .lh-popsel__option--divided::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: -3px; height: 1px; background-color: var(--lh-chrome-line);
}
@media (max-width: 575px) {
    .lh-locsel__label { display: none; }
}
#side-bar > .lh-nav-sep { display: none; height: 1px; margin: 8px 6px; background-color: var(--lh-chrome-line); }

/* Header: business switcher and location chip on the ink bar */
.lh-chip-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 4px 0 10px;
    border-radius: var(--lh-radius);
    background-color: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(242, 179, 61, .22);
    color: var(--lh-chrome-text);
    font-size: 12.5px;
    font-weight: 600;
    max-width: 100%;
}
.lh-chip-select:focus-within { box-shadow: inset 0 0 0 1px var(--lh-chrome-accent); }
.lh-chip-select > svg { width: 16px; height: 16px; flex: none; color: var(--lh-chrome-accent); }
.lh-chip-select__label { color: var(--lh-chrome-label); white-space: nowrap; }
.lh-chip-select select {
    height: 30px;
    max-width: 13rem;
    padding: 0 22px 0 6px;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23F2B33D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 13px;
    color: var(--lh-chrome-text);
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
}
.lh-chip-select select option { color: var(--lh-text); background-color: var(--lh-surface); }
.lh-chip-select select:focus { outline: none; }
.lh-chip-select a { color: var(--lh-chrome-label); display: inline-flex; padding: 4px 6px; }
.lh-chip-select a:hover { color: var(--lh-chrome-accent); }
@media (max-width: 575px) {
    .lh-chip-select__label { display: none; }
    .lh-chip-select select { max-width: 9rem; }
}

/* Notifications bell: the count sits on the icon, not beside it */
#show_unread_notifications { position: relative; }
#show_unread_notifications .notifications_count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--lh-radius-pill);
    background-color: var(--lh-jollof) !important;
    color: var(--lh-ink) !important;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
    box-shadow: 0 0 0 2px var(--lh-chrome);
}
#show_unread_notifications .notifications_count:empty { display: none; }

/* The header keeps one row on phones: secondary controls drop out below 576px. */
@media (max-width: 575px) {
    .lh-header-bar { gap: 8px !important; }
    .lh-header-actions { gap: 6px !important; flex-wrap: nowrap !important; min-width: 0; }
    .lh-header-actions details > summary { margin: 0 !important; }
    .lh-header-actions .lh-hide-xs { display: none !important; }
}

/* ===================================================================
 * Sidebar shell (<x-ui.shell>, <x-ui.shell-page>) - for areas outside the
 * AdminLTE layout, e.g. the platform admin. Same look as the back-office
 * sidebar: ink chrome in both themes, Palm Gold active marker.
 * =================================================================== */

body.lh-standalone { margin: 0; min-height: 100vh; background-color: var(--lh-canvas); color: var(--lh-text); font-family: var(--lh-font); font-size: 14px; line-height: 1.5; }
body.lh-standalone *, body.lh-standalone *::before, body.lh-standalone *::after { box-sizing: border-box; }

.lh-skip {
    position: absolute;
    left: -999px;
    top: 8px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--lh-radius);
    background-color: var(--lh-chrome);
    color: var(--lh-chrome-text);
    font-weight: 700;
}
.lh-skip:focus { left: 8px; color: var(--lh-chrome-text); }

.lh-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.lh-shell__side {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 256px;
    height: 100%;
    background-color: var(--lh-chrome);
    color: var(--lh-chrome-menu);
    border-right: 1px solid var(--lh-chrome-line);
    transition: width var(--lh-duration) var(--lh-ease);
}
.lh-shell__brand {
    display: flex;
    align-items: center;
    flex: none;
    height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(242, 179, 61, .16);
}
.lh-shell__brand-link { display: flex; align-items: center; text-decoration: none; }
.lh-shell__lockup { display: block; width: 190px; max-width: 100%; height: auto; }
.lh-shell__mark { display: none; width: 34px; height: 34px; }
.lh-shell__side-top { padding: 10px 12px 0; }
.lh-shell__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 16px;
    scrollbar-width: thin;
    scrollbar-color: #3A332D transparent;
}
.lh-shell__side-foot { flex: none; padding: 10px; border-top: 1px solid var(--lh-chrome-line); }
.lh-shell__side :focus-visible { outline-color: var(--lh-chrome-accent); }

.lh-nav__group {
    margin: 0;
    padding: 16px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lh-chrome-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-nav__group:first-child { padding-top: 6px; }
.lh-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 1px 0;
    padding: 8px 12px;
    border-radius: var(--lh-radius);
    color: var(--lh-chrome-menu);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
.lh-nav__link::-webkit-details-marker { display: none; }
.lh-nav__link:hover, .lh-nav__link:focus { background-color: rgba(255, 255, 255, .05); color: var(--lh-chrome-text); text-decoration: none; }
.lh-nav__link.is-active {
    background-color: rgba(242, 179, 61, .12);
    color: var(--lh-chrome-text);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--lh-chrome-accent);
}
.lh-nav__icon { width: 20px; height: 20px; flex: none; color: var(--lh-chrome-icon); }
.lh-nav__link:hover .lh-nav__icon, .lh-nav__link.is-active .lh-nav__icon { color: var(--lh-chrome-accent); }
.lh-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lh-nav__chevron { width: 16px; height: 16px; flex: none; color: var(--lh-chrome-icon); transform: rotate(-90deg); transition: transform var(--lh-duration) var(--lh-ease); }
.lh-nav__section[open] > summary .lh-nav__chevron { transform: none; }
.lh-nav__badge {
    flex: none;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--lh-radius-pill);
    background-color: var(--lh-jollof);
    color: var(--lh-ink);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}
.lh-nav__children { position: relative; margin: 2px 0 6px; padding-left: 42px; }
.lh-nav__children::before { content: ""; position: absolute; left: 21px; top: 2px; bottom: 2px; width: 1px; background-color: var(--lh-chrome-line); }
.lh-nav__sublink {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--lh-chrome-menu);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lh-nav__sublink:hover, .lh-nav__sublink:focus { color: var(--lh-chrome-text); background-color: rgba(255, 255, 255, .04); text-decoration: none; }
.lh-nav__sublink.is-active { color: var(--lh-chrome-accent); font-weight: 600; }

.lh-shell__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; height: 100%; }
.lh-shell__top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-height: 60px;
    padding: 10px 20px;
    background-color: var(--lh-chrome);
    color: var(--lh-chrome-text);
    border-bottom: 1px solid rgba(242, 179, 61, .16);
}
.lh-shell__top-start { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.lh-shell__top-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lh-shell__top :focus-visible { outline-color: var(--lh-chrome-accent); }
.lh-shell__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--lh-radius);
    background-color: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(242, 179, 61, .22);
    color: var(--lh-chrome-text);
    cursor: pointer;
}
.lh-shell__icon-btn:hover { background-color: rgba(242, 179, 61, .14); color: #fff; }
.lh-shell__icon-btn svg { width: 20px; height: 20px; }
.lh-shell__open { display: none; }

.lh-shell__main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 24px; }
.lh-shell__main:focus { outline: none; }
.lh-shell__main > .lh-page-header { padding: 0 0 18px; }

/* Collapsed rail (desktop) */
.lh-shell--collapsed .lh-shell__side { width: 72px; }
.lh-shell--collapsed .lh-shell__brand { justify-content: center; padding: 0; }
.lh-shell--collapsed .lh-shell__lockup,
.lh-shell--collapsed .lh-nav__group,
.lh-shell--collapsed .lh-nav__label,
.lh-shell--collapsed .lh-nav__chevron,
.lh-shell--collapsed .lh-nav__badge,
.lh-shell--collapsed .lh-nav__children,
.lh-shell--collapsed .lh-shell__side-top { display: none; }
.lh-shell--collapsed .lh-shell__mark { display: block; }
.lh-shell--collapsed .lh-nav__link { justify-content: center; padding-left: 0; padding-right: 0; }

/* Phones and tablets: the sidebar is an off-canvas drawer */
@media (max-width: 991px) {
    .lh-shell__side,
    .lh-shell--collapsed .lh-shell__side {
        position: fixed;
        z-index: 60;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(288px, 86vw);
        transform: translateX(-100%);
        transition: transform .2s var(--lh-ease);
        box-shadow: var(--lh-shadow-modal);
    }
    .lh-shell--open .lh-shell__side { transform: none; }
    .lh-shell--collapsed .lh-shell__lockup { display: block; }
    .lh-shell--collapsed .lh-nav__group,
    .lh-shell--collapsed .lh-nav__label,
    .lh-shell--collapsed .lh-nav__chevron { display: initial; }
    .lh-shell--collapsed .lh-nav__group { display: block; }
    .lh-shell--collapsed .lh-shell__mark { display: none; }
    .lh-shell--collapsed .lh-shell__brand { justify-content: flex-start; padding: 0 18px; }
    .lh-shell--collapsed .lh-nav__link { justify-content: flex-start; padding: 8px 12px; }
    .lh-shell__scrim { position: fixed; inset: 0; z-index: 50; background-color: var(--lh-scrim); }
    .lh-shell__open { display: inline-flex; }
    .lh-shell__collapse { display: none; }
    .lh-shell__top { padding: 10px 16px; }
    .lh-shell__main { padding: 16px; }
}
.lh-shell__scrim[hidden] { display: none; }

/* ===================================================================
 * Platform admin helpers (standalone shell pages, no Bootstrap).
 * =================================================================== */

.lh-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 16px; }
.lh-form-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lh-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: var(--lh-space-4); }
.lh-inline-form > .lh-field { flex: 1 1 150px; margin-bottom: 0; }
.lh-inline-form form, .lh-actions form { margin: 0; }
.lh-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lh-space-4); }
@media (min-width: 1100px) { .lh-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.lh-stack > * + * { margin-top: var(--lh-space-4); }
.lh-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.lh-kv dt { color: var(--lh-text-muted); font-weight: 600; }
.lh-kv dd { margin: 0; overflow-wrap: anywhere; }
.lh-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; padding: 1px 6px; border-radius: var(--lh-radius-sm); background-color: var(--lh-surface-3); overflow-wrap: anywhere; }
.lh-link { color: var(--lh-gold-ink); font-weight: 600; text-decoration: none; }
.lh-link:hover { text-decoration: underline; }
.lh-muted { color: var(--lh-text-muted); }
.lh-meter { height: 6px; border-radius: var(--lh-radius-pill); background-color: var(--lh-surface-3); overflow: hidden; }
.lh-meter > span { display: block; height: 100%; background-color: var(--lh-gold); }
.lh-flash { margin-bottom: var(--lh-space-4); }
.lh-shell__user { display: flex; align-items: center; gap: 10px; font-size: var(--lh-fs-sm); }
.lh-shell__user-name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575px) { .lh-shell__user-name { display: none; } }
body.lh-standalone ul.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; list-style: none; margin: var(--lh-space-4) 0 0; padding: 0; }
body.lh-standalone .pagination > li > a, body.lh-standalone .pagination > li > span { display: inline-block; min-width: 36px; padding: 6px 10px; text-align: center; border: 1px solid var(--lh-line); border-radius: var(--lh-radius-sm); text-decoration: none; }
body.lh-standalone .pagination > li.disabled > span { color: var(--lh-text-ghost); }
body.lh-standalone .pagination svg { width: 16px; height: 16px; }
.lh-guest { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.lh-guest__box { width: 100%; max-width: 400px; }
.lh-guest__brand { display: block; margin: 0 auto var(--lh-space-6); width: 180px; max-width: 70%; }
.lh-right { text-align: right; }
body.lh-standalone .form-control { display: block; width: 100%; }
body.lh-standalone textarea.form-control { height: auto; }

/* Help Centre (help-centre.md): header button, slide-over panel, pages, search results. */
.lh-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--lh-radius); border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; cursor: pointer; }
.lh-help-btn svg { width: 20px; height: 20px; }
.lh-help-search { display: flex; gap: 8px; }
.lh-help-search .form-control { flex: 1 1 auto; min-width: 0; }
.lh-help-hero { padding: var(--lh-space-6) 0 var(--lh-space-4); max-width: 720px; }
.lh-help-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--lh-space-3) 0; }
.lh-help-chip { padding: 6px 14px; border-radius: var(--lh-radius-pill); border: 1px solid var(--lh-line); color: var(--lh-text); background: var(--lh-surface); text-decoration: none; font-size: var(--lh-fs-sm); min-height: 36px; display: inline-flex; align-items: center; }
.lh-help-chip[aria-current="true"] { background: var(--lh-gold); color: var(--lh-ink); border-color: var(--lh-gold); }
.lh-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--lh-space-3); }
.lh-help-card { display: block; padding: var(--lh-space-4); border: 1px solid var(--lh-line); border-radius: var(--lh-radius-lg); background: var(--lh-surface); color: var(--lh-text); text-decoration: none; }
.lh-help-card:hover { border-color: var(--lh-gold); }
.lh-help-card strong { display: block; margin-bottom: 2px; }
.lh-help-card span { color: var(--lh-text-muted); font-size: var(--lh-fs-sm); }
.lh-help-list { list-style: none; margin: 0; padding: 0; }
.lh-help-list li { padding: var(--lh-space-3) 0; border-bottom: 1px solid var(--lh-line-soft); }
.lh-help-list a { font-weight: 600; color: var(--lh-gold-ink); text-decoration: none; }
.lh-help-list a:hover { text-decoration: underline; }
.lh-help-list p { margin: 2px 0 0; color: var(--lh-text-muted); font-size: var(--lh-fs-sm); }
.lh-help-list mark, .lh-help-article mark { background: var(--lh-warning-bg); color: var(--lh-warning-fg); border-radius: 2px; padding: 0 2px; }
.lh-help-article { max-width: 760px; line-height: 1.65; font-size: var(--lh-fs-md, 16px); }
.lh-help-article h2 { font-size: var(--lh-fs-lg); margin-top: var(--lh-space-6); }
.lh-help-article ol, .lh-help-article ul { padding-left: 1.4em; }
.lh-help-article li { margin: 6px 0; }
.lh-help-vote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: var(--lh-space-6); padding-top: var(--lh-space-4); border-top: 1px solid var(--lh-line); }
.lh-help-answer { padding: var(--lh-space-4); border: 1px solid var(--lh-line); border-left: 4px solid var(--lh-gold); border-radius: var(--lh-radius); background: var(--lh-surface); margin: var(--lh-space-4) 0; white-space: pre-line; }
.lh-help-answer ul { list-style: none; padding: 0; margin: var(--lh-space-3) 0 0; white-space: normal; }
.lh-help-panel { position: fixed; inset: 0; z-index: 2000; display: none; }
.lh-help-panel[data-open="true"] { display: block; }
.lh-help-panel__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.lh-help-panel__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--lh-surface); color: var(--lh-text); box-shadow: var(--lh-shadow-modal); }
.lh-help-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--lh-space-3) var(--lh-space-4); border-bottom: 1px solid var(--lh-line); }
.lh-help-panel__head h2 { margin: 0; font-size: var(--lh-fs-lg); }
.lh-help-panel__body { flex: 1 1 auto; overflow-y: auto; padding: var(--lh-space-4); }
.lh-help-panel__foot { padding: var(--lh-space-3) var(--lh-space-4); border-top: 1px solid var(--lh-line); }
@media (max-width: 575px) { .lh-help-search { flex-direction: column; } .lh-help-search .form-control { font-size: 16px; } }