/* =============================================================================
   La Mar Design System — Google Fonts
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* =============================================================================
   La Mar Design System — CSS Custom Properties
   Mirrors Tailwind token values for use in non-Tailwind contexts (inline SVG,
   third-party widgets, Stripe Elements theming, etc.)
   ============================================================================= */
:root {
  /* Colours — v0 design system */
  --color-gold:           #C9A84C;
  --color-gold-hover:     #B8973F;
  --color-navy:           #1B2B4B;
  --color-cream:          #FAF8F5;
  --color-white:          #FFFFFF;
  --color-slate:          #4A5568;
  --color-border:         #E8E4DD;
  --color-muted:          #F5F3EF;
  --color-success:        #16A34A;
  --color-success-bg:     #DCFCE7;
  --color-destructive:    #DC2626;
  --color-destructive-bg: #FEE2E2;

  /* Aliases — backward compat with existing @apply references */
  --lamar-navy:       #1B2B4B;
  --lamar-gold:       #C9A84C;
  --lamar-gold-hover: #B8973F;
  --lamar-cream:      #FAF8F5;
  --lamar-muted:      #F5F3EF;
  --lamar-border:     #E8E4DD;
  --lamar-slate:      #4A5568;
  --lamar-green:      #16A34A;
  --lamar-red:        #DC2626;
  --lamar-amber:      #d97706;

  /* Spacing — v0 scale */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Typography */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-wide:   0.025em;

  /* Border radius */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* =============================================================================
   La Mar Design System — Component Classes
   All component classes defined here via @layer components.
   Never define component classes in PHP output or Vue <style> blocks.
   ============================================================================= */

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    @apply text-lamar-navy;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h3.lamar-card-title {
    @apply text-lamar-navy font-semibold text-lg;
  }
}

@layer components {

  /* ---------------------------------------------------------------------------
     Page wrapper
  --------------------------------------------------------------------------- */
  .lamar-page {
    @apply min-h-screen bg-lamar-cream;
  }

  /* ---------------------------------------------------------------------------
     Admin app mount points — injected via wp_footer so they appear at end of
     <body>. Position fixed so they overlay the page regardless of DOM order.
     overflow-y: auto allows scrolling within the app. z-index 50 keeps them
     above SiteOrigin page builder content but below the glass menu overlay.
     pointer-events: none — allow clicks to pass through the transparent mount
     div to the header/hamburger beneath. Vue content restores pointer-events.
  --------------------------------------------------------------------------- */
  #lamar-admin-venues-app,
  #lamar-admin-users-app {
    width: 100%;
  }

  /* ---------------------------------------------------------------------------
     Cards
  --------------------------------------------------------------------------- */
  .lamar-card,
  .card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .lamar-card-header,
  .card__header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .lamar-card-title,
  .card__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-navy);
    letter-spacing: var(--tracking-tight);
    margin: 0;
  }

  .card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-slate);
    margin-top: var(--space-1);
  }

  .lamar-card-body,
  .card__content {
    padding: var(--space-6);
  }

  /* ---------------------------------------------------------------------------
     Buttons
  --------------------------------------------------------------------------- */
  .lamar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
  }

  .lamar-btn-primary {
    background-color: var(--color-gold);
    color: var(--color-white);
  }
  .lamar-btn-primary:hover {
    background-color: var(--color-gold-hover);
  }

  .lamar-btn-danger {
    background: transparent;
    color: var(--color-destructive);
  }
  .lamar-btn-danger:hover {
    background-color: var(--color-destructive-bg);
  }

  .lamar-btn-secondary {
    background-color: var(--color-muted);
    color: var(--color-navy);
  }
  .lamar-btn-secondary:hover {
    background-color: var(--color-border);
  }

  .lamar-btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  .lamar-btn[disabled],
  .lamar-btn:disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none;
  }

  /* ---------------------------------------------------------------------------
     Status badges
  --------------------------------------------------------------------------- */
  .lamar-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
  }

  .lamar-badge-confirmed {
    background-color: var(--color-success-bg);
    color: var(--color-success);
  }

  .lamar-badge-pending {
    @apply bg-amber-100 text-lamar-amber;
  }

  .lamar-badge-arrived {
    @apply bg-blue-100 text-blue-700;
  }

  .lamar-badge-noshow {
    background-color: var(--color-destructive-bg);
    color: var(--color-destructive);
  }

  .lamar-badge-cancelled {
    background-color: var(--color-muted);
    color: var(--color-slate);
  }

  .lamar-badge-completed {
    background-color: var(--color-success-bg);
    color: var(--color-success);
  }

  /* ---------------------------------------------------------------------------
     Form inputs
  --------------------------------------------------------------------------- */
  .lamar-input,
  .form-input,
  .form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-navy);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  .lamar-input:focus,
  .form-input:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
  }
  .lamar-input::placeholder,
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--color-slate);
  }

  .lamar-select,
  .form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-navy);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
    cursor: pointer;
  }
  .lamar-select:focus,
  .form-select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
  }

  .lamar-label,
  .form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-navy);
    display: block;
    margin-bottom: var(--space-2);
  }

  /* ---------------------------------------------------------------------------
     Admin tables
  --------------------------------------------------------------------------- */
  .lamar-table {
    width: 100%;
    border-collapse: collapse;
  }

  .lamar-table thead th {
    padding: var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate);
    background-color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
  }
  .lamar-table thead th:first-child {
    border-top-left-radius: var(--radius-md);
  }
  .lamar-table thead th:last-child {
    border-top-right-radius: var(--radius-md);
  }
  .lamar-table thead th.lm-td-center {
    text-align: center;
  }
  .lamar-table thead th.lm-td-right {
    text-align: right;
  }

  .lamar-table tbody td {
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-border);
  }

  .lamar-table tbody tr:last-child td {
    border-bottom: none;
  }

  .lamar-table tbody tr:hover td {
    background-color: var(--color-cream);
  }

  .lamar-table-row {
    @apply cursor-pointer;
  }

  .lm-td-center {
    @apply text-center;
  }

  .lm-td-right {
    @apply text-right;
  }

  /* ---------------------------------------------------------------------------
     Row action icons
  --------------------------------------------------------------------------- */
  .lm-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .lm-action-icon--edit {
    color: var(--color-slate);
  }
  .lm-action-icon--edit:hover {
    background-color: var(--color-muted);
    color: var(--color-navy);
  }

  .lm-action-icon--danger {
    color: var(--color-destructive);
  }
  .lm-action-icon--danger:hover {
    background-color: var(--color-destructive-bg);
  }

  .lm-action-icon--primary {
    color: #c9a96e;
    cursor: default;
    opacity: 1;
  }
  .lm-action-icon--primary:disabled {
    opacity: 1;
    pointer-events: none;
  }

  .lm-action-icon--activate {
    color: var(--color-success);
  }
  .lm-action-icon--activate:hover {
    background-color: var(--color-success-bg);
  }

  .lm-action-icon--view {
    color: var(--color-gold);
  }
  .lm-action-icon--view:hover {
    background-color: var(--color-muted);
    color: var(--color-gold-hover);
  }

  .lm-action-icon--send {
    @apply text-blue-500 hover:text-white hover:bg-blue-500;
  }

  .lm-action-icon--settings {
    @apply text-lamar-slate hover:text-white hover:bg-lamar-navy;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Tabs (pill button style)
  --------------------------------------------------------------------------- */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-bottom: 2px solid var(--color-border);
  }

  .tabs__trigger {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate);
    background: #e8e4dc;
    border: 1.5px solid #d0cbc2;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .tabs__trigger:hover {
    color: var(--color-navy);
    background: #d6d0c6;
    border-color: var(--color-gold);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .tabs__trigger--active {
    color: #fff;
    background: var(--color-gold);
    border-color: var(--color-gold);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(201,168,76,0.35);
  }
  .tabs__trigger--active:hover {
    background: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
  }

  /* ---------------------------------------------------------------------------
     Attendance — Animated underline tab strip (.lm-att-tabs)
  --------------------------------------------------------------------------- */
  .lm-att-tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0;
    border-bottom: 2px solid var(--color-border);
    scrollbar-width: none;
  }
  .lm-att-tabs::-webkit-scrollbar { display: none; }

  .lm-att-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-slate);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
    position: relative;
  }
  .lm-att-tab:hover {
    color: var(--color-navy);
  }
  .lm-att-tab--active {
    color: var(--color-gold);
    font-weight: 700;
  }

  .lm-att-tab__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
  }
  .lm-att-tab--active .lm-att-tab__icon {
    opacity: 1;
  }

  .lm-att-tab__label {
    line-height: 1.4;
  }

  .lm-att-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 9999px;
    background: var(--color-red, #c0392b);
    color: #fff;
  }
  .lm-att-tab__badge--active {
    background: var(--color-gold);
  }

  .lm-att-tab-underline {
    position: absolute;
    bottom: -2px;
    height: 2px;
    background: var(--color-gold);
    border-radius: 2px 2px 0 0;
    transition: left 0.2s ease, width 0.2s ease;
    pointer-events: none;
  }

  /* ---------------------------------------------------------------------------
     Attendance — Alert banner (unresolved flags)
  --------------------------------------------------------------------------- */
  .lm-att-alert-banner {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    margin-bottom: var(--space-4, 16px);
    overflow: hidden;
  }
  .lm-att-alert-banner__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #fed7aa;
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
  }
  .lm-att-alert-banner__icon {
    display: flex;
    color: #d97706;
    flex-shrink: 0;
  }
  .lm-att-alert-banner__title {
    flex: 1;
  }

  .lm-att-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .lm-att-alert-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid #fed7aa;
    font-size: 13px;
  }
  .lm-att-alert-row:last-child {
    border-bottom: none;
  }
  .lm-att-alert-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #d97706;
  }
  .lm-att-alert-row--critical .lm-att-alert-row__dot {
    background: #dc2626;
  }
  .lm-att-alert-row__name {
    font-weight: 600;
    color: var(--color-navy, #1a2744);
    min-width: 100px;
  }
  .lm-att-alert-row__type {
    flex: 1;
    color: var(--color-slate, #4a5568);
  }
  .lm-att-alert-row__time {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
  }
  .lm-att-resolve-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #d97706;
    background: transparent;
    color: #d97706;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
  }
  .lm-att-resolve-btn:hover {
    background: #d97706;
    color: #fff;
  }

  /* ---------------------------------------------------------------------------
     Attendance — Page header icon + badge
  --------------------------------------------------------------------------- */
  .lm-att-page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(201, 169, 110, 0.12);
    color: var(--color-gold, #c9a96e);
    flex-shrink: 0;
  }
  .lm-att-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    margin-left: 4px;
  }

  /* ---------------------------------------------------------------------------
     Attendance — Tab content + tab badge (on div role=tab)
  --------------------------------------------------------------------------- */
  .lm-att-tab-content {
    padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
  }
  .lm-att-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    margin-left: 2px;
  }
  .lm-att-tab-badge--active {
    background: var(--color-gold, #c9a96e);
  }

  /* ---------------------------------------------------------------------------
     Filter chips — secondary status/category filter row
  --------------------------------------------------------------------------- */
  .lm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 16px;
  }

  .lm-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-slate);
    background: #f0ece4;
    border: 1.5px solid #ddd8cf;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
  }
  .lm-filter-chip:hover {
    color: var(--color-navy);
    background: #e4dfd6;
    border-color: var(--color-gold);
  }
  .lm-filter-chip--active {
    color: var(--color-navy);
    background: #fff;
    border-color: var(--color-navy);
    font-weight: 600;
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Accordion / Collapsible
  --------------------------------------------------------------------------- */
  .accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .accordion__item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-navy);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  .accordion__trigger:hover {
    background-color: var(--color-cream);
  }

  .accordion__trigger-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .accordion__count {
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-slate);
  }

  .accordion__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-slate);
    transition: transform var(--transition-fast);
  }

  .accordion__item--open .accordion__icon {
    transform: rotate(180deg);
  }

  .accordion__content {
    padding: 0 var(--space-5) var(--space-4);
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Time Slot Row
  --------------------------------------------------------------------------- */
  .time-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-muted);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
  }
  .time-slot:last-of-type {
    margin-bottom: var(--space-3);
  }

  .time-slot__info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .time-slot__time {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-navy);
    min-width: 3.5rem;
  }

  .time-slot__details {
    font-size: var(--text-sm);
    color: var(--color-slate);
  }

  .time-slot__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Switch / Toggle
  --------------------------------------------------------------------------- */
  .switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background-color: #94A3B8;   /* visible slate-400 — clearly "off" */
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .switch--active {
    background-color: var(--color-gold);
  }

  .switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
  }

  .switch--active .switch__thumb {
    transform: translateX(1.25rem);
  }

  /* Switch Row — muted background with toggle */
  .switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background-color: var(--color-muted);
    border-radius: var(--radius-md);
  }

  .switch-row__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-navy);
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Form Layout
  --------------------------------------------------------------------------- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .form-row {
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 768px) {
    .form-row--2col {
      grid-template-columns: repeat(2, 1fr);
    }
    .form-row--3col {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Modal / Dialog
  --------------------------------------------------------------------------- */
  .modal {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - var(--space-8));
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  .modal__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-navy);
  }

  .modal__close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-slate);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  .modal__close:hover {
    background-color: var(--color-muted);
  }

  .modal__content {
    padding: var(--space-6);
    overflow-y: auto;
    flex: 1;
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-muted);
  }

  /* ---------------------------------------------------------------------------
     v0 Design System — Section Header
  --------------------------------------------------------------------------- */
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
  }

  .section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-navy);
  }

  /* ---------------------------------------------------------------------------
     Mobile card list (collapses table at ≤768px)
  --------------------------------------------------------------------------- */
  .lamar-card-list {
    @apply hidden flex-col gap-3;
  }

  .lamar-card-list .lamar-card-list-item {
    @apply lamar-card p-4;
  }

  .lamar-card-list .lamar-card-list-item__header {
    @apply flex items-center justify-between mb-3;
  }

  .lamar-card-list .lamar-card-list-item__row {
    @apply flex justify-between py-1 text-sm;
  }

  .lamar-card-list .lamar-card-list-item__label {
    @apply font-medium text-lamar-slate;
  }

  .lamar-card-list .lamar-card-list-item__value {
    @apply text-lamar-navy;
  }

  .lamar-card-list .lamar-card-list-item__actions {
    @apply flex gap-2 mt-3 pt-3 border-t border-gray-100;
  }

  /* ---------------------------------------------------------------------------
     Desktop-only columns (hidden on mobile)
  --------------------------------------------------------------------------- */
  .lm-col-desktop {
    @apply table-cell;
  }

  /* ---------------------------------------------------------------------------
     Dashboard layout
  --------------------------------------------------------------------------- */
  .lamar-dashboard-layout {
    @apply flex h-screen overflow-hidden bg-lamar-cream;
  }

  .lamar-sidebar {
    @apply w-64 flex-shrink-0 bg-lamar-navy flex flex-col overflow-y-auto;
  }

  .lamar-sidebar-logo {
    @apply px-6 py-5 border-b border-white/10;
  }

  .lamar-sidebar-nav {
    @apply flex-1 px-3 py-4 space-y-1;
  }

  .lamar-sidebar-link {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-white/70
           hover:text-white hover:bg-white/10 transition-colors duration-150 no-underline;
  }

  .lamar-sidebar-link.active {
    @apply text-white bg-white/15;
  }

  .lamar-main {
    @apply flex-1 overflow-y-auto;
  }

  .lamar-topbar {
    @apply flex items-center justify-between px-6 py-4 bg-white border-b border-lamar-border shadow-sm;
  }

  .lamar-content {
    @apply p-6;
  }

  /* ---------------------------------------------------------------------------
     Inline blocked row message (archive guard feedback)
  --------------------------------------------------------------------------- */
  .lm-blocked-row {
    @apply bg-amber-50 border border-lamar-amber rounded-lg px-4 py-3 text-sm text-lamar-amber;
  }

  /* ---------------------------------------------------------------------------
     Language switcher
  --------------------------------------------------------------------------- */
  .lm-lang-switcher {
    @apply relative inline-flex;
  }

  .lm-lang-switcher__trigger {
    @apply lamar-btn lamar-btn-secondary gap-2 text-xs;
  }

  .lm-lang-switcher__dropdown {
    @apply absolute right-0 top-full mt-1 min-w-[140px] bg-white rounded-lg shadow-lg
           border border-gray-200 z-[9999] hidden;
  }

  .lm-lang-switcher--open .lm-lang-switcher__dropdown {
    @apply block;
  }

  .lm-lang-switcher__option {
    @apply flex items-center gap-2 w-full px-4 py-2 text-sm text-lamar-slate
           hover:bg-lamar-cream cursor-pointer border-0 bg-transparent;
  }

  .lm-lang-switcher__option.active {
    @apply text-lamar-navy font-medium;
  }

  /* ---------------------------------------------------------------------------
     Access denied page
  --------------------------------------------------------------------------- */
  .lamar-access-denied {
    @apply flex items-center justify-center min-h-screen bg-lamar-cream;
  }

  .lamar-access-denied__card {
    @apply lamar-card lamar-card-body text-center max-w-sm w-full mx-4;
  }

  /* ---------------------------------------------------------------------------
     Loading / spinner
  --------------------------------------------------------------------------- */
  .lamar-spinner {
    @apply inline-block w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — badges
  --------------------------------------------------------------------------- */
  .lm-badge-vip {
    @apply bg-amber-100 text-amber-700 font-semibold;
  }

  .lm-badge-flagged {
    @apply bg-red-100 text-lamar-red font-bold;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — search bar + filter chips
  --------------------------------------------------------------------------- */
  .lm-guest-search-bar {
    @apply flex flex-col gap-3;
  }

  .lm-guest-filter-chips {
    @apply flex flex-wrap gap-2;
  }

  .lm-filter-chip {
    @apply lamar-btn lamar-btn-secondary lamar-btn-sm border border-gray-300;
  }

  .lm-filter-chip--active {
    @apply bg-lamar-navy text-white border-lamar-navy;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — detail overlay panel
  --------------------------------------------------------------------------- */
  .lm-guest-detail-overlay {
    @apply fixed inset-0 z-[1000] flex items-center justify-center;
    background: rgba(11,31,58,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px;
  }

  .lm-guest-detail-panel {
    @apply relative bg-lamar-cream w-full shadow-2xl flex flex-col;
    max-width: 760px;
    height: 80vh;
    max-height: 800px;
    min-height: 520px;
    overflow: hidden;
    border-radius: 14px;

  /* ── Guest Panel — redesigned header & content ─────────────────────────
     lm-gpanel-* classes replace the old lm-guest-detail-header/identity
     hierarchy. Old classes remain in CSS for backward compat.
  -------------------------------------------------------------------------- */

  /* Header — navy bar */
  .lm-gpanel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 16px;
    background: #0B1F3A;
    flex-shrink: 0;
  }

  /* Avatar + identity block */
  .lm-gpanel-identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  .lm-gpanel-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: rgba(201,168,76,0.2);
    border: 2px solid #C9A84C;
    color: #C9A84C;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
  }
  .lm-gpanel-avatar--vip {
    background: #C9A84C;
    color: #0B1F3A;
  }
  .lm-gpanel-identity-text {
    min-width: 0;
    flex: 1;
  }
  .lm-gpanel-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .lm-gpanel-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    font-family: var(--font-sans);
  }
  .lm-gpanel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }
  .lm-gpanel-badge--vip    { background: #C9A84C; color: #0B1F3A; }
  .lm-gpanel-badge--flagged { background: #dc2626; color: #fff; }
  .lm-gpanel-badge--erased  { background: #6b7280; color: #fff; }
  .lm-gpanel-email, .lm-gpanel-phone {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Header action buttons */
  .lm-gpanel-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .lm-gpanel-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms;
    font-family: var(--font-sans);
  }
  .lm-gpanel-action-btn:hover { background: rgba(255,255,255,0.18); }
  .lm-gpanel-vip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(201,168,76,0.15);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 7px;
    color: #C9A84C;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms;
    font-family: var(--font-sans);
  }
  .lm-gpanel-vip-btn--active { background: #C9A84C; color: #0B1F3A; border-color: #C9A84C; }
  .lm-gpanel-vip-btn:hover:not(.lm-gpanel-vip-btn--active) { background: rgba(201,168,76,0.25); }
  .lm-gpanel-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 150ms;
    font-family: var(--font-sans);
  }
  .lm-gpanel-close-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

  /* Actions dropdown */
  .lm-gpanel-actions-menu { position: relative; }
  .lm-gpanel-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    overflow: hidden;
    padding: 4px;
  }
  .lm-gpanel-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    border-radius: 7px;
    cursor: pointer;
    transition: background 120ms;
    user-select: none;
  }
  .lm-gpanel-dropdown-item:hover { background: #f3f4f6; }
  .lm-gpanel-dropdown-item--danger { color: #dc2626; }
  .lm-gpanel-dropdown-item--danger:hover { background: #fef2f2; }

  /* Flagged banner */
  .lm-gpanel-flag-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Stats grid */
  .lm-gpanel-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e5e7eb;
    margin-bottom: 0;
  }
  .lm-gpanel-stat {
    background: #fff;
    padding: 20px 16px;
    text-align: center;
  }
  .lm-gpanel-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #0B1F3A;
    line-height: 1;
    margin-bottom: 6px;
    font-family: var(--font-sans);
  }
  .lm-gpanel-stat-value--gold { color: #C9A84C; }
  .lm-gpanel-stat-value--red  { color: #dc2626; }
  .lm-gpanel-stat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Sections */
  .lm-gpanel-section {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
  }
  .lm-gpanel-section + .lm-gpanel-section { border-top: 1px solid #e5e7eb; }
  .lm-gpanel-section--gdpr { background: #fafafa; }
  .lm-gpanel-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 14px;
  }
  .lm-gpanel-section-header svg { color: #C9A84C; }

  /* Tags */
  .lm-gpanel-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }
  .lm-gpanel-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 999px;
    color: #6b4e1a;
    font-size: 12px;
    font-weight: 500;
  }
  .lm-gpanel-tag-remove {
    color: #9c6e2a;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 120ms;
    padding: 0 2px;
  }
  .lm-gpanel-tag-remove:hover { opacity: 1; }
  .lm-gpanel-empty-inline { color: #9ca3af; font-size: 13px; font-style: italic; }
  .lm-gpanel-add-tag-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
  }
  .lm-gpanel-tag-add-btn {
    padding: 6px 14px;
    background: #0B1F3A;
    color: #fff;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    font-family: var(--font-sans);
    transition: background 150ms;
  }
  .lm-gpanel-tag-add-btn:hover { background: #1a3055; }

  /* GDPR rows */
  .lm-gpanel-gdpr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
  }
  .lm-gpanel-gdpr-row:last-child { border-bottom: none; }
  .lm-gpanel-gdpr-label { color: #6b7280; }
  .lm-gpanel-gdpr-value { color: #111827; font-weight: 500; }
  .lm-gpanel-gdpr-value--warning { color: #d97706; }
  .lm-gpanel-gdpr-value--erased  { color: #6b7280; font-style: italic; }
  }

  .lm-guest-detail-loading {
    @apply flex-1 flex items-center justify-center p-12;
  }

  .lm-guest-detail-header {
    @apply flex items-start justify-between gap-4 p-6 bg-white border-b border-gray-200;
  }

  .lm-guest-detail-identity {
    @apply flex-1 min-w-0;
  }

  .lm-guest-detail-badges {
    @apply flex flex-wrap gap-1 mt-1 mb-1;
  }

  .lm-guest-detail-email {
    @apply text-sm text-lamar-slate m-0;
  }

  .lm-guest-detail-phone {
    @apply text-sm text-lamar-slate m-0;
  }

  .lm-guest-detail-actions {
    @apply flex items-center gap-2 flex-shrink-0;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — actions dropdown
  --------------------------------------------------------------------------- */
  .lm-actions-menu {
    @apply relative;
  }

  .lm-actions-menu__dropdown {
    @apply absolute right-0 top-full mt-1 min-w-[180px] bg-white rounded-lg shadow-lg
           border border-gray-200 z-[9999] list-none m-0 p-1;
  }

  .lm-actions-menu__dropdown li button {
    @apply w-full text-left px-4 py-2 text-sm text-lamar-slate hover:bg-lamar-cream
           rounded-md cursor-pointer border-0 bg-transparent;
  }

  .lm-action-danger {
    @apply text-lamar-red !important;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — flag reason bar
  --------------------------------------------------------------------------- */
  .lm-guest-flag-reason {
    @apply bg-red-50 border-b border-red-200 px-6 py-2 text-sm text-lamar-red;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — tabs
  --------------------------------------------------------------------------- */
  /* Tab container: relative so the animated indicator can be absolutely positioned */
  .lm-guest-tabs {
    position: relative;
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
  }

  /* Tab buttons — each tab expands to fill equal share of the panel width */
  .lm-guest-tab {
    position: relative;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    color: #6b7280;
    transition: color 150ms ease;
    min-height: 44px;
  }

  .lm-guest-tab-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
  }

  .lm-guest-tab:hover {
    color: #1a2744;
  }

  .lm-guest-tab--active {
    color: #1a2744;
  }

  /* Animated sliding underline — driven by JS offsetLeft/offsetWidth */
  .lm-guest-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #c9a96e; /* lamar-gold */
    transition: left 200ms ease-out, width 200ms ease-out, opacity 150ms;
    pointer-events: none;
  }

  .lm-guest-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }

  /* GDPR data-retention rows — two-column grid so label and date align */
  .lm-gdpr-section {
    @apply mt-4;
  }

  .lm-gdpr-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
  }

  .lm-gdpr-label {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
  }

  .lm-gdpr-value {
    font-size: 0.8125rem;
    color: #1a2744;
  }

  .lm-gdpr-value--warning {
    color: #d97706;
    font-weight: 600;
  }

  .lm-gdpr-value--erased {
    color: #6b7280;
    font-style: italic;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — stats grid
  --------------------------------------------------------------------------- */
  .lm-guest-stats-grid {
    @apply grid grid-cols-2 gap-4 mb-6;
  }

  .lm-stat-card {
    @apply lamar-card p-4 text-center;
  }

  .lm-stat-value {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-stat-label {
    @apply text-xs text-lamar-slate mt-1;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — section heading
  --------------------------------------------------------------------------- */
  .lm-guest-section {
    @apply mt-6;
  }

  .lm-guest-section-title {
    @apply text-sm font-semibold text-lamar-slate uppercase tracking-wider mb-3;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — tags
  --------------------------------------------------------------------------- */
  .lm-tag-list {
    @apply flex flex-wrap gap-2 mb-3;
  }

  .lm-tag {
    @apply inline-flex items-center gap-1 px-3 py-1 bg-lamar-cream rounded-full
           text-xs font-medium text-lamar-navy border border-gray-200;
  }

  .lm-tag__remove {
    @apply text-lamar-slate hover:text-lamar-red cursor-pointer border-0 bg-transparent
           leading-none p-0 ml-1;
  }

  .lm-add-tag-row {
    @apply flex gap-2 mt-2;
  }

  .lm-empty-inline {
    @apply text-gray-400 text-sm;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — form rows (edit mode)
  --------------------------------------------------------------------------- */
  .lm-form-row {
    @apply mb-4;
  }

  .lm-form-actions {
    @apply flex gap-3 mt-6 pt-4 border-t border-gray-100;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — edit modal overlay
  --------------------------------------------------------------------------- */
  .lm-guest-edit-modal,
  .lm-confirm-modal {
    @apply fixed inset-0 bg-black/60 z-[2000] flex items-center justify-center p-4;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — notes
  --------------------------------------------------------------------------- */
  .lm-guest-notes {
    @apply flex flex-col gap-4;
  }

  .lm-add-note-form {
    @apply flex flex-col gap-2;
  }

  .lm-note-textarea {
    @apply resize-y min-h-[5rem];
  }

  .lm-notes-list {
    @apply flex flex-col gap-3;
  }

  .lm-note-item {
    @apply lamar-card p-4;
  }

  .lm-note-item__header {
    @apply flex items-baseline gap-2 mb-1 flex-wrap;
  }

  .lm-note-item__author {
    @apply text-sm font-semibold text-lamar-navy;
  }

  .lm-note-item__venue {
    @apply text-xs text-lamar-slate;
  }

  .lm-note-item__date {
    @apply text-xs text-gray-400 ml-auto;
  }

  .lm-note-item__body {
    @apply text-sm text-lamar-slate m-0 whitespace-pre-wrap;
  }

  .lm-note-item__actions {
    @apply mt-2 pt-2 border-t border-gray-100;
  }

  .lm-note-delete-btn {
    @apply text-xs text-lamar-red hover:underline cursor-pointer border-0 bg-transparent p-0;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — preferences
  --------------------------------------------------------------------------- */
  .lm-guest-preferences {
    @apply flex flex-col gap-2;
  }

  .lm-pref-grid {
    @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
  }

  .lm-pref-group--full {
    @apply sm:col-span-2;
  }

  .lm-pref-text {
    @apply text-sm text-lamar-slate m-0;
  }

  .lm-chip-editor {
    @apply flex flex-col gap-2;
  }

  .lm-chip-list {
    @apply flex flex-wrap gap-2 min-h-[2rem];
  }

  .lm-chip-list--readonly {
    @apply min-h-0;
  }

  .lm-chip {
    @apply inline-flex items-center gap-1 px-3 py-1 bg-lamar-cream rounded-full
           text-xs font-medium text-lamar-navy border border-gray-200;
  }

  .lm-chip--allergy {
    @apply bg-red-50 text-lamar-red border-red-200;
  }

  .lm-chip__remove {
    @apply text-lamar-slate hover:text-lamar-red cursor-pointer border-0 bg-transparent
           leading-none p-0 ml-0.5;
  }

  .lm-chip-add-row {
    @apply flex gap-2;
  }

  .lamar-input--sm {
    @apply py-1 text-xs;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — merge modal
  --------------------------------------------------------------------------- */
  .lm-merge-overlay {
    @apply fixed inset-0 bg-black/60 z-[2000] flex items-center justify-center p-4;
  }

  .lm-merge-panel {
    @apply w-full max-w-lg max-h-[90vh] overflow-y-auto;
  }

  .lm-merge-row {
    @apply mb-4;
  }

  .lm-merge-label {
    @apply text-xs font-semibold text-lamar-slate uppercase tracking-wider mb-2;
  }

  .lm-merge-guest-card {
    @apply lamar-card p-3 flex items-center gap-3;
  }

  .lm-merge-guest-card--keep {
    @apply border-l-4 border-lamar-gold;
  }

  .lm-merge-guest-card--remove {
    @apply border-l-4 border-lamar-red mt-2;
  }

  .lm-merge-guest-email {
    @apply text-xs text-lamar-slate ml-2;
  }

  .lm-merge-search {
    @apply relative;
  }

  .lm-merge-results {
    @apply absolute top-full left-0 right-0 z-10 bg-white border border-gray-200 rounded-lg
           shadow-lg mt-1 list-none m-0 p-1 max-h-48 overflow-y-auto;
  }

  .lm-merge-result-item {
    @apply flex items-baseline justify-between px-3 py-2 rounded-md cursor-pointer
           hover:bg-lamar-cream;
  }

  .lm-merge-result-item--selected {
    @apply bg-lamar-cream;
  }

  .lm-merge-result-name {
    @apply text-sm font-medium text-lamar-navy;
  }

  .lm-merge-result-email {
    @apply text-xs text-lamar-slate ml-2;
  }

  .lm-merge-preview {
    @apply bg-amber-50 border border-lamar-amber rounded-lg px-4 py-3 text-sm text-amber-800 mb-4;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — guest list card (mobile)
  --------------------------------------------------------------------------- */
  .lm-guest-card {
    @apply cursor-pointer hover:shadow-md transition-shadow;
  }

  .lm-guest-card__name {
    @apply font-semibold text-lamar-navy mb-1 flex items-center gap-2;
  }

  .lm-guest-card__phone {
    @apply text-sm text-lamar-slate;
  }

  .lm-guest-card__meta {
    @apply text-xs text-gray-400 mt-1;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — pagination
  --------------------------------------------------------------------------- */
  .lm-pagination {
    @apply flex items-center justify-center gap-4 py-4;
  }

  .lm-pagination__info {
    @apply text-sm text-lamar-slate;
  }

  /* ---------------------------------------------------------------------------
     Guest CRM — empty / loading states
  --------------------------------------------------------------------------- */
  .lm-empty-state {
    @apply text-center py-8 text-lamar-slate text-sm;
  }
  .lm-helper-text {
    @apply text-lamar-slate text-sm mb-4;
  }

  .lm-loading-row {
    @apply flex justify-center py-8;
  }
}

/* =============================================================================
   Responsive — mobile card pattern (≤768px)
   ============================================================================= */
@media (max-width: 768px) {
  .lamar-table-wrapper table.lamar-table {
    display: none;
  }

  .lamar-card-list {
    display: flex;
  }

  .lm-col-desktop {
    display: none;
  }

  /* Sidebar collapses on mobile */
  .lamar-sidebar {
    @apply w-0 overflow-hidden;
  }

  .lamar-sidebar.open {
    @apply w-64;
  }

  /* Guest detail panel goes full-screen on mobile */
  .lm-guest-detail-panel {
    max-width: 100%;
  }

  .lm-guest-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Booking form mobile */
  .lm-booking-shell {
    max-width: 100%;
    padding: 0 8px;
  }

  .lm-booking-steps {
    gap: 4px;
  }

  .lm-step-label {
    display: none;
  }

  .lm-slot-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .lm-form-row--split {
    @apply flex-col;
  }

  .lm-summary-card {
    @apply text-sm;
  }
}

/* =============================================================================
   Booking Widget — Public booking form
   ============================================================================= */

@layer components {

  /* Shell */
  .lm-booking-shell {
    @apply max-w-lg mx-auto py-8 px-4;
  }

  /* Header */
  .lm-booking-header {
    @apply text-center mb-6 pb-4 border-b-2;
  }

  .lm-booking-venue-name {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-booking-tagline {
    @apply text-lamar-slate text-sm mt-1;
  }

  /* Step indicator */
  .lm-booking-steps {
    @apply flex items-center justify-center gap-2 mb-6;
  }

  .lm-booking-step {
    @apply flex items-center gap-1.5 text-sm text-gray-400;
  }

  .lm-booking-step--active {
    @apply text-lamar-navy font-semibold;
  }

  .lm-booking-step--complete .lm-step-dot {
    @apply bg-lamar-green text-white;
  }

  .lm-step-dot {
    @apply w-6 h-6 rounded-full bg-gray-200 text-gray-500 text-xs
           flex items-center justify-center font-bold;
  }

  .lm-booking-step--active .lm-step-dot {
    @apply bg-lamar-gold text-white;
  }

  /* Error banner */
  .lm-booking-error-banner {
    @apply bg-red-50 border border-red-200 text-lamar-red rounded-lg px-4 py-3 mb-4 text-sm;
  }

  /* Step panels */
  .lm-booking-step-panel {
    @apply lamar-card p-6;
  }

  /* Back link */
  .lm-back-link {
    @apply text-sm text-lamar-slate hover:text-lamar-navy cursor-pointer
           border-0 bg-transparent p-0 mb-4 block;
  }

  /* Field groups */
  .lm-field-group {
    @apply mb-4;
  }

  .lm-field-label {
    @apply block text-sm font-medium text-lamar-navy mb-1;
  }

  .lm-required {
    @apply text-lamar-red;
  }

  .lm-field-error {
    @apply text-lamar-red text-xs mt-1;
  }

  .lm-input--error {
    @apply border-lamar-red ring-1 ring-lamar-red;
  }

  .lm-date-input {
    @apply w-full;
  }

  .lm-textarea {
    @apply resize-none;
  }

  /* Party size stepper */
  .lm-party-stepper {
    @apply flex items-center gap-3;
  }

  .lm-stepper-btn {
    @apply w-10 h-10 rounded-full border-2 border-lamar-gold text-lamar-gold
           text-xl font-bold flex items-center justify-center
           hover:bg-lamar-gold hover:text-white transition-colors
           disabled:opacity-40 disabled:cursor-not-allowed;
  }

  .lm-stepper-value {
    @apply text-2xl font-bold text-lamar-navy w-10 text-center;
  }

  /* Slot grid */
  .lm-slot-grid {
    @apply grid grid-cols-4 gap-2 mt-4;
  }

  .lm-slot-btn {
    @apply py-2 px-1 text-sm rounded-lg border border-gray-200 text-lamar-slate
           hover:border-lamar-gold hover:text-lamar-navy hover:bg-amber-50
           transition-colors cursor-pointer bg-white font-medium;
  }

  .lm-slot-btn--selected {
    @apply bg-lamar-gold text-white border-lamar-gold;
  }

  /* No slots */
  .lm-no-slots {
    @apply text-center text-lamar-slate py-8 text-sm;
  }

  /* Loading row */
  .lm-loading-row {
    @apply flex items-center gap-2 text-sm text-lamar-slate py-4 justify-center;
  }

  .lm-spinner {
    @apply w-4 h-4 border-2 border-lamar-gold border-t-transparent
           rounded-full animate-spin inline-block;
  }

  /* Details form */
  .lm-details-form {
    @apply mt-4;
  }

  .lm-form-row--split {
    @apply flex gap-4;
  }

  .lm-form-row--split .lm-field-group {
    @apply flex-1;
  }

  /* Policy box */
  .lm-policy-box {
    @apply bg-amber-50 border border-amber-200 rounded-lg p-4 mb-4;
  }

  .lm-policy-text {
    @apply text-sm text-lamar-slate mb-2;
  }

  .lm-checkbox-label {
    @apply flex items-start gap-2 text-sm text-lamar-slate cursor-pointer;
  }

  .lm-checkbox-label input[type="checkbox"] {
    @apply mt-0.5 accent-lamar-gold;
  }

  /* Summary card (Confirm step) */
  .lm-summary-card {
    @apply bg-lamar-cream rounded-lg p-4 mb-6;
  }

  .lm-summary-row {
    @apply flex justify-between py-2 border-b border-gray-200 last:border-0 text-sm;
  }

  .lm-summary-label {
    @apply text-lamar-slate;
  }

  .lm-summary-value {
    @apply font-medium text-lamar-navy;
  }

  /* Actions bar */
  .lm-booking-actions {
    @apply flex justify-end mt-6;
  }

  /* Success screen */
  .lm-booking-success {
    @apply lamar-card p-8 text-center;
  }

  .lm-success-icon {
    @apply w-16 h-16 rounded-full bg-lamar-green text-white text-3xl
           flex items-center justify-center mx-auto mb-4;
  }

  .lm-success-heading {
    @apply text-xl font-bold text-lamar-navy mb-2;
  }

  .lm-success-venue {
    @apply text-lamar-slate mb-4;
  }

  .lm-success-summary {
    @apply text-left bg-lamar-cream rounded-lg p-4 mb-4;
  }

  .lm-success-row {
    @apply flex justify-between py-2 border-b border-gray-200 last:border-0 text-sm;
  }

  .lm-success-reference {
    @apply bg-lamar-navy text-white rounded-lg p-4 mb-4;
  }

  .lm-reference-label {
    @apply block text-xs text-gray-300 mb-1;
  }

  .lm-reference-code {
    @apply text-2xl font-mono font-bold tracking-widest text-lamar-gold;
  }

  .lm-success-manage-msg {
    @apply text-sm text-lamar-slate;
  }

  /* Booking error (venue not found) */
  .lm-booking-error {
    @apply lamar-card p-8 text-center text-lamar-red;
  }

  /* Step transition */
  .lm-fade-enter-active,
  .lm-fade-leave-active {
    transition: opacity 0.15s ease;
  }

  .lm-fade-enter-from,
  .lm-fade-leave-to {
    opacity: 0;
  }

  /* ===========================================================================
     Floor Plan Builder — Session 5A
  =========================================================================== */

  /* Page wrapper */
  .lm-floor-plan-builder {
    @apply flex flex-col h-full min-h-screen bg-lamar-cream;
  }

  /* Toolbar */
  .lm-fp-toolbar {
    @apply flex items-center gap-3 px-4 py-3 bg-lamar-navy text-white flex-wrap;
    border-bottom: 2px solid theme('colors.lamar-gold');
  }

  .lm-fp-toolbar-left {
    @apply flex items-center gap-3 flex-1;
  }

  .lm-fp-toolbar-right {
    @apply flex items-center gap-2 flex-wrap;
  }

  .lm-fp-plan-select {
    @apply bg-white text-lamar-navy rounded px-2 py-1 text-sm font-medium;
    min-width: 160px;
  }

  .lm-fp-table-count {
    @apply text-sm text-gray-300;
  }

  /* Workspace */
  .lm-fp-workspace {
    @apply flex flex-1 overflow-hidden;
  }

  .lm-fp-workspace--with-editor .lm-fp-canvas-wrap {
    flex: 1;
  }

  /* Canvas area */
  .lm-fp-canvas-wrap {
    @apply flex-1 overflow-auto p-4 relative;
    background: var(--lamar-muted);
  }

  .lm-fp-canvas-container {
    @apply relative inline-block;
  }

  .lm-fp-svg {
    @apply block border border-lamar-border rounded-lg shadow-sm bg-white;
    max-width: 100%;
    height: auto;
    touch-action: none;
  }

  /* Empty canvas overlay */
  .lm-fp-empty-canvas {
    @apply absolute inset-0 flex items-center justify-center pointer-events-none;
    color: #9ca3af;
    font-size: 0.875rem;
  }

  /* Loading + empty states */
  .lm-fp-loading {
    @apply flex items-center justify-center gap-2 p-12 text-lamar-slate;
  }

  .lm-fp-empty {
    @apply flex items-center justify-center p-12;
  }

  .lm-fp-empty-card {
    @apply max-w-md w-full text-center;
  }

  /* Dirty bar */
  .lm-fp-dirty-bar {
    @apply flex items-center justify-between px-4 py-2 bg-amber-50 border-t border-amber-200;
    font-size: 0.875rem;
    color: theme('colors.lamar-amber');
  }

  /* Table editor panel */
  .lm-table-editor {
    @apply flex flex-col bg-white border-l border-lamar-border shadow-lg;
    width: 300px;
    min-width: 260px;
    overflow-y: auto;
  }

  .lm-table-editor-header {
    @apply flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-lamar-navy text-white;
  }

  .lm-table-editor-header .lamar-card-title {
    @apply text-white text-base;
  }

  .lm-table-editor-body {
    @apply flex flex-col gap-3 p-4 flex-1;
  }

  .lm-table-editor-footer {
    @apply flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-t border-gray-200 bg-gray-50;
  }

  .lm-editor-footer-left {
    @apply flex items-center gap-2;
  }

  .lm-editor-footer-right {
    @apply flex items-center gap-2;
  }

  .lm-field-error--full {
    @apply w-full mt-1;
  }

  /* Form helpers */
  .lm-form-group {
    @apply flex flex-col gap-1;
  }

  .lm-form-row {
    @apply grid grid-cols-2 gap-3;
  }

  .lm-form-row--small {
    @apply grid grid-cols-2 gap-2;
  }

  .lm-label {
    @apply text-xs font-semibold text-lamar-slate uppercase tracking-wide;
  }

  .lm-label--muted {
    @apply text-gray-400 normal-case;
  }

  .lm-label--danger {
    @apply text-lamar-red;
  }

  .lm-hint {
    @apply text-xs text-gray-500;
  }

  .lm-hint--warning {
    @apply text-amber-600;
  }

  .lm-divider {
    @apply border-t border-gray-200 my-2;
  }

  .lm-textarea {
    @apply resize-none;
  }

  /* Rotation slider */
  .lm-rotation-row {
    @apply flex items-center gap-2;
  }

  .lm-range {
    @apply flex-1 accent-lamar-gold;
  }

  .lm-rotation-value {
    @apply text-xs text-lamar-slate w-10 text-right;
  }

  /* Toggles */
  .lm-toggle-group {
    @apply flex flex-col gap-2;
  }

  .lm-toggle-label {
    @apply flex items-center gap-2 text-sm text-lamar-slate cursor-pointer;
  }

  .lm-toggle-input {
    @apply accent-lamar-gold w-4 h-4;
  }

  /* Confirm delete pulse */
  .lm-confirm-pulse {
    animation: lm-pulse 0.8s infinite;
  }

  @keyframes lm-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
  }

  /* Slide transition for editor panel */
  .lm-slide-enter-active,
  .lm-slide-leave-active {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .lm-slide-enter-from,
  .lm-slide-leave-to {
    transform: translateX(100%);
    opacity: 0;
  }

  /* Canvas placeholder */
  .lm-fp-canvas-placeholder {
    @apply flex items-center justify-center h-64 text-gray-400;
  }

  /* Mobile: canvas scrollable, editor below */
  @media (max-width: 768px) {
    .lm-fp-workspace {
      @apply flex-col;
    }

    .lm-table-editor {
      width: 100%;
      min-width: unset;
      border-left: none;
      border-top: 1px solid var(--lamar-border);
    }

    .lm-fp-toolbar {
      @apply text-sm;
    }

    .lm-fp-plan-select {
      min-width: 120px;
    }
  }

  /* ---------------------------------------------------------------------------
     Guest self-service — manage booking page (/manage/{token}/)
  --------------------------------------------------------------------------- */

  .lm-manage-page {
    @apply min-h-screen bg-lamar-cream flex flex-col;
  }

  /* Centred state screens (loading, not found, rate limited, success) */
  .lm-manage-center {
    @apply flex flex-col items-center justify-center flex-1 px-4 py-16 text-center;
  }

  .lm-manage-state-card {
    @apply lamar-card max-w-sm w-full p-8 text-center;
  }

  .lm-manage-state-icon {
    @apply text-5xl mb-4 font-bold;
  }

  .lm-manage-state-icon--success { @apply text-lamar-green; }
  .lm-manage-state-icon--error   { @apply text-lamar-red; }
  .lm-manage-state-icon--warn    { @apply text-lamar-amber; }

  .lm-manage-state-title {
    @apply text-lamar-navy font-semibold text-xl mb-2;
  }

  .lm-manage-state-message {
    @apply text-lamar-slate text-sm;
  }

  .lm-manage-loading-text {
    @apply mt-3 text-lamar-slate text-sm;
  }

  .lm-manage-summary-mini {
    @apply mt-4 text-sm text-lamar-slate border-t border-gray-100 pt-4;
  }

  /* Main content container (booking found) */
  .lm-manage-container {
    @apply max-w-xl mx-auto w-full px-4 py-8 flex flex-col gap-6;
  }

  /* Page header */
  .lm-manage-header {
    @apply text-center;
  }

  .lm-manage-venue-name {
    @apply text-lamar-navy font-bold text-2xl mb-1;
  }

  .lm-manage-page-subtitle {
    @apply text-lamar-slate text-sm;
  }

  /* Booking summary card */
  .lm-manage-card {
    @apply w-full;
  }

  .lm-manage-card-header {
    @apply flex items-center justify-between;
  }

  .lm-manage-card-body {
    @apply p-6;
  }

  /* Detail grid: 2 columns on tablet+, 1 column on mobile */
  .lm-manage-detail-grid {
    @apply grid grid-cols-2 gap-4;
  }

  .lm-manage-detail-item {
    @apply flex flex-col gap-1;
  }

  .lm-manage-detail-item--full {
    @apply col-span-2;
  }

  .lm-manage-detail-item dt {
    @apply text-xs font-medium text-gray-400 uppercase tracking-wide;
  }

  .lm-manage-detail-item dd {
    @apply text-lamar-navy font-medium text-sm m-0;
  }

  .lm-manage-reference {
    @apply font-mono font-bold text-base tracking-widest text-lamar-gold;
  }

  /* Cancel card */
  .lm-manage-cancel-card {
    @apply border-lamar-red;
  }

  /* Amber warning block (late cancel) */
  .lm-manage-warning {
    @apply bg-amber-50 border border-lamar-amber rounded-lg p-4 mb-4 text-sm text-lamar-slate;
  }

  .lm-manage-warning-title {
    @apply font-semibold text-lamar-amber mb-1;
  }

  .lm-manage-warning-note {
    @apply text-xs text-gray-400 mt-2;
  }

  /* Free cancel block */
  .lm-manage-free-cancel {
    @apply flex flex-col gap-3;
  }

  .lm-manage-free-cancel-label {
    @apply text-lamar-green font-medium text-sm;
  }

  /* Late cancel preview block */
  .lm-manage-late-cancel-preview {
    @apply flex flex-col gap-4;
  }

  /* Confirm step */
  .lm-manage-confirm-step {
    @apply flex flex-col gap-4;
  }

  .lm-manage-confirm-question {
    @apply font-semibold text-lamar-navy;
  }

  .lm-manage-reason-label {
    @apply flex flex-col gap-1 text-sm text-lamar-slate;
  }

  .lm-manage-reason-input {
    @apply mt-1 resize-none;
  }

  .lm-manage-confirm-actions {
    @apply flex flex-col gap-2 sm:flex-row;
  }

  .lm-manage-btn-spinner {
    @apply mr-2;
  }

  .lm-manage-cancel-error {
    @apply text-lamar-red text-sm;
  }

  /* Cancelled / past notices */
  .lm-manage-cancelled-notice,
  .lm-manage-past-notice {
    @apply lamar-card lamar-card-body text-center text-lamar-slate text-sm;
  }

  .lm-manage-cancelled-date {
    @apply text-xs text-gray-400 mt-1;
  }

  /* Footer */
  .lm-manage-footer {
    @apply text-center text-sm text-lamar-slate border-t border-gray-200 pt-4;
  }

  .lm-manage-footer-contacts {
    @apply flex flex-col sm:flex-row gap-2 justify-center mt-2;
  }

  .lm-manage-footer-link {
    @apply text-lamar-gold underline;
  }

  /* Mobile adjustments */
  @media (max-width: 640px) {
    .lm-manage-detail-grid {
      @apply grid-cols-1;
    }

    .lm-manage-detail-item--full {
      @apply col-span-1;
    }

    .lm-manage-container {
      @apply px-3 py-6;
    }

    .lm-manage-confirm-actions .lamar-btn {
      @apply w-full justify-center;
    }
  }

  /* ---------------------------------------------------------------------------
     Floor Plan — View Mode Toggle
  --------------------------------------------------------------------------- */
  .lm-view-toggle {
    @apply flex gap-2 px-4 py-2 bg-white border-b border-gray-200;
  }

  /* ---------------------------------------------------------------------------
     Floor Plan — Staff Live View (3-column layout)
  --------------------------------------------------------------------------- */
  .lm-staff-view {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    grid-template-rows: 1fr;
    height: calc(100vh - 120px);
    overflow: hidden;
  }

  .lm-staff-canvas-wrap {
    @apply overflow-auto bg-lamar-muted flex items-start justify-center p-4;
  }

  /* ---------------------------------------------------------------------------
     Booking List Sidebar (left panel)
  --------------------------------------------------------------------------- */
  .lm-booking-list {
    @apply flex flex-col gap-3 overflow-y-auto bg-white border-r border-lamar-border p-3;
  }

  .lm-booking-list-date .lm-label {
    @apply block text-xs font-medium text-lamar-slate mb-1;
  }

  .lm-booking-list-summary {
    @apply flex flex-wrap gap-1;
  }

  .lm-summary-pill {
    @apply text-xs px-2 py-0.5 rounded-full font-medium;
  }

  .lm-summary-pill--confirmed {
    @apply bg-amber-100 text-amber-800;
  }

  .lm-summary-pill--arrived {
    @apply bg-green-100 text-green-800;
  }

  .lm-summary-pill--noshow {
    @apply bg-red-100 text-red-800;
  }

  .lm-booking-list-loading {
    @apply flex justify-center py-4;
  }

  .lm-booking-list-empty {
    @apply text-sm text-lamar-slate text-center py-6;
  }

  .lm-booking-group {
    @apply mb-2;
  }

  .lm-booking-group-time {
    @apply text-xs font-semibold text-lamar-navy bg-gray-100 px-2 py-0.5 rounded mb-1;
  }

  .lm-booking-list-item {
    @apply flex flex-col gap-0.5 px-2 py-2 rounded-lg cursor-pointer hover:bg-lamar-cream transition-colors border border-transparent;
  }

  .lm-booking-list-item--active {
    @apply border-lamar-gold bg-amber-50;
  }

  .lm-bli-top {
    @apply flex items-center justify-between gap-1;
  }

  .lm-bli-name {
    @apply text-sm font-medium text-lamar-navy truncate;
  }

  .lm-bli-bottom {
    @apply flex items-center gap-2 text-xs text-lamar-slate;
  }

  .lm-bli-table {
    @apply font-mono text-lamar-gold;
  }

  /* ---------------------------------------------------------------------------
     Status Legend (bottom of sidebar)
  --------------------------------------------------------------------------- */
  .lm-status-legend {
    @apply mt-auto pt-3 border-t border-gray-200;
  }

  .lm-legend-title {
    @apply text-xs font-semibold text-lamar-slate uppercase tracking-wide mb-2;
  }

  .lm-legend-item {
    @apply flex items-center gap-2 mb-1;
  }

  .lm-legend-swatch {
    @apply inline-block w-4 h-4 rounded-sm flex-shrink-0;
  }

  .lm-legend-label {
    @apply text-xs text-lamar-slate;
  }

  /* ---------------------------------------------------------------------------
     Table Drawer (right panel)
  --------------------------------------------------------------------------- */
  .lm-table-drawer {
    @apply flex flex-col bg-white border-l border-gray-200 overflow-y-auto;
  }

  .lm-drawer-header {
    @apply flex items-center justify-between px-4 py-3 border-b-2 border-lamar-gold bg-lamar-navy;
  }

  .lm-drawer-header-info {
    @apply flex items-center gap-2;
  }

  .lm-drawer-table-label {
    @apply text-white font-bold text-lg;
  }

  .lm-drawer-close {
    @apply text-white text-2xl leading-none hover:text-lamar-gold transition-colors bg-transparent border-0 cursor-pointer;
  }

  .lm-drawer-error {
    @apply bg-red-50 border-l-4 border-lamar-red text-lamar-red text-sm px-4 py-2;
  }

  .lm-drawer-empty {
    @apply flex items-center justify-center flex-1 p-6;
  }

  .lm-drawer-reserve-btn {
    @apply w-full py-4 text-base font-semibold justify-center;
  }

  .lm-drawer-body {
    @apply px-4 py-3 flex flex-col gap-2;
  }

  .lm-drawer-section-title {
    @apply text-xs font-semibold text-lamar-slate uppercase tracking-wide mb-1;
  }

  .lm-drawer-section-title--secondary {
    @apply px-4 border-t border-gray-200 pt-3 mt-1;
  }

  .lm-drawer-detail-row {
    @apply flex items-start gap-2 text-sm;
  }

  .lm-drawer-detail-label {
    @apply text-lamar-slate w-28 flex-shrink-0 text-xs pt-0.5;
  }

  .lm-drawer-detail-value {
    @apply text-lamar-navy font-medium;
  }

  .lm-drawer-detail-value--wrap {
    @apply whitespace-pre-wrap;
  }

  .lm-drawer-detail-value--muted {
    @apply text-lamar-slate font-normal;
  }

  .lm-drawer-ref {
    @apply font-mono text-lamar-gold text-xs;
  }

  .lm-drawer-readonly-note {
    @apply text-sm text-lamar-slate italic;
  }

  /* Staff action buttons */
  .lm-drawer-actions {
    @apply flex flex-col gap-2 px-4 py-3 border-t border-gray-200;
  }

  .lm-btn-arrived {
    @apply bg-lamar-green text-white hover:opacity-90;
  }

  .lm-btn-noshow {
    @apply bg-lamar-red text-white hover:opacity-90;
  }

  .lm-btn-completed {
    @apply bg-blue-600 text-white hover:opacity-90;
  }

  /* Drawer form fields (walk-in reservation + change table) */
  .lm-drawer-field {
    @apply px-4 py-1;
  }

  .lm-drawer-label {
    @apply block text-xs font-semibold text-lamar-slate mb-1;
  }

  .lm-drawer-input {
    @apply w-full border border-gray-300 rounded px-2 py-1 text-sm text-lamar-navy focus:outline-none focus:border-lamar-gold;
  }

  .lm-drawer-error-msg {
    @apply mx-4 my-1 text-xs text-lamar-red bg-red-50 border-l-4 border-lamar-red px-3 py-2 rounded;
  }

  .lm-drawer-meta-row {
    @apply flex items-center gap-2 px-4 pb-1;
  }

  .lm-drawer-ref {
    @apply text-xs text-lamar-slate font-mono ml-auto;
  }

  .lm-drawer-row {
    @apply flex text-sm px-4 py-0.5;
  }

  .lm-drawer-key {
    @apply w-28 flex-shrink-0 text-lamar-slate text-xs font-medium;
  }

  .lm-drawer-val {
    @apply text-lamar-navy flex-1;
  }

  .lm-drawer-confirm {
    @apply px-4 py-3 bg-red-50 border-t border-red-200;
  }

  .lm-drawer-confirm-body {
    @apply text-sm text-lamar-navy mb-3;
  }

  .lm-drawer-readonly-note {
    @apply px-4 py-2 text-xs text-lamar-slate italic;
  }

  /* Settings: table assignment mode chips */
  .lm-mode-chip {
    @apply flex flex-col gap-1 border-2 border-gray-200 rounded-lg p-3 cursor-pointer flex-1 transition-colors;
    min-width: 0;
  }

  .lm-mode-chip strong {
    @apply text-sm font-semibold text-lamar-navy;
  }

  .lm-mode-chip span {
    @apply text-xs text-lamar-slate;
  }

  .lm-mode-chip--active {
    @apply border-lamar-gold bg-amber-50;
  }

  .lm-mode-chip--active strong {
    @apply text-lamar-gold;
  }

  /* Walk-in form: phone prefix + number inline */
  .lm-drawer-phone-row {
    @apply flex gap-2;
  }
  .lm-drawer-prefix-select {
    @apply w-28 flex-shrink-0;
  }
  .lm-drawer-phone-input {
    @apply flex-1 min-w-0;
  }

  /* Walk-in form: per-booking assignment chips */
  .lm-drawer-assign-chips {
    @apply flex gap-2 mt-1;
  }
  .lm-drawer-assign-chip {
    @apply flex-1 text-center text-sm font-medium py-1.5 px-3 rounded-md border border-gray-200 cursor-pointer transition-colors select-none;
  }
  .lm-drawer-assign-chip--active {
    @apply border-lamar-gold bg-amber-50 text-amber-700;
  }
  .lm-drawer-assign-hint {
    @apply text-xs text-gray-500 mt-1;
  }
  .lm-drawer-assign-hint--hard {
    @apply text-amber-700;
  }

  /* Secondary bookings list */
  .lm-drawer-secondary-booking {
    @apply flex items-center gap-2 px-4 py-2 text-sm border-t border-gray-100;
  }

  .lm-drawer-secondary-time {
    @apply font-mono text-xs text-lamar-slate w-10 flex-shrink-0;
  }

  .lm-drawer-secondary-name {
    @apply text-lamar-navy flex-1 truncate;
  }

  .lm-drawer-secondary-size {
    @apply text-xs text-lamar-slate;
  }

  /* ---------------------------------------------------------------------------
     Booking Form — Payment Step (Stripe Elements)
  --------------------------------------------------------------------------- */
  .lm-payment-step {
    @apply flex flex-col gap-4;
  }

  .lm-payment-info {
    @apply bg-amber-50 border border-lamar-gold rounded-lg p-4;
  }

  .lm-payment-amount {
    @apply flex items-baseline justify-between mb-1;
  }

  .lm-payment-amount-label {
    @apply text-sm text-lamar-slate;
  }

  .lm-payment-amount-value {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-payment-explanation {
    @apply text-xs text-lamar-slate mt-1;
  }

  .lm-stripe-element-wrap {
    @apply border border-lamar-border rounded-lg p-4 bg-white;
    min-height: 200px;
  }

  .lm-payment-error {
    @apply bg-red-50 border border-lamar-red text-lamar-red text-sm rounded-lg px-4 py-3;
  }

  .lm-payment-secure-notice {
    @apply text-xs text-lamar-slate text-center;
  }

  .lm-payment-loading {
    @apply flex items-center gap-2 text-lamar-slate text-sm;
  }

  /* Confirm step — card hold notice */
  .lm-payment-hold-notice {
    @apply bg-amber-50 border-l-4 border-lamar-amber rounded-r-lg px-4 py-3;
  }

  .lm-payment-hold-notice-text {
    @apply text-sm text-lamar-slate;
  }

  /* ---------------------------------------------------------------------------
     Staff view mobile (≤768px): sidebar stacks on top, drawer full-screen
  --------------------------------------------------------------------------- */
  @media (max-width: 768px) {
    .lm-staff-view {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      height: auto;
    }

    .lm-booking-list {
      @apply border-r-0 border-b border-lamar-border max-h-56 overflow-y-auto;
    }

    .lm-staff-canvas-wrap {
      min-height: 300px;
    }

    .lm-table-drawer {
      position: fixed;
      inset: 0;
      z-index: 50;
      border-left: none;
    }

    .lm-view-toggle {
      @apply justify-center;
    }
  }

  /* ---------------------------------------------------------------------------
     Session 8: Charge confirmation panel (TableDrawer.vue)
  --------------------------------------------------------------------------- */

  /* Inline confirmation overlay (no-show / staff cancel confirm) */
  .lm-charge-confirm {
    @apply flex flex-col gap-3 px-4 py-5 bg-red-50 border border-red-200 rounded-lg mx-4 my-3;
  }

  .lm-charge-confirm-title {
    @apply font-semibold text-lamar-navy text-sm;
  }

  .lm-charge-confirm-body {
    @apply text-sm text-lamar-slate;
  }

  .lm-charge-confirm-amount {
    @apply text-2xl font-bold text-lamar-red;
  }

  .lm-charge-confirm-amount--void {
    @apply text-lamar-slate text-base font-normal;
  }

  .lm-charge-confirm-actions {
    @apply flex gap-2 flex-wrap;
  }

  /* Cancel booking button in drawer (distinct from no-show) */
  .lm-btn-cancel-booking {
    @apply lamar-btn bg-gray-100 text-lamar-slate hover:bg-gray-200;
  }

  /* ---------------------------------------------------------------------------
     Session 8: Charge notice in manage-booking cancel success state
  --------------------------------------------------------------------------- */

  .lm-manage-charge-notice {
    @apply mt-3 rounded-lg px-4 py-3 bg-amber-50 border border-lamar-amber text-sm text-lamar-slate;
  }

  /* ---------------------------------------------------------------------------
     Session 9: Modal overlay and modal shell
  --------------------------------------------------------------------------- */

  .lm-modal-overlay {
    @apply fixed inset-0 flex items-center justify-center bg-black/50 px-4;
    z-index: 9999; /* must exceed .lm-shell z-index: 100 on dashboard pages */
  }

  .lm-modal {
    @apply bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] flex flex-col;
  }

  .lm-modal--sm {
    @apply max-w-sm;
  }

  .lm-modal--lg {
    @apply max-w-2xl;
  }

  .lm-modal-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-lamar-border;
  }

  .lm-modal-title {
    @apply text-base font-semibold text-lamar-navy m-0;
  }

  .lm-modal-close {
    @apply p-1 rounded-lg text-lamar-slate hover:bg-gray-100 transition-colors;
  }

  .lm-modal-body {
    @apply px-6 py-4 overflow-y-auto flex flex-col gap-4 flex-1;
  }

  .lm-modal-footer {
    @apply flex items-center justify-end gap-3 px-6 py-4 border-t border-lamar-border;
  }

  .lm-radio-group {
    @apply flex flex-col gap-2 mt-1;
  }

  .lm-radio-label {
    @apply flex items-start gap-2 text-sm text-lamar-slate cursor-pointer;
  }

  .lm-radio-label input[type="radio"] {
    @apply mt-0.5 shrink-0 accent-lamar-gold;
  }

  .lm-form-hint {
    @apply text-xs text-gray-400 mt-1;
  }

  .lm-form-optional {
    @apply text-xs text-gray-400 font-normal;
  }

  /* ---------------------------------------------------------------------------
     LmSelect — Vue 3 searchable dropdown (replaces native <select> for large lists)
  --------------------------------------------------------------------------- */

  .lm-select2 {
    position: relative;
    display: block;
    width: 100%;
  }

  .lm-select2__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #d1cdc7;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-slate);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 42px;
  }
  .lm-select2__trigger:hover,
  .lm-select2--open .lm-select2__trigger {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
    outline: none;
  }

  .lm-select2__value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lm-select2__value--placeholder {
    color: #9ca3af;
  }

  .lm-select2__arrow {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: var(--color-slate);
    transition: transform 0.15s;
  }
  .lm-select2--open .lm-select2__arrow {
    transform: rotate(180deg);
  }

  .lm-select2__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-gold);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 999;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
  }

  .lm-select2__search-wrap {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }
  .lm-select2__search {
    display: block;
    width: 100%;
    padding: 0.4rem 0.625rem;
    border: 1px solid #d1cdc7;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--color-navy);
    outline: none;
    background: var(--color-muted);
  }
  .lm-select2__search:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
  }

  .lm-select2__list {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0;
  }

  .lm-select2__group-label {
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
  }

  .lm-select2__option {
    display: block;
    width: 100%;
    padding: 0.45rem 0.875rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--color-slate);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s, color 0.1s;
  }
  .lm-select2__option:hover {
    background: var(--color-muted);
    color: var(--color-navy);
  }
  .lm-select2__option--selected {
    background: rgba(201,168,76,0.12);
    color: var(--color-gold);
    font-weight: 600;
  }
  .lm-select2__option--selected:hover {
    background: rgba(201,168,76,0.2);
  }

  .lm-select2__no-results {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #9ca3af;
    text-align: center;
  }

  /* phone dial variant — fixed width to match the original */
  .lm-select2--dial {
    width: 200px;
    flex-shrink: 0;
  }

  /* ---------------------------------------------------------------------------
     Phone field — country dial code DDL + local number input
  --------------------------------------------------------------------------- */

  .lm-phone-wrap {
    @apply flex gap-2 items-center w-full;
  }

  .lm-phone-dial {
    @apply flex-shrink-0;
    width: 140px;
    min-width: 0;
  }

  .lm-phone-local {
    @apply flex-1;
    min-width: 120px;
  }

  /* ---------------------------------------------------------------------------
     Create user modal — 2-column grid (Kehemi layout)
  --------------------------------------------------------------------------- */

  .lm-modal--wide {
    @apply w-full;
    max-width: 680px;
  }

  .lm-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    @apply mb-3;
  }

  .lm-modal-grid__full {
    grid-column: 1 / -1;
    @apply mb-3;
  }

  .lm-toggle-field {
    @apply flex flex-col gap-2;
  }

  .lm-form-field--full {
    grid-column: 1 / -1;
  }

  /* ---------------------------------------------------------------------------
     Session 9: Settings page layout
  --------------------------------------------------------------------------- */

  .lm-settings-page {
    @apply px-4 pb-6 pt-0 flex flex-col gap-4;
  }

  .lm-settings-header-card {
    @apply overflow-hidden;
  }

  .lm-settings-tabs {
    @apply flex border-b border-lamar-border px-6 gap-1;
  }

  .lm-settings-tab {
    @apply px-4 py-3 text-sm font-medium text-lamar-slate border-b-2 border-transparent -mb-px transition-colors hover:text-lamar-navy;
  }

  .lm-settings-tab--active {
    @apply text-lamar-navy border-lamar-gold;
  }

  .lm-settings-panel {
    @apply flex flex-col gap-4;
  }

  /* ---------------------------------------------------------------------------
     Session 9: Settings form rows
  --------------------------------------------------------------------------- */

  .lm-settings-form {
    @apply flex flex-col gap-5;
  }

  .lm-form-row {
    @apply flex flex-col gap-1;
  }

  .lm-form-row--toggle {
    @apply flex-row items-center justify-between;
  }

  .lm-form-label {
    @apply text-sm font-medium text-lamar-navy;
  }

  .lm-settings-select {
    @apply max-w-xs;
  }

  .lm-settings-number {
    @apply max-w-[120px];
  }

  .lm-settings-number--currency {
    @apply pl-7;
  }

  .lm-settings-textarea {
    @apply resize-y min-h-[80px];
  }

  .lm-input-prefix-wrap {
    @apply relative flex items-center max-w-[140px];
  }

  .lm-input-prefix {
    @apply absolute left-3 text-lamar-slate pointer-events-none;
  }

  .lm-form-actions {
    @apply flex gap-3 pt-2;
  }

  .lm-settings-error {
    @apply text-sm text-lamar-red bg-red-50 border border-red-200 rounded-lg px-3 py-2;
  }

  .lm-settings-success {
    @apply text-sm text-lamar-green bg-green-50 border border-green-200 rounded-lg px-3 py-2;
  }

  .lm-settings-hint {
    @apply text-xs text-lamar-slate italic;
  }

  .lm-settings-empty {
    @apply text-sm text-lamar-slate italic py-4;
  }

  .lm-card-header-actions {
    @apply flex items-center justify-between;
  }

  /* ---------------------------------------------------------------------------
     Session 9: Day panels (availability slots)
  --------------------------------------------------------------------------- */

  .lm-settings-availability {
    @apply flex flex-col gap-3;
  }

  .lm-day-panel {
    @apply overflow-hidden;
  }

  .lm-day-panel-header {
    @apply w-full flex items-center gap-3 px-5 py-4 text-left cursor-pointer hover:bg-gray-50 transition-colors;
  }

  .lm-day-panel-title {
    @apply font-semibold text-lamar-navy flex-1;
  }

  .lm-day-panel-count {
    @apply text-xs text-lamar-slate;
  }

  .lm-day-panel-chevron {
    @apply text-lamar-slate transition-transform duration-200;
  }

  .lm-day-panel-chevron--open {
    @apply rotate-180;
  }

  .lm-day-panel-body {
    @apply px-5 pb-4 flex flex-col gap-2 border-t border-gray-50;
  }

  .lm-day-panel-empty {
    @apply text-sm text-lamar-slate italic py-2;
  }

  .lm-slot-row {
    @apply flex items-center gap-3 py-2 border-b border-gray-50 last:border-0;
  }

  .lm-slot-row--inactive {
    @apply opacity-50;
  }

  .lm-slot-row-time {
    @apply font-mono font-semibold text-lamar-navy text-sm w-14 shrink-0;
  }

  .lm-slot-row-info {
    @apply text-sm text-lamar-slate flex-1 flex items-center gap-2;
  }

  .lm-slot-row-status {
    @apply shrink-0;
  }

  .lm-slot-row-actions {
    @apply flex gap-1 shrink-0;
  }

  .lm-slot-seasonal-badge {
    @apply text-xs px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded font-medium;
  }

  .lm-add-slot-btn {
    @apply mt-2 text-sm text-lamar-slate hover:text-lamar-navy;
  }

  .lm-copy-to-days {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
  }

  .lm-copy-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .lm-copy-day-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--lamar-slate);
    cursor: pointer;
    user-select: none;
  }

  .lm-copy-day-label--self {
    opacity: 0.45;
    cursor: default;
  }

  .lm-copy-day-checkbox {
    width: 14px;
    height: 14px;
    accent-color: var(--lamar-gold);
    cursor: pointer;
  }

  .lm-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--lamar-gold);
    cursor: pointer;
    text-decoration: underline;
  }

  .lm-link-btn:hover {
    color: var(--lamar-gold-hover);
  }

  .lm-copy-select-all {
    margin-top: 2px;
  }

  /* ---------------------------------------------------------------------------
     Session 9: Cancellation policies table
  --------------------------------------------------------------------------- */

  .lm-settings-cancellation .lamar-card-body {
    @apply p-0;
  }

  .lm-policies-table {
    @apply w-full;
  }

  .lm-policy-row--inactive {
    @apply opacity-60;
  }

  .lm-policy-badge {
    @apply ml-2;
  }

  /* ---------------------------------------------------------------------------
     Session 9: Toggle switch (on/off)
  --------------------------------------------------------------------------- */

  .lm-toggle {
    @apply relative inline-flex h-6 w-11 cursor-pointer;
  }

  .lm-toggle-input {
    @apply sr-only;
  }

  .lm-toggle-slider {
    @apply absolute inset-0 rounded-full bg-gray-300 transition-colors duration-200;
  }

  .lm-toggle-slider::before {
    content: '';
    @apply absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200;
  }

  .lm-toggle-input:checked + .lm-toggle-slider {
    @apply bg-lamar-gold;
  }

  .lm-toggle-input:checked + .lm-toggle-slider::before {
    @apply translate-x-5;
  }

  @media (max-width: 768px) {
    .lm-settings-tabs {
      @apply overflow-x-auto;
      scrollbar-width: none;
    }

    .lm-settings-tab {
      @apply whitespace-nowrap;
    }

    .lm-settings-form {
      @apply gap-4;
    }

    .lm-form-row--toggle {
      @apply gap-3;
    }

    .lm-settings-number {
      @apply max-w-full w-full;
    }

    .lm-settings-select {
      @apply max-w-full w-full;
    }

    .lm-slot-row {
      @apply flex-wrap;
    }

    .lm-slot-row-info {
      @apply w-full;
    }
  }

  /* ---------------------------------------------------------------------------
     Session 10: Waitlist — staff page
  --------------------------------------------------------------------------- */

  .lm-waitlist-page {
    @apply px-4 pb-6 pt-0 flex flex-col gap-4;
  }

  .lm-waitlist-stats {
    @apply grid grid-cols-2 sm:grid-cols-4 gap-4;
  }

  .lm-waitlist-stat {
    @apply flex flex-col items-center gap-1 p-3 rounded-lg bg-lamar-muted;
  }

  .lm-waitlist-stat-value {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-waitlist-stat-label {
    @apply text-xs text-lamar-slate uppercase tracking-wide;
  }

  .lm-waitlist-filters {
    @apply flex flex-wrap items-end gap-4;
  }

  /* ---------------------------------------------------------------------------
     Session 10: Waitlist — guest accept page
  --------------------------------------------------------------------------- */

  .lm-waitlist-accept-page {
    @apply max-w-lg mx-auto px-4 py-10;
  }

  .lm-waitlist-accept-center {
    @apply flex flex-col items-center text-center gap-3;
  }

  .lm-waitlist-accept-heading {
    @apply text-xl font-semibold text-lamar-navy;
  }

  .lm-waitlist-offer-card {
    @apply max-w-lg mx-auto;
  }

  .lm-waitlist-offer-greeting {
    @apply text-lamar-slate mb-4;
  }

  .lm-waitlist-offer-details {
    @apply flex flex-col gap-2 mb-4;
  }

  .lm-waitlist-offer-row {
    @apply flex justify-between py-2 border-b border-gray-100;
  }

  .lm-waitlist-offer-label {
    @apply text-sm text-lamar-slate;
  }

  .lm-waitlist-offer-value {
    @apply text-sm font-semibold text-lamar-navy;
  }

  .lm-waitlist-countdown {
    @apply text-center py-3 px-4 rounded-lg bg-amber-50 border border-lamar-amber text-sm font-semibold text-amber-800 mb-4;
  }

  .lm-waitlist-hold-notice {
    @apply text-sm text-lamar-slate bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 mb-4;
  }

  /* ---------------------------------------------------------------------------
     Session 10: Waitlist — booking widget step
  --------------------------------------------------------------------------- */

  .lm-waitlist-step {
    @apply flex flex-col gap-4;
  }

  .lm-waitlist-step-info {
    @apply text-sm text-lamar-slate;
  }

  .lm-waitlist-form {
    @apply flex flex-col gap-4;
  }

  .lm-join-waitlist-btn {
    @apply mt-3;
  }

  .lm-waitlist-hint {
    @apply text-xs text-lamar-slate mt-2 italic;
  }

  .lm-waitlist-success {
    @apply py-8;
  }

  .lm-waitlist-success-icon {
    @apply mb-3;
  }

  .lm-waitlist-success-text {
    @apply text-sm text-lamar-slate max-w-sm text-center;
  }

  /* ---------------------------------------------------------------------------
     Session 11: Events — staff diary
  --------------------------------------------------------------------------- */

  .lm-events-page {
    @apply px-4 pb-6 pt-0;
  }

  .lm-events-stats {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4 mb-6;
  }

  .lm-events-stat {
    @apply bg-white rounded-xl shadow-sm border border-lamar-border p-4 text-center;
  }

  .lm-events-stat-value {
    @apply block text-2xl font-bold text-lamar-navy;
  }

  .lm-events-stat-label {
    @apply block text-xs text-lamar-slate mt-1;
  }

  .lm-events-toolbar {
    @apply flex flex-wrap items-center justify-between gap-3 mb-6;
  }

  .lm-events-filters {
    @apply flex items-center gap-3;
  }

  .lm-events-filter-select {
    @apply w-44;
  }

  .lm-events-loading {
    @apply flex justify-center py-12;
  }

  .lm-events-empty {
    @apply text-center py-12 text-lamar-slate;
  }

  .lm-events-list {
    @apply flex flex-col gap-4;
  }

  /* Event card cover image strip — shown above the card header when image exists */
  .lm-event-card-cover {
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 12px 12px 0 0;  /* match lamar-card top radius */
    flex-shrink: 0;
  }

  .lm-event-card-details {
    @apply grid grid-cols-2 gap-x-6 gap-y-2 mb-4;
  }

  .lm-event-card-row {
    @apply flex flex-col;
  }

  .lm-event-card-label {
    @apply text-xs text-lamar-slate uppercase tracking-wide;
  }

  .lm-events-capacity-label {
    @apply text-xs text-lamar-slate ml-1;
  }

  .lm-events-capacity-bar {
    @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden mb-4;
  }

  .lm-events-capacity-fill {
    @apply h-full bg-lamar-green rounded-full transition-all duration-300;
  }

  .lm-events-capacity-full {
    @apply bg-lamar-red;
  }

  .lm-event-card-actions {
    @apply flex flex-wrap gap-2;
  }

  /* Events — editor overlay */

  .lm-events-editor-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-start justify-center pt-12 px-4 overflow-y-auto;
  }

  .lm-events-editor-card {
    @apply w-full max-w-2xl mb-12;
  }

  .lm-events-editor-close {
    @apply text-2xl text-lamar-slate hover:text-lamar-navy cursor-pointer bg-transparent border-none;
  }

  .lm-events-editor-form {
    @apply flex flex-col gap-4;
  }

  .lm-events-field {
    @apply flex flex-col gap-1;
  }

  .lm-events-field-label {
    @apply text-sm font-medium text-lamar-navy;
  }

  .lm-events-field-row {
    @apply grid grid-cols-1 md:grid-cols-3 gap-4;
  }

  .lm-events-checkbox-label {
    @apply flex items-center gap-2 text-sm text-lamar-slate cursor-pointer;
  }

  /* Events — check-in view */

  .lm-events-checkin-header {
    @apply flex items-center gap-4 mb-4;
  }

  .lm-events-checkin-title {
    @apply text-xl font-semibold text-lamar-navy flex-1;
  }

  .lm-events-checkin-date {
    @apply text-sm text-lamar-slate;
  }

  .lm-events-checkin-info {
    @apply flex flex-wrap gap-6 text-sm text-lamar-slate mb-4 pb-4 border-b border-gray-200;
  }

  .lm-events-checkin-summary {
    @apply flex gap-6 mb-4 text-sm font-medium text-lamar-navy;
  }

  .lm-events-checkin-contact {
    @apply text-xs text-lamar-slate;
  }

  .lm-events-arrived-time {
    @apply text-xs text-lamar-green;
  }

  .lm-events-checkin-card {
    @apply mb-3;
  }

  .lm-events-checkin-card-name {
    @apply font-medium text-lamar-navy mb-1;
  }

  .lm-events-checkin-card-detail {
    @apply text-sm text-lamar-slate mb-2;
  }

  .lm-events-checkin-card-actions {
    @apply flex items-center gap-2;
  }

  /* Mobile: hide table, show card list */
  @media (min-width: 769px) {
    .lm-events-checkin .lamar-card-list {
      display: none;
    }
  }
  @media (max-width: 768px) {
    .lm-events-checkin .lamar-table {
      display: none;
    }
  }

  /* ---------------------------------------------------------------------------
     Session 11: Events — public listing + booking
  --------------------------------------------------------------------------- */

  .lm-event-list-page {
    @apply max-w-4xl mx-auto px-4 py-8;
  }

  .lm-event-list-header {
    @apply text-center mb-8;
  }

  .lm-event-list-venue-name {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-event-list-subtitle {
    @apply text-sm text-lamar-slate mt-1;
  }

  .lm-event-list-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
  }

  .lm-event-public-card {
    @apply cursor-pointer hover:shadow-lg transition-shadow;
  }

  .lm-event-public-image {
    @apply rounded-t-xl overflow-hidden;
  }

  .lm-event-public-image img {
    @apply w-full h-48 object-cover;
  }

  .lm-event-public-meta {
    @apply flex gap-4 text-sm text-lamar-slate mt-2;
  }

  .lm-event-public-price {
    @apply text-lg font-semibold text-lamar-gold mt-2;
  }

  .lm-event-public-availability {
    @apply mt-2;
  }

  .lm-event-sold-out {
    @apply text-sm font-semibold text-lamar-red;
  }

  .lm-event-spots-left {
    @apply text-sm text-lamar-green font-medium;
  }

  /* Event detail page */

  .lm-event-back-btn {
    @apply mb-4;
  }

  .lm-event-detail-card {
    @apply max-w-2xl mx-auto;
  }

  .lm-event-detail-image {
    @apply rounded-t-xl overflow-hidden;
  }

  .lm-event-detail-image img {
    @apply w-full h-64 object-cover;
  }

  .lm-event-detail-desc {
    @apply text-sm text-lamar-slate mb-4 whitespace-pre-line;
  }

  .lm-event-detail-info {
    @apply flex flex-col gap-3 mb-6;
  }

  .lm-event-detail-row {
    @apply flex justify-between items-center py-2 border-b border-gray-100;
  }

  .lm-event-detail-label {
    @apply text-sm text-lamar-slate;
  }

  .lm-event-book-btn {
    @apply w-full;
  }

  /* Event booking form */

  .lm-event-booking-form {
    @apply max-w-lg mx-auto;
  }

  .lm-event-booking-event-name {
    @apply text-lg font-semibold text-lamar-navy mb-4;
  }

  .lm-event-booking-fields {
    @apply flex flex-col gap-4;
  }

  .lm-event-booking-total {
    @apply text-xl font-bold text-lamar-gold text-center py-3 bg-amber-50 rounded-lg;
  }

  /* Event payment */

  .lm-event-payment {
    @apply max-w-lg mx-auto;
  }

  .lm-event-payment-info {
    @apply text-sm text-lamar-slate mb-4;
  }

  /* Event success */

  .lm-events-success {
    @apply flex flex-col items-center justify-center text-center py-12 gap-4;
  }

  /* Manage page — event name */

  .lm-manage-event-name {
    @apply text-lg font-semibold text-lamar-gold;
  }

  /* ---------------------------------------------------------------------------
     Reporting Dashboard
  --------------------------------------------------------------------------- */

  .lm-report-page {
    @apply px-4 pb-6 pt-0;
  }

  .lm-report-header {
    @apply mb-6;
  }

  .lm-report-title {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-report-subtitle {
    @apply text-sm text-lamar-slate mt-1;
  }

  /* Toolbar: date range + actions */

  .lm-report-toolbar {
    @apply flex flex-col gap-4 mb-6;
  }

  @media (min-width: 768px) {
    .lm-report-toolbar {
      @apply flex-row items-end justify-between;
    }
  }

  .lm-report-toolbar-actions {
    @apply flex items-center gap-3;
  }

  /* Date picker */

  .lm-report-date-picker {
    @apply flex flex-col gap-3;
  }

  .lm-report-presets {
    @apply flex flex-wrap gap-2;
  }

  .lm-report-custom-dates {
    @apply flex flex-wrap items-end gap-3;
  }

  .lm-report-date-label {
    @apply flex flex-col text-xs text-lamar-slate font-medium gap-1;
  }

  .lm-report-date-input {
    @apply w-36 text-sm;
  }

  /* Venue filter (group) */

  .lm-report-venue-filter {
    @apply w-48 text-sm;
  }

  /* Summary cards grid */

  .lm-report-cards {
    @apply grid grid-cols-2 gap-4 mb-6;
  }

  @media (min-width: 768px) {
    .lm-report-cards {
      @apply grid-cols-4;
    }
  }

  .lm-report-card {
    @apply bg-white rounded-xl shadow-sm border border-lamar-border p-4 text-center;
  }

  .lm-report-card-value {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lm-report-card-label {
    @apply text-xs text-lamar-slate mt-1 uppercase tracking-wide;
  }

  .lm-report-card-subtitle {
    @apply text-xs text-lamar-gold mt-1;
  }

  /* Charts grid */

  .lm-report-charts-grid {
    @apply grid grid-cols-1 gap-6 mb-6;
  }

  @media (min-width: 768px) {
    .lm-report-charts-grid {
      @apply grid-cols-2;
    }
  }

  @media (min-width: 1024px) {
    .lm-report-charts-grid {
      @apply grid-cols-3;
    }
  }

  .lm-report-chart-card .lamar-card-body {
    @apply p-4;
  }

  .lm-report-chart-wrap {
    @apply relative w-full;
    height: 280px;
  }

  .lm-report-no-data {
    @apply text-sm text-lamar-slate text-center py-8;
  }

  /* Loading + error */

  .lm-report-loading {
    @apply flex flex-col items-center justify-center py-16 gap-3;
  }

  .lm-report-error {
    @apply text-center text-lamar-red py-8;
  }

  /* Comparison table */

  .lm-report-comparison-card {
    @apply mb-6;
  }

  .lm-report-comparison-table th {
    @apply text-xs uppercase tracking-wide;
  }

  .lm-report-sortable {
    @apply cursor-pointer select-none;
  }

  .lm-report-sortable:hover {
    @apply text-lamar-gold;
  }

  /* Export button spinner */

  .lm-report-export-spinner {
    @apply w-4 h-4 mr-1;
  }

  /* =========================================================================
     Gift Vouchers — Purchase + Management
     ========================================================================= */

  /* Purchase form */

  .lm-voucher-purchase {
    @apply max-w-xl mx-auto py-8 px-4;
  }

  .lm-voucher-purchase-title {
    @apply text-2xl font-bold text-lamar-navy mb-2 text-center;
  }

  .lm-voucher-subtitle {
    @apply text-lamar-slate text-center mb-6;
  }

  .lm-voucher-step {
    @apply mt-6;
  }

  .lm-voucher-amount-grid {
    @apply grid grid-cols-2 gap-3 mb-6;
  }

  @media (min-width: 480px) {
    .lm-voucher-amount-grid {
      @apply grid-cols-4;
    }
  }

  .lm-voucher-amount-btn {
    @apply text-lg font-semibold py-4 border-2 border-lamar-border bg-white text-lamar-navy;
  }

  .lm-voucher-amount-btn:hover {
    @apply border-lamar-gold text-lamar-gold;
  }

  .lm-voucher-amount-btn--selected {
    @apply border-lamar-gold bg-lamar-gold text-white;
  }

  .lm-voucher-custom-amount {
    @apply mb-6;
  }

  .lm-voucher-custom-amount label {
    @apply block text-sm text-lamar-slate mb-2;
  }

  .lm-voucher-custom-row {
    @apply flex items-center gap-2;
  }

  .lm-voucher-currency {
    @apply text-xl font-bold text-lamar-navy;
  }

  .lm-voucher-custom-input {
    @apply flex-1;
  }

  .lm-voucher-next {
    @apply w-full py-3 text-lg;
  }

  .lm-voucher-amount-badge {
    @apply bg-lamar-cream text-lamar-navy px-4 py-3 rounded-lg mb-6 text-center text-lg;
  }

  .lm-voucher-section-title {
    @apply text-lg font-semibold text-lamar-navy mt-6 mb-3;
  }

  .lm-voucher-form-row {
    @apply flex gap-3 mb-3;
  }

  .lm-voucher-form-row .lamar-input {
    @apply flex-1;
  }

  .lm-voucher-message {
    @apply mb-4;
  }

  .lm-voucher-actions {
    @apply flex gap-3 justify-end mt-4;
  }

  .lm-voucher-error {
    @apply text-lamar-red text-sm mt-2;
  }

  .lm-voucher-secure-notice {
    @apply text-xs text-gray-400 text-center mt-4;
  }

  /* Success state */

  .lm-voucher-success {
    @apply text-center py-8;
  }

  .lm-voucher-success-icon {
    @apply w-16 h-16 mx-auto mb-4 rounded-full bg-lamar-green text-white flex items-center justify-center text-3xl font-bold;
  }

  .lm-voucher-success-amount {
    @apply text-3xl font-bold text-lamar-gold my-4;
  }

  /* Staff management */

  .lm-voucher-management {
    @apply py-4 px-4;
  }

  .lm-voucher-page-title {
    @apply text-2xl font-bold text-lamar-navy mb-4;
  }

  .lm-voucher-tabs {
    @apply flex flex-wrap gap-2 mb-6 pb-4 border-b border-gray-200;
  }

  .lm-voucher-tab {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4a5568;
    background: #e8e4dc;
    border: 1.5px solid #d0cbc2;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }

  .lm-voucher-tab:hover {
    color: #1B2B4B;
    background: #d6d0c6;
    border-color: #C9A84C;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .lm-voucher-tab--active {
    color: #fff;
    background: #C9A84C;
    border-color: #C9A84C;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(201,168,76,0.35);
  }

  .lm-voucher-filter-row {
    @apply flex flex-wrap gap-2 mb-4;
  }

  .lm-voucher-table-wrap {
    @apply overflow-x-auto;
  }

  .lm-voucher-code-display {
    @apply font-mono text-sm;
  }

  .lm-voucher-group-badge {
    @apply ml-1 text-xs;
  }

  .lm-voucher-empty {
    @apply text-lamar-slate text-center py-8;
  }

  /* Voucher detail drawer */

  .lm-voucher-detail-drawer {
    @apply fixed right-0 top-0 bottom-0 w-full max-w-md bg-white shadow-xl z-50 overflow-y-auto;
  }

  .lm-voucher-detail-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-gray-200;
  }

  .lm-voucher-detail-header h3 {
    @apply text-lg font-bold font-mono text-lamar-navy;
  }

  .lm-voucher-detail-body {
    @apply px-6 py-4;
  }

  .lm-voucher-detail-grid {
    @apply grid grid-cols-1 gap-2 text-sm;
  }

  @media (min-width: 480px) {
    .lm-voucher-detail-grid {
      @apply grid-cols-2;
    }
  }

  /* Redemption */

  .lm-voucher-redemption {
    @apply py-2;
  }

  .lm-voucher-lookup-row {
    @apply flex gap-3 mb-4;
  }

  .lm-voucher-code-input {
    @apply flex-1 font-mono uppercase;
  }

  .lm-voucher-lookup-result {
    @apply mt-4;
  }

  .lm-voucher-redeem-form {
    @apply mt-4 pt-4 border-t border-gray-200;
  }

  .lm-voucher-redeem-form label {
    @apply block text-sm font-medium text-lamar-slate mb-1;
  }

  .lm-voucher-redeem-success {
    @apply mt-4 pt-4 border-t border-gray-200 text-center;
  }

  .lm-voucher-redeem-success p:first-child {
    @apply text-lamar-green font-semibold;
  }

  /* Redemption history */

  .lm-voucher-redemptions {
    @apply mt-6;
  }

  .lm-voucher-redemptions h4 {
    @apply text-sm font-semibold text-lamar-navy mb-2;
  }

  .lm-voucher-redemption-row {
    @apply flex items-center gap-4 text-sm py-2 border-b border-gray-100;
  }

  /* Cancel confirm overlay */

  .lm-voucher-confirm-overlay {
    @apply fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50;
  }

  .lm-voucher-confirm-box {
    @apply max-w-sm mx-4;
  }

  .lm-voucher-confirm-box p {
    @apply mb-2;
  }

  /* Mobile cards for voucher table */

  @media (max-width: 768px) {
    .lm-voucher-detail-drawer {
      @apply max-w-full;
    }

    .lm-voucher-redemption-row {
      @apply flex-wrap;
    }
  }

  /* =========================================================================
     Website Public Pages — Session 15
     ========================================================================= */

  /* Body reset — page-lamar-website.php outputs no theme chrome */
  body.lm-website-body {
    margin: 0;
    padding: 0;
    background: var(--color-white);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--color-slate);
    overflow-x: hidden;
  }

  /* Hide WP admin bar on website pages */
  body.lm-website-body #wpadminbar {
    display: none !important;
  }

  body.lm-website-body html {
    margin-top: 0 !important;
  }

  /* Navigation */
  .lm-website-nav {
    @apply bg-lamar-navy text-white sticky top-0 z-50;
  }

  .lm-website-nav-inner {
    @apply max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4;
  }

  .lm-website-nav-brand {
    @apply text-lamar-gold font-bold no-underline;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .lm-website-nav-brand-name {
    @apply tracking-wide;
  }

  .lm-website-nav-toggle {
    @apply hidden flex-col gap-1 cursor-pointer bg-transparent border-0 p-2;
  }

  .lm-website-nav-toggle span {
    @apply block w-6 h-0.5 bg-white rounded transition-all;
  }

  .lm-website-nav-links {
    @apply flex items-center gap-1 list-none m-0 p-0;
  }

  .lm-website-nav-link {
    @apply text-white no-underline px-3 py-2 rounded-lg text-sm font-medium transition-colors;
  }

  .lm-website-nav-link:hover {
    @apply bg-white/10;
  }

  .lm-website-nav-link--active {
    @apply bg-lamar-gold/20 text-lamar-gold;
  }

  .lm-website-nav-actions {
    @apply flex items-center gap-3;
  }

  .lm-website-nav-book {
    @apply text-sm px-4 py-2;
  }

  @media (max-width: 768px) {
    .lm-website-nav-toggle {
      @apply flex;
    }

    .lm-website-nav-links {
      @apply hidden flex-col absolute top-full left-0 w-full bg-lamar-navy pb-4 px-4;
    }

    .lm-website-nav--open .lm-website-nav-links {
      @apply flex;
    }

    .lm-website-nav-link {
      @apply py-3 px-4 w-full;
    }
  }

  /* Page wrapper */
  .lm-website-page {
    @apply min-h-screen;
  }

  /* Hero section — full-screen with background image + dark overlay */
  .lm-website-hero {
    @apply text-white text-center relative overflow-hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;
    background-color: #1B2B4B;
    background-image: var(--lm-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .lm-website-hero::before {
    content: '';
    @apply absolute inset-0;
    background: linear-gradient(
      to bottom,
      rgba(26, 39, 68, 0.7) 0%,
      rgba(26, 39, 68, 0.5) 50%,
      rgba(26, 39, 68, 0.8) 100%
    );
    z-index: 1;
  }

  .lm-website-hero-content {
    @apply max-w-3xl mx-auto relative;
    z-index: 2;
  }

  .lm-website-hero-title {
    @apply font-bold mb-6 text-lamar-gold;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  }

  .lm-website-hero-subtitle {
    @apply text-lg md:text-xl mb-10;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }

  .lm-website-hero-actions {
    @apply flex flex-wrap justify-center gap-4;
  }

  /* CTA buttons — luxury style */
  .lm-website-cta {
    @apply text-base px-8 py-3 tracking-wider uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
  }

  .lm-website-cta--secondary {
    @apply bg-transparent text-lamar-gold;
    border: 1px solid rgba(201, 168, 76, 0.6);
  }

  .lm-website-cta--secondary:hover {
    @apply bg-lamar-gold text-white;
    border-color: var(--color-gold);
  }

  /* Content sections */
  .lm-website-section {
    @apply max-w-5xl mx-auto px-4 py-16;
  }

  .lm-website-section--alt {
    @apply bg-lamar-cream;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .lm-website-section--alt > * {
    @apply max-w-5xl mx-auto px-4;
  }

  .lm-website-section--cta {
    @apply text-center bg-lamar-navy text-white;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .lm-website-section--cta > * {
    @apply max-w-3xl mx-auto px-4;
  }

  .lm-website-section--cta .lm-website-section-title {
    @apply text-lamar-gold;
  }

  .lm-website-section--cta p {
    @apply text-gray-300 mb-8;
  }

  .lm-website-section-title {
    @apply text-2xl md:text-3xl font-bold text-lamar-navy mb-8 text-center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    position: relative;
    padding-bottom: 1rem;
  }

  .lm-website-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-gold);
    margin: 0.75rem auto 0;
  }

  .lm-website-section-text {
    @apply text-lamar-slate text-center max-w-3xl mx-auto leading-relaxed;
  }

  /* Grids */
  .lm-website-grid {
    @apply grid gap-6 mt-8;
  }

  .lm-website-grid--2 {
    @apply grid-cols-1 md:grid-cols-2;
  }

  .lm-website-grid--3 {
    @apply grid-cols-1 md:grid-cols-3;
  }

  .lm-website-grid--4 {
    @apply grid-cols-2 md:grid-cols-4;
  }

  .lm-website-card {
    @apply bg-white rounded-xl shadow-md p-8;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-gold);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .lm-website-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }

  .lm-website-card .lamar-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    @apply text-xl font-semibold text-lamar-navy mb-3;
  }

  /* Features */
  .lm-website-feature {
    @apply flex flex-col items-center text-center gap-2 p-4;
  }

  .lm-website-feature-icon {
    @apply text-3xl text-lamar-gold;
  }

  /* Empty state */
  .lm-website-empty {
    @apply text-center text-gray-400 py-8 italic;
  }

  /* =========================================================================
     Menu/Wine List Display — Public
     ========================================================================= */

  .lm-menu-section {
    @apply border-b border-gray-100 last:border-0;
  }

  .lm-menu-title {
    @apply text-xl md:text-2xl font-bold text-lamar-navy mb-2 text-center;
    font-family: 'Cormorant Garamond', Georgia, serif;
  }

  .lm-menu-description {
    @apply text-center text-lamar-slate mb-8 italic;
  }

  .lm-menu-category {
    @apply mb-8;
  }

  .lm-menu-category-title {
    @apply text-lg font-semibold text-lamar-gold uppercase tracking-wider mb-4 pb-2 border-b border-lamar-gold/30;
  }

  .lm-menu-items {
    @apply space-y-4;
  }

  .lm-menu-item {
    @apply flex gap-4 items-start;
  }

  .lm-menu-item-image {
    @apply w-16 h-16 rounded-lg object-cover flex-shrink-0;
  }

  .lm-menu-item-content {
    @apply flex-1 min-w-0;
  }

  .lm-menu-item-header {
    @apply flex items-baseline gap-2;
  }

  .lm-menu-item-name {
    @apply font-medium text-lamar-navy;
  }

  .lm-menu-item-dots {
    @apply flex-1 border-b border-dotted border-gray-300 min-w-8 self-end mb-1;
  }

  .lm-menu-item-price {
    @apply font-semibold text-lamar-navy whitespace-nowrap;
  }

  .lm-menu-item-desc {
    @apply text-sm text-lamar-slate mt-1;
  }

  .lm-menu-item-meta {
    @apply flex items-center gap-2 mt-1;
  }

  /* Dietary icons */
  .lm-menu-dietary-legend {
    @apply flex flex-wrap items-center justify-center gap-2 text-sm text-lamar-slate;
  }

  .lm-menu-dietary-icon {
    @apply inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold;
  }

  .lm-menu-dietary-icon--v {
    @apply bg-green-100 text-green-700;
  }

  .lm-menu-dietary-icon--vg {
    @apply bg-emerald-100 text-emerald-700;
  }

  .lm-menu-dietary-icon--gf {
    @apply bg-amber-100 text-amber-700;
  }

  .lm-menu-allergens {
    @apply text-xs text-gray-400 italic;
  }

  .lm-menu-allergen-note {
    @apply text-center text-sm text-gray-400 italic;
  }

  /* Wine list specific */
  .lm-wine-category {
    @apply mb-8;
  }

  .lm-wine-category-title {
    @apply text-lg font-semibold text-lamar-gold uppercase tracking-wider mb-4 pb-2 border-b border-lamar-gold/30;
  }

  .lm-wine-items {
    @apply space-y-3;
  }

  .lm-wine-item {
    @apply py-2;
  }

  .lm-wine-item-header {
    @apply flex items-baseline gap-2;
  }

  .lm-wine-item-name {
    @apply font-medium text-lamar-navy;
  }

  .lm-wine-item-price {
    @apply font-semibold text-lamar-navy whitespace-nowrap;
  }

  .lm-wine-item-desc {
    @apply text-sm text-lamar-slate mt-0.5 italic;
  }

  /* =========================================================================
     Contact Page
     ========================================================================= */

  .lm-contact-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-8;
  }

  .lm-contact-info {
    @apply space-y-6;
  }

  .lm-contact-block {
    @apply space-y-1;
  }

  .lm-contact-label {
    @apply text-sm font-semibold text-lamar-gold uppercase tracking-wider;
  }

  .lm-contact-link {
    @apply text-lamar-navy no-underline hover:text-lamar-gold transition-colors;
  }

  .lm-contact-book-btn {
    @apply mt-4 w-full md:w-auto;
  }

  .lm-contact-map {
    @apply rounded-xl overflow-hidden shadow-md;
  }

  .lm-contact-map iframe {
    @apply w-full;
  }

  .lm-social-links {
    @apply flex gap-4;
  }

  .lm-social-link {
    @apply font-medium no-underline transition-colors;
    color: inherit;
    text-decoration: none;
    letter-spacing: 0.02em;
  }

  .lm-social-link:hover {
    color: var(--color-gold);
  }

  .lm-website-footer .lm-social-link {
    color: rgba(255, 255, 255, 0.7);
  }

  .lm-website-footer .lm-social-link:hover {
    color: var(--color-gold);
  }

  /* =========================================================================
     Website Footer
     ========================================================================= */

  .lm-website-footer {
    @apply bg-lamar-navy text-gray-300 py-12;
  }

  .lm-website-footer-inner {
    @apply max-w-5xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8;
  }

  .lm-website-footer-title {
    @apply text-lamar-gold font-semibold text-sm uppercase tracking-wider mb-3;
  }

  .lm-website-footer-col p {
    @apply text-sm leading-relaxed;
  }

  .lm-website-footer-bottom {
    @apply col-span-full border-t border-gray-700 pt-6 mt-4 text-center text-sm text-gray-500;
  }

  /* =========================================================================
     Staff Menu Manager — Vue Components
     ========================================================================= */

  .lm-menu-manager {
    @apply px-4 pb-4 pt-0;
  }

  .lm-menu-tabs {
    @apply flex gap-1 px-4 pb-2 border-b border-gray-100 overflow-x-auto;
  }

  .lm-menu-tab {
    @apply px-4 py-2 rounded-t-lg text-sm font-medium bg-transparent border-0 cursor-pointer text-lamar-slate transition-colors whitespace-nowrap;
  }

  .lm-menu-tab:hover {
    @apply bg-gray-50;
  }

  .lm-menu-tab--active {
    @apply bg-lamar-gold/10 text-lamar-gold border-b-2 border-lamar-gold;
  }

  .lm-menu-list {
    @apply space-y-3;
  }

  .lm-menu-card {
    @apply flex flex-wrap items-center justify-between gap-3 p-4 rounded-lg border border-gray-100 cursor-pointer transition-colors hover:bg-gray-50;
  }

  .lm-menu-card--selected {
    @apply border-lamar-gold bg-lamar-gold/5;
  }

  .lm-menu-card-header {
    @apply flex items-center gap-2 flex-1 min-w-0;
  }

  .lm-menu-card-name {
    @apply font-medium text-lamar-navy;
  }

  .lm-menu-card-name-es {
    @apply text-sm text-gray-400;
  }

  .lm-menu-card-meta {
    @apply text-sm text-gray-400;
  }

  .lm-menu-card-actions {
    @apply flex gap-2;
  }

  .lm-menu-items-table th {
    @apply text-xs uppercase tracking-wider;
  }

  /* shadcn CSS variable tokens — scoped to menu editor so v0.app Vue output works */
  .lm-menu-editor {
    --background:            #FAF8F5;
    --foreground:            #1B2B4B;
    --card:                  #ffffff;
    --card-foreground:       #1B2B4B;
    --primary:               #1B2B4B;
    --primary-foreground:    #ffffff;
    --muted:                 #F0EFED;
    --muted-foreground:      #6B7280;
    --accent:                #C9A84C;
    --accent-foreground:     #1B2B4B;
    --destructive:           #DC2626;
    --destructive-foreground:#ffffff;
    --border:                #E5E4E1;
    --input:                 #E5E4E1;
    --ring:                  #1B2B4B;
    --radius:                0.75rem;
  }

  /* Menu/Item editor overlay */
  .lm-menu-editor-overlay {
    @apply fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4;
  }

  .lm-menu-editor {
    @apply bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto;
  }

  .lm-menu-editor--wide {
    @apply max-w-2xl;
  }

  .lm-menu-editor-header {
    @apply flex items-center justify-between p-4 border-b border-gray-100;
  }

  .lm-menu-editor-form {
    @apply p-4 space-y-4;
  }

  .lm-menu-editor-actions {
    @apply flex justify-end gap-3 pt-4 border-t border-gray-100;
  }

  .lm-form-grid {
    @apply grid gap-4;
  }

  .lm-form-grid--2 {
    @apply grid-cols-1 md:grid-cols-2;
  }

  .lm-form-row {
    @apply space-y-1;
  }

  .lm-form-row--toggle {
    @apply flex items-center justify-between;
  }

  .lm-form-label {
    @apply block text-sm font-medium text-lamar-slate;
  }

  .lm-price-input {
    @apply flex items-center gap-0;
  }

  .lm-price-input-symbol {
    @apply bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg px-3 py-2 text-lamar-slate;
  }

  .lm-price-input .lamar-input {
    @apply rounded-l-none;
  }

  .lm-dietary-checks {
    @apply flex flex-wrap gap-4;
  }

  .lm-check-label {
    @apply flex items-center gap-2 text-sm cursor-pointer;
  }

  .lm-allergen-grid {
    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2;
  }

  .lm-allergen-check {
    @apply text-xs;
  }

  .lm-allergen-code {
    @apply inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-100 text-xs font-bold text-gray-600;
  }

  /* Toggle switch */
  .lm-toggle {
    @apply relative inline-block w-10 h-6;
  }

  .lm-toggle input {
    @apply opacity-0 w-0 h-0;
  }

  .lm-toggle-slider {
    @apply absolute cursor-pointer inset-0 bg-gray-300 rounded-full transition-colors;
  }

  .lm-toggle-slider::before {
    content: '';
    @apply absolute h-4 w-4 left-1 bottom-1 bg-white rounded-full transition-transform;
  }

  .lm-toggle input:checked + .lm-toggle-slider {
    @apply bg-lamar-gold;
  }

  .lm-toggle input:checked + .lm-toggle-slider::before {
    transform: translateX(16px);
  }

  /* Image picker */
  .lm-image-picker {
    @apply space-y-2;
  }

  .lm-image-preview {
    @apply w-24 h-24 rounded-lg object-cover;
  }

  .lm-image-picker-actions {
    @apply flex gap-2;
  }

  .lm-file-input-hidden {
    @apply hidden;
  }

  .lm-upload-error {
    @apply text-sm text-lamar-red mt-1;
  }

  /* ==========================================================================
     General-purpose tab strip — used across Attendance, Settings, Pass Admin, etc.
     ========================================================================== */
  .lm-tab-strip {
    @apply flex flex-wrap gap-1 border-b-2 border-gray-200 mb-6;
  }

  .lm-tab {
    @apply relative px-5 py-2.5 text-sm font-medium text-lamar-slate rounded-t-lg
           border border-transparent border-b-0
           hover:text-lamar-navy hover:bg-gray-50
           transition-colors cursor-pointer bg-transparent whitespace-nowrap;
    margin-bottom: -2px;
  }

  .lm-tab--active {
    @apply text-lamar-navy bg-white border-gray-200 border-b-white;
    border-bottom: 2px solid white;
    box-shadow: 0 -2px 0 0 theme('colors.lamar-gold');
  }

  /* Language tab strip — Menu/Item editors (segmented control) */
  .lm-lang-tabs {
    display: flex;
    background: #f3f4f6;
    border-radius: 0.5rem;
    padding: 3px;
    gap: 2px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    border-bottom: none;
  }

  .lm-lang-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    min-height: 36px;
  }

  .lm-lang-tab--active {
    background: #ffffff;
    color: #1a2744;
    border-bottom-color: transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  }

  /* Item editor — section divider + header */
  .lm-item-section {
    border-top: 1px solid #f3f4f6;
    padding-top: 1.25rem;
    margin-top: 0.25rem;
  }

  .lm-item-section-header {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 0.875rem;
  }

  .lm-item-field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 0.375rem;
  }

  /* VAT pills */
  .lm-vat-pills-wrap {
    display: flex;
    background: #f3f4f6;
    border-radius: 0.5rem;
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
  }

  .lm-vat-pill {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.3125rem;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    text-align: center;
  }

  .lm-vat-pill--active {
    background: #c9a96e;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }

  .lm-vat-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.75rem;
  }

  .lm-vat-preview strong {
    color: #1a2744;
    font-weight: 600;
  }

  .lm-vat-preview-pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #e5e7eb;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
  }

  /* Dietary pills */
  .lm-dietary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .lm-dietary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    transition: all 150ms ease;
  }

  .lm-dietary-pill:hover {
    border-color: rgba(201,169,110,0.4);
    color: #1a2744;
  }

  .lm-dietary-pill--vegetarian {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(22,163,74,0.35);
  }

  .lm-dietary-pill--vegan {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(21,128,61,0.35);
  }

  .lm-dietary-pill--gf {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(217,119,6,0.35);
  }

  .lm-dietary-pill--alcohol {
    background: #e11d48;
    border-color: #e11d48;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(225,29,72,0.35);
  }

  .lm-dietary-pill-icon {
    font-size: 1rem;
    line-height: 1;
  }

  .lm-dietary-check-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  /* Allergen card grid */
  .lm-allergen-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .lm-allergen-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 150ms ease;
    text-align: left;
  }

  .lm-allergen-card:hover {
    border-color: rgba(201,169,110,0.4);
    background: #fafaf9;
  }

  .lm-allergen-card--active {
    background: #1a2744;
    border-color: #1a2744;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(26,39,68,0.3);
  }

  .lm-allergen-card-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .lm-allergen-card-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lm-allergen-card-check {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  /* Image drop zone */
  .lm-image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border: 2px dashed #e5e7eb;
    border-radius: 0.75rem;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 150ms ease;
    text-align: center;
  }

  .lm-image-dropzone:hover {
    border-color: rgba(201,169,110,0.6);
    background: #fffdf9;
  }

  .lm-image-dropzone-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
  }

  .lm-image-dropzone-icon-wrap svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .lm-image-dropzone-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
  }

  .lm-image-dropzone-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0;
  }

  .lm-image-preview-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .lm-image-preview-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.25rem;
  }

  /* Active / Available toggle cards */
  .lm-toggle-cards {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .lm-toggle-card {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
  }

  .lm-toggle-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .lm-toggle-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a2744;
  }

  .lm-toggle-card-desc {
    font-size: 0.75rem;
    color: #9ca3af;
  }

  /* 3-column form grid for pricing row */
  .lm-form-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .lm-required-star {
    @apply text-lamar-red ml-0.5;
  }

  /* Full-width cell inside a 2-col grid */
  .lm-form-grid--full {
    @apply md:col-span-2;
  }

  @media (max-width: 768px) {
    .lm-menu-manager {
      @apply p-2;
    }

    .lm-menu-editor {
      @apply max-w-full;
    }

    .lm-menu-editor--wide {
      @apply max-w-full;
    }

    .lm-allergen-grid {
      @apply grid-cols-2;
    }
  }

  /* ---------------------------------------------------------------------------
     Staff Dashboard — Content Widgets (Session 16)
  --------------------------------------------------------------------------- */

  .lamar-dashboard-grid {
    @apply grid gap-6;
    grid-template-columns: 1fr;
  }

  .lamar-dashboard-section--full {
    grid-column: 1 / -1;
  }

  .lamar-section-title {
    @apply text-lg font-semibold text-lamar-navy mb-3;
  }

  /* Stat cards row */
  .lamar-dashboard-stats {
    @apply grid gap-4;
    grid-template-columns: repeat(2, 1fr);
  }

  .lamar-stat-card {
    @apply bg-white rounded-xl shadow-md border border-gray-100 p-5 flex flex-col items-center text-center;
  }

  .lamar-stat-card__icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center mb-3;
  }

  .lamar-stat-card__icon--covers {
    @apply bg-blue-50 text-blue-600;
  }

  .lamar-stat-card__icon--bookings {
    @apply bg-amber-50 text-amber-600;
  }

  .lamar-stat-card__icon--waitlist {
    @apply bg-purple-50 text-purple-600;
  }

  .lamar-stat-card__icon--walkins {
    @apply bg-green-50 text-green-600;
  }

  .lamar-stat-card__value {
    @apply text-3xl font-bold text-lamar-navy;
  }

  .lamar-stat-card__label {
    @apply text-sm text-lamar-slate mt-1;
  }

  /* Quick actions */
  .lamar-quick-actions {
    @apply flex flex-wrap gap-3;
  }

  .lamar-quick-actions .lamar-btn {
    @apply gap-2;
  }

  .lamar-quick-actions .lamar-btn svg {
    flex-shrink: 0;
  }

  /* Dashboard loading + empty states */
  .lamar-dashboard-loading {
    @apply flex items-center justify-center py-8;
  }

  .lamar-dashboard-empty {
    @apply text-center text-lamar-slate py-8 text-sm;
  }

  .lamar-dashboard-error {
    grid-column: 1 / -1;
    @apply bg-red-50 text-lamar-red border border-red-200 rounded-lg p-4 text-sm;
  }

  /* Upcoming bookings table tweaks */
  .lamar-dashboard-upcoming-table {
    @apply text-sm;
  }

  .lamar-upcoming-time {
    @apply font-semibold text-lamar-navy;
  }

  .lamar-upcoming-date {
    @apply text-xs text-lamar-slate ml-1;
  }

  .lamar-special-req-icon {
    @apply text-amber-500;
  }

  /* Alerts */
  .lamar-alert-badge {
    @apply inline-flex items-center justify-center w-6 h-6 rounded-full bg-lamar-red text-white text-xs font-bold ml-2;
  }

  .lamar-alert-clear {
    @apply flex items-center gap-3 text-lamar-green py-4 text-sm;
  }

  .lamar-alerts {
    @apply flex flex-col gap-3;
  }

  .lamar-alert-item {
    @apply flex items-center gap-3 p-3 rounded-lg border-l-4;
  }

  .lamar-alert-item--warning {
    @apply border-l-amber-500 bg-amber-50;
  }

  .lamar-alert-item--danger {
    @apply border-l-red-500 bg-red-50;
  }

  .lamar-alert-item--info {
    @apply border-l-blue-500 bg-blue-50;
  }

  .lamar-alert-item__count {
    @apply text-2xl font-bold text-lamar-navy min-w-[2.5rem] text-center;
  }

  .lamar-alert-item__text {
    @apply flex-1 text-sm;
  }

  .lamar-alert-item__text strong {
    @apply block text-lamar-navy;
  }

  .lamar-alert-item__text span {
    @apply text-lamar-slate;
  }

  .lamar-alert-item__link {
    @apply text-sm text-lamar-gold hover:underline whitespace-nowrap;
  }

  /* Activity feed */
  .lamar-activity-feed {
    @apply flex flex-col;
  }

  .lamar-activity-item {
    @apply flex gap-3 py-3 border-b border-gray-100 last:border-b-0;
  }

  .lamar-activity-item__dot {
    @apply w-2 h-2 rounded-full bg-lamar-gold mt-2 flex-shrink-0;
  }

  .lamar-activity-item__content {
    @apply flex-1 min-w-0;
  }

  .lamar-activity-item__text {
    @apply text-sm text-lamar-slate;
  }

  .lamar-activity-item__text strong {
    @apply text-lamar-navy;
  }

  .lamar-activity-item__time {
    @apply text-xs text-gray-400 mt-1;
  }

  /* Weekly covers chart */
  .lamar-weekly-chart {
    @apply flex items-end gap-2 justify-between;
    height: 160px;
    padding-top: 24px;
  }

  .lamar-weekly-bar {
    @apply flex flex-col items-center flex-1;
    height: 100%;
    position: relative;
  }

  .lamar-weekly-bar__value {
    @apply text-xs font-semibold text-lamar-navy mb-1;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
  }

  .lamar-weekly-bar__fill {
    @apply bg-lamar-gold;
    border-radius: 6px 6px 0 0;
    width: 100%;
    max-width: 40px;
    margin-top: auto;
    min-height: 2px;
    transition: height 0.3s ease;
  }

  .lamar-weekly-bar__label {
    @apply text-xs text-lamar-slate mt-2;
  }

  /* ---------------------------------------------------------------------------
     Staff Dashboard — Responsive breakpoints
  --------------------------------------------------------------------------- */

  @media (min-width: 768px) {
    .lamar-dashboard-grid {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }

    .lamar-dashboard-stats {
      grid-template-columns: repeat(4, 1fr);
    }

    .lamar-dashboard-col-left {
      grid-column: 1;
      display: flex;
      flex-direction: column;
    }

    .lamar-dashboard-col-right {
      grid-column: 2;
      display: flex;
      flex-direction: column;
    }

    /* Cards inside paired columns stretch to fill the row height */
    .lamar-dashboard-col-left > .lamar-card,
    .lamar-dashboard-col-right > .lamar-card {
      flex: 1;
    }
  }

  @media (max-width: 767px) {
    .lamar-dashboard-stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .lamar-stat-card {
      @apply p-3;
    }

    .lamar-stat-card__value {
      @apply text-2xl;
    }

    .lamar-stat-card__icon {
      @apply w-10 h-10 mb-2;
    }

    .lamar-quick-actions {
      @apply flex-col;
    }

    .lamar-quick-actions .lamar-btn {
      @apply w-full justify-center;
    }

    .lamar-weekly-chart {
      height: 120px;
    }
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NPS Survey — public guest-facing page
   ───────────────────────────────────────────────────────────────────────────── */

@layer components {

  /* Survey page wrapper */
  .lamar-nps-survey {
    @apply max-w-lg mx-auto py-10 px-4;
  }

  .lamar-nps-survey__header {
    @apply text-center mb-8;
  }

  .lamar-nps-survey__title {
    @apply text-2xl font-bold text-lamar-navy mb-2;
  }

  .lamar-nps-survey__subtitle {
    @apply text-lamar-slate text-base;
  }

  .lamar-nps-survey__venue {
    @apply font-semibold text-lamar-navy;
  }

  .lamar-nps-survey__greeting {
    @apply text-lamar-slate text-lg mb-6;
  }

  /* Score selector row */
  .lamar-nps-survey__question {
    @apply text-center font-medium text-lamar-navy mb-4 text-lg;
  }

  .lamar-nps-survey__scale {
    @apply flex justify-center gap-2 flex-wrap mb-2;
  }

  .lamar-nps-survey__scale-labels {
    @apply flex justify-between text-xs text-gray-400 mb-6 px-1;
  }

  .lamar-nps-score-btn {
    @apply w-10 h-10 rounded-lg border-2 border-gray-200 bg-white text-sm font-bold
           cursor-pointer transition-all duration-150 flex items-center justify-center;
  }

  .lamar-nps-score-btn:hover {
    @apply border-lamar-gold shadow-md transform scale-110;
  }

  .lamar-nps-score-btn--detractor {
    @apply border-red-300 text-red-600;
  }

  .lamar-nps-score-btn--detractor.active,
  .lamar-nps-score-btn--detractor:hover {
    @apply bg-red-500 text-white border-red-500;
  }

  .lamar-nps-score-btn--passive {
    @apply border-amber-300 text-amber-600;
  }

  .lamar-nps-score-btn--passive.active,
  .lamar-nps-score-btn--passive:hover {
    @apply bg-amber-500 text-white border-amber-500;
  }

  .lamar-nps-score-btn--promoter {
    @apply border-green-300 text-green-600;
  }

  .lamar-nps-score-btn--promoter.active,
  .lamar-nps-score-btn--promoter:hover {
    @apply bg-green-500 text-white border-green-500;
  }

  /* Comment textarea */
  .lamar-nps-survey__comment {
    @apply mb-6;
  }

  .lamar-nps-survey__comment label {
    @apply block text-sm font-medium text-lamar-slate mb-2;
  }

  /* Submit */
  .lamar-nps-survey__submit {
    @apply text-center;
  }

  .lamar-nps-survey__error {
    @apply text-red-600 text-sm text-center mt-3;
  }

  /* Thank-you states */
  .lamar-nps-thankyou {
    @apply text-center py-12 px-4;
  }

  .lamar-nps-thankyou__icon {
    @apply text-5xl mb-4;
  }

  .lamar-nps-thankyou__title {
    @apply text-2xl font-bold text-lamar-navy mb-3;
  }

  .lamar-nps-thankyou__message {
    @apply text-lamar-slate text-base mb-6;
  }

  .lamar-nps-thankyou__google {
    @apply mt-6 p-4 bg-gray-50 rounded-xl;
  }

  .lamar-nps-thankyou__google-prompt {
    @apply text-lamar-slate mb-3;
  }

  /* Not found / already responded */
  .lamar-nps-not-found {
    @apply text-center py-12 px-4;
  }

  .lamar-nps-not-found__title {
    @apply text-xl font-bold text-lamar-navy mb-2;
  }

  .lamar-nps-not-found__message {
    @apply text-lamar-slate;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NPS Admin — staff list + detail
   ───────────────────────────────────────────────────────────────────────────── */

@layer components {

  /* Stats bar */
  .lamar-nps-stats {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4 mb-6;
  }

  .lamar-nps-stat {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center;
  }

  .lamar-nps-stat__value {
    @apply text-2xl font-bold text-lamar-navy;
  }

  .lamar-nps-stat__value--positive {
    @apply text-green-600;
  }

  .lamar-nps-stat__value--negative {
    @apply text-red-600;
  }

  .lamar-nps-stat__value--amber {
    @apply text-amber-600;
  }

  .lamar-nps-stat__label {
    @apply text-xs text-gray-500 mt-1 uppercase tracking-wide;
  }

  /* Score badges (used in table + detail) */
  .lamar-nps-score-badge {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold text-white;
  }

  .lamar-nps-score-badge--promoter {
    @apply bg-green-500;
  }

  .lamar-nps-score-badge--passive {
    @apply bg-amber-500;
  }

  .lamar-nps-score-badge--detractor {
    @apply bg-red-500;
  }

  /* Filters bar */
  .lamar-nps-filters {
    @apply flex flex-wrap gap-3 items-end mb-6;
  }

  .lamar-nps-filters__group {
    @apply flex flex-col;
  }

  .lamar-nps-filters__group label {
    @apply text-xs font-medium text-gray-500 mb-1;
  }

  /* Pagination */
  .lamar-nps-pagination {
    @apply flex justify-between items-center mt-4;
  }

  /* Detail overlay */
  .lamar-nps-detail-overlay {
    @apply fixed inset-0 bg-black bg-opacity-40 z-50 flex justify-end;
  }

  .lamar-nps-detail {
    @apply bg-white w-full max-w-md h-full overflow-y-auto shadow-xl;
  }

  .lamar-nps-detail__header {
    @apply flex items-center justify-between p-4 border-b border-gray-200;
  }

  .lamar-nps-detail__close {
    @apply text-2xl text-gray-400 hover:text-gray-600 cursor-pointer bg-transparent border-0;
  }

  .lamar-nps-detail__body {
    @apply p-4;
  }

  .lamar-nps-detail__section {
    @apply mb-6 pb-4 border-b border-gray-100 last:border-0;
  }

  .lamar-nps-detail__row {
    @apply flex justify-between items-center py-1;
  }

  .lamar-nps-detail__label {
    @apply text-sm font-medium text-gray-500;
  }

  .lamar-nps-detail__category {
    @apply text-xs text-gray-500 ml-2;
  }

  .lamar-nps-detail__feedback {
    @apply mt-2 p-3 bg-gray-50 rounded-lg text-sm text-lamar-slate whitespace-pre-wrap;
  }

  .lamar-nps-detail__existing-note {
    @apply mt-2 p-3 bg-blue-50 rounded-lg;
  }

  .lamar-nps-detail__existing-note p {
    @apply text-sm text-lamar-slate mb-2;
  }

  .lamar-nps-detail__note-meta {
    @apply text-xs text-gray-400 mb-2;
  }

  .lamar-nps-detail__note-form {
    @apply mt-2;
  }

  .lamar-nps-detail__note-actions {
    @apply flex gap-2 mt-2;
  }

  .lamar-nps-detail__error {
    @apply text-red-600 text-sm mt-2;
  }

  /* Mobile card list for NPS table */
  .lamar-nps-card-list {
    @apply hidden;
  }

  .lamar-nps-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-3 cursor-pointer
           hover:shadow-md transition-shadow;
  }

  .lamar-nps-card__header {
    @apply flex justify-between items-center mb-2;
  }

  .lamar-nps-card__guest {
    @apply font-medium text-lamar-navy;
  }

  .lamar-nps-card__date {
    @apply text-xs text-gray-400;
  }

  .lamar-nps-card__body {
    @apply text-sm text-lamar-slate;
  }

  .lamar-nps-card__comment {
    @apply text-sm text-gray-500 mt-2 line-clamp-2;
  }

  .lamar-nps-card__footer {
    @apply flex gap-3 mt-2 text-xs text-gray-400;
  }
}

/* NPS mobile responsive */
@media (max-width: 768px) {
  .lamar-nps-table-wrap .lamar-table {
    display: none;
  }

  .lamar-nps-card-list {
    display: block;
  }

  .lamar-nps-filters {
    @apply flex-col;
  }

  .lamar-nps-stats {
    @apply grid-cols-2;
  }

  .lamar-nps-detail {
    @apply max-w-full;
  }

  .lamar-nps-survey__scale {
    @apply gap-1;
  }

  .lamar-nps-score-btn {
    @apply w-8 h-8 text-xs;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Notification Template Admin
   ───────────────────────────────────────────────────────────────────────────── */

@layer components {

  .lamar-template-admin__header {
    @apply flex items-center gap-4;
  }

  /* Filters */
  .lamar-template-filters {
    @apply flex flex-wrap gap-4 items-end mb-6;
  }

  .lamar-template-filters__group {
    @apply flex flex-col;
  }

  .lamar-template-filters__group label {
    @apply text-xs font-medium text-gray-500 mb-1;
  }

  /* Template list table */
  .lamar-template-table-wrap {
    @apply overflow-x-auto;
  }

  .lamar-template-row {
    @apply cursor-pointer;
  }

  .lamar-template-row:hover {
    @apply bg-gray-50;
  }

  /* Channel badges */
  .lamar-template-channel-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }

  .lamar-template-channel-badge--email {
    @apply bg-blue-100 text-blue-700;
  }

  .lamar-template-channel-badge--sms {
    @apply bg-green-100 text-green-700;
  }

  /* Source badges */
  .lamar-template-source-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }

  .lamar-template-source-badge--custom {
    @apply bg-amber-100 text-amber-700;
  }

  .lamar-template-source-badge--default {
    @apply bg-gray-100 text-gray-600;
  }

  /* Mobile card list */
  .lamar-template-card-list {
    @apply hidden;
  }

  .lamar-template-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-3 cursor-pointer
           hover:shadow-md transition-shadow;
  }

  .lamar-template-card__header {
    @apply flex justify-between items-center mb-2;
  }

  .lamar-template-card__name {
    @apply font-medium text-lamar-navy;
  }

  .lamar-template-card__meta {
    @apply flex gap-2 items-center text-sm;
  }

  /* Editor */
  .lamar-template-editor {
    @apply mt-4;
  }

  .lamar-template-editor__override-banner {
    @apply p-3 rounded-lg text-sm mb-4;
  }

  .lamar-template-editor__override-banner--custom {
    @apply bg-amber-50 text-amber-800 border border-amber-200;
  }

  .lamar-template-editor__override-banner--default {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
  }

  .lamar-template-editor__field {
    @apply mb-4;
  }

  .lamar-template-editor__field label {
    @apply block text-sm font-medium text-lamar-slate mb-1;
  }

  .lamar-template-editor__code {
    font-family: 'Courier New', Courier, monospace;
    @apply text-sm;
  }

  .lamar-template-editor__char-count {
    @apply text-xs text-gray-400 mt-1;
  }

  /* Placeholder chips */
  .lamar-template-editor__chips {
    @apply flex flex-wrap gap-2;
  }

  .lamar-template-chip {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-mono
           bg-lamar-cream text-lamar-navy border border-gray-200
           cursor-pointer hover:bg-lamar-gold hover:text-white hover:border-lamar-gold
           transition-colors;
  }

  /* Toggle row */
  .lamar-template-editor__toggle-row {
    @apply flex items-center gap-3;
  }

  .lamar-template-editor__toggle-row label {
    @apply mb-0;
  }

  /* Actions bar */
  .lamar-template-editor__actions {
    @apply flex flex-wrap gap-2 mb-6 pt-4 border-t border-gray-200;
  }

  /* Test send section */
  .lamar-template-editor__test-section {
    @apply p-4 bg-gray-50 rounded-lg mt-4;
  }

  .lamar-template-editor__test-section h4 {
    @apply text-sm font-medium text-lamar-navy mb-2;
  }

  .lamar-template-editor__test-row {
    @apply flex gap-2;
  }

  .lamar-template-editor__test-row .lamar-input {
    @apply flex-1;
  }

  .lamar-template-editor__test-success {
    @apply text-green-600 text-sm mt-2;
  }

  .lamar-template-editor__test-error {
    @apply text-red-600 text-sm mt-2;
  }

  .lamar-template-editor__error {
    @apply text-red-600 text-sm mt-2;
  }

  /* Preview overlay */
  .lamar-template-preview-overlay {
    @apply fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center p-4;
  }

  .lamar-template-preview {
    @apply bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto;
  }

  .lamar-template-preview__header {
    @apply flex items-center justify-between p-4 border-b border-gray-200;
  }

  .lamar-template-preview__header h4 {
    @apply text-lg font-bold text-lamar-navy;
  }

  .lamar-template-preview__close {
    @apply text-2xl text-gray-400 hover:text-gray-600 cursor-pointer bg-transparent border-0;
  }

  .lamar-template-preview__body {
    @apply p-4;
  }

  .lamar-template-preview__subject {
    @apply p-3 bg-gray-50 rounded-lg mb-4 text-sm;
  }

  .lamar-template-preview__html-wrap {
    @apply border border-gray-200 rounded-lg overflow-hidden mb-4;
  }

  .lamar-template-preview__iframe {
    @apply w-full border-0;
    min-height: 300px;
  }

  .lamar-template-preview__plain-section {
    @apply mt-4;
  }

  .lamar-template-preview__plain {
    @apply p-3 bg-gray-50 rounded-lg text-sm whitespace-pre-wrap font-mono mt-1;
  }

  /* SMS preview */
  .lamar-template-preview__sms-wrap {
    @apply flex flex-col items-center;
  }

  .lamar-template-preview__sms-bubble {
    @apply bg-green-100 text-green-900 p-4 rounded-2xl rounded-bl-sm max-w-sm text-sm;
  }

  .lamar-template-preview__sms-meta {
    @apply text-xs text-gray-400 mt-2;
  }
}

/* Template admin mobile responsive */
@media (max-width: 768px) {
  .lamar-template-table-wrap .lamar-table {
    display: none;
  }

  .lamar-template-card-list {
    display: block;
  }

  .lamar-template-filters {
    @apply flex-col;
  }

  .lamar-template-editor__test-row {
    @apply flex-col;
  }

  .lamar-template-editor__actions {
    @apply flex-col;
  }

  .lamar-template-editor__actions .lamar-btn {
    @apply w-full justify-center;
  }
}

/* =============================================================================
   Session 19 — Admin Venues & Users
   ============================================================================= */

@layer components {

  /* ── Shared admin utilities ─────────────────────────────────────────────── */

  .lm-alert {
    @apply px-4 py-3 rounded-lg mb-4 text-sm font-medium;
  }
  .lm-alert--success {
    @apply bg-green-50 text-green-800 border border-green-200;
  }
  .lm-alert--error {
    @apply bg-red-50 text-red-800 border border-red-200;
  }

  .lm-loading-row {
    @apply py-8 text-center text-gray-400 text-sm;
  }

  .lm-empty-state {
    @apply py-12 text-center text-gray-400 text-sm italic;
  }

  .lm-section-divider {
    @apply border-0 border-t border-gray-100 my-6;
  }

  /* ── Venue status badges ────────────────────────────────────────────────── */

  .lm-venue-status--active {
    @apply bg-green-100 text-green-800;
  }
  .lm-venue-status--inactive {
    @apply bg-gray-100 text-gray-500;
  }
  .lm-venue-status--primary {
    @apply bg-amber-100 text-amber-700;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ── Role badges ─────────────────────────────────────────────────────────── */

  .lm-role-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold;
  }
  .lm-role-badge--owner {
    @apply bg-lamar-navy text-white;
  }
  .lm-role-badge--accountant {
    @apply bg-lamar-slate text-white;
  }
  .lm-role-badge--manager {
    @apply bg-amber-100 text-amber-800;
  }
  .lm-role-badge--staff {
    @apply bg-green-100 text-green-800;
  }

  /* ── Primary venue indicator ─────────────────────────────────────────────── */

  .lm-primary-badge {
    @apply text-lamar-gold font-bold text-base;
  }
  .lm-self-badge {
    @apply text-xs text-gray-400 italic;
  }

  /* ── Table row actions ──────────────────────────────────────────────────── */

  .lm-action-row {
    @apply flex items-center justify-center gap-2;
  }

  /* ── Blocked message (archive guard) ─────────────────────────────────────── */

  .lm-blocked-msg {
    @apply mt-2 text-xs text-red-600 font-medium;
  }

  /* ── Slug display ────────────────────────────────────────────────────────── */

  .lm-slug-code {
    @apply text-xs bg-gray-100 px-1.5 py-0.5 rounded font-mono text-gray-600;
  }

  /* ── Venue editor form ───────────────────────────────────────────────────── */

  .lm-venue-editor {
    @apply py-2;
  }
  .lm-editor-title {
    @apply mb-4;
  }
  .lm-editor-venue-name {
    @apply text-gray-400 font-normal text-base ml-1;
  }

  .lm-form-grid {
    @apply grid grid-cols-1 gap-4;
  }
  @media (min-width: 640px) {
    .lm-form-grid {
      @apply grid-cols-2;
    }
  }

  .lm-form-field {
    @apply flex flex-col gap-1;
  }
  .lm-form-field--full {
    @apply col-span-full;
  }
  .lm-form-field--checkbox {
    @apply justify-end;
  }

  .lm-form-label {
    @apply text-sm font-medium text-gray-700;
  }
  .lm-required {
    @apply text-red-500 ml-0.5;
  }

  .lm-editor-actions {
    @apply flex gap-3 mt-6 pt-4 border-t border-gray-100;
  }

  /* ── Colour picker row ───────────────────────────────────────────────────── */

  .lm-color-row {
    @apply flex items-center gap-2;
  }
  .lm-color-picker {
    @apply w-10 h-10 rounded cursor-pointer border border-gray-200 p-0.5;
  }
  .lm-color-text {
    @apply flex-1;
  }
  .lm-color-swatch {
    @apply w-8 h-8 rounded-full border border-gray-200 flex-shrink-0;
  }

  /* ── Venue settings panel ────────────────────────────────────────────────── */

  .lm-settings-panel {
    @apply mt-6 border-t border-gray-100 pt-4;
  }
  .lm-settings-toggle {
    @apply flex items-center gap-2 text-sm font-semibold text-lamar-navy hover:text-lamar-gold transition-colors cursor-pointer bg-transparent border-0 p-0;
  }
  .lm-settings-caret {
    @apply text-xs text-gray-400;
  }
  .lm-settings-grid {
    @apply grid grid-cols-1 gap-3 mt-4;
  }
  @media (min-width: 640px) {
    .lm-settings-grid {
      @apply grid-cols-2;
    }
  }
  .lm-setting-saved {
    @apply text-xs text-green-600 ml-1 font-medium;
  }
  .lm-field-hint {
    @apply block text-xs text-gray-500 mt-1;
  }

  /* ── Slug input ──────────────────────────────────────────────────────────── */

  .lm-slug-input {
    @apply font-mono text-sm;
  }

  /* ── Filters row ─────────────────────────────────────────────────────────── */

  .lm-filters-row {
    @apply flex flex-wrap gap-3 mb-4;
  }
  .lm-filter-select {
    @apply max-w-xs;
  }

  /* ── Confirm overlay / dialog ────────────────────────────────────────────── */

  .lm-confirm-overlay {
    @apply fixed inset-0 bg-black/40 z-50 flex items-center justify-center;
  }
  .lm-confirm-dialog {
    @apply bg-white rounded-xl shadow-xl p-6 max-w-sm w-full mx-4;
  }
  .lm-confirm-dialog p {
    @apply text-gray-700 text-sm mb-4;
  }
  .lm-confirm-actions {
    @apply flex gap-3;
  }

  /* ── Staff assign form ───────────────────────────────────────────────────── */

  .lm-assign-form {
    @apply pt-2;
  }
  .lm-assign-title {
    @apply text-base font-semibold text-lamar-navy mb-4;
  }
  .lm-assign-grid {
    @apply grid grid-cols-1 gap-4;
  }
  @media (min-width: 640px) {
    .lm-assign-grid {
      @apply grid-cols-2;
    }
  }
  .lm-assign-actions {
    @apply mt-4;
  }
  .lm-assign-error {
    @apply mt-3 mb-0;
  }

  /* ── WP user typeahead search ────────────────────────────────────────────── */

  .lm-user-search {
    @apply relative;
  }
  .lm-user-search__dropdown {
    @apply absolute z-20 w-full bg-white border border-gray-200 rounded-lg shadow-lg mt-1 max-h-48 overflow-y-auto list-none p-0;
  }
  .lm-user-search__item {
    @apply px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 flex flex-col;
  }
  .lm-user-search__item--loading,
  .lm-user-search__item--empty {
    @apply text-gray-400 italic cursor-default;
  }
  .lm-user-email {
    @apply text-xs text-gray-400;
  }

  .lm-selected-user {
    @apply flex items-center justify-between mt-2 px-3 py-2 bg-blue-50 border border-blue-200 rounded-lg text-sm;
  }
  .lm-clear-user {
    @apply text-gray-400 hover:text-red-500 bg-transparent border-0 cursor-pointer ml-2 font-bold;
  }

  .lm-search-hint {
    @apply text-xs text-gray-400 mt-1;
  }

  .lm-checkbox-label {
    @apply flex items-center gap-2 text-sm text-gray-700 cursor-pointer;
  }
  .lm-checkbox {
    @apply w-4 h-4 accent-lamar-gold;
  }

  /* ── Mobile visibility helpers ───────────────────────────────────────────── */

  .lm-show-mobile {
    @apply hidden;
  }
}

/* ── Mobile breakpoints for admin pages ─────────────────────────────────── */
@media (max-width: 768px) {
  .lm-col-mobile-hide-table {
    display: none;
  }
  .lm-show-mobile {
    display: block;
  }
  .lm-col-desktop {
    display: none;
  }
  .lm-editor-actions {
    flex-direction: column;
  }
  .lm-editor-actions .lamar-btn {
    width: 100%;
    justify-content: center;
  }
  .lm-assign-actions .lamar-btn {
    width: 100%;
    justify-content: center;
  }
  .lm-confirm-actions {
    flex-direction: column;
  }
}

/* =============================================================================
   Channel Integrations Admin (Session 20)
   ============================================================================= */

@layer components {
  /* Venue bar */
  .lm-channel-venue-bar {
    @apply flex items-center gap-3 mb-6;
  }
  .lm-channel-venue-select {
    @apply max-w-xs;
  }
  .lm-channel-loading,
  .lm-channel-empty {
    @apply text-gray-500 py-8 text-center;
  }

  /* Channel card list */
  .lm-channel-list {
    @apply flex flex-col gap-4;
  }
  .lm-channel-card {
    @apply border border-lamar-border rounded-xl p-5 bg-white transition-all;
  }
  .lm-channel-card--enabled {
    @apply border-lamar-gold border-2;
  }
  .lm-channel-card__header {
    @apply flex flex-col gap-2 mb-2;
  }
  .lm-channel-card__title-row {
    @apply flex items-center gap-3;
  }
  .lm-channel-card__name {
    @apply font-semibold text-lamar-navy text-lg;
  }
  .lm-channel-card__desc {
    @apply text-sm text-gray-500 mb-3;
  }
  .lm-channel-card__actions {
    @apply mt-3;
  }
  .lm-channel-card__toggle {
    @apply mt-1 flex items-center gap-3;
  }
  .lm-channel-toggle-label {
    @apply text-sm font-medium text-lamar-slate;
  }

  /* Type badges */
  .lm-channel-type-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }
  .lm-channel-type-badge--api {
    @apply bg-blue-100 text-blue-800;
  }
  .lm-channel-type-badge--link {
    @apply bg-green-100 text-green-800;
  }

  /* Sync status */
  .lm-channel-sync-status {
    @apply flex items-center gap-1.5 text-sm text-gray-500;
  }
  .lm-channel-status-dot {
    @apply inline-block w-2 h-2 rounded-full flex-shrink-0;
  }
  .lm-channel-status-dot--idle    { @apply bg-gray-400; }
  .lm-channel-status-dot--syncing { @apply bg-blue-500 animate-pulse; }
  .lm-channel-status-dot--error   { @apply bg-red-500; }
  .lm-channel-status-text { @apply capitalize; }
  .lm-channel-last-sync   { @apply text-xs text-gray-400; }

  /* Config panel */
  .lm-channel-config-panel {
    @apply mt-4 border-t border-gray-100 pt-4;
  }
  .lm-channel-config {
    @apply flex flex-col gap-6;
  }
  .lm-channel-config__section {
    @apply flex flex-col gap-2;
  }
  .lm-channel-config__heading {
    @apply text-sm font-semibold text-lamar-navy uppercase tracking-wide;
  }
  .lm-channel-config__note {
    @apply text-xs text-gray-400 mt-1;
  }
  .lm-channel-config__desc {
    @apply text-sm text-gray-600;
  }
  .lm-channel-config__saved {
    @apply text-sm text-green-600 font-medium;
  }

  /* Credential row */
  .lm-channel-config__credential-row {
    @apply flex items-center gap-3;
  }
  .lm-channel-config__credential-key {
    @apply font-mono text-xs bg-gray-100 px-2 py-1 rounded;
  }
  .lm-channel-config__credential-status {
    @apply text-xs font-medium px-2 py-0.5 rounded;
  }
  .lm-cred-ok      { @apply bg-green-100 text-green-700; }
  .lm-cred-missing { @apply bg-red-100 text-red-700; }

  /* URL row */
  .lm-channel-config__url-row {
    @apply flex items-center gap-2;
  }
  .lm-channel-config__url-input {
    @apply flex-1 font-mono text-xs bg-gray-50 cursor-text;
  }

  /* Sync log */
  .lm-channel-config__log-header {
    @apply flex items-center justify-between;
  }
  .lm-channel-config__log-empty {
    @apply text-sm text-gray-400 py-2;
  }
  .lm-channel-log-table {
    @apply w-full text-sm;
  }
  .lm-log-row--error td {
    @apply bg-red-50;
  }

  /* Direction badges */
  .lm-direction-badge {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium;
  }
  .lm-direction-badge--inbound  { @apply bg-purple-100 text-purple-800; }
  .lm-direction-badge--outbound { @apply bg-indigo-100 text-indigo-800; }

  /* Status badges (log) */
  .lm-status-badge {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium;
  }
  .lm-status-badge--success { @apply bg-green-100 text-green-700; }
  .lm-status-badge--error   { @apply bg-red-100 text-red-700; }

  /* Form row (merchant ID + save) */
  .lm-form-row {
    @apply flex items-center gap-2;
  }
  .lm-form-row .lamar-input {
    @apply flex-1;
  }
}

/* Channel admin — mobile responsive */
@media (max-width: 768px) {
  .lm-channel-venue-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .lm-channel-venue-select {
    max-width: 100%;
    width: 100%;
  }
  .lm-channel-config__url-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lm-channel-config__url-input {
    width: 100%;
  }
  .lm-channel-log-table thead {
    display: none;
  }
  .lm-channel-log-table tbody tr {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    gap: 0.25rem;
  }
  .lm-channel-log-table td::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    font-size: 0.75rem;
    color: #6b7280;
  }
  .lm-form-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =============================================================================
   Staff Login — Glass page design (mirrors Kehemi Rewalld pattern)
   Gradient background + frosted glass card. Scoped via body:has(.lm-login-wrap).
   ============================================================================= */

body.lamar-login-body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.lamar-login-body *,
body.lamar-login-body *::before,
body.lamar-login-body *::after {
  box-sizing: border-box;
}

/* Full-screen gradient behind everything */
body:has(.lm-login-wrap) {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg,
    #22c55e  0%,
    #06b6d4 28%,
    #3b82f6 52%,
    #a855f7 74%,
    #ec4899 100%
  ) !important;
}

/* Glow blobs */
body:has(.lm-login-wrap)::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(34, 197,  94, 0.45) 0%, rgba(34, 197,  94, 0) 55%),
    radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.45) 0%, rgba(59, 130, 246, 0) 55%),
    radial-gradient(circle at 60% 80%, rgba(236, 72, 153, 0.45) 0%, rgba(236,  72, 153, 0) 55%),
    radial-gradient(circle at 30% 85%, rgba(168, 85, 247, 0.40) 0%, rgba(168,  85, 247, 0) 55%);
  filter: blur(40px);
  opacity: 0.9;
  z-index: 0;
}

/* Dark veil so the card reads cleanly */
body:has(.lm-login-wrap)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(2, 6, 23, 0.28);
  z-index: 0;
}

/* Keep SiteOrigin Corp theme wrappers transparent */
body:has(.lm-login-wrap) #page,
body:has(.lm-login-wrap) .site,
body:has(.lm-login-wrap) #content,
body:has(.lm-login-wrap) .site-content,
body:has(.lm-login-wrap) main {
  background: transparent !important;
}

/* Center the login card */
body:has(.lm-login-wrap) main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 24px;
}

/* Keep content centred, no header push */
body:has(.lm-login-wrap) #content,
body:has(.lm-login-wrap) .site-content,
body:has(.lm-login-wrap) main {
  padding-top: 0 !important;
}

/* .lamar-login-wrap = the outer page-template wrapper (transparent pass-through) */
.lamar-login-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

/* Glass card */
body:has(.lm-login-wrap) .lm-login-wrap {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  max-width: 620px !important;
  width: min(620px, calc(100vw - 32px)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  position: relative;
  z-index: 2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* All text + links inside card — white */
body:has(.lm-login-wrap) .lm-login-wrap,
body:has(.lm-login-wrap) .lm-login-wrap label,
body:has(.lm-login-wrap) .lm-login-wrap a,
body:has(.lm-login-wrap) .lm-login-wrap p,
body:has(.lm-login-wrap) .lm-login-wrap div,
body:has(.lm-login-wrap) .lm-login-wrap h1,
body:has(.lm-login-wrap) .lm-login-wrap h2,
body:has(.lm-login-wrap) .lm-login-wrap h3 {
  color: rgba(255, 255, 255, 0.92) !important;
}

body:has(.lm-login-wrap) .lm-login-wrap a:hover {
  text-decoration: underline;
}

/* Notice boxes — restore legible dark text (white text rule above would make these unreadable) */
body:has(.lm-login-wrap) .lm-login-wrap .lm-login-msg {
  color: #374151 !important;
}
body:has(.lm-login-wrap) .lm-login-wrap .lm-login-msg--success {
  color: #0f5132 !important;
}
body:has(.lm-login-wrap) .lm-login-wrap .lm-login-msg--error {
  color: #7f1d1d !important;
}

/* Inputs — dark glass */
body:has(.lm-login-wrap) .lm-login-wrap input[type="text"],
body:has(.lm-login-wrap) .lm-login-wrap input[type="email"],
body:has(.lm-login-wrap) .lm-login-wrap input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  background: rgba(2, 6, 23, 0.30) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 15px !important;
  outline: none;
}

/* Button — cyan (matches Rewalld exactly) */
body:has(.lm-login-wrap) .lm-login-wrap button,
body:has(.lm-login-wrap) .lm-login-wrap input[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  margin-top: 14px !important;
  background: linear-gradient(135deg, #22d3ee, #38bdf8) !important;
  color: #020617 !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
  box-shadow:
    0 12px 30px rgba(34, 211, 238, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}
body:has(.lm-login-wrap) .lm-login-wrap button:hover,
body:has(.lm-login-wrap) .lm-login-wrap input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 18px 44px rgba(56, 189, 248, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}
body:has(.lm-login-wrap) .lm-login-wrap button:active,
body:has(.lm-login-wrap) .lm-login-wrap input[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Suppress the outer lm-login-outer div background */
body:has(.lm-login-wrap) .lm-login-outer {
  background: transparent !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* =============================================================================
   Platform Admin — WP Admin page (manage_options only)
   ============================================================================= */

.lm-platform-admin {
  max-width: 1200px;
}

.lm-platform-admin .lamar-card {
  margin-bottom: 1.5rem;
}

.lm-platform-form {
  max-width: 640px;
}

.lm-platform-form .form-field {
  margin-bottom: 1rem;
}

.lm-platform-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--lamar-navy);
}

.lm-platform-form input[type="text"],
.lm-platform-form input[type="email"],
.lm-platform-form textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  color: #374151;
  background: #fff;
}

.lm-platform-form input[type="text"]:focus,
.lm-platform-form input[type="email"]:focus,
.lm-platform-form textarea:focus {
  outline: none;
  border-color: var(--lamar-gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}

.lm-platform-form .form-section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lamar-navy);
  margin: 1.5rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lamar-border);
}

.lm-org-status-active {
  color: var(--color-success);
  font-weight: 600;
}

.lm-org-status-inactive {
  color: #9ca3af;
  font-weight: 600;
}

/* Staff admin — per-venue card layout */
.lm-users-venue-card + .lm-users-venue-card {
  margin-top: 1.5rem;
}

.lm-users-venue-count {
  @apply text-sm font-normal text-lamar-slate/60 ml-auto;
}

.lm-alert--page {
  @apply mb-4;
}

/* ===========================================================================
   Floor Plan Live Staff View — Session 5B
   =========================================================================== */

/* View mode toggle (Live / Builder) */
.lm-view-toggle {
  @apply flex gap-2 px-4 py-2 bg-lamar-navy border-b border-lamar-gold/40;
}

.lm-view-toggle .lamar-btn {
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lm-view-toggle .lamar-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.lm-view-toggle .lamar-btn.lamar-btn-primary {
  background-color: #c9a96e;
  color: #fff;
  border-color: #c9a96e;
}

/* Main two-column layout */
.lm-staff-view {
  @apply flex flex-1 overflow-hidden h-full min-h-screen;
}

/* Left sidebar — booking list */
.lm-booking-list {
  @apply flex flex-col w-72 flex-shrink-0 bg-lamar-navy text-white overflow-y-auto border-r border-white/10;
}

.lm-booking-list-date {
  @apply px-3 py-3 border-b border-white/10;
}

.lm-booking-list-summary {
  @apply flex flex-wrap gap-2 px-3 py-2 border-b border-white/10;
}

.lm-summary-pill {
  @apply text-xs font-semibold px-2 py-0.5 rounded-full;
}
.lm-summary-pill--confirmed { @apply bg-amber-500/30 text-amber-200; }
.lm-summary-pill--arrived   { @apply bg-lamar-green/30 text-green-200; }
.lm-summary-pill--noshow    { @apply bg-lamar-red/30 text-red-200; }

.lm-booking-list-loading,
.lm-booking-list-empty {
  @apply px-4 py-6 text-sm text-white/60 text-center;
}

/* Booking groups */
.lm-booking-group { @apply border-b border-white/10; }
.lm-booking-group-time {
  @apply px-3 py-1 text-xs font-bold text-lamar-gold/80 bg-white/5;
}
.lm-booking-list-item {
  @apply px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors;
}
.lm-booking-list-item--active { @apply bg-lamar-gold/20; }
.lm-bli-top  { @apply flex items-center justify-between gap-2 mb-0.5; }
.lm-bli-name { @apply text-sm font-medium text-white truncate; }
.lm-bli-bottom { @apply flex items-center gap-2 text-xs text-white/50; }

/* Status legend */
.lm-status-legend {
  @apply mt-auto px-3 py-3 border-t border-white/10;
}
.lm-legend-title { @apply text-xs font-bold text-white/50 uppercase tracking-wider mb-2; }
.lm-legend-item  { @apply flex items-center gap-2 mb-1; }
.lm-legend-swatch {
  @apply w-4 h-4 rounded-sm flex-shrink-0;
}
.lm-legend-label { @apply text-xs text-white/70; }

/* Right side — floor plan canvas */
.lm-staff-canvas-wrap {
  @apply flex-1 overflow-hidden relative;
}

/* Mobile: stack sidebar above canvas */
@media (max-width: 768px) {
  .lm-staff-view {
    flex-direction: column;
    min-height: 0;
    height: auto;
  }
  .lm-booking-list {
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    flex-shrink: 0;
  }
  .lm-staff-canvas-wrap {
    min-height: 420px;
    overflow: auto;
  }
}

/* Dirty positions bar */
.lm-fp-dirty-bar {
  @apply flex items-center justify-between gap-4 px-4 py-2 bg-amber-50 border-t border-amber-200 text-sm text-amber-800;
}

/* Table drawer (side panel on table click) */
.lm-table-drawer {
  @apply fixed top-0 right-0 h-full w-80 bg-white shadow-2xl z-40 flex flex-col overflow-y-auto;
  border-left: 2px solid theme('colors.lamar-gold');
}
.lm-drawer-header {
  @apply flex items-center justify-between px-5 py-4 bg-lamar-navy text-white;
}
.lm-drawer-title { @apply font-semibold text-base; }
.lm-drawer-close {
  @apply p-1 rounded hover:bg-white/20 transition-colors text-white text-lg leading-none;
}
.lm-drawer-body { @apply flex-1 px-5 py-4 flex flex-col gap-4; }
.lm-drawer-footer { @apply px-5 py-4 border-t border-gray-100 flex gap-2; }

/* Booking card inside drawer */
.lm-drawer-booking-card {
  @apply border border-gray-100 rounded-lg p-3 flex flex-col gap-2;
}
.lm-drawer-booking-name { @apply font-semibold text-lamar-navy; }
.lm-drawer-booking-meta { @apply text-sm text-lamar-slate flex gap-3 flex-wrap; }
.lm-drawer-booking-actions { @apply flex gap-2 flex-wrap pt-1; }

/* Status action buttons */
.lm-status-btn {
  @apply lamar-btn lamar-btn-sm;
}
.lm-status-btn--arrived  { @apply bg-lamar-green text-white hover:opacity-90; }
.lm-status-btn--noshow   { @apply bg-lamar-red text-white hover:opacity-90; }
.lm-status-btn--cancel   { @apply bg-gray-200 text-gray-700 hover:bg-gray-300; }

/* Charge info notice after no-show */
.lm-charge-notice {
  @apply text-sm text-lamar-green font-medium px-3 py-2 bg-green-50 rounded-lg border border-green-200;
}

/* Empty table state in drawer */
.lm-drawer-no-bookings {
  @apply text-sm text-lamar-slate/60 text-center py-6;
}

/* =============================================================================
   Venue filter bar (menu management)
   ============================================================================= */
.lm-venue-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--lamar-border);
  background: var(--lamar-muted);
  flex-wrap: wrap;
}
.lm-venue-filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}
.lm-venue-tab {
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #4a5568;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.lm-venue-tab:hover {
  background: #f3f4f6;
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.lm-venue-tab--active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

/* Apply-to-both-venues section (MenuItemEditor) */
.lm-also-add-section {
  border: 1px solid var(--lamar-border);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--lamar-muted);
  margin-bottom: 0.5rem;
}
.lm-also-add-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0;
}
.lm-also-add-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lamar-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* =============================================================================
   UNLAYERED BUTTON OVERRIDE
   Must live OUTSIDE any @layer block to win over WordPress theme styles.
   CSS Cascade Level 5: unlayered rules always beat @layer rules regardless of
   specificity. The active theme applies button base styles as unlayered CSS,
   which would otherwise override all our @layer components button rules.
   This section is the authoritative source for button appearance inside every
   La Mar Vue app mount point (any element whose id starts with "lamar-").
   ============================================================================= */

/* ── v0.app / Tailwind utility override for .lm-menu-editor buttons ──────────
   Step 1 (below) strips background, border-radius, padding, font from ALL
   [id^="lamar-"] buttons. Tailwind utility classes lose that specificity battle
   (0,1,1,0 vs 0,0,1,0). These rules sit BEFORE Step 1 in source order but use
   higher specificity ([id]+class+element+attribute = 0,2,2,1) so they always win.
   Covers: shape (border-radius), spacing (padding), typography, layout, colours.
   These rules use [id^="lamar-"] .lm-menu-editor to win the specificity battle
   while keeping all other WP UI resets intact.                                 */
[id^="lamar-"] .lm-menu-editor button[class*="bg-primary"] {
  background-color: #1B2B4B !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="bg-accent"] {
  background-color: #C9A84C !important;
  color: #1B2B4B !important;
  border-color: transparent !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="bg-emerald-500"] {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="bg-green-600"] {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="bg-amber-500"] {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="bg-rose-500"] {
  background-color: #f43f5e !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="bg-muted"]:not([class*="bg-primary"]):not([class*="bg-accent"]) {
  background-color: #F0EFED !important;
  color: #1B2B4B !important;
}
/* Rounded toggle buttons (Active/Available) */
[id^="lamar-"] .lm-menu-editor button.rounded-full[class*="bg-primary"] {
  background-color: #1B2B4B !important;
}
[id^="lamar-"] .lm-menu-editor button.rounded-full[class*="bg-muted"] {
  background-color: #D1D5DB !important;
}
/* Allergen active state */
[id^="lamar-"] .lm-menu-editor button[class*="bg-primary"][class*="text-primary-foreground"] {
  background-color: #1B2B4B !important;
  color: #ffffff !important;
}
/* Neutral outline buttons (Cancel, Select Image, Change Image) */
[id^="lamar-"] .lm-menu-editor button[class*="border-border"]:not([class*="bg-primary"]):not([class*="bg-accent"]):not([class*="bg-emerald"]):not([class*="bg-green"]):not([class*="bg-amber"]):not([class*="bg-rose"]):not([class*="rounded-full"]) {
  background-color: transparent !important;
  border: 1px solid #E5E4E1 !important;
  color: #1B2B4B !important;
  border-radius: 0.5rem !important;
}
[id^="lamar-"] .lm-menu-editor button[class*="border-border"]:not([class*="bg-primary"]):not([class*="bg-accent"]):not([class*="bg-emerald"]):not([class*="bg-green"]):not([class*="bg-amber"]):not([class*="bg-rose"]):not([class*="rounded-full"]):hover {
  background-color: #F0EFED !important;
}

/* ── Shape + spacing restoration (Step 1 also strips these) ─────────────────── */

/* Border radius */
[id^="lamar-"] .lm-menu-editor button[class*="rounded-full"] { border-radius: 9999px !important; }
[id^="lamar-"] .lm-menu-editor button[class*="rounded-xl"]   { border-radius: 0.75rem !important; }
[id^="lamar-"] .lm-menu-editor button[class*="rounded-lg"]   { border-radius: 0.5rem !important; }
[id^="lamar-"] .lm-menu-editor button[class*="rounded-md"]   { border-radius: 0.375rem !important; }

/* Padding — horizontal */
[id^="lamar-"] .lm-menu-editor button[class*="px-6"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
[id^="lamar-"] .lm-menu-editor button[class*="px-4"] { padding-left: 1rem !important;   padding-right: 1rem !important;   }
[id^="lamar-"] .lm-menu-editor button[class*="px-3"] { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* Padding — vertical (order matters: 2.5 before 2 to avoid substring match) */
[id^="lamar-"] .lm-menu-editor button[class~="py-2.5"] { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
[id^="lamar-"] .lm-menu-editor button[class~="py-1.5"] { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
[id^="lamar-"] .lm-menu-editor button[class~="py-2"]   { padding-top: 0.5rem !important;   padding-bottom: 0.5rem !important;   }

/* Padding — uniform */
[id^="lamar-"] .lm-menu-editor button[class~="p-4"] { padding: 1rem !important;    }
[id^="lamar-"] .lm-menu-editor button[class~="p-3"] { padding: 0.75rem !important; }
[id^="lamar-"] .lm-menu-editor button[class~="p-2"] { padding: 0.5rem !important;  }

/* Typography */
[id^="lamar-"] .lm-menu-editor button[class*="text-sm"]     { font-size: 0.875rem !important; line-height: 1.25rem !important; }
[id^="lamar-"] .lm-menu-editor button[class*="font-medium"] { font-weight: 500 !important; }
[id^="lamar-"] .lm-menu-editor button[class*="font-semibold"] { font-weight: 600 !important; }

/* Display / layout */
[id^="lamar-"] .lm-menu-editor button[class*="inline-flex"] { display: inline-flex !important; align-items: center; }
[id^="lamar-"] .lm-menu-editor button[class*="gap-2"]       { gap: 0.5rem !important; }

/* Toggle switch dimensions */
[id^="lamar-"] .lm-menu-editor button.w-11 { width: 2.75rem !important; }
[id^="lamar-"] .lm-menu-editor button.h-6  { height: 1.5rem !important; position: relative !important; }

/* Text colours */
[id^="lamar-"] .lm-menu-editor button[class*="text-white"]            { color: #ffffff !important; }
[id^="lamar-"] .lm-menu-editor button[class*="text-foreground"]       { color: #1B2B4B !important; }
[id^="lamar-"] .lm-menu-editor button[class*="text-muted-foreground"] { color: #6B7280 !important; }
[id^="lamar-"] .lm-menu-editor button[class*="text-accent-foreground"]{ color: #1B2B4B !important; }
[id^="lamar-"] .lm-menu-editor button[class*="text-destructive"]      { color: #DC2626 !important; }

/* Hover bg for neutral language/VAT pill buttons */
[id^="lamar-"] .lm-menu-editor button[class*="hover:bg-muted"]:hover  { background-color: #F0EFED !important; }
[id^="lamar-"] .lm-menu-editor button[class*="hover:text-foreground"]:hover { color: #1B2B4B !important; }

/* ── lm-dialog-chip hover restore ──────────────────────────────────────────────────────
   Chips are now <div> so WP button reset doesn't apply, but @layer loses to any unlayered
   color/background rules. Restore hover state explicitly here. */

[id^="lamar-"] .lm-dialog-chips .lm-dialog-chip {
  background-color: #ffffff !important;
  color: #6b7280 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color 140ms, color 140ms, background-color 140ms !important;
}
[id^="lamar-"] .lm-dialog-chips .lm-dialog-chip:hover {
  border-color: #C9A84C !important;
  color: #0B1F3A !important;
  background-color: #ffffff !important;
}
[id^="lamar-"] .lm-dialog-chips .lm-dialog-chip.lm-dialog-chip--active {
  background-color: #C9A84C !important;
  border-color: #C9A84C !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ── lm-dialog-option-chip restore ─────────────────────────────────────────────────── */
[id^="lamar-"] .lm-dialog-option-chips .lm-dialog-option-chip {
  background-color: #ffffff !important;
  color: #374151 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color 140ms, color 140ms, background-color 140ms !important;
}
[id^="lamar-"] .lm-dialog-option-chips .lm-dialog-option-chip:hover {
  border-color: #C9A84C !important;
  color: #0B1F3A !important;
}
[id^="lamar-"] .lm-dialog-option-chips .lm-dialog-option-chip.lm-dialog-option-chip--active {
  background-color: #0B1F3A !important;
  border-color: #0B1F3A !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ── lm-dialog-lang-tab restore ────────────────────────────────────────────────────── */
[id^="lamar-"] .lm-dialog-lang-tabs .lm-dialog-lang-tab {
  background-color: transparent !important;
  color: #6b7280 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
[id^="lamar-"] .lm-dialog-lang-tabs .lm-dialog-lang-tab:hover {
  background-color: rgba(201,168,76,0.1) !important;
  color: #0B1F3A !important;
}
[id^="lamar-"] .lm-dialog-lang-tabs .lm-dialog-lang-tab.lm-dialog-lang-tab--active {
  background-color: #ffffff !important;
  color: #0B1F3A !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* ── lm-dialog interactive element restore (Step 1 strips ALL button styles) ──────────
   Covers: switch toggle, chip selector, option-chip selector, lang-tab buttons.
   These classes are defined in @layer components so unlayered WP reset beats them.
   Using higher-specificity unlayered rules to restore shape/colour/cursor. */

/* Toggle switch */
[id^="lamar-"] .lm-dialog-switch-row button.lm-dialog-switch {
  display: inline-flex !important;
  align-items: center !important;
  width: 2.75rem !important;
  height: 1.5rem !important;
  border-radius: 9999px !important;
  background-color: #d1d5db !important;
  border: none !important;
  padding: 2px !important;
  cursor: pointer !important;
  transition: background-color 200ms !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
[id^="lamar-"] .lm-dialog-switch-row button.lm-dialog-switch.lm-dialog-switch--on {
  background-color: #C9A84C !important;
}
[id^="lamar-"] .lm-dialog-switch-row button.lm-dialog-switch .lm-dialog-switch-thumb {
  display: block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
  transform: translateX(0) !important;
  transition: transform 200ms !important;
  pointer-events: none !important;
}
[id^="lamar-"] .lm-dialog-switch-row button.lm-dialog-switch.lm-dialog-switch--on .lm-dialog-switch-thumb {
  transform: translateX(1.25rem) !important;
}

/* ── Phone dial DDL width inside lm-dialog ──
   lm-dialog-input sets width:100%, this overrides for the dial code select. */
.lm-dialog-body .lm-phone-dial {
  width: 140px !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.lm-dialog-body .lm-phone-wrap {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.lm-dialog-body .lm-phone-local {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* ── lm-dialog-btn restore (Step 1 strips padding/radius/bg/border from ALL buttons) ──
   These rules are unlayered + higher specificity (0,2,2,1) so they beat Step 1.
   Targets only buttons carrying the lm-dialog-btn class inside any dialog. */

[id^="lamar-"] .lm-dialog-footer button.lm-dialog-btn,
[id^="lamar-"] .lm-dialog-body button.lm-dialog-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  transition: all 150ms !important;
  line-height: 1 !important;
}

[id^="lamar-"] .lm-dialog-footer button.lm-dialog-btn-primary,
[id^="lamar-"] .lm-dialog-body button.lm-dialog-btn-primary {
  background-color: #C9A84C !important;
  color: #ffffff !important;
  border-color: #C9A84C !important;
  box-shadow: 0 1px 4px rgba(201,168,76,0.35) !important;
}

[id^="lamar-"] .lm-dialog-footer button.lm-dialog-btn-primary:hover:not(:disabled),
[id^="lamar-"] .lm-dialog-body button.lm-dialog-btn-primary:hover:not(:disabled) {
  background-color: #B8973F !important;
  border-color: #B8973F !important;
}

[id^="lamar-"] .lm-dialog-footer button.lm-dialog-btn-ghost,
[id^="lamar-"] .lm-dialog-body button.lm-dialog-btn-ghost {
  background-color: transparent !important;
  color: #6b7280 !important;
  border-color: #e5e7eb !important;
}

[id^="lamar-"] .lm-dialog-footer button.lm-dialog-btn-ghost:hover,
[id^="lamar-"] .lm-dialog-body button.lm-dialog-btn-ghost:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

[id^="lamar-"] .lm-dialog-footer button.lm-dialog-btn:disabled,
[id^="lamar-"] .lm-dialog-body button.lm-dialog-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Step 1: Strip all theme button styles from La Mar mount points */
[id^="lamar-"] button,
[id^="lamar-"] input[type="button"],
[id^="lamar-"] input[type="submit"] {
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Step 2: Re-apply .lamar-btn base */
[id^="lamar-"] .lamar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  line-height: 1.25rem;
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  border: none;
}

/* Step 3: Re-apply variant colours */
[id^="lamar-"] .lamar-btn-primary {
  background-color: var(--color-gold);
  color: var(--color-white);
}
[id^="lamar-"] .lamar-btn-primary:hover {
  background-color: var(--color-gold-hover);
}

[id^="lamar-"] .lamar-btn-danger {
  background: transparent;
  color: var(--color-destructive);
}
[id^="lamar-"] .lamar-btn-danger:hover {
  background-color: var(--color-destructive-bg);
}

[id^="lamar-"] .lamar-btn-secondary {
  background-color: var(--color-muted);
  color: var(--color-navy);
  border: none;
}
[id^="lamar-"] .lamar-btn-secondary:hover {
  background-color: var(--color-border);
}

[id^="lamar-"] .lamar-btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

[id^="lamar-"] .lamar-btn[disabled],
[id^="lamar-"] .lamar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Step 4: Re-apply action icon buttons (edit/delete row icons) */
[id^="lamar-"] .lm-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-slate);
  background-color: transparent;
  border: none;
  transition: all var(--transition-fast);
}
[id^="lamar-"] .lm-action-icon:hover {
  background-color: var(--color-muted);
}
[id^="lamar-"] .lm-action-icon--edit {
  color: var(--color-slate);
}
[id^="lamar-"] .lm-action-icon--edit:hover {
  background-color: var(--color-muted);
  color: var(--color-navy);
}
[id^="lamar-"] .lm-action-icon--primary {
  color: #c9a96e;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
[id^="lamar-"] .lm-action-icon--danger {
  color: var(--color-destructive);
}
[id^="lamar-"] .lm-action-icon--danger:hover {
  background-color: var(--color-destructive-bg);
  color: var(--color-destructive);
}
[id^="lamar-"] .lm-action-icon--view {
  color: var(--color-gold);
}
[id^="lamar-"] .lm-action-icon--view:hover {
  background-color: var(--color-muted);
  color: var(--color-gold-hover);
}
[id^="lamar-"] .lm-action-icon--repeat {
  color: #1d4ed8;
}
[id^="lamar-"] .lm-action-icon--repeat:hover {
  background-color: #dbeafe;
  color: #1e40af;
}

/* Step 5: Re-apply language tab buttons (segmented control) */
[id^="lamar-"] .lm-lang-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  border-bottom: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
  min-height: 36px;
  margin-bottom: 0;
}
[id^="lamar-"] .lm-lang-tab:hover {
  color: #374151;
  background: transparent;
}
[id^="lamar-"] .lm-lang-tab--active {
  background: #ffffff;
  color: #1a2744;
  border-bottom-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
}

/* Step 6: Re-apply item editor — VAT pills */
[id^="lamar-"] .lm-vat-pill {
  flex: 1;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.3125rem;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
  text-align: center;
}
[id^="lamar-"] .lm-vat-pill--active {
  background: #c9a96e !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Step 7: Re-apply item editor — dietary pill toggles */
[id^="lamar-"] .lm-dietary-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  font-weight: 500;
}
[id^="lamar-"] .lm-dietary-pill:hover {
  border-color: rgba(201,169,110,0.4);
  color: #1a2744;
}
[id^="lamar-"] .lm-dietary-pill--vegetarian {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-dietary-pill--vegan {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-dietary-pill--gf {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}
[id^="lamar-"] .lm-dietary-pill--alcohol {
  background: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
}

/* Step 8: Re-apply item editor — allergen card buttons */
[id^="lamar-"] .lm-allergen-card {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
}
[id^="lamar-"] .lm-allergen-card:hover {
  border-color: rgba(201,169,110,0.4);
  background: #fafaf9;
}
[id^="lamar-"] .lm-allergen-card--active {
  background: #1a2744 !important;
  border-color: #1a2744 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(26,39,68,0.3);
}

/* Step 10: Re-apply menu type tabs */
[id^="lamar-"] .lm-menu-tab {
  background-color: transparent;
  color: var(--color-slate);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast);
  cursor: pointer;
}
[id^="lamar-"] .lm-menu-tab:hover {
  color: var(--color-navy);
}
[id^="lamar-"] .lm-menu-tab--active {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* Venue filter pill tabs */
[id^="lamar-"] .lm-venue-tab {
  background-color: #ffffff;
  color: var(--lamar-slate);
  border: 1px solid var(--lamar-border);
  border-radius: 9999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
[id^="lamar-"] .lm-venue-tab:hover {
  background-color: var(--lamar-muted);
  border-color: var(--lamar-gold);
  color: var(--lamar-gold);
}
[id^="lamar-"] .lm-venue-tab--active {
  background-color: var(--lamar-gold);
  border-color: var(--lamar-gold);
  color: #ffffff;
}

/* Status action buttons (floor plan drawer) */
[id^="lamar-"] .lm-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
[id^="lamar-"] .lm-status-btn--arrived {
  background-color: var(--lamar-green);
  color: #ffffff;
}
[id^="lamar-"] .lm-status-btn--noshow {
  background-color: var(--lamar-red);
  color: #ffffff;
}
/* Step N: NPS admin stats grid + filters */
[id^="lamar-"] .lamar-nps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
[id^="lamar-"] .lamar-nps-stat {
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 1px solid #f3f4f6;
  padding: 1rem;
  text-align: center;
}
[id^="lamar-"] .lamar-nps-stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}
[id^="lamar-"] .lamar-nps-stat__value--positive { color: var(--color-success); }
[id^="lamar-"] .lamar-nps-stat__value--amber    { color: #d97706; }
[id^="lamar-"] .lamar-nps-stat__value--negative { color: var(--color-destructive); }
[id^="lamar-"] .lamar-nps-stat__label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-top: 0.25rem;
}
[id^="lamar-"] .lamar-nps-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--lamar-muted);
  border-radius: 0.5rem;
}
[id^="lamar-"] .lamar-nps-filters__group {
  display: flex;
  flex-direction: column;
}
[id^="lamar-"] .lamar-nps-filters__group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
[id^="lamar-"] .lamar-nps-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

[id^="lamar-"] .lm-status-btn--cancel {
  background-color: #e5e7eb;
  color: #374151;
}

/* =============================================================================
   KDS — Kitchen Display System
   All classes scoped to .lm-kds-* to avoid conflicts with the main admin CSS.
   ============================================================================= */

.lm-kds-view {
  min-height: 100vh;
  background-color: #111827;
  color: #f9fafb;
}

.lm-kds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background-color: #1a2744;
  border-bottom: 1px solid #374151;
}

.lm-kds-station-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gold);
}

.lm-kds-clock {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: #9ca3af;
}

.lm-kds-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
  font-size: 1.125rem;
  color: #9ca3af;
}

.lm-kds-status-row--error { color: #c0392b; }
.lm-kds-status-row--idle  { color: #2d6a4f; }

.lm-kds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.lm-kds-ticket {
  background-color: #1f2937;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-left: 4px solid #6b7280;
}

.lm-kds-ticket--new       { border-left-color: #3b82f6; }
.lm-kds-ticket--preparing { border-left-color: #d97706; }
.lm-kds-ticket--ready     { border-left-color: #2d6a4f; }

.lm-kds-ticket-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.lm-kds-table-label {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f9fafb;
  flex: 1;
}

.lm-kds-order-num {
  font-size: 0.75rem;
  color: #6b7280;
}

.lm-kds-elapsed {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: #f59e0b;
}

.lm-kds-status-badge { display: flex; }

.lm-kds-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lm-kds-badge--new       { background-color: #1d4ed8; color: #eff6ff; }
.lm-kds-badge--preparing { background-color: #92400e; color: #fef3c7; }
.lm-kds-badge--ready     { background-color: #064e3b; color: #d1fae5; }

.lm-kds-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.lm-kds-item {
  border-top: 1px solid #374151;
  padding-top: 0.5rem;
}

.lm-kds-item:first-child {
  border-top: none;
  padding-top: 0;
}

.lm-kds-item-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.lm-kds-item-qty {
  color: var(--color-gold);
  font-weight: 700;
  font-size: 0.875rem;
}

.lm-kds-item-name {
  color: #f3f4f6;
  font-weight: 500;
  flex: 1;
}

.lm-kds-item-seat {
  font-size: 0.7rem;
  color: #6b7280;
}

.lm-kds-mods {
  list-style: none;
  margin: 0.25rem 0 0 1rem;
  padding: 0;
  color: #9ca3af;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.lm-kds-mod-price {
  color: #6b7280;
  font-size: 0.7rem;
}

.lm-kds-item-note {
  margin: 0.25rem 0 0;
  padding: 0;
  color: #fbbf24;
  font-size: 0.8rem;
}

.lm-kds-order-note {
  background-color: #374151;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  color: #fbbf24;
  font-size: 0.8rem;
  margin: 0;
}

.lm-kds-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #374151;
}

.lm-kds-btn {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 150ms;
}

.lm-kds-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lm-kds-btn--start    { background-color: #1d4ed8; color: #fff; }
.lm-kds-btn--start:hover:not(:disabled)    { background-color: #2563eb; }

.lm-kds-btn--ready    { background-color: #92400e; color: #fff; }
.lm-kds-btn--ready:hover:not(:disabled)    { background-color: #b45309; }

.lm-kds-btn--complete { background-color: #064e3b; color: #fff; }

/* =============================================================================
   Dashboard page — full-viewport shell (page-lamar-staff.php sets body class)
   No WP theme chrome exists in the staff template — these rules only handle
   body reset and Vue app/shell positioning.
   ============================================================================= */

/* Reset body — page-lamar-staff.php outputs no theme margins */
body.lm-dashboard-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* The Vue mount point and shell fill the entire viewport */
body.lm-dashboard-page #lamar-dashboard-app {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
}

body.lm-dashboard-page .lm-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
}

/* Main area scrolls internally */
body.lm-dashboard-page .lm-shell__main {
  overflow-y: auto;
  height: 100%;
}

/* =============================================================================
   Sidebar Navigation — lm-shell + lm-sidebar
   Replaces the old lamar-topbar horizontal nav.
   ============================================================================= */

/* Shell: flex container holding sidebar + main */
.lm-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-muted, #F5F3EF);
}

/* Suppress browser visited-link colouring across the entire staff platform */
.lm-sidebar a:visited,
.lamar-card a:visited,
.lamar-table a:visited,
.lamar-btn:visited,
.lm-action-icon:visited { color: inherit; }

/* Sidebar */
.lm-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--lamar-navy, #1B2B4B);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s ease;
  position: relative;
  z-index: 200;
}

.lm-sidebar--collapsed {
  width: 64px;
}

/* Brand / Logo */
.lm-sidebar__brand {
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  line-height: 0; /* prevent gap under img */
}

.lm-sidebar__logo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 140px;
}

.lm-sidebar__logo-text {
  display: block;
  padding: 20px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Venue switcher */
.lm-sidebar__venue-switcher {
  position: relative;
  padding: 10px 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lm-sidebar__venue-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.75rem;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.lm-sidebar__venue-trigger:focus,
.lm-sidebar__venue-trigger:focus-visible,
.lm-sidebar__venue-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,0.12);
  outline: none;
}
.lm-sidebar__venue-trigger:hover {
  background: transparent;
}
.lm-sidebar__venue-trigger:active {
  outline: none;
}

.lm-sidebar__venue-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lm-sidebar__venue-caret { flex-shrink: 0; margin-left: 4px; }

.lm-sidebar__venue-dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 12px;
  right: 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  list-style: none;
  padding: 4px 0;
  z-index: 300;
}

.lm-sidebar__venue-option {
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #1a2744;
  cursor: pointer;
  transition: background 0.1s;
}
.lm-sidebar__venue-option:hover { background: #f1f5f9; }
.lm-sidebar__venue-option--active { color: var(--lamar-gold, #C9A84C); font-weight: 600; }

/* Nav list */
.lm-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.lm-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lm-sidebar__item { margin: 2px 8px; }

.lm-sidebar__divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 8px 12px;
}
.lm-sidebar--collapsed .lm-sidebar__divider { margin: 8px 6px; }

.lm-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.lm-sidebar__link:visited { color: #94a3b8; }
.lm-sidebar__link--active:visited { color: var(--lamar-gold, #C9A84C); }

.lm-sidebar__link:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

.lm-sidebar__link--active {
  background: rgba(201,168,76,0.15);
  color: var(--lamar-gold, #C9A84C);
  border-left: 3px solid var(--lamar-gold, #C9A84C);
  padding-left: 7px;
}

.lm-sidebar__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm-sidebar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
}

/* Collapsed: hide labels */
.lm-sidebar--collapsed .lm-sidebar__label { display: none; }
.lm-sidebar--collapsed .lm-sidebar__item { margin: 2px 4px; }
.lm-sidebar--collapsed .lm-sidebar__link { justify-content: center; padding: 9px 0; }
.lm-sidebar--collapsed .lm-sidebar__link--active { border-left: none; border-bottom: 2px solid var(--lamar-gold, #C9A84C); padding-left: 0; }

/* Footer */
.lm-sidebar__footer {
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Language switcher in footer */
.lm-sidebar__lang { position: relative; }

.lm-sidebar__lang-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  color: #64748b;
  font-size: 0.78rem;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.lm-sidebar__lang-trigger:hover { background: rgba(255,255,255,0.07); color: #94a3b8; }

.lm-sidebar__lang-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  list-style: none;
  padding: 4px 0;
  z-index: 300;
}

.lm-sidebar__lang-option {
  padding: 7px 14px;
  font-size: 0.85rem;
  color: #1a2744;
  cursor: pointer;
}
.lm-sidebar__lang-option:hover { background: #f1f5f9; }
.lm-sidebar__lang-option--active { color: var(--lamar-gold, #C9A84C); font-weight: 600; }

/* User row */
.lm-sidebar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  overflow: hidden;
}

.lm-sidebar__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lamar-gold, #C9A84C);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm-sidebar__user-name {
  font-size: 0.8rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-sidebar--collapsed .lm-sidebar__user-name { display: none; }

/* Collapse button — force-override any SiteOrigin/theme button styles */
.lm-sidebar__collapse-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  width: 100% !important;
  text-align: left !important;
  line-height: 1.4 !important;
  outline: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.lm-sidebar__collapse-btn:hover,
.lm-sidebar__collapse-btn:focus {
  background: rgba(255,255,255,0.09) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

.lm-sidebar__collapse-icon { transition: transform 0.2s; }
.lm-sidebar__collapse-icon--flipped { transform: rotate(180deg); }
.lm-sidebar--collapsed .lm-sidebar__collapse-btn { justify-content: center; }

/* Logout */
.lm-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.8rem;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.lm-sidebar__logout:hover { background: rgba(220,38,38,0.12); color: #ef4444; }
.lm-sidebar--collapsed .lm-sidebar__logout { justify-content: center; }

/* Shell main area */
.lm-shell__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

/* Mobile bar (hamburger + venue name) — hidden on desktop */
.lm-shell__mobile-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--lamar-navy, #1B2B4B);
  color: #fff;
}

.lm-shell__mobile-venue {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

/* Hamburger button */
.lm-sidebar__hamburger {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

/* Mobile overlay */
.lm-sidebar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}

/* ── Mobile breakpoint ≤768px ─────────────────────────────── */
@media (max-width: 768px) {
  .lm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
  }

  .lm-sidebar--open {
    transform: translateX(0);
  }

  .lm-sidebar__overlay {
    display: block;
  }

  .lm-shell__mobile-bar {
    display: flex;
  }

  .lm-shell__main {
    padding-top: 0;
  }
}

/* =============================================================================
   Welcome banner
   ============================================================================= */
.lm-welcome-banner {
  padding: 14px 0 4px;
}

.lm-welcome-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--lamar-navy, #1B2B4B);
  letter-spacing: -0.01em;
}

/* =============================================================================
   Venue logo upload field (VenueEditor)
   ============================================================================= */
.lm-logo-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lm-logo-preview {
  max-height: 64px;
  max-width: 160px;
  object-fit: contain;
  border: 1px solid var(--color-border, #E8E4DD);
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}

.lm-logo-upload-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-logo-error {
  color: var(--lamar-red, #DC2626);
  font-size: 0.8rem;
}
.lm-kds-btn--complete:hover:not(:disabled) { background-color: #065f46; }

/* =============================================================================
   Staff Attendance Admin
   ============================================================================= */
@layer components {

  /* Alert panel */
  .lm-attendance-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
  .lm-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
  }
  .lm-alert-item--warning  { background: #FEF3C7; border-left: 4px solid #D97706; }
  .lm-alert-item--critical { background: #FEE2E2; border-left: 4px solid #DC2626; }
  .lm-alert-item--info     { background: #DBEAFE; border-left: 4px solid #2563EB; }
  .lm-alert-text { flex: 1; }
  .lm-alert-time { margin-left: 8px; color: #6B7280; font-size: 0.8rem; }

  /* Toolbar */
  .lm-attendance-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .lm-form-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .lm-period-shortcuts { display: flex; gap: 8px; }

  /* Active staff grid */
  .lm-staff-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .lm-staff-card {
    border-radius: 10px;
    padding: 14px;
    border: 2px solid transparent;
    text-align: center;
  }
  .lm-staff-card--clocked_in  { background: #DCFCE7; border-color: #16A34A; }
  .lm-staff-card--on_break    { background: #FEF3C7; border-color: #D97706; }
  .lm-staff-card--clocked_out { background: #F3F4F6; border-color: #D1D5DB; }
  .lm-staff-card__name { font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
  .lm-staff-card__time { font-size: 0.75rem; color: #6B7280; margin-top: 6px; }

  /* Timeline */
  .lm-event-timeline { margin-top: 24px; }
  .lm-row-flagged { background: #FFF7ED; }
  .lm-row-incomplete { background: #FEF3C7; }

  /* Timesheet staff block */
  .lm-staff-timesheet { margin-bottom: 24px; }
  .lm-staff-timesheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
  }
  .lm-table-compact td, .lm-table-compact th { padding: 6px 12px; }

  /* Labour vs Revenue card */
  .lm-labour-revenue-card { margin-bottom: 24px; }

  /* Device token panel */
  .lm-device-token-panel { text-align: center; }
  .lm-device-token-warning {
    background: #FEF3C7;
    border: 1px solid #D97706;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.875rem;
  }
  .lm-device-token-box {
    background: #1E293B;
    color: #F1F5F9;
    border-radius: 6px;
    padding: 14px;
    font-family: monospace;
    font-size: 0.8rem;
    word-break: break-all;
    margin-bottom: 12px;
    text-align: left;
  }

  /* Checkbox label */
  .lm-checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.875rem; }

} /* end @layer components — attendance */

/* =============================================================================
   Kiosk Interface — Full-Screen Tablet UI
   ============================================================================= */
@layer components {

  /* Root — full viewport, dark navy background */
  .lm-kiosk-root {
    position: fixed;
    inset: 0;
    background: var(--color-navy, #1B2B4B);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
  }

  /* Offline bar */
  .lm-kiosk-offline-bar {
    background: #D97706;
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
  }

  /* Setup screen */
  .lm-kiosk-setup {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  .lm-kiosk-setup-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
  }
  .lm-kiosk-setup-card h1 { font-size: 1.5rem; margin-bottom: 12px; }
  .lm-kiosk-token-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.85rem;
    font-family: monospace;
    margin: 16px 0;
    text-align: center;
  }

  /* Idle screen */
  .lm-kiosk-idle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
  }
  .lm-kiosk-idle-inner { text-align: center; }
  .lm-kiosk-clock {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
  }
  .lm-kiosk-date {
    font-size: clamp(0.9rem, 2.5vw, 1.25rem);
    color: rgba(255,255,255,0.6);
    margin-top: 8px;
    text-transform: capitalize;
  }
  .lm-kiosk-tap-prompt {
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    color: var(--color-gold, #C9A84C);
    margin-top: 32px;
    font-weight: 600;
  }
  .lm-kiosk-pulse {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-gold, #C9A84C);
    margin: 24px auto 0;
    animation: kiosk-pulse 2s infinite;
  }
  @keyframes kiosk-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(1.2); }
  }

  /* PIN pad screen */
  .lm-kiosk-pinpad-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  /* Staff grid */
  .lm-kiosk-staff-list { text-align: center; width: 100%; max-width: 640px; }
  .lm-kiosk-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
    max-height: 60vh;
    overflow-y: auto;
  }
  .lm-kiosk-staff-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 80px;
    transition: background 0.15s, border-color 0.15s;
  }
  .lm-kiosk-staff-btn:hover { background: rgba(255,255,255,0.15); border-color: var(--color-gold); }
  .lm-kiosk-staff-btn--no-pin { opacity: 0.5; cursor: not-allowed; }
  .lm-kiosk-staff-name { font-size: 1rem; }

  /* Status dot */
  .lm-kiosk-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .lm-kiosk-status-dot--clocked_in  { background: #4ADE80; }
  .lm-kiosk-status-dot--on_break    { background: #FCD34D; }
  .lm-kiosk-status-dot--clocked_out { background: #6B7280; }

  /* PIN entry */
  .lm-kiosk-pin-entry { text-align: center; width: 100%; max-width: 380px; }
  .lm-kiosk-heading    { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; margin-bottom: 8px; }
  .lm-kiosk-subheading { color: rgba(255,255,255,0.6); font-size: 1rem; margin-bottom: 24px; }

  /* PIN dots */
  .lm-kiosk-pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
  .lm-kiosk-pin-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    background: transparent;
    transition: background 0.1s;
  }
  .lm-kiosk-pin-dot--filled { background: var(--color-gold, #C9A84C); border-color: var(--color-gold, #C9A84C); }

  /* Numpad */
  .lm-kiosk-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
  .lm-kiosk-numpad-key {
    padding: 20px;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    min-height: 72px;
    transition: background 0.1s;
  }
  .lm-kiosk-numpad-key:hover  { background: rgba(255,255,255,0.16); }
  .lm-kiosk-numpad-key:active { background: var(--color-gold, #C9A84C); }
  .lm-kiosk-numpad-key--action { color: var(--color-gold, #C9A84C); }
  .lm-kiosk-error { color: #FCA5A5; margin-bottom: 12px; font-size: 0.9rem; }
  .lm-kiosk-back-btn { margin-top: 12px; }

  /* Identified screen */
  .lm-kiosk-identified {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .lm-kiosk-identified-inner { text-align: center; max-width: 600px; width: 100%; }
  .lm-kiosk-welcome { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; margin-bottom: 12px; }
  .lm-kiosk-current-status {
    font-size: 1rem;
    padding: 6px 18px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 32px;
    font-weight: 600;
  }
  .lm-kiosk-status--clocked_out { background: rgba(74,222,128,0.15); color: #4ADE80; }
  .lm-kiosk-status--clocked_in  { background: rgba(252,211,77,0.15);  color: #FCD34D; }
  .lm-kiosk-status--on_break    { background: rgba(249,115,22,0.15);  color: #FB923C; }

  .lm-kiosk-auto-clock-banner {
    font-size: 1.3rem;
    color: var(--color-gold, #C9A84C);
    font-weight: 600;
    margin-bottom: 24px;
  }

  /* Action buttons */
  .lm-kiosk-actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
  .lm-kiosk-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 32px;
    border-radius: 16px;
    border: 3px solid transparent;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 140px;
    min-height: 120px;
    transition: all 0.15s;
  }
  .lm-kiosk-action-btn--clock_in     { background: rgba(74,222,128,0.15);   border-color: #4ADE80;   color: #4ADE80;   }
  .lm-kiosk-action-btn--clock_out    { background: rgba(248,113,113,0.15);  border-color: #F87171;   color: #F87171;   }
  .lm-kiosk-action-btn--break_start  { background: rgba(252,211,77,0.15);   border-color: #FCD34D;   color: #FCD34D;   }
  .lm-kiosk-action-btn--break_end    { background: rgba(96,165,250,0.15);   border-color: #60A5FA;   color: #60A5FA;   }
  .lm-kiosk-action-btn:hover  { filter: brightness(1.15); transform: scale(1.02); }
  .lm-kiosk-action-btn:active { transform: scale(0.98); }
  .lm-kiosk-action-icon  { font-size: 2rem; }
  .lm-kiosk-action-label { font-size: 0.95rem; }

  /* Success screen */
  .lm-kiosk-success {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lm-kiosk-success-inner { text-align: center; }
  .lm-kiosk-success-icon {
    font-size: 5rem;
    color: #4ADE80;
    line-height: 1;
    margin-bottom: 16px;
  }
  .lm-kiosk-success-message { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 12px; }
  .lm-kiosk-success-time { font-size: 1.5rem; color: rgba(255,255,255,0.7); margin-bottom: 16px; }
  .lm-kiosk-offline-note { color: #FCD34D; font-size: 0.9rem; margin-bottom: 12px; }
  .lm-kiosk-success-countdown { font-size: 0.9rem; color: rgba(255,255,255,0.4); }

  /* Error screen */
  .lm-kiosk-error-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lm-kiosk-error-inner { text-align: center; }
  .lm-kiosk-error-icon { font-size: 4rem; color: #F87171; margin-bottom: 16px; }
  .lm-kiosk-error-message { font-size: 1.3rem; color: #FCA5A5; margin-bottom: 24px; max-width: 360px; }

  /* Shared kiosk buttons */
  .lm-kiosk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
    min-height: 56px;
    min-width: 120px;
  }
  .lm-kiosk-btn--primary {
    background: var(--color-gold, #C9A84C);
    color: #1B2B4B;
    border-color: var(--color-gold, #C9A84C);
  }
  .lm-kiosk-btn--primary:hover { filter: brightness(1.1); }
  .lm-kiosk-btn--secondary {
    background: transparent;
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.2);
  }
  .lm-kiosk-btn--secondary:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

} /* end @layer components — kiosk */

/* ==========================================================================
   Staff Schedule — My Shifts
   ========================================================================== */
@layer components {
  /* Next shift prominent card */
  .lm-next-shift-card {
    @apply border-l-4 border-lamar-gold bg-amber-50 rounded-lg p-4;
  }

  /* This week shift list */
  .lm-shift-week-list {
    @apply flex flex-col gap-2;
  }
  .lm-shift-item {
    @apply border border-gray-100 rounded-lg p-3 bg-white;
  }
  .lm-shift-item--today {
    @apply border-l-4 border-lamar-gold;
  }
  .lm-shift-confirmed {
    @apply text-lamar-green text-sm font-semibold;
  }

  /* ==========================================================================
     Calendar Rota Grid
     ========================================================================== */
  .lm-rota-nav {
    @apply flex items-center justify-between py-3 px-1;
  }
  .lm-rota-wrapper {
    @apply overflow-x-auto;
  }
  .lm-rota-header-row,
  .lm-rota-staff-row {
    display: grid;
    grid-template-columns: 140px repeat(7, minmax(100px, 1fr));
  }
  .lm-rota-header-row {
    @apply bg-gray-50 border-b border-gray-200;
  }
  .lm-rota-day-header {
    @apply text-center py-2 border-l border-gray-100 text-sm;
  }
  .lm-rota-staff-row {
    @apply border-b border-gray-100;
  }
  .lm-rota-staff-label {
    @apply text-sm text-lamar-slate font-medium py-2 px-2 flex items-start pt-3 truncate;
  }
  .lm-rota-cell {
    @apply border-l border-gray-100 min-h-[56px] p-1 cursor-pointer transition-colors;
  }
  .lm-rota-cell:hover {
    @apply bg-amber-50;
  }
  .lm-rota-cell--today {
    @apply bg-amber-50/60;
  }
  .lm-rota-empty-hint {
    @apply text-xs text-gray-300 p-1 leading-tight opacity-0 transition-opacity;
  }
  .lm-rota-cell:hover .lm-rota-empty-hint {
    @apply opacity-100;
  }
  .lm-rota-shift-block {
    @apply text-xs rounded px-1 py-0.5 mb-0.5 truncate font-medium cursor-pointer;
  }
  .lm-rota-shift-block--scheduled   { @apply bg-amber-200 text-amber-900; }
  .lm-rota-shift-block--in_progress { @apply bg-green-200 text-green-900; }
  .lm-rota-shift-block--completed   { @apply bg-blue-200 text-blue-900; }
  .lm-rota-shift-block--missed      { @apply bg-red-200 text-red-900; }
  .lm-rota-shift-block--cancelled   { @apply bg-gray-200 text-gray-600; }

  /* View toggle (List / Calendar) */
  .lm-view-toggle {
    @apply flex border border-gray-200 rounded-lg overflow-hidden;
  }
  .lm-view-btn {
    @apply px-3 py-1.5 text-sm text-lamar-slate transition-colors;
  }
  .lm-view-btn--active {
    @apply bg-lamar-gold text-white;
  }

  /* ==========================================================================
     KPI Cards — Attendance Reports
     ========================================================================== */
  .lm-kpi-row {
    @apply grid grid-cols-3 gap-4;
  }
  @media (max-width: 640px) {
    .lm-kpi-row { @apply grid-cols-1; }
  }
  .lm-kpi-card {
    @apply lamar-card p-4 text-center;
  }
  .lm-kpi-value {
    @apply text-3xl font-bold text-lamar-navy;
  }
  .lm-kpi-label {
    @apply text-sm text-lamar-slate mt-1;
  }

  /* ==========================================================================
     Late Today Banner
     ========================================================================== */
  .lm-late-banner {
    @apply flex items-center gap-3 bg-amber-50 border border-amber-300 text-amber-800
           text-sm font-medium rounded-lg px-4 py-2 mb-4 cursor-pointer;
  }
  .lm-late-banner__link {
    @apply underline text-lamar-gold hover:text-amber-600 ml-auto text-xs font-semibold;
  }
} /* end @layer components — schedule/rota/reports */

/* =============================================================================
   Face Scan Kiosk Screen (Sub-phase 3)
   ============================================================================= */
@layer components {

  /* Root — full-screen dark overlay, flex column */
  .lm-face-scan-root {
    @apply fixed inset-0 bg-lamar-navy flex flex-col items-center justify-between z-50;
  }

  /* Camera viewport — centred */
  .lm-face-viewport {
    @apply relative flex-1 flex items-center justify-center w-full max-w-sm;
  }

  .lm-face-video {
    @apply w-full rounded-xl object-cover;
    max-height: 62vh;
  }

  .lm-face-canvas-hidden {
    @apply hidden;
  }

  .lm-face-oval-svg {
    @apply absolute inset-0 w-full h-full pointer-events-none;
  }

  .lm-face-oval--scanning {
    animation: lm-oval-pulse 1.2s ease-in-out infinite;
  }
  @keyframes lm-oval-pulse {
    0%, 100% { stroke-opacity: 1; stroke-width: 3; }
    50%       { stroke-opacity: 0.4; stroke-width: 5; }
  }

  .lm-face-status-area {
    @apply w-full max-w-sm px-6 py-4 text-center;
  }
  .lm-face-status-text {
    @apply text-white text-lg font-medium;
  }
  .lm-face-status-text--processing {
    @apply text-lamar-gold;
  }
  .lm-face-status-text--warning {
    @apply text-amber-400;
  }
  .lm-face-status-text--success {
    @apply text-green-400 text-xl;
  }
  .lm-face-status-text--error {
    @apply text-lamar-red;
  }
  .lm-face-no-match {
    @apply flex flex-col items-center gap-3;
  }
  .lm-face-footer {
    @apply flex gap-3 pb-8;
  }

  .lm-face-scan-root--processing .lm-face-video {
    @apply ring-2 ring-lamar-gold;
  }
  .lm-face-scan-root--matched .lm-face-video {
    @apply ring-4 ring-green-500;
  }
  .lm-face-scan-root--error .lm-face-video {
    @apply ring-2 ring-lamar-red;
  }

  /* ==========================================================================
     Face Enrolment Panel (manager attendance tab)
     ========================================================================== */
  .lm-face-enrol-notice {
    @apply lamar-card p-6 text-lamar-slate;
  }
  .lm-face-enrol-loading {
    @apply text-lamar-slate text-sm py-4;
  }
  .lm-face-enrol-list {
    @apply divide-y divide-gray-100;
  }
  .lm-face-enrol-row {
    @apply flex items-center justify-between py-3;
  }
  .lm-face-enrol-name {
    @apply flex items-center gap-3;
  }
  .lm-face-enrol-actions {
    @apply flex gap-2;
  }
  .lm-face-enrol-badge {
    @apply text-xs font-medium px-2 py-0.5 rounded-full;
  }
  .lm-face-enrol-badge--active {
    @apply bg-green-100 text-green-700;
  }
  .lm-face-enrol-badge--none {
    @apply bg-gray-100 text-gray-500;
  }
  .lm-face-enrol-modal {
    @apply max-w-md w-full;
  }
  .lm-face-enrol-camera-wrap {
    @apply flex flex-col items-center gap-3 mb-4;
  }
  .lm-face-enrol-video {
    @apply w-full max-w-xs rounded-lg border border-gray-200;
  }
  .lm-face-enrol-preview {
    @apply flex flex-col items-center gap-2;
  }
  .lm-face-enrol-img {
    @apply w-full max-w-xs rounded-lg border border-gray-200;
  }
  .lm-face-consent-label {
    @apply flex items-start gap-2 text-sm text-lamar-slate cursor-pointer;
  }

} /* end @layer components — face recognition */

/* =============================================================================
   Guest Subscription Pass module
   ============================================================================= */
@layer components {

  /* ── Purchase form (public page) ─────────────────────────────────────────── */
  .lm-pass-purchase {
    @apply max-w-2xl mx-auto py-10 px-4;
  }
  .lm-pass-hero {
    @apply text-center mb-10;
  }
  .lm-pass-hero__title {
    @apply text-3xl font-semibold text-lamar-navy mb-2;
  }
  .lm-pass-hero__subtitle {
    @apply text-lamar-slate;
  }

  /* ── Loading / spinner ───────────────────────────────────────────────────── */
  .lm-pass-loading {
    @apply flex justify-center py-10;
  }
  .lm-pass-spinner {
    @apply w-8 h-8 border-2 border-lamar-gold border-t-transparent rounded-full animate-spin;
  }

  /* ── Tier cards ──────────────────────────────────────────────────────────── */
  .lm-pass-tiers {
    @apply grid gap-4 grid-cols-1 sm:grid-cols-2 mb-8;
  }
  .lm-pass-tier-card {
    @apply lamar-card p-5 cursor-pointer border-2 border-transparent transition-all;
  }
  .lm-pass-tier-card--selected {
    @apply border-lamar-gold shadow-lg;
  }
  .lm-pass-tier-card__name {
    @apply text-lg font-semibold text-lamar-navy mb-1;
  }
  .lm-pass-tier-card__price {
    @apply text-2xl font-bold text-lamar-gold mb-2;
  }
  .lm-pass-tier-card__validity {
    @apply text-sm text-lamar-slate mb-3;
  }
  .lm-pass-tier-card__desc {
    @apply text-sm text-lamar-slate;
  }
  .lm-pass-tier-card__offer {
    @apply text-xs font-medium text-lamar-green mt-2;
  }

  /* ── Purchase form fields ────────────────────────────────────────────────── */
  .lm-pass-form {
    @apply lamar-card p-6 space-y-4;
  }
  .lm-pass-submit-btn {
    @apply lamar-btn lamar-btn-primary w-full justify-center py-3 text-base;
  }
  .lm-pass-secure-note {
    @apply text-xs text-center text-gray-400 mt-2;
  }
  .lm-pass-error {
    @apply text-sm text-lamar-red bg-red-50 border border-red-200 rounded-lg px-4 py-3;
  }

  /* ── Success page ────────────────────────────────────────────────────────── */
  .lm-pass-success {
    @apply max-w-md mx-auto py-16 px-4 text-center;
  }
  .lm-pass-success__icon {
    @apply text-6xl mb-4;
  }
  .lm-pass-success__title {
    @apply text-2xl font-semibold text-lamar-navy mb-3;
  }
  .lm-pass-success__body {
    @apply text-lamar-slate;
  }

  /* ── Fallback QR page ────────────────────────────────────────────────────── */
  .lm-pass-fallback {
    @apply max-w-sm mx-auto py-16 px-4 text-center;
  }
  .lm-pass-fallback__title {
    @apply text-2xl font-semibold text-lamar-navy mb-2;
  }
  .lm-pass-fallback__qr {
    @apply flex justify-center my-6;
  }
  .lm-pass-fallback__note {
    @apply text-sm text-lamar-slate mt-4;
  }
  .lm-pass-fallback__url {
    @apply font-mono text-xs text-lamar-slate break-all mt-2 bg-gray-50 rounded p-2;
  }
  .lm-pass-fallback__expired {
    @apply text-sm text-lamar-red mt-3;
  }

  /* ── Admin list filters ──────────────────────────────────────────────────── */
  .lm-pass-filters {
    @apply flex flex-wrap gap-3 mb-4;
  }
  .lm-pass-filter-select {
    @apply lamar-input w-44;
  }
  .lm-pass-filter-search {
    @apply lamar-input flex-1 min-w-40;
  }

  /* ── UUID cell ───────────────────────────────────────────────────────────── */
  .lm-pass-uuid-cell {
    @apply whitespace-nowrap;
  }
  .lm-pass-uuid {
    @apply font-mono text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded;
  }

  /* ── Pagination ──────────────────────────────────────────────────────────── */
  .lm-pass-pagination {
    @apply flex items-center justify-center gap-3 pt-4;
  }
  .lm-pass-page-info {
    @apply text-sm text-lamar-slate;
  }

  /* ── Revoke modal textarea ───────────────────────────────────────────────── */
  .lm-pass-revoke-reason {
    @apply w-full mt-1;
  }

  /* ── Blocked-row inline message ──────────────────────────────────────────── */
  .lm-pass-blocked-msg {
    @apply text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded px-3 py-2 mt-2;
  }

  /* ── Scanner (staff) ─────────────────────────────────────────────────────── */
  .lm-pass-scanner-root {
    @apply max-w-md mx-auto py-8 px-4 flex flex-col items-center gap-6;
  }
  .lm-pass-scanner-title {
    @apply text-xl font-semibold text-lamar-navy;
  }
  .lm-pass-scanner-wrap {
    @apply relative w-full max-w-xs;
  }
  .lm-pass-scanner-video {
    @apply w-full rounded-xl border border-gray-200 bg-black;
  }
  .lm-pass-scanner-overlay {
    @apply absolute inset-0 flex items-center justify-center pointer-events-none;
  }
  .lm-pass-scanner-frame {
    @apply w-48 h-48 border-2 border-lamar-gold rounded-lg opacity-70;
  }
  .lm-pass-scanner-hint {
    @apply text-sm text-gray-400 text-center;
  }
  .lm-pass-scanner-idle {
    @apply text-sm text-gray-500 italic text-center;
  }

  /* ── Scan result card ────────────────────────────────────────────────────── */
  .lm-pass-result {
    @apply w-full lamar-card p-5 border-2 text-center;
  }
  .lm-pass-result--valid {
    @apply border-lamar-green;
  }
  .lm-pass-result--invalid {
    @apply border-lamar-red;
  }
  .lm-pass-result__icon {
    @apply text-4xl mb-2;
  }
  .lm-pass-result__name {
    @apply text-lg font-semibold text-lamar-navy;
  }
  .lm-pass-result__tier {
    @apply text-sm text-lamar-gold font-medium mb-1;
  }
  .lm-pass-result__offer {
    @apply text-sm text-lamar-green font-medium;
  }
  .lm-pass-result__reason {
    @apply text-sm text-lamar-red;
  }
  .lm-pass-result__countdown {
    @apply text-xs text-gray-400 mt-2;
  }

  /* ── Auto-reset progress bar ─────────────────────────────────────────────── */
  .lm-pass-reset-bar {
    @apply w-full h-1 bg-gray-200 rounded-full mt-3 overflow-hidden;
  }
  .lm-pass-reset-bar__fill {
    @apply h-full bg-lamar-gold rounded-full transition-all;
  }

  /* ── Tier manager (admin tab) ────────────────────────────────────────────── */
  .lm-pass-tier-row {
    @apply flex items-center justify-between py-3 border-b border-gray-100 last:border-0;
  }
  .lm-pass-tier-row__info {
    @apply flex flex-col;
  }
  .lm-pass-tier-row__name {
    @apply font-medium text-lamar-navy;
  }
  .lm-pass-tier-row__meta {
    @apply text-xs text-lamar-slate mt-0.5;
  }
  .lm-pass-tier-row__actions {
    @apply flex gap-2;
  }

} /* end @layer components — subscription pass */

@layer components {
  /* =========================================================================
   * Sprint 3 — Blocked dates (Settings > Availability)
   * ========================================================================= */

  .lm-blocked-add-row {
    @apply flex flex-wrap gap-3 items-center;
  }

  .lm-blocked-row {
    @apply flex items-center gap-3 py-2 border-b border-gray-100 last:border-0;
  }

  .lm-blocked-date {
    @apply font-medium text-lamar-navy min-w-[90px];
  }

  .lm-blocked-reason {
    @apply flex-1 text-sm text-lamar-slate;
  }

  /* =========================================================================
   * Sprint 3 — Booking modification (ManageBooking guest page)
   * ========================================================================= */

  .lm-manage-modify-card {
    @apply mt-4;
  }

  .lm-manage-modify-hint {
    @apply text-sm text-lamar-slate mb-4;
  }

  .lm-manage-modify-form {
    @apply flex flex-col gap-5;
  }

  .lm-manage-modify-field {
    @apply flex flex-col gap-1;
  }

  .lm-manage-modify-label {
    @apply text-sm font-medium text-lamar-navy;
  }

  .lm-manage-party-stepper {
    @apply flex items-center gap-3;
  }

  .lm-stepper-btn {
    @apply w-9 h-9 flex items-center justify-center text-lg font-bold rounded-lg border border-gray-200 bg-white text-lamar-navy hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed p-0;
  }

  .lm-stepper-value {
    @apply text-lg font-semibold text-lamar-navy w-8 text-center;
  }

  .lm-manage-modify-slots {
    @apply flex flex-col gap-2;
  }

  .lm-manage-slot-grid {
    @apply flex flex-wrap gap-2;
  }

  .lm-manage-slot-btn {
    @apply px-4 py-2 rounded-lg border border-gray-200 text-sm font-medium text-lamar-navy bg-white hover:border-lamar-gold hover:text-lamar-gold transition-colors cursor-pointer;
  }

  .lm-manage-slot-btn--active {
    @apply bg-lamar-gold text-white border-lamar-gold;
  }

  .lm-manage-modify-success {
    @apply flex flex-col items-center gap-2 py-4 text-center;
  }

  .lm-manage-modify-new-details {
    @apply text-sm text-lamar-slate;
  }

} /* end @layer components — sprint 3 */


@layer components {
  /* =========================================================================
     Sprint 4 — Allergy severity badges
     ========================================================================= */

  .lm-severity-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold;
  }

  .lm-severity-mild {
    @apply bg-blue-100 text-blue-800;
  }

  .lm-severity-moderate {
    @apply bg-amber-100 text-amber-800;
  }

  .lm-severity-severe {
    @apply bg-orange-100 text-orange-800;
  }

  .lm-severity-anaphylaxis {
    @apply bg-red-100 text-red-800;
  }
} /* end @layer components — sprint 4 */


/* ============================================================================
   Sprint 5 — PDF download button (inline icon in booking list / action cells)
   ============================================================================ */
@layer components {
  .lm-pdf-btn {
    @apply inline-flex items-center justify-center w-5 h-5 rounded text-lamar-slate hover:text-lamar-gold transition-colors;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .lm-pdf-btn:disabled {
    @apply opacity-40 cursor-not-allowed;
  }
}

/* ============================================================================
   Sprint 6 — Corporate Bookings + Order Throttle / Pause
   ============================================================================ */
@layer components {

  /* --------------------------------------------------------------------------
     Corporate booking — floor plan SVG badge
     -------------------------------------------------------------------------- */
  .lm-corporate-badge {
    /* Rendered as an SVG <rect> + <text> inside FloorPlanTable.vue.
       These classes are for non-SVG fallback contexts only. */
    @apply inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-bold text-white;
    background-color: #7c3aed; /* Tailwind violet-700 — matches STATUS_FILLS.pending_approval */
  }

  /* --------------------------------------------------------------------------
     Corporate booking — dashboard approvals card
     -------------------------------------------------------------------------- */
  .lm-corporate-approvals-card {
    @apply lamar-card mb-6;
  }

  .lm-corporate-approvals-card .lamar-card-header {
    @apply border-l-4;
    border-left-color: #7c3aed;
  }

  .lm-corporate-approval-row {
    @apply flex flex-wrap items-center justify-between gap-3 py-3 border-b border-gray-100 last:border-b-0;
  }

  .lm-corporate-approval-meta {
    @apply text-sm text-lamar-slate;
  }

  .lm-corporate-approval-meta strong {
    @apply text-lamar-navy;
  }

  .lm-corporate-approval-actions {
    @apply flex gap-2 flex-shrink-0;
  }

  /* --------------------------------------------------------------------------
     Corporate booking — table drawer notice strip
     -------------------------------------------------------------------------- */
  .lm-corporate-drawer-notice {
    @apply flex items-start gap-2 p-3 rounded-lg text-sm mb-3;
    background-color: #ede9fe; /* violet-100 */
    color: #5b21b6;             /* violet-800 */
    border: 1px solid #c4b5fd; /* violet-300 */
  }

  .lm-corporate-drawer-notice__icon {
    @apply flex-shrink-0 font-bold text-base leading-none mt-0.5;
  }

  /* --------------------------------------------------------------------------
     Order controls bar (KDS — manager-only panel above ticket grid)
     -------------------------------------------------------------------------- */
  .lm-order-controls-bar {
    @apply bg-white border-b border-gray-200 px-4 py-2 shadow-sm;
  }

  .lm-order-controls-row {
    @apply flex flex-wrap items-center gap-4;
  }

  .lm-ordering-paused-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-bold tracking-wide;
    background-color: #fee2e2; /* red-100 */
    color: #b91c1c;             /* red-700 */
    border: 1px solid #fca5a5; /* red-300 */
  }

  .lm-throttle-label {
    @apply flex items-center gap-2 text-sm text-lamar-slate;
  }

  .lm-throttle-input {
    @apply lamar-input w-16 text-center py-1 text-sm;
  }

  .lm-queued-count {
    @apply text-sm font-medium;
    color: #d97706; /* amber-600 */
  }

  /* --------------------------------------------------------------------------
     Ordering paused — full-screen overlay (WaiterApp)
     -------------------------------------------------------------------------- */
  .lm-ordering-paused-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
  }

  .lm-ordering-paused-modal {
    @apply bg-white rounded-2xl shadow-2xl p-8 max-w-sm mx-4 text-center;
  }

  .lm-ordering-paused-icon {
    @apply text-5xl mb-4;
  }

  .lm-ordering-paused-title {
    @apply text-xl font-bold text-lamar-navy mb-2;
  }

  .lm-ordering-paused-body {
    @apply text-lamar-slate text-sm leading-relaxed;
  }

  /* --------------------------------------------------------------------------
     Ordering paused — QR guest banner (non-blocking, at top of QrOrderApp)
     -------------------------------------------------------------------------- */
  .lm-qr-paused-banner {
    @apply w-full py-3 px-4 text-sm font-medium text-center;
    background-color: #fef3c7; /* amber-100 */
    color: #92400e;             /* amber-900 */
    border-bottom: 1px solid #fcd34d; /* amber-300 */
  }

  /* --------------------------------------------------------------------------
     Floor plan — pending_approval status legend swatch
     (actual fill colour applied inline in SVG; this is for legend items only)
     -------------------------------------------------------------------------- */
  .lm-fp-legend-pending-approval {
    @apply inline-block w-3 h-3 rounded-sm flex-shrink-0;
    background-color: #7c3aed;
  }

  /* --------------------------------------------------------------------------
     Per-item VAT — menu item editor VAT field group
     -------------------------------------------------------------------------- */
  .lm-vat-input-group {
    @apply flex flex-col gap-2 mt-1;
  }

  .lm-vat-quick-btns {
    @apply flex gap-1 flex-wrap;
  }

  .lm-vat-preview {
    @apply text-xs text-lamar-slate mt-1;
  }

  .lm-price-input-symbol--right {
    @apply ml-1 text-sm font-medium text-lamar-navy;
  }

  /* --------------------------------------------------------------------------
     Per-item VAT — check view VAT breakdown rows
     -------------------------------------------------------------------------- */
  .lm-vat-breakdown-row {
    @apply text-sm;
  }

  .lm-vat-breakdown-total {
    @apply text-sm font-medium border-t border-gray-100 pt-1;
  }

  /* --------------------------------------------------------------------------
     Per-item VAT — deprecated VAT rate tooltip hint
     -------------------------------------------------------------------------- */
  .lm-vat-tooltip {
    @apply text-xs italic;
    color: var(--color-amber, #d97706);
  }

  /* --------------------------------------------------------------------------
     Per-item VAT — QR guest ordering footnote
     -------------------------------------------------------------------------- */
  .lm-vat-footnote {
    @apply text-xs text-lamar-slate mt-1;
  }

  /* --------------------------------------------------------------------------
     Corporate company details — booking form section
     -------------------------------------------------------------------------- */
  .lm-corporate-details-form {
    @apply mt-4 p-4 rounded-lg border border-purple-200 bg-purple-50;
  }

  .lm-corporate-details-heading {
    @apply text-sm font-semibold mb-1;
    color: #6d28d9;
  }

  .lm-corporate-details-hint {
    @apply text-xs mb-3;
    color: var(--color-slate, #4a5568);
  }

  /* --------------------------------------------------------------------------
     Floor plan drawer — invoice button wrapper
     -------------------------------------------------------------------------- */
  .lm-drawer-invoice-btn-wrap {
    @apply mt-2;
  }

  /* --------------------------------------------------------------------------
     Dashboard — ordering paused banner (top-of-page alert)
     -------------------------------------------------------------------------- */
  .lm-ordering-paused-banner {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg font-medium text-sm;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
  }

  .lm-ordering-paused-banner__icon {
    @apply text-lg flex-shrink-0;
  }

} /* end @layer components — sprint 6 */

/* =============================================================================
   Sprint 7 — Delivery System
   ============================================================================= */
@layer components {

  /* --------------------------------------------------------------------------
     QR order app — delivery mode toggle (header bar)
     -------------------------------------------------------------------------- */
  .lm-delivery-toggle-btn {
    @apply flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors;
    background: #f5f0e8;
    border: 1px solid #c9a96e;
    color: #1a2744;
  }
  .lm-delivery-toggle-btn:hover {
    background: #c9a96e;
    color: #fff;
  }
  .lm-delivery-toggle-btn--active {
    background: #1a2744;
    border-color: #1a2744;
    color: #c9a96e;
  }

  /* --------------------------------------------------------------------------
     Delivery address modal overlay
     -------------------------------------------------------------------------- */
  .lm-delivery-modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    background: rgba(0, 0, 0, 0.6);
  }
  .lm-delivery-modal {
    @apply w-full max-w-md rounded-xl shadow-2xl;
    background: #fff;
    border: 1px solid #e5e7eb;
  }
  .lm-delivery-modal__header {
    @apply px-5 py-4 flex items-center justify-between;
    border-bottom: 2px solid #c9a96e;
  }
  .lm-delivery-modal__title {
    @apply font-semibold text-base;
    color: #1a2744;
  }
  .lm-delivery-modal__body {
    @apply px-5 py-4 space-y-4;
  }
  .lm-delivery-modal__footer {
    @apply px-5 py-4 flex gap-3;
    border-top: 1px solid #f0f0f0;
  }

  /* --------------------------------------------------------------------------
     Delivery zone confirmed banner (inside address form / basket)
     -------------------------------------------------------------------------- */
  .lm-delivery-zone-banner {
    @apply flex flex-col gap-1 px-4 py-3 rounded-lg text-sm;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
  }
  .lm-delivery-zone-banner__name {
    @apply font-semibold;
  }
  .lm-delivery-zone-banner__meta {
    @apply flex gap-4 text-xs;
    color: #047857;
  }

  /* --------------------------------------------------------------------------
     Delivery min-order warning (basket)
     -------------------------------------------------------------------------- */
  .lm-delivery-min-order-warning {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
  }

  /* --------------------------------------------------------------------------
     Promo code row (basket + booking payment step)
     -------------------------------------------------------------------------- */
  .lm-promo-row {
    @apply pt-3 border-t border-dashed border-gray-200;
  }
  .lm-promo-applied {
    @apply flex items-center justify-between text-sm font-medium;
    color: #2d6a4f; /* lamar-green */
  }
  .lm-promo-error {
    @apply text-xs mt-1;
    color: #c0392b; /* lamar-red */
  }

  /* --------------------------------------------------------------------------
     No-API-key warning (delivery address form)
     -------------------------------------------------------------------------- */
  .lm-delivery-no-api-warn {
    @apply px-4 py-3 rounded-lg text-sm;
    background: #fef9ec;
    border: 1px solid #fbbf24;
    color: #78350f;
  }

  /* --------------------------------------------------------------------------
     Delivery info block in check view / staff order detail
     -------------------------------------------------------------------------- */
  .lm-delivery-check-block {
    @apply rounded-lg p-4 space-y-3;
    background: #f5f0e8;
    border: 1px solid #c9a96e;
  }
  .lm-delivery-check-block__address {
    @apply text-sm;
    color: #1a2744;
  }
  .lm-delivery-check-block__fee {
    @apply text-sm font-medium;
    color: #1a2744;
  }

  /* --------------------------------------------------------------------------
     KDS ticket — delivery badge
     -------------------------------------------------------------------------- */
  .lm-kds-delivery-badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold;
    background: #1a2744;
    color: #c9a96e;
  }

  /* --------------------------------------------------------------------------
     KDS ticket — delivery + dispatch block
     -------------------------------------------------------------------------- */
  .lm-kds-delivery-block {
    @apply mt-3 rounded-lg p-3 space-y-2;
    background: #f5f0e8;
    border: 1px solid #c9a96e;
  }
  .lm-kds-delivery-address {
    @apply text-xs;
    color: #374151;
  }
  .lm-kds-dispatch-row {
    @apply flex items-center gap-2 flex-wrap;
  }
  .lm-kds-dispatch-btn {
    @apply px-3 py-1 rounded text-xs font-medium border transition-colors;
    border-color: #d1d5db;
    color: #374151;
    background: #fff;
  }
  .lm-kds-dispatch-btn:hover {
    border-color: #c9a96e;
    color: #1a2744;
  }
  .lm-kds-dispatch-btn--active {
    background: #1a2744;
    border-color: #1a2744;
    color: #c9a96e;
  }
  .lm-kds-courier-row {
    @apply flex items-center gap-2 mt-1;
  }
  .lm-kds-courier-input {
    @apply flex-1 rounded border px-2 py-1 text-xs;
    border-color: #d1d5db;
  }

  /* --------------------------------------------------------------------------
     DeliveryZoneAdmin — zone list table
     -------------------------------------------------------------------------- */
  .lm-delivery-zone-row {
    @apply border-b transition-colors;
    border-color: #f0f0f0;
  }
  .lm-delivery-zone-row:hover {
    background: #fafafa;
  }
  .lm-delivery-zone-status-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }
  .lm-delivery-zone-status-badge--enabled {
    background: #dcfce7;
    color: #166534;
  }
  .lm-delivery-zone-status-badge--disabled {
    background: #f3f4f6;
    color: #6b7280;
  }

  /* --------------------------------------------------------------------------
     Delivery zone polygon editor (Google Maps overlay)
     -------------------------------------------------------------------------- */
  .lm-delivery-map-container {
    @apply relative w-full rounded-lg overflow-hidden;
    height: 450px;
    border: 1px solid #d1d5db;
  }
  .lm-delivery-map-toolbar {
    @apply absolute top-3 left-3 z-10 flex gap-2 flex-wrap;
  }

} /* end @layer components — sprint 7 */

/* =============================================================================
   Sprint 8 — Admin 2FA + Win-back
   ============================================================================= */

@layer components {

  /* --------------------------------------------------------------------------
     2FA action icon (warning/amber — reset 2FA button in user table)
     -------------------------------------------------------------------------- */
  .lm-action-icon--warning {
    @apply text-amber-600 hover:text-amber-800;
  }

  /* --------------------------------------------------------------------------
     2FA policy card on admin-users page
     -------------------------------------------------------------------------- */
  .lm-2fa-policy-card .lamar-card-header {
    @apply flex-wrap gap-3;
  }
  .lm-2fa-policy-hint p {
    @apply text-sm text-gray-500 m-0;
  }
  .lm-2fa-policy-status {
    @apply text-sm font-medium text-lamar-slate;
  }
  .lm-form-label--inline {
    @apply mb-0 mr-2;
  }

  /* --------------------------------------------------------------------------
     2FA challenge and setup pages
     -------------------------------------------------------------------------- */
  .lm-2fa-wrap {
    @apply max-w-md mx-auto py-12 px-4;
  }
  .lm-2fa-card {
    @apply bg-white rounded-xl shadow-md border border-gray-100 p-8;
  }
  .lm-2fa-title {
    @apply text-xl font-semibold text-lamar-navy mb-2;
  }
  .lm-2fa-subtitle {
    @apply text-sm text-lamar-slate mb-6;
  }
  .lm-2fa-qr-wrap {
    @apply flex justify-center mb-6;
  }
  .lm-2fa-manual-key {
    @apply font-mono text-sm bg-gray-100 rounded px-3 py-2 text-center tracking-widest break-all mb-4;
  }
  .lm-2fa-input {
    @apply w-full text-center text-2xl tracking-widest lamar-input;
    letter-spacing: 0.4em;
  }
  .lm-2fa-error {
    @apply text-sm text-red-600 mt-2 text-center;
  }
  .lm-2fa-actions {
    @apply flex gap-3 mt-6;
  }
  .lm-2fa-backup-codes-grid {
    @apply grid grid-cols-2 gap-2 my-4;
  }
  .lm-2fa-backup-code {
    @apply font-mono text-sm bg-gray-100 rounded px-3 py-2 text-center tracking-widest;
  }
  .lm-2fa-backup-warning {
    @apply text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2 mb-4;
  }

  /* --------------------------------------------------------------------------
     Win-back stats card on dashboard
     -------------------------------------------------------------------------- */
  .lm-winback-stats-card {
    @apply h-full;
  }
  .lm-winback-stats-body {
    @apply text-center py-4;
  }
  .lm-winback-stat-number {
    @apply text-5xl font-bold text-lamar-gold mb-1;
  }
  .lm-winback-stat-label {
    @apply text-sm font-medium text-lamar-navy mb-2;
  }
  .lm-winback-stat-hint {
    @apply text-xs text-lamar-slate;
  }

} /* end @layer components — sprint 8 */


/* =============================================================================
   Sprint 9 — Chargeback Management + Image Pipeline
   ============================================================================= */
@layer components {

  /* ── Chargeback status badges ───────────────────────────────────────────── */
  .lm-cb-badge--urgent {
    @apply bg-red-100 text-red-700 font-semibold px-2 py-0.5 rounded-full text-xs;
  }

  /* ── Chargeback list page ────────────────────────────────────────────────── */
  .lm-cb-header {
    @apply flex items-center justify-between flex-wrap gap-2;
  }
  .lm-cb-filter-row {
    @apply flex gap-2;
  }
  .lm-cb-loading,
  .lm-cb-empty {
    @apply text-lamar-slate text-sm py-6 text-center;
  }
  .lm-cb-guest-email {
    @apply block text-xs text-gray-400;
  }
  .lm-cb-due-urgent {
    @apply text-red-600 font-semibold;
  }
  .lm-cb-pagination {
    @apply flex items-center gap-3 justify-center mt-4;
  }
  .lm-cb-table {
    @apply hidden;
  }
  @media (min-width: 769px) {
    .lm-cb-table {
      @apply table;
    }
    .lamar-card-list .lm-cb-mobile-card {
      display: none;
    }
  }

  /* ── Mobile chargeback cards ─────────────────────────────────────────────── */
  .lm-cb-mobile-card {
    @apply border border-gray-200 rounded-lg p-3 mb-3 cursor-pointer hover:bg-gray-50;
  }
  .lm-cb-mobile-card-header {
    @apply flex items-center justify-between mb-1;
  }
  .lm-cb-mobile-card-body {
    @apply flex flex-col gap-1 text-sm text-lamar-slate;
  }
  .lm-cb-mobile-card-footer {
    @apply flex justify-end mt-2;
  }

  /* ── Chargeback detail modal ─────────────────────────────────────────────── */
  .lm-cb-detail-modal {
    @apply max-w-2xl w-full;
  }
  .lm-cb-summary-grid {
    @apply grid grid-cols-2 gap-4 mb-4;
  }
  .lm-cb-summary-item {
    @apply flex flex-col;
  }
  .lm-cb-summary-label {
    @apply text-xs text-gray-500 uppercase tracking-wide;
  }
  .lm-cb-summary-value {
    @apply text-sm text-lamar-slate mt-0.5;
  }
  .lm-cb-monospace {
    @apply font-mono text-xs text-gray-500 mt-0.5;
  }
  .lm-cb-section-title {
    @apply text-sm font-semibold text-lamar-navy mb-3 mt-1;
  }
  .lm-cb-textarea {
    @apply w-full text-sm;
  }
  .lm-cb-divider {
    @apply border-t border-gray-200 my-4;
  }
  .lm-cb-file-row {
    @apply flex items-center gap-3 flex-wrap;
  }
  .lm-cb-file-name {
    @apply text-sm text-green-600;
  }
  .lm-cb-file-error {
    @apply text-sm text-red-600;
  }

  /* ── Image upload shared helpers ─────────────────────────────────────────── */
  .lm-img-upload-row {
    @apply flex items-start gap-3 flex-wrap;
  }
  .lm-img-thumb-preview {
    @apply w-16 h-16 rounded-lg object-cover border border-gray-200;
  }
  .lm-img-upload-controls {
    @apply flex items-center gap-2 flex-wrap;
  }
  .lm-img-upload-error {
    @apply text-xs text-red-600;
  }

  /* ── Loyalty Programme (Sprint 13) ──────────────────────────────────────── */
  .lm-loyalty-redeem-row {
    @apply pt-3 border-t border-dashed border-gray-200;
  }
  .lm-loyalty-balance-label {
    @apply text-sm text-lamar-slate;
  }
  .lm-loyalty-balance-card {
    @apply flex items-center gap-4 p-4 rounded-xl text-white;
    background: linear-gradient(135deg, #1a2744 0%, #2a3f6f 100%);
  }
  .lm-loyalty-balance-icon {
    @apply text-3xl;
    color: #c9a96e;
  }
  .lm-loyalty-summary-card {
    @apply bg-gray-50 rounded-xl p-4 border border-gray-200;
  }


  /* ═══════════════════════════════════════════════════════════════════════════
     LM DIALOG — shared popup/modal pattern
     Usage: wrap any edit overlay in .lm-dialog-backdrop > .lm-dialog
     All edit forms (events, menu items, venues, etc.) use these classes.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ── Variables (on backdrop so they cascade into all children) ── */
  .lm-dialog-backdrop {
    --lmd-navy:       #0B1F3A;
    --lmd-navy-light: #132848;
    --lmd-gold:       #C9A84C;
    --lmd-gold-light: #e8c96a;
    --lmd-gold-muted: rgba(201,168,76,0.12);
    --lmd-border:     #e5e7eb;
    --lmd-border-focus: #C9A84C;
    --lmd-text:       #111827;
    --lmd-text-muted: #6b7280;
    --lmd-text-hint:  #9ca3af;
    --lmd-bg:         #ffffff;
    --lmd-bg-subtle:  #f9fafb;
    --lmd-red:        #dc2626;
    --lmd-radius:     8px;
    --lmd-radius-sm:  5px;
    --lmd-shadow:     0 20px 60px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.12);
  }

  /* ── Backdrop ── */
  .lm-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11,31,58,0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  /* ── Dialog shell ── */
  .lm-dialog {
    background: var(--lmd-bg);
    border-radius: 14px;
    box-shadow: var(--lmd-shadow);
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── Header ── */
  .lm-dialog-header {
    background: var(--lmd-navy);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .lm-dialog-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .lm-dialog-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(201,168,76,0.18);
    border-radius: 8px;
    color: var(--lmd-gold);
    flex-shrink: 0;
  }
  .lm-dialog-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .lm-dialog-subtitle {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    margin: 2px 0 0;
  }
  .lm-dialog-subtitle strong {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
  }
  .lm-dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border: none;
    cursor: pointer;
    transition: background 150ms, color 150ms;
    flex-shrink: 0;
  }
  .lm-dialog-close:hover {
    background: rgba(255,255,255,0.16);
    color: #ffffff;
  }

  /* ── Body (scrollable) ── */
  .lm-dialog-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    scroll-behavior: smooth;
  }

  /* ── Sections ── */
  .lm-dialog-section {
    padding: 22px 24px;
  }
  .lm-dialog-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--lmd-text-muted);
    margin-bottom: 16px;
  }
  .lm-dialog-section-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    color: var(--lmd-gold);
    flex-shrink: 0;
  }
  .lm-dialog-sep {
    height: 1px;
    background: var(--lmd-border);
    margin: 0 24px;
  }

  /* ── Read-only info rows (used in view-only dialogs like voucher detail) ── */
  .lm-dialog-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lmd-border);
  }
  .lm-dialog-info-row:last-child {
    border-bottom: none;
  }
  .lm-dialog-info-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate);
    opacity: 0.7;
  }
  .lm-dialog-info-value {
    font-size: var(--text-sm);
    color: var(--color-navy);
    font-weight: var(--font-medium);
  }
  .lm-dialog-info-value--highlight {
    color: var(--color-gold);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
  }
  .lm-voucher-redemption-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lm-voucher-redemption-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-cream);
    border-radius: var(--radius-md);
  }
  .lm-voucher-redemption-amount {
    font-weight: var(--font-semibold);
    color: var(--color-navy);
    min-width: 56px;
  }
  .lm-voucher-redemption-meta {
    font-size: var(--text-sm);
    color: var(--color-slate);
  }

  /* ── Language tabs (pill strip) ── */
  .lm-dialog-lang-tabs {
    display: flex;
    gap: 4px;
    background: var(--lmd-bg-subtle);
    border: 1px solid var(--lmd-border);
    border-radius: 9px;
    padding: 4px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .lm-dialog-lang-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lmd-text-muted);
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 140ms;
    white-space: nowrap;
  }
  .lm-dialog-lang-tab:hover {
    color: var(--lmd-text);
    background: rgba(0,0,0,0.04);
  }
  .lm-dialog-lang-tab--active {
    background: #ffffff;
    color: var(--lmd-navy);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  }
  .lm-dialog-lang-flag {
    font-size: 14px;
    line-height: 1;
  }

  /* ── Fields ── */
  .lm-dialog-field {
    margin-bottom: 14px;
  }
  .lm-dialog-field:last-child { margin-bottom: 0; }
  .lm-dialog-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lmd-text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }
  .lm-dialog-required { color: var(--lmd-red); margin-left: 2px; }
  .lm-dialog-optional {
    font-size: 11px;
    font-weight: 400;
    color: var(--lmd-text-hint);
    margin-left: 4px;
  }

  /* ── Inputs ── */
  .lm-dialog-input {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
    color: var(--lmd-text);
    background: var(--lmd-bg);
    border: 1.5px solid var(--lmd-border);
    border-radius: var(--lmd-radius-sm);
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
    font-family: inherit;
  }
  .lm-dialog-input:focus {
    border-color: var(--lmd-border-focus);
    box-shadow: 0 0 0 3px var(--lmd-gold-muted);
  }
  .lm-dialog-textarea {
    height: auto;
    padding: 9px 12px;
    resize: vertical;
    min-height: 80px;
  }

  /* Input with icon / prefix / suffix */
  .lm-dialog-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .lm-dialog-input-wrap--sm { width: 120px; }
  .lm-dialog-input-icon {
    position: absolute;
    left: 10px;
    color: var(--lmd-text-muted);
    pointer-events: none;
  }
  .lm-dialog-input--icon { padding-left: 32px; }
  .lm-dialog-input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: var(--lmd-text-muted);
    pointer-events: none;
    z-index: 1;
  }
  .lm-dialog-input--prefix { padding-left: 26px; }
  .lm-dialog-input-suffix {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: var(--lmd-text-muted);
    pointer-events: none;
  }
  .lm-dialog-input--suffix { padding-right: 52px; }

  /*
   * Number input spinner fix
   * ─────────────────────────────────────────────────────────────────────────
   * Problem 1: Plain number inputs — browser spinner (~18px) sits inside the
   *   12px right padding and overlaps the value text.
   * Problem 2: Suffix inputs (lm-dialog-input--suffix) — both the browser
   *   spinner AND the absolute suffix label fight for the right edge.
   *
   * Solution:
   *   a) All .lm-dialog-input[type=number] → 30px right padding to clear spinner
   *   b) When inside .lm-dialog-input-wrap (suffix/prefix context) → hide
   *      spinner entirely so only the suffix label shows
   */
  .lm-dialog-input[type="number"] {
    padding-right: 30px;
  }

  /* Hide native spinner when a suffix/prefix wrapper is present */
  .lm-dialog-input-wrap .lm-dialog-input[type="number"]::-webkit-outer-spin-button,
  .lm-dialog-input-wrap .lm-dialog-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .lm-dialog-input-wrap .lm-dialog-input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
  }

  /* ── Grids ── */
  .lm-dialog-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .lm-dialog-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 520px) {
    .lm-dialog-grid-2,
    .lm-dialog-grid-3 { grid-template-columns: 1fr; }
  }

  /* ── Chips (tax quick-select, etc.) ── */
  .lm-dialog-chip-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .lm-dialog-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  .lm-dialog-chip {
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 999px;
    border: 1.5px solid var(--lmd-border);
    background: var(--lmd-bg);
    color: var(--lmd-text-muted);
    cursor: pointer;
    transition: all 140ms;
  }
  .lm-dialog-chip:hover {
    border-color: var(--lmd-gold);
    color: var(--lmd-navy);
  }
  .lm-dialog-chip--active {
    background: var(--lmd-gold);
    border-color: var(--lmd-gold);
    color: #ffffff;
    font-weight: 600;
  }

  /* ── Preview pill (tax / price breakdown) ── */
  .lm-dialog-preview-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    font-size: 12px;
    color: var(--lmd-text-muted);
    background: var(--lmd-gold-muted);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: var(--lmd-radius-sm);
    padding: 6px 10px;
  }
  .lm-dialog-preview-pill svg { color: var(--lmd-gold); flex-shrink: 0; }
  .lm-dialog-preview-pill strong { color: var(--lmd-navy); }

  /* ── Toggle switch ── */
  .lm-dialog-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--lmd-bg-subtle);
    border: 1.5px solid var(--lmd-border);
    border-radius: var(--lmd-radius);
  }
  .lm-dialog-switch-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lmd-text);
    margin: 0 0 2px;
  }
  .lm-dialog-switch-hint {
    font-size: 12px;
    color: var(--lmd-text-muted);
    margin: 0;
  }
  .lm-dialog-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    transition: background 200ms;
    flex-shrink: 0;
    padding: 0;
  }
  .lm-dialog-switch--on { background: var(--lmd-gold); }
  .lm-dialog-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 200ms;
  }
  .lm-dialog-switch--on .lm-dialog-switch-thumb { transform: translateX(20px); }

  /* ── Option chips (refund policy, radio-style selection) ── */
  .lm-dialog-option-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .lm-dialog-option-chip {
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    border: 1.5px solid var(--lmd-border);
    background: var(--lmd-bg);
    color: var(--lmd-text-muted);
    cursor: pointer;
    transition: all 140ms;
  }
  .lm-dialog-option-chip:hover {
    border-color: var(--lmd-gold);
    color: var(--lmd-navy);
  }
  .lm-dialog-option-chip--active {
    background: var(--lmd-navy);
    border-color: var(--lmd-navy);
    color: #ffffff;
    font-weight: 600;
  }

  /* ── Details panel (conditional sub-form) ── */
  .lm-dialog-details-panel {
    margin-top: 14px;
    padding: 14px;
    background: var(--lmd-bg-subtle);
    border: 1.5px solid var(--lmd-border);
    border-radius: var(--lmd-radius);
  }

  /* ── Image upload zone ── */
  .lm-dialog-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed var(--lmd-border);
    border-radius: var(--lmd-radius);
    background: var(--lmd-bg-subtle);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    padding: 20px;
    box-sizing: border-box;
  }
  .lm-dialog-upload-zone:hover {
    border-color: var(--lmd-gold);
    background: var(--lmd-gold-muted);
  }
  .lm-dialog-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(201,168,76,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lmd-gold);
  }
  .lm-dialog-upload-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--lmd-text);
    margin: 0;
  }
  .lm-dialog-upload-hint {
    font-size: 11.5px;
    color: var(--lmd-text-hint);
    margin: 0;
  }
  .lm-dialog-image-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1.5px solid var(--lmd-border);
    border-radius: var(--lmd-radius);
    background: var(--lmd-bg-subtle);
  }
  .lm-dialog-image-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid var(--lmd-border);
    flex-shrink: 0;
  }
  .lm-dialog-image-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
  }

  /* ── Hint / Error text ── */
  .lm-dialog-hint {
    font-size: 11.5px;
    color: var(--lmd-text-hint);
    margin: 5px 0 0;
    line-height: 1.5;
  }
  .lm-dialog-field-error {
    font-size: 12px;
    color: var(--lmd-red);
    margin: 5px 0 0;
  }
  .lm-dialog-error {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 24px 20px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--lmd-radius-sm);
    font-size: 13px;
    color: var(--lmd-red);
  }

  /* ── Footer (sticky, action buttons) ── */
  .lm-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--lmd-border);
    background: var(--lmd-bg-subtle);
    flex-shrink: 0;
  }

  /* ── Buttons ── */
  .lm-dialog-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--lmd-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    font-family: inherit;
    line-height: 1;
  }
  .lm-dialog-btn-primary {
    background: var(--lmd-gold);
    color: #ffffff;
    border-color: var(--lmd-gold);
    box-shadow: 0 1px 4px rgba(201,168,76,0.35);
  }
  .lm-dialog-btn-primary:hover:not(:disabled) {
    background: var(--lmd-gold-light);
    border-color: var(--lmd-gold-light);
    box-shadow: 0 2px 8px rgba(201,168,76,0.45);
  }
  .lm-dialog-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .lm-dialog-btn-ghost {
    background: transparent;
    color: var(--lmd-text-muted);
    border-color: var(--lmd-border);
  }
  .lm-dialog-btn-ghost:hover {
    background: #f3f4f6;
    color: var(--lmd-text);
  }
  .lm-dialog-btn-danger { color: var(--lmd-red) !important; }
  .lm-dialog-btn-danger:hover {
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
  }
  .lm-dialog-btn-sm { padding: 5px 12px; font-size: 12px; }

  /* ── Spinner ── */
  .lm-dialog-spinner {
    animation: lm-dialog-spin 0.8s linear infinite;
  }
  @keyframes lm-dialog-spin { to { transform: rotate(360deg); } }

  /* ── Utility ── */
  .lm-dialog-hidden { display: none; }

} /* end @layer components — sprint 9 */

/* ── Station type chip emoji icon ── */
.lm-station-chip-icon {
  font-size: 16px;
  line-height: 1;
  margin-right: 4px;
}

/* =============================================================================
   MENU ITEM VARIANT EDITOR (MenuItemEditor.vue — size/serving options)
   ============================================================================= */

.lm-variant-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.lm-variant-row-fields {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.lm-variant-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lm-variant-default-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}

.lm-variant-default-label input[type="radio"] {
  accent-color: #C9A84C;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* =============================================================================
   QR GUEST ORDERING — VARIANT CHIPS (GuestItemConfigurator, ItemConfigurator)
   ============================================================================= */

.lm-qr-variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms, background 150ms, color 150ms;
}

.lm-qr-variant-chip:hover {
  border-color: #c9a96e;
}

.lm-qr-variant-chip--active {
  border-color: #c9a96e;
  background: #fef3c7;
  color: #1a2744;
  font-weight: 600;
}

/* =============================================================================
   ITEM CONFIGURATOR — QUANTITY STEPPER + MODIFIER OPTION TILES
   ============================================================================= */

.lm-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  color: #1a2744;
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms, background 150ms;
}

.lm-qty-btn:hover {
  border-color: #c9a96e;
  background: #fef3c7;
}

.lm-item-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms, background 150ms;
}

.lm-item-option:hover {
  border-color: #c9a96e;
}

.lm-item-option--selected {
  border-color: #c9a96e;
  background: #fef3c7;
  color: #1a2744;
}

.lm-item-option__check {
  flex-shrink: 0;
  color: #c9a96e;
}

/* =============================================================================
   FLOOR PLAN — PLAN SETTINGS DIALOG HELPERS
   ============================================================================= */

.lm-fp-dialog-default-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fdf3e3;
  color: #92400e;
  border: 1px solid #f6e0b8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.lm-fp-dialog-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
}

.lm-dialog-section-header--danger span {
  color: #dc2626;
}

.lm-dialog-section-header--danger .lm-dialog-section-icon {
  color: #dc2626;
}

/* =============================================================================
   FLOOR PLAN BUILDER — BUILDER PANEL TABS (Layout / Combinations)
   ============================================================================= */

.lm-fp-builder-tabs {
  display: flex;
  gap: 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
}

.lm-fp-builder-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
  margin-bottom: -1px;
}

.lm-fp-builder-tab:hover {
  color: #1a2744;
}

.lm-fp-builder-tab--active {
  color: #c9a96e;
  border-bottom-color: #c9a96e;
}

.lm-fp-builder-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c9a96e;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Combinations panel wrapper */
.lm-fp-combinations-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: #fff;
}

/* =============================================================================
   FLOOR PLAN BUILDER — COMBINATION MANAGER PANEL
   ============================================================================= */

.lm-combo-panel {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px;
}

.lm-combo-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lm-combo-panel-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a2744;
}

.lm-combo-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a2744;
}

.lm-combo-hint {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* New combination form */
.lm-combo-form {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.lm-combo-form-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a2744;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.lm-combo-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* Table chip selector grid */
.lm-combo-table-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.lm-combo-table-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  padding: 8px 4px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  user-select: none;
  text-align: center;
}

.lm-combo-table-chip:hover {
  border-color: #c9a96e;
  background: #fdf8f0;
}

.lm-combo-table-chip--active {
  border-color: #c9a96e;
  background: #fdf3e3;
}

.lm-combo-chip-num {
  font-size: 14px;
  font-weight: 700;
  color: #1a2744;
}

.lm-combo-chip-covers {
  font-size: 10px;
  color: #6b7280;
  margin-top: 2px;
}

.lm-combo-no-tables {
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
  padding: 8px 0;
}

/* Loading & empty states */
.lm-combo-loading {
  display: flex;
  justify-content: center;
  padding: 32px;
}

.lm-combo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: #9ca3af;
  text-align: center;
  font-size: 14px;
}

.lm-combo-empty-icon {
  opacity: 0.35;
  color: #6b7280;
}

/* Combination list */
.lm-combo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lm-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.lm-combo-row-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lm-combo-row-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-combo-row-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a2744;
}

.lm-combo-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 7px;
}

.lm-combo-plan-default-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9a96e;
  margin-left: 2px;
  flex-shrink: 0;
}

.lm-combo-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lm-combo-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lm-combo-table-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #1a2744;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.lm-combo-covers-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #fdf3e3;
  color: #92400e;
  border: 1px solid #f6e0b8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/* TableEditor — member of combinations */
.lm-combo-member-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.lm-combo-member-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #fdf3e3;
  color: #92400e;
  border: 1px solid #f6e0b8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

/* =============================================================================
   La Mar — Toast Notifications (useLamarToast + <LamarToast>)
   ============================================================================= */

.lm-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 420px;
  width: calc(100vw - 3rem);
}

.lm-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: all;
  line-height: 1.4;
}

.lm-toast--success { background: #fff; border-left: 4px solid #2d6a4f; color: #1a3a2b; }
.lm-toast--error   { background: #fff; border-left: 4px solid #c0392b; color: #6b1a14; }
.lm-toast--warning { background: #fff; border-left: 4px solid #d97706; color: #6b3d06; }
.lm-toast--info    { background: #fff; border-left: 4px solid #2563eb; color: #1e3a8a; }

.lm-toast__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.lm-toast--success .lm-toast__icon { stroke: #2d6a4f; }
.lm-toast--error   .lm-toast__icon { stroke: #c0392b; }
.lm-toast--warning .lm-toast__icon { stroke: #d97706; }
.lm-toast--info    .lm-toast__icon { stroke: #2563eb; }

.lm-toast__message { flex: 1; }

.lm-toast__close {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.lm-toast__close:hover { opacity: 1; }
.lm-toast__close svg { width: 16px; height: 16px; stroke: currentColor; }

/* Vue TransitionGroup animations */
.lm-toast-enter-active { transition: all 0.25s ease-out; }
.lm-toast-leave-active { transition: all 0.25s ease-in; }
.lm-toast-enter-from   { opacity: 0; transform: translateX(20px); }
.lm-toast-leave-to     { opacity: 0; transform: translateX(20px); }
.lm-toast-move         { transition: transform 0.25s ease; }

/* Confirm dialog transition */
.lm-confirm-enter-active, .lm-confirm-leave-active { transition: opacity 0.2s ease; }
.lm-confirm-enter-from, .lm-confirm-leave-to { opacity: 0; }

.lm-confirm-dialog { max-width: 460px; }
.lm-confirm-dialog__message { color: #374151; font-size: 0.9375rem; line-height: 1.6; padding: 0 0.25rem; }

/* Warn button variant */
.lm-dialog-btn-warn {
  background: #d97706;
  color: #fff;
  border: none;
}
.lm-dialog-btn-warn:hover { background: #b45309; }

/* =============================================================================
   La Mar — Loading Skeletons
   ============================================================================= */

@keyframes lm-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.lm-skeleton {
  background: linear-gradient(90deg, #f0f0ef 25%, #e8e6e0 50%, #f0f0ef 75%);
  background-size: 200% 100%;
  animation: lm-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
.lm-skeleton--row  { height: 48px; margin-bottom: 0.5rem; }
.lm-skeleton--card { height: 120px; }
.lm-skeleton--text { height: 16px; width: 60%; }

/* =============================================================================
   La Mar — Empty States
   ============================================================================= */

.lm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #9ca3af;
}
.lm-empty-state__icon {
  width: 48px;
  height: 48px;
  stroke: #d1d5db;
  margin-bottom: 1rem;
}
.lm-empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 0.375rem;
}
.lm-empty-state__hint {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
  max-width: 300px;
}

/* =============================================================================
   La Mar — Pagination
   ============================================================================= */

.lm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}
.lm-pagination__btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.lm-pagination__btn:hover:not(:disabled) {
  border-color: #c9a96e;
  color: #c9a96e;
}
.lm-pagination__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.lm-pagination__info {
  font-size: 0.875rem;
  color: #6b7280;
}

/* =============================================================================
   La Mar — Inline form validation errors
   ============================================================================= */

.lm-dialog-input--error  { border-color: var(--lmd-red, #dc2626) !important; }
.lm-dialog-error-inline  { color: var(--lmd-red, #dc2626); font-size: 0.75rem; margin-top: 0.25rem; }

/* =============================================================================
   La Mar — Campaign Intro Block
   Compact premium value-framing panel shown at the top of each Campaigns tab.
   Dismissible per-tab via localStorage.
   ============================================================================= */

.lm-campaign-intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(135deg, #1B2B4B 0%, #22375e 100%);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #C9A84C;
  box-shadow: 0 2px 12px rgba(27, 43, 75, 0.12);
}

.lm-campaign-intro__body {
  flex: 1;
  min-width: 0;
}

.lm-campaign-intro__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.lm-campaign-intro__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: rgba(201, 168, 76, 0.18);
  border-radius: 8px;
  color: #C9A84C;
}

.lm-campaign-intro__icon svg {
  width: 1rem;
  height: 1rem;
}

.lm-campaign-intro__headline {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.lm-campaign-intro__copy {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
  max-width: 64ch;
}

.lm-campaign-intro__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.5rem;
}

.lm-campaign-intro__bullets li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  white-space: nowrap;
}

.lm-campaign-intro__check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #C9A84C;
}

.lm-campaign-intro__dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding: 0;
  margin-top: 0.125rem;
}

.lm-campaign-intro__dismiss:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
}

.lm-campaign-intro__dismiss svg {
  width: 10px;
  height: 10px;
}

@media (max-width: 640px) {
  .lm-campaign-intro {
    padding: 1rem;
    flex-direction: column;
  }
  .lm-campaign-intro__bullets li {
    white-space: normal;
  }
}

/* ── Modifier Group Manager — group list rows ─────────────────────────────── */
@layer components {
  .lm-modifier-group-row {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
  }
  .lm-modifier-group-row:hover {
    border-color: #d1d5db;
  }
  .lm-modifier-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    background: #f9fafb;
    cursor: pointer;
    gap: 12px;
  }
  .lm-modifier-group-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .lm-modifier-group-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a2744;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lm-modifier-group-name-secondary {
    font-size: 0.8rem;
    color: #9ca3af;
    white-space: nowrap;
  }
  .lm-modifier-group-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .lm-modifier-group-count {
    font-size: 0.8rem;
    color: #6b7280;
  }
  .lm-modifier-group-chevron {
    font-size: 0.625rem;
    color: #9ca3af;
    margin-left: 2px;
  }
  .lm-modifier-group-options {
    padding: 16px 20px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
  }
}

/* ── lm-dialog segmented control ─────────────────────────────────────────── */
@layer components {
  .lm-dialog-segmented {
    display: flex;
    gap: 8px;
  }
  .lm-dialog-seg-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: #6b7280;
    background: #fff;
  }
  .lm-dialog-seg-option:hover {
    border-color: #c9a96e;
    color: #1a2744;
  }
  .lm-dialog-seg-option--active {
    border-color: #c9a96e;
    background: #fefce8;
    color: #1a2744;
    font-weight: 600;
  }
  .lm-dialog-seg-option span:first-of-type {
    font-size: 0.875rem;
  }
  .lm-dialog-seg-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
    margin-left: 2px;
  }
  .lm-dialog-seg-option--active .lm-dialog-seg-hint {
    color: #6b7280;
  }
}

/* ── Menu Item Editor — tab strip ─────────────────────────────────────────── */
@layer components {
  .lm-dialog-editor-tabs {
    display: flex;
    gap: 4px;
    padding: 14px 24px 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 0;
  }
  .lm-dialog-editor-tab {
    padding: 7px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
  }
  .lm-dialog-editor-tab:hover {
    color: #1a2744;
  }
  .lm-dialog-editor-tab--active {
    color: #1a2744;
    font-weight: 600;
    border-bottom-color: #c9a96e;
  }
}

/* ── Modifier assignment — drag-reorder ───────────────────────────────────── */
@layer components {
  .lm-drag-handle {
    cursor: grab;
    color: #4a5568;
    opacity: 0.35;
    transition: opacity 0.15s;
    flex-shrink: 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
  }
  .lm-drag-handle:hover {
    opacity: 0.75;
  }
  .lm-drag-row--dragging {
    opacity: 0.45;
    background: #fefce8;
    border-color: #fde047 !important;
  }
}

/* ── Modifier assignment component ───────────────────────────────────────── */
@layer components {
  .lm-modifier-assigned-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
  }
  .lm-modifier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    transition: background 0.1s, border-color 0.1s;
  }
  .lm-modifier-row:hover {
    background: #fafafa;
    border-color: #d1d5db;
  }
  .lm-modifier-row-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }
  .lm-modifier-row-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a2744;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lm-modifier-row-meta {
    display: block;
    font-size: 0.75rem;
    color: #4a5568;
    margin-top: 1px;
  }
  .lm-modifier-row-chevron {
    font-size: 0.625rem;
    color: #9ca3af;
    flex-shrink: 0;
  }
  .lm-modifier-override-panel {
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -4px;
  }
  .lm-modifier-add-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px dashed #d1d5db;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4a5568;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .lm-modifier-add-chip:hover {
    border-color: #c9a96e;
    color: #c9a96e;
    background: #fefce8;
  }
  .lm-modifier-assignment {
    padding: 4px 0;
  }

  /* ── Modifier group → item assignment section ─────────────────── */
  .lm-modifier-items-section {
    border-top: 1px solid #e5e7eb;
    padding: 16px 20px 20px;
    margin-top: 8px;
  }
  .lm-modifier-items-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 12px;
  }
  .lm-modifier-items-loading {
    font-size: 0.8125rem;
    color: #9ca3af;
    padding: 4px 0;
  }
  .lm-modifier-items-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 28px;
  }
  .lm-modifier-items-empty {
    font-size: 0.8125rem;
    color: #9ca3af;
    font-style: italic;
  }
  .lm-modifier-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 3px 6px 3px 10px;
    font-size: 0.8125rem;
    color: #166534;
    line-height: 1.4;
  }
  .lm-modifier-item-chip-label {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .lm-modifier-item-chip-menu {
    font-size: 0.7rem;
    color: #4b5563;
    background: #dcfce7;
    border-radius: 3px;
    padding: 0 4px;
  }
  .lm-modifier-item-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .lm-modifier-item-chip-remove:hover {
    background: #fee2e2;
    color: #b91c1c;
  }
  .lm-modifier-items-picker {}
  .lm-modifier-items-search {
    width: 100%;
    max-width: 320px;
    margin-bottom: 8px;
    font-size: 0.8125rem !important;
    padding: 6px 10px !important;
    height: auto !important;
  }
  .lm-modifier-items-picker-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
  }
  .lm-modifier-item-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
  }
  .lm-modifier-item-add-row:last-child {
    border-bottom: none;
  }
  .lm-modifier-item-add-row:hover {
    background: #f9fafb;
  }
  .lm-modifier-item-add-menu {
    font-size: 0.7rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 3px;
    padding: 0 4px;
    flex-shrink: 0;
  }
  .lm-modifier-item-add-name {
    flex: 1;
    font-size: 0.8125rem;
    color: #1a2744;
  }
  .lm-modifier-item-add-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c9a96e;
    flex-shrink: 0;
  }
}

/* ── Guest preference chips ──────────────────────────────────────────────────
   Used in GuestPreferences.vue for dietary / allergy / seating / occasion tags.
   Chips sit above the add-row input inside .lm-dialog-field wrappers.           */
.lm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}
.lm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  background: #f0ece4;
  border: 1px solid #d9d0c0;
  border-radius: 999px;
  font-size: 0.75rem;
  color: #1a2744;
  font-weight: 500;
  white-space: nowrap;
}
.lm-chip--allergy {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.lm-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 2px;
  font-size: 0.8rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 50%;
}
.lm-chip__remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.lm-chip-add-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lm-chip-add-row .lm-dialog-input {
  flex: 1;
  min-width: 0;
}
/* Restore WP button reset for + chip add button inside dialog body */
[id^="lamar-"] .lm-dialog-body button.lm-chip-add-btn {
  padding: 0.35rem 0.75rem;
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
  background: var(--lmd-border, #e2d9c8);
  border: 1px solid var(--lmd-border, #e2d9c8);
  border-radius: 6px;
  color: #1a2744;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
[id^="lamar-"] .lm-dialog-body button.lm-chip-add-btn:hover {
  background: #c9a96e;
  border-color: #c9a96e;
  color: #fff;
}

/* ── Guest notes form ─────────────────────────────────────────────────────────
   lm-add-note-form: textarea + button inside the Notes tab of GuestDetail.      */
.lm-add-note-form {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0ece4;
}
.lm-notes-list {
  padding: 0.5rem 1.25rem 1rem;
}
.lm-note-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5f0e8;
}
.lm-note-item:last-child { border-bottom: none; }
.lm-note-item__header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.lm-note-item__author {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1a2744;
}
.lm-note-item__venue {
  font-size: 0.75rem;
  color: #c9a96e;
}
.lm-note-item__date {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-left: auto;
}
.lm-note-item__body {
  font-size: 0.85rem;
  color: #4a5568;
  white-space: pre-wrap;
  margin: 0;
}
.lm-note-item__actions { margin-top: 0.4rem; }
.lm-note-delete-btn {
  font-size: 0.7rem;
  color: #c0392b;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.lm-empty-state {
  padding: 2rem 0;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* ── Split Bill dialog ───────────────────────────────────────────────────────
   lm-split-dialog: narrower than default (520px) for POS-style layout.
   All interactive rows use lm-split-row with gold selected state.               */
.lm-split-dialog {
  max-width: 520px;
  height: 520px;
}
.lm-split-content {
  min-height: 100%;
}

/* Mode tabs (By Seat / By Item / Equal) */
.lm-split-tabs {
  display: flex;
  gap: 0;
  background: #f0f2f5;
  border-bottom: 2px solid #e0e3e8;
  flex-shrink: 0;
}
.lm-split-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
  letter-spacing: -0.01em;
}
.lm-split-tab + .lm-split-tab {
  border-left: 1px solid #e0e3e8;
}
.lm-split-tab:hover {
  color: #1a2744;
  background: #e8eaed;
}
.lm-split-tab--active {
  color: #1a2744;
  font-weight: 700;
  border-bottom-color: #C9A84C;
  background: #ffffff;
  box-shadow: 0 -2px 0 rgba(201,168,76,0.15) inset;
}
.lm-split-tab-icon { font-size: 15px; line-height: 1; }

/* Content area */
.lm-split-content { padding: 20px 22px; }
.lm-split-hint {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0 0 14px;
}

/* Selectable rows (seats / items) */
.lm-split-list { display: flex; flex-direction: column; gap: 6px; }
.lm-split-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color 140ms, background 140ms, box-shadow 140ms;
  user-select: none;
}
.lm-split-row:hover {
  border-color: #C9A84C;
  background: rgba(201,168,76,0.04);
}
.lm-split-row--selected {
  border-color: #C9A84C;
  background: rgba(201,168,76,0.08);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.lm-split-row-check {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 140ms;
}
.lm-split-row-check--on {
  background: #C9A84C;
  border-color: #C9A84C;
  color: #fff;
}
.lm-split-row-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a2744;
}
.lm-split-row-qty {
  font-size: 12px;
  color: #9ca3af;
  margin-left: 4px;
  font-weight: 400;
}
.lm-split-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: #1a2744;
  margin-left: auto;
}

/* Selected subtotal summary */
.lm-split-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #4a5568;
}
.lm-split-subtotal-amount {
  font-size: 16px;
  font-weight: 700;
  color: #1a2744;
}

/* Equal split stepper */
.lm-split-stepper-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lm-split-stepper-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a2744;
}
.lm-split-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.lm-split-stepper-value {
  width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1a2744;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}
.lm-split-stepper-unit {
  font-size: 13px;
  color: #6b7280;
}
.lm-split-calc-btn { width: 100%; justify-content: center; }
.mt-3 { margin-top: 0.75rem; }

/* Equal split — person rows */
.lm-split-person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: border-color 140ms, background 140ms;
}
.lm-split-person-row--paid {
  border-color: #86efac;
  background: #f0fdf4;
}
.lm-split-person-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lm-split-person-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 1.5px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1a2744;
}
.lm-split-person-label { font-size: 13.5px; font-weight: 500; color: #1a2744; }
.lm-split-person-right { display: flex; align-items: center; gap: 12px; }
.lm-split-person-amount { font-size: 15px; font-weight: 700; color: #1a2744; }
.lm-split-pay-btn { padding: 6px 14px !important; font-size: 12.5px !important; }
.lm-split-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  padding: 4px 10px;
  background: #dcfce7;
  border-radius: 999px;
}

/* Tab button restore (WP button reset strips padding/bg/border from all buttons) */
[id^="lamar-"] .lm-split-tabs button.lm-split-tab {
  padding: 18px 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  transition: color 140ms, border-color 140ms, background 140ms !important;
  margin-bottom: -2px !important;
}
[id^="lamar-"] .lm-split-tabs button.lm-split-tab:hover {
  color: #1a2744 !important;
  background: #e8eaed !important;
}
[id^="lamar-"] .lm-split-tabs button.lm-split-tab.lm-split-tab--active {
  color: #1a2744 !important;
  font-weight: 700 !important;
  border-bottom-color: #C9A84C !important;
  background: #ffffff !important;
}

/* Stepper button restore (WP button reset strips these) */
[id^="lamar-"] .lm-dialog-body button.lm-split-stepper-btn {
  padding: 8px 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: #f9fafb !important;
  border: none !important;
  border-radius: 0 !important;
  color: #1a2744 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background 120ms !important;
}
[id^="lamar-"] .lm-dialog-body button.lm-split-stepper-btn:hover:not(:disabled) {
  background: #f3f4f6 !important;
}
[id^="lamar-"] .lm-dialog-body button.lm-split-stepper-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* Inline payment panel (shown below tab content) */
.lm-split-payment-panel {
  border-top: 1.5px solid #e5e7eb;
  background: #f9fafb;
}
.lm-split-payment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid #e5e7eb;
}
.lm-split-payment-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1a2744;
}
.lm-split-payment-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: transparent !important;
  border: none !important;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 !important;
  transition: color 140ms !important;
}
.lm-split-payment-close:hover { color: #1a2744 !important; }

/* Footer */
.lm-split-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1.5px solid #e5e7eb;
  background: #fff;
  flex-shrink: 0;
}
.lm-split-footer-summary {
  font-size: 12.5px;
  color: #6b7280;
  margin-right: auto;
}

/* Loading spinner */
.lm-split-spinner {
  width: 28px;
  height: 28px;
  animation: lm-spin 0.8s linear infinite;
  color: #C9A84C;
  display: block;
  margin: 1.5rem auto;
}
.lm-split-spinner--sm {
  width: 14px;
  height: 14px;
  margin: 0;
}
.lm-split-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 2.5rem 0;
  font-size: 13px;
  color: #9ca3af;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Cash Payment Modal (lm-cash-*)
   ============================================================ */
.lm-cash-dialog {
  max-width: 420px;
  width: 100%;
}

/* Outstanding balance summary */
.lm-cash-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f4ff;
  border: 1px solid #c7d4f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.lm-cash-summary-label {
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
}
.lm-cash-summary-amount {
  font-size: 22px;
  font-weight: 700;
  color: #1a2744;
  letter-spacing: -0.5px;
}

/* Amount input — wider, larger text */
.lm-cash-amount-input {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
}

/* Quick denomination chips row */
.lm-cash-quick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 6px;
}
.lm-cash-quick-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Change due banner */
.lm-cash-change {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #166534;
  margin-top: 14px;
  margin-bottom: 4px;
}
.lm-cash-change strong {
  font-weight: 700;
}

/* Inline error */
.lm-cash-error {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #991b1b;
  margin-top: 12px;
}

/* Footer layout */
.lm-cash-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Record button */
.lm-cash-record-btn {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Spinner */
.lm-cash-spinner {
  width: 16px;
  height: 16px;
  animation: lm-spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ============================================================
   Stale Check Alerts (lm-check-card-*)
   ============================================================ */

/* Base check card — sits on top of lamar-card */
.lm-check-card {
  transition: box-shadow 180ms, border-color 180ms;
}

/* Warning: 45–90 min open with unpaid balance */
.lm-check-card--stale-warn {
  border-left: 4px solid #d97706 !important;
  background: linear-gradient(to right, #fffbeb 0%, #fff 60%) !important;
}

/* Critical: 90+ min open with unpaid balance */
.lm-check-card--stale-crit {
  border-left: 4px solid #c0392b !important;
  background: linear-gradient(to right, #fef2f2 0%, #fff 60%) !important;
}

/* Stale age label (replaces plain "Opened HH:MM") */
.lm-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}
.lm-stale-badge--warn {
  background: #fef3c7;
  color: #92400e;
}
.lm-stale-badge--crit {
  background: #fee2e2;
  color: #991b1b;
  animation: lm-stale-pulse 2s ease-in-out infinite;
}
@keyframes lm-stale-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Overdue checks banner — shown when any check has been open 2+ hours */
.lm-overdue-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: #fff1f2;
  border: 1.5px solid #fca5a5;
  border-left: 5px solid #dc2626;
  border-radius: 10px;
  animation: lm-overdue-glow 3s ease-in-out infinite;
}
@keyframes lm-overdue-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%       { box-shadow: 0 0 0 4px rgba(220,38,38,0.12); }
}
.lm-overdue-banner__icon {
  flex-shrink: 0;
  color: #dc2626;
  margin-top: 1px;
}
.lm-overdue-banner__body {
  font-size: 13.5px;
  color: #7f1d1d;
  line-height: 1.5;
}
.lm-overdue-banner__body strong {
  font-weight: 700;
  color: #dc2626;
}
.lm-overdue-banner__tables {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #991b1b;
  opacity: 0.85;
}

/* ==========================================================================
   Online Ordering — Public Storefront
   ========================================================================== */

/* Page wrapper */
.lm-online-page {
  min-height: 100dvh;
  background: #f5f0e8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a2744;
  max-width: 540px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* Header bar */
.lm-online-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  background: #1a2744;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.lm-online-venue-name {
  font-size: 18px;
  font-weight: 700;
  color: #c9a96e;
  flex: 1;
}
.lm-online-page-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}
.lm-online-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #c9a96e;
  cursor: pointer;
  padding: 4px 0;
}
.lm-online-back-btn:hover { opacity: 0.8; }

/* Cart pill in header */
.lm-online-cart-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #c9a96e;
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.lm-online-cart-pill:hover { background: #b8935a; }

/* Loading state */
.lm-online-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 16px;
}

/* Closed / paused states */
.lm-online-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  gap: 12px;
  color: #4a5568;
}
.lm-online-closed h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a2744;
  margin: 0;
}
.lm-online-closed p {
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}

/* Fulfilment toggle */
.lm-online-fulfilment-toggle {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
}
.lm-online-fulfilment-btn {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #4a5568;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.lm-online-fulfilment-btn--active {
  border-color: #c9a96e;
  color: #1a2744;
  background: #fff;
}

/* Category tabs */
.lm-online-cats {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lm-online-cats::-webkit-scrollbar { display: none; }
.lm-online-cat-btn {
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #4a5568;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.lm-online-cat-btn--active {
  background: #1a2744;
  color: #c9a96e;
}

/* Menu category sections */
.lm-online-menu {
  padding: 0 16px;
}
.lm-online-menu-section {
  margin-bottom: 28px;
}
.lm-online-menu-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a2744;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #c9a96e;
}

/* Menu item grid */
.lm-online-items {
  display: grid;
  gap: 10px;
}
.lm-online-item {
  display: flex;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  border: 1px solid #e5e7eb;
}
.lm-online-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.lm-online-item--unavailable { opacity: 0.45; pointer-events: none; }
.lm-online-item-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.lm-online-item-body { flex: 1; min-width: 0; }
.lm-online-item-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a2744;
  margin-bottom: 3px;
}
.lm-online-item-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lm-online-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lm-online-item-price {
  font-size: 15px;
  font-weight: 700;
  color: #1a2744;
}
.lm-online-item-tags {
  display: flex;
  gap: 4px;
}
.lm-online-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: #e5e7eb;
  color: #374151;
}
.lm-online-tag--v { background: #d1fae5; color: #065f46; }
.lm-online-tag--ve { background: #bbf7d0; color: #065f46; }
.lm-online-tag--gf { background: #fef3c7; color: #92400e; }
.lm-online-tag--age { background: #fee2e2; color: #991b1b; }

/* Sticky cart CTA bar */
.lm-online-sticky-cart {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 540px;
  padding: 12px 16px;
  background: linear-gradient(to top, #f5f0e8 75%, transparent);
  z-index: 90;
}
.lm-online-cta {
  padding: 12px 16px;
}
.lm-online-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  background: #1a2744;
  color: #c9a96e;
  cursor: pointer;
  transition: opacity 0.15s;
}
.lm-online-cta-btn:hover { opacity: 0.9; }

/* Item configurator overlay */
.lm-online-configurator-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.lm-online-configurator {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 20px 16px 32px;
}
.lm-online-configurator-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.lm-online-configurator-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a2744;
  flex: 1;
  margin-right: 12px;
}
.lm-online-configurator-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f4f6;
  cursor: pointer;
  color: #6b7280;
  flex-shrink: 0;
}
.lm-online-configurator-desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 16px;
}
.lm-online-mod-group {
  margin-bottom: 20px;
}
.lm-online-mod-group-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a2744;
  margin-bottom: 8px;
}
.lm-online-mod-group-hint {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}
.lm-online-mod-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}
.lm-online-mod-option:last-child { border-bottom: none; }
.lm-online-mod-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.lm-online-mod-check--selected {
  background: #1a2744;
  border-color: #1a2744;
  color: #fff;
}
.lm-online-mod-option-name { flex: 1; font-size: 14px; color: #1a2744; }
.lm-online-mod-option-price {
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
}
.lm-online-note-input {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  resize: none;
  color: #1a2744;
  background: #f9fafb;
}
.lm-online-configurator-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Quantity stepper */
.lm-online-qty-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lm-online-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: #1a2744;
  user-select: none;
  transition: background 0.15s;
}
.lm-online-qty-btn:hover { background: #e5e7eb; }
.lm-online-qty-btn--disabled { opacity: 0.4; pointer-events: none; }
.lm-online-qty-value {
  font-size: 16px;
  font-weight: 700;
  color: #1a2744;
  min-width: 20px;
  text-align: center;
}

/* Cart */
.lm-online-cart-wrap {
  padding: 12px 16px 0;
}
.lm-online-cart-items { margin-bottom: 16px; }
.lm-online-cart-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}
.lm-online-cart-row:last-child { border-bottom: none; }
.lm-online-cart-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1a2744;
}
.lm-online-cart-mods {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.lm-online-cart-note {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  margin-top: 2px;
}
.lm-online-cart-line-price {
  font-size: 14px;
  font-weight: 600;
  color: #1a2744;
  flex-shrink: 0;
}
.lm-online-cart-remove {
  cursor: pointer;
  color: #9ca3af;
  padding: 2px;
  flex-shrink: 0;
}
.lm-online-cart-remove:hover { color: #c0392b; }

/* Totals rows */
.lm-online-totals {
  padding: 12px 0;
  border-top: 1px solid #e5e7eb;
}
.lm-online-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4a5568;
  padding: 4px 0;
}
.lm-online-total-row--grand {
  font-size: 16px;
  font-weight: 700;
  color: #1a2744;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  margin-top: 6px;
}
.lm-online-total-row--discount { color: #2d6a4f; }

/* Promo code */
.lm-online-promo {
  display: flex;
  gap: 8px;
  padding: 12px 0;
}
.lm-online-min-order-warn {
  font-size: 13px;
  color: #d97706;
  padding: 8px 0;
  font-weight: 500;
}

/* Checkout form */
.lm-online-checkout-form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lm-online-section {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}
.lm-online-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a2744;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.lm-online-summary-rows { display: flex; flex-direction: column; gap: 6px; }
.lm-online-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4a5568;
}
.lm-online-summary-row--total {
  font-size: 15px;
  font-weight: 700;
  color: #1a2744;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
}

/* Payment */
.lm-online-payment-wrap { padding: 16px; }
.lm-online-payment-amount {
  font-size: 16px;
  font-weight: 600;
  color: #1a2744;
  text-align: center;
  padding: 16px 0;
}
.lm-online-stripe-wrap {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}
.lm-online-stripe-loading {
  display: flex;
  justify-content: center;
  padding: 24px;
}
.lm-online-security-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  justify-content: center;
  margin-top: 12px;
}

/* Confirmation */
.lm-online-confirmation {
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.lm-online-confirm-icon { color: #2d6a4f; }
.lm-online-confirm-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a2744;
  margin: 0;
}
.lm-online-confirm-subtitle {
  font-size: 15px;
  color: #4a5568;
  margin: 0;
}
.lm-online-confirm-card {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.lm-online-confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  color: #4a5568;
  border-bottom: 1px solid #f3f4f6;
}
.lm-online-confirm-row:last-child { border-bottom: none; }
.lm-online-confirm-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lm-online-track-btn { width: 100%; text-align: center; }
.lm-online-new-order-btn {
  background: transparent;
  color: #4a5568;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
}

/* Order tracker */
.lm-online-tracker { padding: 24px 16px; }
.lm-online-tracker-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.lm-online-tracker-steps::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #e5e7eb;
  z-index: 0;
}
.lm-online-tracker-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  position: relative;
  z-index: 1;
}
.lm-online-tracker-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.lm-online-tracker-step--done .lm-online-tracker-dot {
  background: #2d6a4f;
  border-color: #2d6a4f;
  color: #fff;
}
.lm-online-tracker-step--active .lm-online-tracker-dot {
  border-color: #c9a96e;
  background: #fff;
}
.lm-online-tracker-step--pending .lm-online-tracker-dot {
  opacity: 0.4;
}
.lm-online-tracker-label {
  font-size: 15px;
  font-weight: 500;
  color: #4a5568;
}
.lm-online-tracker-step--done .lm-online-tracker-label { color: #1a2744; }
.lm-online-tracker-step--active .lm-online-tracker-label {
  font-weight: 700;
  color: #1a2744;
}
.lm-online-tracker-eta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #4a5568;
}
.lm-online-tracking-rejected {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: #c0392b;
}
.lm-online-tracking-rejected h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #1a2744;
}
.lm-online-tracking-rejected p {
  font-size: 15px;
  color: #4a5568;
  margin: 0;
}

/* Pulse animation for active tracker step */
@keyframes lm-tracker-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
.lm-online-tracker-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9a96e;
  animation: lm-tracker-pulse 1.5s ease-in-out infinite;
}

/* Portal sign-in hint on checkout */
.lm-online-portal-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  padding: 10px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.lm-online-portal-hint-link {
  color: #c9a96e;
  font-weight: 600;
  text-decoration: none;
}
.lm-online-portal-hint-link:hover { text-decoration: underline; }

/* ==========================================================================
   Customer Portal
   ========================================================================== */

.lm-portal-page-wrap { min-height: 100dvh; }

.lm-portal-page {
  min-height: 100dvh;
  background: #f5f0e8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a2744;
}

/* Loading */
.lm-portal-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

/* Login */
.lm-portal-login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
}
.lm-portal-login-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lm-portal-login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.lm-portal-login-brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #1a2744;
}
.lm-portal-login-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a2744;
  margin: 0;
}
.lm-portal-login-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

/* Top bar */
.lm-portal-topbar {
  background: #1a2744;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.lm-portal-topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  height: 56px;
}
.lm-portal-brand {
  font-size: 16px;
  font-weight: 700;
  color: #c9a96e;
  flex-shrink: 0;
}
.lm-portal-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.lm-portal-nav-item {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.15s;
}
.lm-portal-nav-item:hover { color: #fff; }
.lm-portal-nav-item--active { color: #c9a96e; background: rgba(201,169,110,0.12); }
.lm-portal-signout {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  flex-shrink: 0;
}
.lm-portal-signout:hover { color: #fff; }

/* Content area */
.lm-portal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* Section */
.lm-portal-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lm-portal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lm-portal-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a2744;
  margin: 0;
}

/* Cards */
.lm-portal-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.lm-portal-card--danger { border-color: #fee2e2; }
.lm-portal-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}
.lm-portal-card-body { padding: 16px; }

/* Welcome */
.lm-portal-welcome { padding: 4px 0 8px; }
.lm-portal-welcome-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a2744;
  margin: 0;
}

/* Stats */
.lm-portal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lm-portal-stat-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 20px 16px;
  text-align: center;
}
.lm-portal-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1a2744;
}
.lm-portal-stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Booking row */
.lm-portal-booking-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lm-portal-booking-venue { font-weight: 600; color: #1a2744; }
.lm-portal-booking-date  { font-size: 14px; color: #4a5568; }
.lm-portal-booking-meta  { font-size: 13px; color: #6b7280; margin-top: 4px; }

/* Quick links */
.lm-portal-quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.lm-portal-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 16px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  cursor: pointer;
  text-align: center;
  transition: box-shadow 0.15s;
}
.lm-portal-quick-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Order list */
.lm-portal-order-list { display: flex; flex-direction: column; gap: 8px; }
.lm-portal-order-row {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.lm-portal-order-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.lm-portal-order-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.lm-portal-order-venue { font-weight: 600; color: #1a2744; }
.lm-portal-order-row-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}
.lm-portal-order-type { color: #4a5568; }
.lm-portal-order-total { font-weight: 600; color: #1a2744; margin-left: auto; }

/* Pagination */
.lm-portal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}
.lm-portal-page-btn {
  font-size: 13px;
  font-weight: 600;
  color: #c9a96e;
  cursor: pointer;
}
.lm-portal-page-info { font-size: 13px; color: #6b7280; }

/* Order detail */
.lm-portal-order-detail { display: flex; flex-direction: column; gap: 12px; }
.lm-portal-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4a5568;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}
.lm-portal-detail-row:last-child { border-bottom: none; }
.lm-portal-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
.lm-portal-item-row:last-child { border-bottom: none; }
.lm-portal-item-qty { font-size: 13px; color: #6b7280; min-width: 24px; }
.lm-portal-item-name-wrap { flex: 1; }
.lm-portal-item-name { font-size: 14px; font-weight: 500; color: #1a2744; }
.lm-portal-item-mods { font-size: 12px; color: #6b7280; margin-top: 2px; }
.lm-portal-item-price { font-size: 14px; font-weight: 600; color: #1a2744; }
.lm-portal-address-text { font-size: 14px; color: #4a5568; line-height: 1.5; }
.lm-portal-track-btn { display: block; text-align: center; text-decoration: none; margin-top: 4px; }

/* Back link */
.lm-portal-back {
  font-size: 14px;
  color: #c9a96e;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.lm-portal-back:hover { opacity: 0.8; }

/* Profile */
.lm-portal-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lm-portal-field-row .lm-portal-field--sm { min-width: 0; }
.lm-portal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.lm-portal-field--switch { flex-direction: row; align-items: center; gap: 12px; }
.lm-portal-label { font-size: 13px; font-weight: 600; color: #374151; }
.lm-portal-input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  color: #1a2744;
  background: #f9fafb;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.lm-portal-input:focus { outline: none; border-color: #c9a96e; background: #fff; }
.lm-portal-input--readonly { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.lm-portal-input--otp {
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
}
.lm-portal-hint { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* Loyalty */
.lm-portal-loyalty-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.lm-portal-loyalty-pts  { font-size: 40px; font-weight: 700; color: #1a2744; }
.lm-portal-loyalty-label { font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }

/* GDPR */
.lm-portal-gdpr-text { font-size: 14px; color: #4a5568; margin-bottom: 12px; line-height: 1.5; }

/* Addresses */
.lm-portal-addr-list { display: flex; flex-direction: column; gap: 8px; }
.lm-portal-addr-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 14px 16px;
  gap: 12px;
}
.lm-portal-addr-card-body { flex: 1; }
.lm-portal-addr-label { font-size: 14px; font-weight: 600; color: #1a2744; display: flex; gap: 8px; align-items: center; }
.lm-portal-addr-default-badge {
  font-size: 11px;
  background: #c9a96e;
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}
.lm-portal-addr-text { font-size: 13px; color: #6b7280; margin-top: 4px; line-height: 1.4; }
.lm-portal-addr-actions { display: flex; gap: 8px; align-items: center; }

/* Form actions */
.lm-portal-form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Buttons */
.lm-portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  background: #e5e7eb;
  color: #374151;
}
.lm-portal-btn:hover { opacity: 0.85; }
.lm-portal-btn--primary { background: #1a2744; color: #c9a96e; }
.lm-portal-btn--secondary { background: #f3f4f6; color: #1a2744; border: 1px solid #d1d5db; }
.lm-portal-btn--danger { background: #fee2e2; color: #c0392b; }
.lm-portal-btn--sm { padding: 6px 12px; font-size: 13px; }
.lm-portal-btn--loading { opacity: 0.6; pointer-events: none; }

/* Utility */
.lm-portal-empty { text-align: center; padding: 40px 16px; font-size: 15px; color: #6b7280; }
.lm-portal-error { font-size: 13px; color: #c0392b; padding: 8px 10px; background: #fee2e2; border-radius: 6px; }
.lm-portal-success { font-size: 13px; color: #2d6a4f; padding: 8px 10px; background: #d1fae5; border-radius: 6px; }
.lm-portal-link {
  font-size: 13px;
  color: #c9a96e;
  cursor: pointer;
  text-align: center;
  padding: 4px 0;
}
.lm-portal-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .lm-portal-quick-links { grid-template-columns: 1fr 1fr; }
  .lm-portal-field-row   { grid-template-columns: 1fr; }
  .lm-portal-nav-item    { font-size: 12px; padding: 5px 8px; }
}

/* =============================================================================
   Website Provisioner — Venue Settings "Website" tab
   ============================================================================= */

.lm-provision-subtitle {
  font-size: 14px;
  color: #4a5568;
  margin: 0 0 20px;
}

/* Action bar */
.lm-provision-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Result banner */
.lm-provision-result-banner {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.lm-provision-result-banner.success {
  background: #d1fae5;
  color: #2d6a4f;
}
.lm-provision-result-banner.error {
  background: #fee2e2;
  color: #c0392b;
}

/* Error / empty states */
.lm-provision-error-banner {
  font-size: 14px;
  color: #c0392b;
  padding: 10px 14px;
  background: #fee2e2;
  border-radius: 8px;
  margin-bottom: 16px;
}
.lm-provision-empty {
  text-align: center;
  padding: 40px 16px;
  font-size: 14px;
  color: #6b7280;
}

/* Table */
.lm-provision-table th:last-child,
.lm-provision-table td:last-child {
  width: 140px;
}

/* Slug display */
.lm-provision-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #334155;
  word-break: break-all;
}

/* Status badges */
.lm-provision-badge--ok {
  background: #d1fae5;
  color: #2d6a4f;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lm-provision-badge--warn {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lm-provision-badge--missing {
  background: #fee2e2;
  color: #991b1b;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .lm-provision-table thead { display: none; }
  .lm-provision-table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .lm-provision-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    border: none;
    width: 100%;
  }
  .lm-provision-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-right: 8px;
    min-width: 60px;
  }
  .lm-provision-table td:last-child {
    width: 100%;
    justify-content: flex-end;
  }
}