/*
 * Owner legacy Bootstrap / Argon skin.
 *
 * Scoped to .owner-workspace. Maps the legacy Bootstrap + Argon
 * classes that owner pages still use (dashboardv2, orders, coupons,
 * settings, plans, etc.) to the atom-kit tokens defined in
 * owner-workspace-tokens.css. The HTML stays the same; only the
 * visual language shifts to the new DA.
 *
 * Loaded from resources/views/layouts/app.blade.php after
 * owner-workspace-tokens.css and owner-atom-kit.css.
 */

/* Typography — force DM Sans throughout owner pages
   (current app uses Quicksand for body which fights DM Sans headings) */
.owner-workspace,
.owner-workspace body,
.owner-workspace p,
.owner-workspace span,
.owner-workspace a,
.owner-workspace button,
.owner-workspace input,
.owner-workspace select,
.owner-workspace textarea,
.owner-workspace label,
.owner-workspace h1,
.owner-workspace h2,
.owner-workspace h3,
.owner-workspace h4,
.owner-workspace h5,
.owner-workspace h6,
.owner-workspace .display-1,
.owner-workspace .display-2,
.owner-workspace .display-3 {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.owner-workspace .display-1 {
    font-size: 44px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.1; color: var(--ow-ink);
}
.owner-workspace .display-2 {
    font-size: 36px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.15; color: var(--ow-ink);
}
.owner-workspace .display-3 { font-size: 28px; font-weight: 600; color: var(--ow-ink); }
.owner-workspace h3 { font-size: 18px; font-weight: 600; color: var(--ow-ink); }

.owner-workspace .text-muted,
.owner-workspace small.text-muted { color: var(--ow-muted) !important; }

/* Cards — Bootstrap .card -> atom-kit card treatment */
.owner-workspace .card {
    background: var(--ow-surface);
    border: 1px solid var(--ow-line);
    border-radius: 14px;
    box-shadow: var(--ow-shadow-card);
}
.owner-workspace .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ow-line-soft);
    padding: 20px 24px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.owner-workspace .card-body { padding: 20px 24px; }

/* Argon card-stats (KPI tiles) — subtle mirror-glass hint via top-gradient */
.owner-workspace .card-stats {
    background:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, color-mix(in srgb, var(--ow-brand, #635bff) 2%, transparent) 100%),
        var(--ow-surface);
    border-radius: 14px;
    transition: border-color 200ms var(--ow-ease), transform 200ms var(--ow-ease);
}
.owner-workspace .card-stats:hover {
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent);
    transform: translateY(-1px);
}
.owner-workspace .card-stats .card-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ow-muted);
}
.owner-workspace .card-stats .display-1 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.owner-workspace .card-header h3,
.owner-workspace .card-header .h3 {
    margin: 0; font-size: 16px; font-weight: 600;
    color: var(--ow-ink); letter-spacing: -0.005em;
}

/* Buttons — force EVERY button onto the mockup atom, no matter which
   Bootstrap/Argon/custom class it started as. Same radius, same font,
   same press feedback, one primary vocabulary. */
/* ============================================================
 * BUTTON ATOM v2 — GLASS-GHOST.
 *
 * User contract (verbatim): "button empty background or really
 * light with, glaccy button without background and small color
 * over". So NO filled slabs. Every button is:
 *   - transparent or barely-tinted background
 *   - backdrop-filter blur for real glass depth
 *   - a subtle color hint (ring border + text) that says its role
 *   - Apple-style hover (lift + wash-intensifies)
 *
 * Three roles (all glass, differentiated by tint):
 *   PRIMARY   → purple ring + purple text + faint purple wash
 *   SEMANTIC  → success (green) / danger (red) — same shape
 *   NEUTRAL   → gray ring + ink text (the default .btn)
 *
 * Covers EVERY variant across Argon + custom modern pages:
 *   btn-primary, btn-info, btn-secondary, btn-default,
 *   btn-neutral, btn-white, btn-light, btn-dark,
 *   btn-success, btn-danger, btn-warning,
 *   btn-outline-*, bg-gradient-*.
 * ============================================================ */
.owner-workspace .btn,
.owner-workspace button.btn,
.owner-workspace input[type="button"].btn,
.owner-workspace input[type="submit"] {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-weight: 500 !important;
    border-radius: var(--ow-radius) !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    background-image: none !important;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    will-change: transform;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition:
        background var(--ow-dur-fast) var(--ow-ease),
        border-color var(--ow-dur-fast) var(--ow-ease),
        color var(--ow-dur-fast) var(--ow-ease),
        transform var(--ow-dur) var(--ow-ease-hover),
        box-shadow var(--ow-dur) var(--ow-ease-hover) !important;
}
.owner-workspace .btn:active,
.owner-workspace button.btn:active,
.owner-workspace input[type="submit"]:active {
    transform: var(--ow-active-press) !important;
}

/* NEUTRAL (the default) — every unclaimed variant lands here.
   Glass, hairline ring, ink text. */
.owner-workspace .btn,
.owner-workspace .btn-default,
.owner-workspace .btn-secondary,
.owner-workspace .btn-neutral,
.owner-workspace .btn-white,
.owner-workspace .btn-light,
.owner-workspace .btn-outline-secondary,
.owner-workspace .btn-outline-dark {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 1px 2px rgba(15,23,42,.04) !important;
}
.owner-workspace .btn:hover,
.owner-workspace .btn-default:hover,
.owner-workspace .btn-secondary:hover,
.owner-workspace .btn-neutral:hover,
.owner-workspace .btn-white:hover,
.owner-workspace .btn-light:hover,
.owner-workspace .btn-outline-secondary:hover,
.owner-workspace .btn-outline-dark:hover {
    background: rgba(255,255,255,.85) !important;
    border-color: rgba(15,23,42,.18) !important;
    color: var(--ow-ink) !important;
    transform: var(--ow-hover-lift);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 6px 16px -6px rgba(15,23,42,.14) !important;
}

/* PRIMARY — glass purple. All "primary" variants collapse here.
   Note: btn-outline-primary is ALSO primary (used to signal action
   too), so it uses the same look — no "outline" special case. */
.owner-workspace .btn-primary,
.owner-workspace .btn-info,
.owner-workspace .btn-outline-primary,
.owner-workspace .btn-outline-info,
.owner-workspace .bg-gradient-primary,
.owner-workspace .bg-gradient-info,
.owner-workspace button.bg-gradient-primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent) !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-accent-ink, var(--ow-brand-ink)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 1px 2px color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
}
.owner-workspace .btn-primary:hover,
.owner-workspace .btn-info:hover,
.owner-workspace .btn-outline-primary:hover,
.owner-workspace .btn-outline-info:hover,
.owner-workspace .bg-gradient-primary:hover,
.owner-workspace .bg-gradient-info:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    color: var(--ow-accent-ink, var(--ow-brand-ink)) !important;
    transform: var(--ow-hover-lift);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 8px 20px -6px color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent) !important;
}

/* SEMANTIC — success (green glass). Same shape, green tint. */
.owner-workspace .btn-success {
    background: rgba(16,185,129,.10) !important;
    border: 1px solid rgba(16,185,129,.35) !important;
    color: #047857 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(16,185,129,.10) !important;
}
.owner-workspace .btn-success:hover {
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.55) !important;
    color: #065f46 !important;
    transform: var(--ow-hover-lift);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -6px rgba(16,185,129,.30) !important;
}

/* SEMANTIC — danger (red glass). Same shape, red tint. */
.owner-workspace .btn-danger {
    background: rgba(220,38,38,.09) !important;
    border: 1px solid rgba(220,38,38,.35) !important;
    color: #b91c1c !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(220,38,38,.10) !important;
}
.owner-workspace .btn-danger:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: rgba(220,38,38,.55) !important;
    color: #991b1b !important;
    transform: var(--ow-hover-lift);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -6px rgba(220,38,38,.30) !important;
}

/* WARNING — amber glass */
.owner-workspace .btn-warning {
    background: rgba(245,158,11,.10) !important;
    border: 1px solid rgba(245,158,11,.35) !important;
    color: #92400e !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(245,158,11,.10) !important;
}
.owner-workspace .btn-warning:hover {
    background: rgba(245,158,11,.18) !important;
    border-color: rgba(245,158,11,.55) !important;
    color: #78350f !important;
    transform: var(--ow-hover-lift);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -6px rgba(245,158,11,.30) !important;
}

/* DARK — no more filled navy slabs. Folds to neutral glass. */
.owner-workspace .btn-dark,
.owner-workspace .btn.bg-dark,
.owner-workspace .btn.bg-gradient-dark {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.14) !important;
    color: var(--ow-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(15,23,42,.04) !important;
}
.owner-workspace .btn-dark:hover,
.owner-workspace .btn.bg-dark:hover,
.owner-workspace .btn.bg-gradient-dark:hover {
    background: rgba(255,255,255,.85) !important;
    border-color: rgba(15,23,42,.22) !important;
    transform: var(--ow-hover-lift);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -6px rgba(15,23,42,.14) !important;
}

/* Sizes */
.owner-workspace .btn-sm {
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    border-radius: var(--ow-radius-sm) !important;
    min-height: 32px !important;
}
.owner-workspace .btn-lg {
    padding: 12px 24px !important;
    font-size: 15px !important;
    border-radius: var(--ow-radius-lg) !important;
    min-height: 46px !important;
}
.owner-workspace .btn-icon-only,
.owner-workspace .btn-round { border-radius: var(--ow-radius-pill) !important; }

/* .btn-icon — Argon icon-only button. Was invisible after glass rebuild
   because the base padding/size stretched the button and the icon was
   the only child. Fix: proper 38×38 square, centered icon, visible ink. */
.owner-workspace .btn.btn-icon,
.owner-workspace .btn-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.owner-workspace .btn.btn-icon.btn-sm,
.owner-workspace .btn-icon.btn-sm {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
}
/* .btn-inner--icon / .btn-inner--text — Argon's inner wrappers. Ensure
   the icon renders in the button's current color, and center-align. */
.owner-workspace .btn-inner--icon,
.owner-workspace .btn-inner--text {
    color: inherit !important;
    display: inline-flex;
    align-items: center;
}
.owner-workspace .btn-inner--icon i,
.owner-workspace .btn-inner--icon svg {
    color: inherit !important;
    font-size: 14px;
    line-height: 1;
}
/* Argon Nucleo icons (.ni) — inherit button color */
.owner-workspace .btn i.ni,
.owner-workspace .btn i[class^="ni-"] {
    color: inherit !important;
    font-size: 14px;
}

/* Link — text-only, ambient (kept plain, no glass wash) */
.owner-workspace .btn-link {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ow-brand-ink) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.owner-workspace .btn-link:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent) !important;
    color: var(--ow-brand-hover) !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Disabled — dim glass, no press feedback */
.owner-workspace .btn:disabled,
.owner-workspace .btn.disabled {
    background: rgba(15,23,42,.03) !important;
    color: var(--ow-faint) !important;
    border-color: rgba(15,23,42,.06) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
    backdrop-filter: none !important;
}

/* ============================================================
 * CUSTOM MODERN PAGE PATTERNS + BEM buttons.
 *
 * Everything button-shaped app-wide gets the glass-ghost treatment:
 *   - Argon: .btn-primary/-secondary/... (covered above)
 *   - Utility: .btn-save/-delete/-remove/-report/-back/-clear/-file
 *   - BEM: .btn--primary/-success/-danger/-add/-back/-etc.
 *   - Custom pages: .at-tab, .mp-btn, .sf-btn, .re-btn, .pos-btn
 *   - Outline variants: btn-outline-{success,danger,warning}
 *   - Wildcards: [class*="-btn"], [class*="-tab"] catch anything
 *     with the -btn or -tab suffix pattern.
 * ============================================================ */
.owner-workspace .btn-outline-danger,
.owner-workspace .btn-outline-success,
.owner-workspace .btn-outline-warning,
.owner-workspace .btn-save,
.owner-workspace .btn-delete,
.owner-workspace .btn-remove,
.owner-workspace .btn-report,
.owner-workspace .btn-back,
.owner-workspace .btn-clear,
.owner-workspace .btn-file,
.owner-workspace .btn-ghost,
.owner-workspace [class^="btn--"],
.owner-workspace [class*=" btn--"],
.owner-workspace .at-tab,
.owner-workspace .at-btn,
.owner-workspace .mp-btn,
.owner-workspace .mp-btn-primary,
.owner-workspace .mp-tab,
.owner-workspace .sf-btn,
.owner-workspace .re-btn,
.owner-workspace .pos-btn,
.owner-workspace .pill-btn,
.owner-workspace .chip-btn,
/* `pq-` is excluded for the same reason `-table` is just below: the plaques
   pages carry a complete button system of their own (.pq-btn primary,
   .pq-btn--ghost neutral, .pq-retire__btn destructive) and this wildcard
   flattened all three to one neutral glass at specificity (0,6,0) — the
   primary action, the secondary action and the irreversible one rendered
   byte for byte identical. Those pages restate the console's glass
   vocabulary themselves, by role. `pq-` exists in no other view. */
.owner-workspace [class*="-btn"]:not([class*="btn-check"]):not(.btn-cart):not(.btn-cart-icon):not(.btn-cart-radius):not([class*="pq-"]),
/* [class*="-tab"] is a wildcard: it matched pq-tablewrap, pq-table and
   js-needs-table as readily as a real tab, painting backdrop-filter:
   blur(10px) on two overlapping ~430,000px surfaces that the compositor then
   re-blurred on every scroll — the plaques list made machines lag. It also
   made .pq-tablewrap a containing block for position:fixed, which silently
   unpinned anything fixed inside it. Tables are excluded; tabs still match. */
.owner-workspace [class*="-tab"]:not(.nav-item):not([class*="-table"]) {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink) !important;
    border-radius: var(--ow-radius) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 1px 2px rgba(15,23,42,.04) !important;
    transition:
        background var(--ow-dur-fast) var(--ow-ease),
        border-color var(--ow-dur-fast) var(--ow-ease),
        color var(--ow-dur-fast) var(--ow-ease),
        transform var(--ow-dur) var(--ow-ease-hover),
        box-shadow var(--ow-dur) var(--ow-ease-hover) !important;
}
.owner-workspace .btn-outline-danger:hover,
.owner-workspace .btn-outline-success:hover,
.owner-workspace .btn-outline-warning:hover,
.owner-workspace .btn-save:hover,
.owner-workspace .btn-delete:hover,
.owner-workspace .btn-remove:hover,
.owner-workspace .btn-report:hover,
.owner-workspace .btn-back:hover,
.owner-workspace .btn-clear:hover,
.owner-workspace .btn-file:hover,
.owner-workspace .btn-ghost:hover,
.owner-workspace [class^="btn--"]:hover,
.owner-workspace [class*=" btn--"]:hover,
.owner-workspace .at-tab:hover,
.owner-workspace .at-btn:hover,
.owner-workspace .mp-btn:hover,
.owner-workspace .mp-tab:hover,
.owner-workspace .sf-btn:hover,
.owner-workspace .re-btn:hover,
.owner-workspace .pos-btn:hover,
.owner-workspace .pill-btn:hover,
.owner-workspace .chip-btn:hover,
.owner-workspace [class*="-btn"]:not([class*="btn-check"]):not(.btn-cart):not(.btn-cart-icon):not(.btn-cart-radius):not([class*="pq-"]):hover,
.owner-workspace [class*="-tab"]:not(.nav-item):hover {
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink) !important;
    transform: var(--ow-hover-lift);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 6px 16px -6px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent) !important;
}
/* Active state on custom pills → purple glass tint (NOT dark navy slab). */
.owner-workspace .at-tab.at-tab--on,
.owner-workspace .at-tab.active,
.owner-workspace [class*="-tab"].active,
.owner-workspace [class*="-tab"][class*="--on"],
.owner-workspace [class*="-tab"][class*="--active"] {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 45%, transparent) !important;
    color: var(--ow-brand-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 2px 6px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
}

/* ============================================================
 * PORTAL-ED COMPONENTS — media picker (.mp-*) renders under
 * .mp-root as a direct child of <body>, OUTSIDE owner-workspace.
 * Rules for it can't be scoped to .owner-workspace. Gated at the
 * markup layer in app.blade.php (@auth + owner/staff/admin only),
 * so unscoped is safe — no diner sees these classes.
 * ============================================================ */
.mp-root,
.mp-modal,
.mp-drawer,
.mp-panel {
    --mp-ink: var(--ow-brand, #635bff);
    --mp-brand: var(--ow-brand, #635bff);
    --mp-brand-ink: var(--ow-brand-ink, #3b32d6);
    --mp-brand-wash: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent);
    --mp-line: #e6e9eb;
    --mp-surface: #ffffff;
    --mp-text: #0f172a;
    --mp-text-2: #6b7280;
    font-family: "DM Sans", system-ui, sans-serif;
}
/* Media-picker active tab pill — glass purple, not black slab */
.mp-tab.mp-tab--on,
.mp-modal .mp-tab.mp-tab--on {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: #3b32d6 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
}
/* Media-picker primary button "Choisir un fichier" — glass purple */
.mp-btn.mp-btn-primary,
.mp-modal .mp-btn.mp-btn-primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: #3b32d6 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-radius: 12px !important;
}
.mp-btn.mp-btn-primary:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    color: #3b32d6 !important;
}
/* Media-picker generic button (upload/cancel/etc) — hairline neutral glass */
.mp-btn:not(.mp-btn-primary) {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: #0f172a !important;
    border-radius: 12px !important;
}
.mp-btn:not(.mp-btn-primary):hover {
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: #3b32d6 !important;
}
/* mp-close button (X on modal) → neutral glass */
.mp-close {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: #6b7280 !important;
    border-radius: 8px !important;
}
.mp-close:hover {
    background: rgba(255,255,255,.85) !important;
    color: #dc2626 !important;
    border-color: rgba(220,38,38,.35) !important;
}

/* ============================================================
 * BESPOKE OWNER-PAGE CLASSES (subagent sweep findings).
 * These use per-page BEM prefixes that don't match .btn or
 * [class*="-btn"] — must be listed explicitly.
 * ============================================================ */
/* Staff dashboard clock-in/out button */
.owner-workspace .sd__clock-btn,
.sd__clock-btn {
    font-family: "DM Sans", system-ui, sans-serif;
    background: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px color-mix(in srgb, var(--ow-brand, #635bff) 12%, transparent);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.sd__clock-btn:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -6px color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent);
}

/* Plan card CTA button */
.owner-workspace .pp-card__cta-btn,
.pp-card__cta-btn {
    font-family: "DM Sans", system-ui, sans-serif;
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.pp-card__cta-btn:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent);
    text-decoration: none !important;
}

/* Plans modules bulk-action toolbar buttons */
.owner-workspace .plm-btn-sm,
.plm-btn-sm {
    font-family: "DM Sans", system-ui, sans-serif;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.plm-btn-sm:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
}

/* Atom-kit .ow-btn family — used across admin/onboarding + wizard
   pages. These live in owner-atom-kit.css but need the glass-ghost
   contract applied here so they visually match the rest of the app. */
.ow-btn,
.owner-workspace .ow-btn {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(15,23,42,.04);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
    text-decoration: none !important;
    cursor: pointer;
}
.ow-btn:hover {
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent);
}
.ow-btn--primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.ow-btn--primary:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.ow-btn--success {
    background: rgba(16,185,129,.10) !important;
    border-color: rgba(16,185,129,.35) !important;
    color: #047857 !important;
}
.ow-btn--success:hover {
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.55) !important;
}
.ow-btn--danger {
    background: rgba(220,38,38,.09) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #b91c1c !important;
}
.ow-btn--danger:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: rgba(220,38,38,.55) !important;
}

/* Legacy Argon .btn.badge.badge-pill anchor (order-row ID pills) —
   sized/paddinged already, but ensure text color inherits. */
.owner-workspace a.btn.badge.badge-success.badge-pill,
.owner-workspace a.btn.badge.badge-pill {
    padding: 5px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
}

/* Bootstrap 4 .close (modal + alert dismiss) — glass */
.owner-workspace .close,
.owner-workspace button.close {
    background: transparent !important;
    border: 0 !important;
    color: var(--ow-muted, #6b7280) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
    opacity: 0.75;
    border-radius: 8px !important;
    transition: all 140ms cubic-bezier(0.4,0,0.2,1);
}
.owner-workspace .close:hover,
.owner-workspace button.close:hover {
    background: rgba(220,38,38,.10) !important;
    color: #dc2626 !important;
    opacity: 1;
}

/* Third-party installer / translation modules use a bare .button class.
   These pages are dev-only (setup/updater/translation admin) and OWNER
   auth-only, so unscoped override is safe. */
body:has(.owner-workspace) .button,
body.installer .button,
body.translation-manager .button {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
body:has(.owner-workspace) .button:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    transform: translateY(-1px);
}
body:has(.owner-workspace) .button-blue {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 45%, transparent) !important;
}
body:has(.owner-workspace) .button--light {
    background: rgba(255,255,255,.7) !important;
    border-color: rgba(15,23,42,.10) !important;
    color: var(--ow-ink) !important;
}

/* Cookie-consent overlay button (renders at <body> root) */
.cookie-consent__agree,
.js-cookie-consent-agree {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
}

/* ============================================================
 * ORDER-ACTION BUTTONS — the primary leftover surface. Every
 * order card (owner+staff) has these; they were filled dark
 * slate (#1E293B) and dark green (#065F46). Now: glass ghost.
 * ============================================================ */
.owner-workspace .order-action,
.order-action {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    background-image: none !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(15,23,42,.04) !important;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.owner-workspace .order-action:hover,
.order-action:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent) !important;
}
/* advance / accept = primary purple glass tint */
.owner-workspace .order-action--advance,
.owner-workspace .order-action--accept,
.order-action--advance,
.order-action--accept {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .order-action--advance:hover,
.owner-workspace .order-action--accept:hover,
.order-action--advance:hover,
.order-action--accept:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
}
/* reject = red glass */
.owner-workspace .order-action--reject,
.owner-workspace .order-action--cancel,
.order-action--reject,
.order-action--cancel {
    background: rgba(220,38,38,.09) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #b91c1c !important;
}
.owner-workspace .order-action--reject:hover,
.owner-workspace .order-action--cancel:hover,
.order-action--reject:hover,
.order-action--cancel:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: rgba(220,38,38,.55) !important;
    color: #991b1b !important;
}
/* neutral = default hairline glass (inherits base) */

/* ============================================================
 * BESPOKE __btn / __save / __cancel / __close / __remove classes.
 * BEM element pattern (double-underscore) — my [class*="-btn"]
 * wildcard doesn't catch these because they use "__btn" not "-btn".
 * Explicit coverage + broader wildcard for the __btn suffix.
 * ============================================================ */

/* Broader wildcard: catch __btn AND __toggle-style modifiers */
.owner-workspace [class*="__btn"]:not([class*="pq-"]),
.owner-workspace [class*="__save"]:not([class*="pq-"]),
.owner-workspace [class*="__cancel"]:not([class*="pq-"]),
.owner-workspace [class*="__remove"]:not([class*="pq-"]) {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: var(--ow-radius, 12px) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1) !important;
    cursor: pointer;
}
.owner-workspace [class*="__btn"]:not([class*="pq-"]):hover,
.owner-workspace [class*="__save"]:not([class*="pq-"]):hover,
.owner-workspace [class*="__cancel"]:not([class*="pq-"]):hover,
.owner-workspace [class*="__remove"]:not([class*="pq-"]):hover {
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent) !important;
}

/* __save modifiers → primary purple tint */
.owner-workspace .variant-actions__save,
.owner-workspace [class$="__save"] {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .variant-actions__save:hover,
.owner-workspace [class$="__save"]:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
}
/* __remove / __delete modifiers → red glass */
.owner-workspace [class$="__remove"],
.owner-workspace [class$="__delete"] {
    background: rgba(220,38,38,.09) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #b91c1c !important;
}
.owner-workspace [class$="__remove"]:hover,
.owner-workspace [class$="__delete"]:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: rgba(220,38,38,.55) !important;
}
/* __close modifiers → neutral X button */
.owner-workspace [class$="__close"] {
    background: transparent !important;
    border: 0 !important;
    color: var(--ow-muted, #6b7280) !important;
    padding: 6px 10px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    backdrop-filter: none !important;
}
.owner-workspace [class$="__close"]:hover {
    background: rgba(220,38,38,.10) !important;
    color: #dc2626 !important;
}

/* ============================================================
 * BANNER PADDING — respect Argon's original .pb-8 pt-5 pt-md-8
 * so the banner has visual weight. Custom .*-hero components
 * (share, media library) explicitly override with smaller padding
 * because THOSE pages don't use the mt--7 overlap pattern.
 * ============================================================ */
.owner-workspace .header.bg-gradient-primary,
.owner-workspace .header.bg-gradient-info,
.owner-workspace .header.bg-gradient-default,
.owner-workspace .header.bg-gradient-dark,
.owner-workspace .header.bg-info,
.owner-workspace .header.bg-primary,
.owner-workspace .header.bg-dark {
    margin-bottom: 0 !important;
}
/* Reduce the negative overlap for header + container-fluid.mt--* pattern.
   Instead of zeroing all mt--*, ALLOW a controlled -80px overlap for the
   form-shell pattern used by Argon dashboard (Settings/Profile/Pages/
   Addresses). The banner extends and the card floats up into it.
   Sh-hero + specific custom heroes get zero margin (their content sits
   below cleanly per the QR share/media library fix). */
.owner-workspace .sh-hero + .container-fluid,
.owner-workspace [class*="-hero"]:not(.aa-header) + .container-fluid,
.owner-workspace .sh-hero + .container-fluid .mt--7,
.owner-workspace .sh-hero + .container-fluid .mt--6,
.owner-workspace .sh-hero + .container-fluid .mt--5,
.owner-workspace .sh-hero + .container-fluid .mt--4,
.owner-workspace [class*="-hero"]:not(.aa-header) + .container-fluid .mt--7,
.owner-workspace [class*="-hero"]:not(.aa-header) + .container-fluid .mt--6,
.owner-workspace [class*="-hero"]:not(.aa-header) + .container-fluid .mt--5,
.owner-workspace [class*="-hero"]:not(.aa-header) + .container-fluid .mt--4 {
    margin-top: 0 !important;
}
/* Header banner + form-shell overlap (Argon dashboard pattern) — allow
   the card to float up into the banner, but cap at -80px so it doesn't
   disappear entirely. */
.owner-workspace .header.bg-gradient-primary + .container-fluid.mt--7,
.owner-workspace .header.bg-gradient-info + .container-fluid.mt--7,
.owner-workspace .header + .container-fluid.mt--7 {
    margin-top: -80px !important;
}
.owner-workspace .header.bg-gradient-primary + .container-fluid.mt--6,
.owner-workspace .header + .container-fluid.mt--6 {
    margin-top: -60px !important;
}
.owner-workspace .header.bg-gradient-primary + .container-fluid.mt--4,
.owner-workspace .header + .container-fluid.mt--4 {
    margin-top: -30px !important;
}
/* Same fix for the .sh-hero / [class*="-hero"] pattern */
.owner-workspace .sh-hero,
.owner-workspace [class*="-hero"]:not(.card-body):not(.hero-video) {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
    margin-bottom: 24px !important;
}

/* ============================================================
 * .ax-preset (analytics preset chips) + .ax-btn — subagent flagged
 * these as still-old. Glass-ghost coverage.
 * ============================================================ */
.owner-workspace .ax-preset,
.owner-workspace .ax-btn,
.ax-preset,
.ax-btn {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1) !important;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.owner-workspace .ax-preset:hover,
.owner-workspace .ax-btn:hover,
.ax-preset:hover,
.ax-btn:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .ax-preset.is-active,
.owner-workspace .ax-preset.active,
.ax-preset.is-active {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 45%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent);
}
.owner-workspace .ax-btn--primary,
.ax-btn--primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .ax-btn--primary:hover,
.ax-btn--primary:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
}
/* .ax-preset-custom summary — glass */
.owner-workspace .ax-preset-custom summary,
.ax-preset-custom summary {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer;
    list-style: none;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.owner-workspace .ax-preset-custom summary::-webkit-details-marker,
.ax-preset-custom summary::-webkit-details-marker { display: none; }

/* ============================================================
 * QR chip / .qr-chip / any inline black-labelled chip on share pages
 * ============================================================ */
.owner-workspace .qr-chip,
.owner-workspace [class*="qr-chip"],
.owner-workspace .qr-label,
.owner-workspace .qr-num,
.qr-chip,
.qr-label,
.qr-num {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================
 * Select2 dropdowns — modern glass replacement of the ancient
 * green/blue Argon default. Applies to owner scope only.
 * ============================================================ */
.owner-workspace .select2-container--default .select2-selection--single,
.owner-workspace .select2-container--default .select2-selection--multiple {
    background: rgba(255,255,255,.85) !important;
    background-color: rgba(255,255,255,.85) !important;
    border: 1px solid var(--ow-line, #e6e9eb) !important;
    border-radius: var(--ow-radius, 12px) !important;
    min-height: 40px !important;
    padding: 4px 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.03) !important;
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    transition: border-color 160ms var(--ow-ease), box-shadow 160ms var(--ow-ease);
}
.owner-workspace .select2-container--default .select2-selection--single:hover,
.owner-workspace .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ow-brand, #635bff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
}
.owner-workspace .select2-container--default .select2-selection__rendered {
    color: var(--ow-ink, #0f172a) !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 32px !important;
    padding-left: 0 !important;
}
.owner-workspace .select2-container--default .select2-selection__placeholder {
    color: var(--ow-faint, #94a3b8) !important;
}
.owner-workspace .select2-container--default .select2-selection__arrow {
    top: 8px !important;
    right: 8px !important;
    height: 24px !important;
}
.owner-workspace .select2-container--default .select2-selection__arrow b {
    border-color: var(--ow-muted, #6b7280) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
}
/* Select2 dropdown panel (portals to body) */
.select2-container--default .select2-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.08) !important;
    overflow: hidden;
    margin-top: 4px;
    font-family: "DM Sans", system-ui, sans-serif;
}
.select2-container--default .select2-results__option {
    padding: 8px 14px !important;
    font-size: 14px !important;
    color: var(--ow-body, #425466) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    font-weight: 500;
}
/* Multi-select tags */
.owner-workspace .select2-container--default .select2-selection__choice {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 25%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
    margin-top: 4px !important;
}
.owner-workspace .select2-container--default .select2-selection__choice__remove {
    color: var(--ow-brand-ink, #3b32d6) !important;
    margin-right: 4px !important;
}

/* .reorder-btn hover fix — do NOT lift (this button sits inside a
   tight table row; translateY makes it escape the row visually).
   Change to color-only hover. */
.owner-workspace .reorder-btn:hover,
.reorder-btn:hover {
    transform: none !important;
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* ============================================================
 * Wave1-E module hex + custom class overrides.
 * Blade files ship inline <style> blocks hardcoding #635bff /
 * #32325d / #f4f5f7 that aren't covered by the [style="…"] nuke.
 * Override the specific class names at the CSS level.
 * ============================================================ */

/* .pd-* (apps/show) — was dark navy #32325d filled */
.owner-workspace .pd-btn-save,
.pd-btn-save {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-radius: var(--ow-radius, 12px) !important;
    padding: 9px 20px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-weight: 500;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .pd-btn-save:hover,
.pd-btn-save:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    transform: translateY(-1px);
}

/* .pn-* (PrintNode) */
.owner-workspace .pn-step,
.pn-step {
    background: var(--ow-brand, #635bff) !important;
    background-color: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}
.owner-workspace .pn-mode--active .pn-mode__body,
.pn-mode--active .pn-mode__body {
    background: rgba(201,190,255,.20) !important;
    border-color: var(--ow-brand, #635bff) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
/* PrintNode settings dark slate slab header (line 8) */
.owner-workspace .card-header[style*="linear-gradient(135deg, #0f172a" i],
.owner-workspace .card-header[style*="0f172a" i],
.card-header[style*="0f172a" i],
[style*="linear-gradient(135deg, #0f172a" i],
[style*="linear-gradient(135deg,#0f172a" i] {
    background: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
}

/* .plm-* (Plans/modules) — was --plm-primary: #32325d */
.owner-workspace .plan-modules,
.owner-workspace [class^="plm-"],
.plan-modules,
.plm-btn,
.plm-header,
.plm-card {
    --plm-primary: var(--ow-brand, #635bff);
    --plm-primary-light: rgba(201,190,255,.20);
    --plm-accent: var(--ow-brand-ink, #3b32d6);
}
/* .plm-group-count.has-selected — was gray, should be pastel purple */
.owner-workspace .plm-group-count.has-selected,
.plm-group-count.has-selected {
    background: rgba(201,190,255,.20) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* .pp-* (Plans/current) — pin token to #635bff */
.owner-workspace .pp,
.owner-workspace [class^="pp-"],
.pp,
.pp-card,
.pp-hero,
.pp-cta {
    --pp-primary: var(--ow-brand, #635bff);
    --pp-primary-ink: var(--ow-brand-ink, #3b32d6);
    --pp-primary-light: rgba(201,190,255,.20);
    --pp-primary-wash: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent);
}
/* Non-VIP .pp-card__cta-btn — glass-ghost (VIP is gold, kept above) */
.owner-workspace .pp-card:not(.pp-card--vip) .pp-card__cta-btn,
.pp-card:not(.pp-card--vip) .pp-card__cta-btn {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .pp-card:not(.pp-card--vip) .pp-card__cta-btn:hover,
.pp-card:not(.pp-card--vip) .pp-card__cta-btn:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
}

/* Themeswitcher menu-design pastel bg (off-brand cream currently) */
.owner-workspace .themeswitcher-hero,
.owner-workspace [class^="tsw-"],
[class^="tsw-"] {
    background: rgba(201,190,255,.15) !important;
}

/* Allergens hex #635bff hardcoded across manage/owner blade — CSS bumps */
.owner-workspace .allergen-icon-option,
.allergen-icon-option {
    border-color: rgba(15,23,42,.10) !important;
}
.owner-workspace .allergen-icon-option.is-selected,
.owner-workspace .allergen-icon-option[data-selected="true"],
.allergen-icon-option.is-selected {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    border-color: var(--ow-brand, #635bff) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* Universal namespaced token — module CSS can reference these */
:root,
.owner-workspace {
    --aaa-purple: #635bff;
    --aaa-purple-ink: #3b32d6;
    --aaa-purple-wash: rgba(201,190,255,.20);
    --aaa-purple-hover: #4c46cc;
}

/* Global inline-style nuke expansion — catch dark hex families */
.owner-workspace [style*="#32325d" i],
.owner-workspace [style*="#111827" i],
.owner-workspace [style*="#0a2540" i],
.owner-workspace [style*="#1a1a1a" i] {
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
}

/* ============================================================
 * Wave1-A findings — custom class dark-slab replacements
 *
 * Blade files ship inline <style> blocks hardcoding dark
 * backgrounds. These rules override the class name (higher
 * specificity than a scoped inline block? Both are same origin,
 * but !important + repetition at end of file wins the cascade).
 * ============================================================ */

/* ------------------------------------------------------------------
 * The .os__* rules below are the diner's order-success page, and every
 * one is scoped to .owner-workspace on purpose (#461).
 *
 * They used to be listed twice, scoped and unscoped. The unscoped twin
 * matched everywhere and carried !important, so it repainted a page no
 * owner is looking at: the diner got the console's purple where the
 * page's own CSS sets #00b87c, and a lavender strip whose white text
 * barely read against it.
 *
 * orders/success.blade.php extends layouts.app, which is why this
 * stylesheet reaches a diner-facing page at all. Until that changes,
 * nothing here may be left unscoped — console themes never apply to the
 * diner storefront.
 * ------------------------------------------------------------------ */

/* The .os__* rules that used to live here are gone.
 *
 * Scoping them to .owner-workspace (#461) was half the answer. The other
 * half is that layouts.app added .owner-workspace to EVERY page when an
 * owner was signed in — so an owner placing a test order still got the
 * console skin on the diner's confirmation page: a lavender strip where
 * the page sets amber #b45309, with text that could not be read against
 * it, and a purple primary button where the page sets black.
 *
 * layouts.app now decides that scope by which page it is rather than by
 * who is looking, and order.success is on its client-facing list. These
 * rules could no longer match anything, and a dead rule that claims to
 * style a page is worse than no rule at all.
 *
 * tests/Feature/Orders/OrderSuccessStatusTest still fails the build on
 * any unscoped .os* selector added here, so the original guard stands.
 */

/* items availability section .btn-save — was #0a2540 dark navy */
.owner-workspace .availability-section .availability-actions .btn-save,
.availability-section .availability-actions .btn-save {
    background: var(--ow-brand, #635bff) !important;
    background-color: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    border: 1px solid var(--ow-brand, #635bff) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .availability-section .availability-actions .btn-save:hover,
.availability-section .availability-actions .btn-save:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
    transform: translateY(-1px);
}

/* module-categories .mc-btn--primary — was #32325d dark navy */
.owner-workspace .mc-btn--primary,
.mc-btn--primary {
    background: var(--ow-brand, #635bff) !important;
    background-color: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    border: 1px solid var(--ow-brand, #635bff) !important;
    border-radius: 10px !important;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .mc-btn--primary:hover,
.mc-btn--primary:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
    border-color: var(--ow-brand-hover, #4c46cc) !important;
    transform: translateY(-1px);
}
.owner-workspace .mc-input:focus,
.mc-input:focus {
    border-color: var(--ow-brand, #635bff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
}

/* items pages custom classes — .top-btn--primary, .cat-btn--add, .btn-save,
   .add-item-row (all use inline #635bff — retint via CSS override) */
.owner-workspace .top-btn--primary,
.owner-workspace .cat-btn--add,
.top-btn--primary,
.cat-btn--add {
    background: var(--ow-brand, #635bff) !important;
    background-color: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    border: 1px solid var(--ow-brand, #635bff) !important;
    border-radius: 10px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .top-btn--primary:hover,
.owner-workspace .cat-btn--add:hover,
.top-btn--primary:hover,
.cat-btn--add:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
    transform: translateY(-1px);
}
.owner-workspace .add-item-row:hover,
.add-item-row:hover {
    background: rgba(201,190,255,.20) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* Generic per-page .btn-save (item edit/video/variants) — force purple */
.owner-workspace .edit-page .btn-save,
.owner-workspace .video-page .btn-save,
.owner-workspace .variants-page .btn-save,
.owner-workspace .options-page .btn-save {
    background: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    border: 1px solid var(--ow-brand, #635bff) !important;
    border-radius: 10px !important;
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .edit-page .btn-save:hover,
.owner-workspace .video-page .btn-save:hover,
.owner-workspace .variants-page .btn-save:hover,
.owner-workspace .options-page .btn-save:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
    transform: translateY(-1px);
}
/* .variants-btn (items/variants/index + content) */
.owner-workspace .variants-btn,
.variants-btn {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 12.5px !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .variants-btn:hover,
.variants-btn:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .variants-btn--danger,
.variants-btn--danger {
    color: #b91c1c !important;
    border-color: rgba(220,38,38,.25) !important;
}
.owner-workspace .variants-btn--danger:hover,
.variants-btn--danger:hover {
    background: rgba(220,38,38,.10) !important;
    border-color: rgba(220,38,38,.55) !important;
    color: #991b1b !important;
}
/* .variant-actions__save, .options-btn--primary */
.owner-workspace .options-btn--primary,
.options-btn--primary {
    background: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    border-color: var(--ow-brand, #635bff) !important;
}
.owner-workspace .options-btn--primary:hover,
.options-btn--primary:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
}

/* Guest orders (.go__*) — pastel-align the palette */
.owner-workspace .go__whatsapp,
.go__whatsapp {
    background: rgba(37,211,102,.14) !important;
    border: 1px solid rgba(37,211,102,.35) !important;
    color: #1a8b47 !important;
    border-radius: var(--ow-radius, 12px) !important;
    padding: 10px 20px !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.owner-workspace .go__whatsapp:hover,
.go__whatsapp:hover {
    background: rgba(37,211,102,.22) !important;
    transform: translateY(-1px);
}
/* Guest-order status badges — retint the pending badge to purple family */
.owner-workspace .go__badge--pending,
.go__badge--pending {
    background: rgba(201,190,255,.30) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
}

/* orderdisplay / orderdisplay_local: badge-success as ID chip — swap to
   purple pastel via the existing .table td .badge.badge-success rule
   already flipped to purple ink. Add: order-id-chip class explicit. */
.owner-workspace .order-id-chip,
.order-id-chip {
    background: rgba(201,190,255,.35) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-family: var(--ow-mono, monospace) !important;
    font-size: 12px !important;
}

/* Order-detail "utensils requested" callout — was inline green #f0fdf4 */
.owner-workspace .order-detail__utensils,
.order-detail__utensils {
    background: rgba(201,190,255,.20) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 28%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
}

/* ============================================================
 * Wave1-D — Staff dashboard + analytics + Staffplanner
 * Custom-class token overrides. All these blades ship inline
 * <style> using --sd-primary/--sa-primary = #32325d (Argon indigo)
 * and #111827/#635bff hardcoded fills. Bump to Purple contract.
 * ============================================================ */

/* Staff dashboard */
.owner-workspace .sd,
.owner-workspace [class^="sd__"],
.owner-workspace .staff-dashboard {
    --sd-primary: var(--ow-brand, #635bff);
    --sd-primary-ink: var(--ow-brand-ink, #3b32d6);
    --sd-primary-wash: rgba(201,190,255,.20);
    --sd-ink: #0f172a;
}
.owner-workspace .sd__qa-item:hover,
.sd__qa-item:hover {
    background: rgba(201,190,255,.35) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent) !important;
    transform: translateY(-1px);
}

/* Staff analytics */
.owner-workspace .sa,
.owner-workspace [class^="sa__"],
.owner-workspace .staff-analytics {
    --sa-primary: var(--ow-brand, #635bff);
    --sa-primary-ink: var(--ow-brand-ink, #3b32d6);
    --sa-primary-wash: rgba(201,190,255,.20);
}
.owner-workspace .sa__stat-icon--today,
.sa__stat-icon--today {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-radius: var(--ow-radius, 12px) !important;
}

/* Staffplanner planner + hours + times + templates + staff */
.owner-workspace [class^="planner-"],
.owner-workspace [class^="hours-"],
.owner-workspace [class^="times-"],
.owner-workspace [class^="templates-"] {
    --sp-primary: var(--ow-brand, #635bff);
    --sp-primary-ink: var(--ow-brand-ink, #3b32d6);
    --sp-primary-wash: rgba(201,190,255,.20);
}
.owner-workspace .planner-cell:hover,
.owner-workspace .hours-table tbody tr:hover,
.owner-workspace .times-table tbody tr:hover,
.planner-cell:hover,
.hours-table tbody tr:hover,
.times-table tbody tr:hover {
    background: rgba(201,190,255,.28) !important;
}
/* Any nav / save button in staffplanner that inverts to #111827 on hover */
.owner-workspace .hours-nav-btn:hover,
.owner-workspace .times-nav-btn:hover,
.owner-workspace .planner-nav-btn:hover,
.hours-nav-btn:hover,
.times-nav-btn:hover,
.planner-nav-btn:hover {
    background: rgba(201,190,255,.35) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent) !important;
}
.owner-workspace .btn-save-timecard,
.btn-save-timecard {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-radius: var(--ow-radius, 12px) !important;
    padding: 9px 20px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
}
.owner-workspace .btn-save-timecard:hover,
.btn-save-timecard:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    transform: translateY(-1px);
}

/* Argon .mask.bg-gradient-default — used on users/edit/create + register
   partials as a dark overlay on top of the .header. Kill it so the
   header's own purple gradient shines through. */
.owner-workspace .mask.bg-gradient-default,
.owner-workspace .mask.bg-gradient-dark,
.owner-workspace .mask.bg-gradient-info,
.owner-workspace .mask.bg-gradient-primary,
.owner-workspace .mask.bg-gradient-secondary,
.owner-workspace .header .mask,
.owner-workspace .card.bg-secondary {
    display: none !important;
    background: transparent !important;
}
/* .card.bg-secondary was Argon's grey wrapper on user/edit + create,
   settings/index, profile/edit, pages/create+edit. Reset to a real
   card surface — was rendering as a phantom card (bg matched body). */
.owner-workspace .card.bg-secondary {
    display: block !important;
    background: var(--ow-surface, #fff) !important;
    border: 1px solid var(--ow-line, #e6e9eb) !important;
    border-radius: var(--ow-radius-lg, 16px) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
}
.owner-workspace .card.bg-secondary .card-header.bg-white {
    background: transparent !important;
    border-bottom: 1px solid var(--ow-line-soft, #f0f2f4) !important;
    padding: 20px 24px !important;
}
.owner-workspace .card.bg-secondary .card-body {
    padding: 22px 24px !important;
}

/* ============================================================
 * Wave1-F CRITICAL — .aa-header (admin analytics) was dark
 * anthracite gradient. My [class*="-hero"] wildcard misses
 * -header suffix. Explicit override.
 * ============================================================ */
/* .aa-header text handled below. Banner shape now unified via
   the master .header rule above — no per-page radius or padding
   overrides here so admin analytics matches the rest of the app. */
.owner-workspace .aa-header h1,
.owner-workspace .aa-header h2,
.owner-workspace .aa-header .aa-title,
.owner-workspace .aa-header .aa-eyebrow,
.aa-header h1,
.aa-header h2,
.aa-header .aa-title,
.aa-header .aa-eyebrow {
    color: #ffffff !important;
}
.owner-workspace .aa-header p,
.aa-header p { color: rgba(255,255,255,.85) !important; }
/* .aa-stat / .aa-card — add glass */
.owner-workspace .aa-stat,
.owner-workspace .aa-card,
.aa-stat,
.aa-card {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-radius: var(--ow-radius-lg, 16px) !important;
}
.owner-workspace .aa-stat__value,
.aa-stat__value {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--ow-ink, #0f172a) !important;
    line-height: 1.05;
}
/* .aa-stat layout — shared between /home and /admin/analytics.
   Padding, flex, and sub-element typography lifted out of the
   analytics page's inline <style> so /home's KPIs render identically. */
.owner-workspace .aa-stat,
.aa-stat {
    padding: 24px 26px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px;
    min-height: 132px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.owner-workspace .aa-stat:hover,
.aa-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.owner-workspace .aa-stat__content,
.aa-stat__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.owner-workspace .aa-stat__label,
.aa-stat__label {
    display: block;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ow-muted, #8898aa);
    margin-bottom: 10px;
}
.owner-workspace .aa-stat__sub,
.aa-stat__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 12px;
    color: var(--ow-muted, #8898aa);
    margin-top: 12px;
    flex-wrap: wrap;
}
.owner-workspace .aa-stat__sub .text-success,
.aa-stat__sub .text-success {
    color: #0cce6b !important;
    font-weight: 600;
}
.owner-workspace .aa-stat__dot,
.aa-stat__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}
.owner-workspace .aa-stat__icon,
.aa-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0;
}
.owner-workspace .aa-stat__icon--purple,
.aa-stat__icon--purple { background: linear-gradient(135deg, #7c74ff, #635bff); }
.owner-workspace .aa-stat__icon--green,
.aa-stat__icon--green  { background: linear-gradient(135deg, #10b981, #059669); }
.owner-workspace .aa-stat__icon--blue,
.aa-stat__icon--blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.owner-workspace .aa-stat__icon--violet,
.aa-stat__icon--violet { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.owner-workspace .aa-stat__icon--amber,
.aa-stat__icon--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.owner-workspace .aa-stat__icon--slate,
.aa-stat__icon--slate  { background: linear-gradient(135deg, #475569, #1e293b); }

/* .aa-stats-row — row margin like the analytics page uses */
.owner-workspace .aa-stats-row,
.aa-stats-row { margin-bottom: 24px; }
.owner-workspace .aa-stats-row > [class*="col-"],
.aa-stats-row > [class*="col-"] { margin-bottom: 16px; }

/* .aa-card__badge, .aa-pill — align hex */
.owner-workspace .aa-card__badge,
.owner-workspace .aa-pill,
.aa-card__badge,
.aa-pill {
    background: rgba(201,190,255,.35) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
/* .aa-chart bars — single purple family */
.owner-workspace .aa-chart__bar,
.aa-chart__bar {
    background: linear-gradient(180deg, #7c74ff 0%, #635bff 100%) !important;
}

/* .aa-card--table (admin analytics restaurant performance table) */
.owner-workspace .aa-card--table,
.aa-card--table {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
    overflow: hidden;
}
.owner-workspace .aa-card--table .aa-card__head,
.aa-card--table .aa-card__head {
    padding: 20px 24px 12px !important;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: transparent !important;
}
.owner-workspace .aa-card--table .aa-card__title {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ow-ink, #0f172a) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 4px !important;
}
.owner-workspace .aa-card--table .aa-card__subtitle {
    font-size: 13px;
    color: var(--ow-muted, #6b7280) !important;
}
.owner-workspace .aa-table {
    width: 100%;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 13.5px !important;
    color: var(--ow-body, #425466) !important;
    border-collapse: collapse;
}
.owner-workspace .aa-table thead th {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--ow-muted, #6b7280) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 16px !important;
    background: rgba(15,23,42,.02) !important;
    border-bottom: 1px solid var(--ow-line-soft, #f0f2f4) !important;
    text-align: left;
}
.owner-workspace .aa-table thead th.text-center { text-align: center !important; }
.owner-workspace .aa-table thead th.text-right { text-align: right !important; }
.owner-workspace .aa-table tbody td {
    padding: 12px 16px !important;
    border-top: 1px solid var(--ow-line-soft, #f0f2f4) !important;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.owner-workspace .aa-table tbody tr:hover {
    background: rgba(201,190,255,.14) !important;
}
.owner-workspace .aa-table__link {
    color: var(--ow-ink, #0f172a) !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 140ms;
}
.owner-workspace .aa-table__link:hover {
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .aa-table__muted { color: var(--ow-muted, #6b7280) !important; }
.owner-workspace .aa-table__bold { font-weight: 600 !important; color: var(--ow-ink, #0f172a) !important; }
.owner-workspace .aa-table__green { color: #08a37a !important; font-weight: 600; }
/* Pills in the table */
.owner-workspace .aa-table .aa-pill,
.aa-table .aa-pill {
    display: inline-block;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    background: rgba(201,190,255,.30) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    margin-right: 4px;
    border: 0 !important;
    letter-spacing: 0;
}
.owner-workspace .aa-table .aa-pill--amber,
.aa-table .aa-pill--amber {
    background: rgba(245,158,11,.15) !important;
    color: #b45309 !important;
}
/* Small action buttons in the table */
.owner-workspace .aa-btn,
.owner-workspace .aa-btn--sm,
.owner-workspace .aa-btn--xs,
.aa-btn,
.aa-btn--sm,
.aa-btn--xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500;
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 28%, transparent) !important;
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 160ms cubic-bezier(0.4,0,0.2,1);
}
.owner-workspace .aa-btn:hover,
.aa-btn:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    transform: translateY(-1px);
}
.owner-workspace .aa-btn--xs,
.aa-btn--xs {
    padding: 3px 9px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

/* ============================================================
 * shifts + hours dark slabs — Wave1-B critical
 * ============================================================ */
.owner-workspace .shf-header,
.shf-header {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        radial-gradient(ellipse 720px 340px at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        radial-gradient(ellipse 720px 340px at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}
.owner-workspace .shf-recap__cta,
.shf-recap__cta {
    background: rgba(255,255,255,.55) !important;
    background-color: rgba(255,255,255,.55) !important;
    color: var(--ow-ink, #0f172a) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    border-radius: var(--ow-radius, 12px) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .shf-recap__cta:hover,
.shf-recap__cta:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
}

/* ============================================================
 * Wave1-C analytics — .ax-preset.is-active was black slab.
 * Force purple fill. Also swap the --ax-primary token when it
 * appears on .ax-shell/.ax-detail so charts read hex correctly.
 * ============================================================ */
.owner-workspace .ax-shell,
.owner-workspace .ax-detail,
.owner-workspace [class^="ax-"] {
    --ax-primary: var(--ow-brand, #635bff);
    --ax-primary-soft: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent);
    --ax-primary-wash: color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent);
    --ax-primary-ink: var(--ow-brand-ink, #3b32d6);
    --ax-ink: var(--ow-ink, #0f172a);
}
.owner-workspace .ax-preset.is-active,
.owner-workspace .ax-preset-custom.is-active > summary,
.owner-workspace .ax-tab.is-active,
.ax-preset.is-active,
.ax-preset-custom.is-active > summary,
.ax-tab.is-active {
    background: var(--ow-brand, #635bff) !important;
    background-color: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
}
/* .ax-header hero — add purple gradient variant */
.owner-workspace .ax-header.ax-header--hero,
.owner-workspace .ax-header {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.15) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
}
.owner-workspace .ax-header .ax-title,
.owner-workspace .ax-header .ax-eyebrow,
.owner-workspace .ax-header h1,
.owner-workspace .ax-header h2 {
    color: #ffffff !important;
}
/* .ax-kpi / .ax-stats__cell / .ax-vat-card — add glass */
.owner-workspace .ax-kpi,
.owner-workspace .ax-stats__cell,
.owner-workspace .ax-vat-card,
.ax-kpi,
.ax-stats__cell,
.ax-vat-card {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 12%, transparent) !important;
    border-radius: var(--ow-radius-lg, 16px) !important;
}
/* .ax-row__bar--danger + funnel red → pastel purple wash instead */
.owner-workspace .ax-row__bar--danger,
.ax-row__bar--danger {
    background: linear-gradient(90deg, rgba(201,190,255,.5), color-mix(in srgb, var(--ow-brand, #635bff) 50%, transparent)) !important;
}

/* ============================================================
 * users/partials/header mask.bg-gradient-default — already covered
 * by earlier .mask.bg-gradient-* display:none rule. Verified.
 *
 * landing/index bg-primary → treat as gradient (not flat)
 * ============================================================ */
.owner-workspace .header.bg-primary:not(.bg-gradient-primary) {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
}

/* Admin onboarding wizard local .ow-btn--primary was filled slab.
   Force glass ghost. */
.owner-workspace .admin-onboarding .ow-btn--primary,
.owner-workspace .ow-panel .ow-btn--primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
}

/* Finances index empty hero — add default h1 via CSS::after (workaround
   for missing title in the Blade banner) */
.owner-workspace .header.bg-gradient-primary:empty::before,
.owner-workspace .header.bg-gradient-primary:not(:has(h1, h2, h3, .container-fluid))::before {
    content: "";
    display: block;
    min-height: 60px;
}

/* ============================================================
 * Wave2-D catch-all — remaining custom hero classes with inline
 * linear-gradient(#0f172a...) or hardcoded dark backgrounds.
 * Force them to the same purple gradient.
 * ============================================================ */

/* Menu translation wizard hero */
.owner-workspace .mtw__header,
.mtw__header {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        radial-gradient(ellipse 720px 340px at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        radial-gradient(ellipse 720px 340px at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}
.owner-workspace .mtw__header h1,
.owner-workspace .mtw__header h2,
.owner-workspace .mtw__btn--primary,
.mtw__header h1,
.mtw__header h2 {
    color: #ffffff !important;
}
.owner-workspace .mtw__btn--primary,
.mtw__btn--primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* Clients module shared styles */
.owner-workspace .clients-hero,
.owner-workspace .clients-header,
.owner-workspace [class^="clients-hero"],
.clients-hero,
.clients-header {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

/* Staff module page hero (modules/Staff/Resources/views/index.blade.php) */
.owner-workspace .staff-hero,
.owner-workspace .staff-header,
.owner-workspace [class^="staff-hero"],
.staff-hero,
.staff-header {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

/* Tablereservations settings module heroes */
.owner-workspace .trs-header,
.owner-workspace .tr-header,
.owner-workspace .trs-hero,
.owner-workspace .tr-hero,
.owner-workspace [class^="trs-header"],
.owner-workspace [class^="tr-header"],
.trs-header,
.tr-header,
.trs-hero,
.tr-hero {
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
}

/* Dashboardv1 legacy card bg-gradient-default */
.owner-workspace .card.bg-gradient-default,
.owner-workspace .card.bg-gradient-dark {
    background: var(--ow-surface, #ffffff) !important;
    background-image: none !important;
    color: var(--ow-ink, #0f172a) !important;
    border: 1px solid var(--ow-line, #e6e9eb) !important;
}

/* Nuclear expansion — any inline linear-gradient with #0f172a in the
   background attribute (already covered by the general #0f172a nuke;
   this adds a more targeted rule for elements whose entire background
   is the gradient). */
.owner-workspace [style*="linear-gradient" i][style*="#0f172a" i],
.owner-workspace [style*="linear-gradient" i][style*="#0F172A" i],
.owner-workspace [style*="linear-gradient" i][style*="#111827" i],
.owner-workspace [style*="linear-gradient" i][style*="#1e293b" i] {
    background:
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
}
.owner-workspace [style*="linear-gradient" i][style*="#0f172a" i] h1,
.owner-workspace [style*="linear-gradient" i][style*="#0f172a" i] h2,
.owner-workspace [style*="linear-gradient" i][style*="#0f172a" i] h3,
.owner-workspace [style*="linear-gradient" i][style*="#111827" i] h1,
.owner-workspace [style*="linear-gradient" i][style*="#111827" i] h2 {
    color: #ffffff !important;
}

/* Argon panel navbar-dark on Tablereservations panel — kept dark
   navbar bar (bar chrome IS acceptable dark per panel-visuals.css) */
.owner-workspace .tr-panel .navbar.bg-gradient-dark,
.owner-workspace .tr-panel [class*="tr-navbar"] {
    /* Panel navbar stays dark by design — kept per user "custom modern
       pages: adapt color only" rule. No change. */
}
/* But Tablereservations settings (owner CONFIG page, not the panel) —
   .btn.bg-gradient-secondary buttons on line 21,26 of panel/navbar
   should be glass. */
.owner-workspace .btn.bg-gradient-secondary {
    background: rgba(255,255,255,.55) !important;
    background-image: none !important;
    color: var(--ow-ink, #0f172a) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
}

/* PhotoMenu + Minimal owner-facing template picker headers */
.owner-workspace [class^="templates-"] .header,
.owner-workspace [class*="template-"] .header {
    background:
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
}

/* Cards module — many dashboard/landing pages with text-white on
   dark bg. Kept as-is because Cards is a marketing/landing module
   pattern, not the owner console. Skip. */

/* ============================================================
 * Wave2-B — Counter registry (owner-facing operator screen).
 * .registry-btn--primary was linear-gradient dark navy; force purple.
 * ============================================================ */
.owner-workspace .registry-btn--primary,
.owner-workspace .registry-lock__icon,
.owner-workspace .registry-lock__set-btn,
.registry-btn--primary,
.registry-lock__icon,
.registry-lock__set-btn {
    background: var(--ow-brand, #635bff) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ow-brand, #635bff) 22%, transparent) !important;
}
.owner-workspace .registry-btn--primary:hover,
.owner-workspace .registry-lock__set-btn:hover,
.registry-btn--primary:hover,
.registry-lock__set-btn:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ow-brand, #635bff) 32%, transparent) !important;
}
.owner-workspace .registry-lock__icon,
.registry-lock__icon {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ow-brand, #635bff) 28%, transparent) !important;
}

/* Registry token override — override --reg-primary if declared on
   any registry-* rooted element. */
.owner-workspace [class^="registry-"],
[class^="registry-"] {
    --reg-primary: var(--ow-brand, #635bff);
    --reg-primary-soft: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent);
}

/* ============================================================
 * Wave2-B — Tablereservations settings + embed hero.
 * .resa-* + .emb-* classes with #635bff → #635bff token override.
 * ============================================================ */
.owner-workspace [class^="resa-"],
.owner-workspace [class^="emb-"],
[class^="resa-"],
[class^="emb-"] {
    --resa-primary: var(--ow-brand, #635bff);
    --resa-primary-hover: var(--ow-brand-hover, #4c46cc);
    --emb-primary: var(--ow-brand, #635bff);
}
.owner-workspace .resa-btn--primary,
.resa-btn--primary {
    background: var(--ow-brand, #635bff) !important;
    background-color: var(--ow-brand, #635bff) !important;
    border-color: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
}
.owner-workspace .resa-btn--primary:hover,
.resa-btn--primary:hover {
    background: var(--ow-brand-hover, #4c46cc) !important;
    transform: translateY(-1px);
}
.owner-workspace .resa-input:focus,
.owner-workspace .resa-input-suffix:focus-within,
.resa-input:focus,
.resa-input-suffix:focus-within {
    border-color: var(--ow-brand, #635bff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
}
.owner-workspace .resa-switch input:checked + .resa-switch__slider,
.resa-switch input:checked + .resa-switch__slider {
    background: var(--ow-brand, #635bff) !important;
}
.owner-workspace .resa-pill--new,
.resa-pill--new {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .resa-quicklink:hover,
.resa-quicklink:hover {
    background: rgba(201,190,255,.20) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
}
.owner-workspace .resa-quicklink__icon,
.resa-quicklink__icon {
    background: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
}

/* Tablereservations settings/embed dark headers */
.owner-workspace .resa-header,
.owner-workspace .emb-header,
.resa-header,
.emb-header {
    background: linear-gradient(180deg, #EFEBFF 0%, #FFFFFF 100%) !important;
    background-image: linear-gradient(180deg, #EFEBFF 0%, #FFFFFF 100%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-ink, #0f172a) !important;
}
.owner-workspace .resa-header h1,
.owner-workspace .resa-header h2,
.owner-workspace .resa-header p,
.owner-workspace .emb-header h1,
.owner-workspace .emb-header h2,
.owner-workspace .emb-header p,
.resa-header h1,
.resa-header h2,
.emb-header h1,
.emb-header h2 {
    color: var(--ow-ink, #0f172a) !important;
}
.owner-workspace .resa-header .preview-btn,
.owner-workspace .emb-header .preview-btn {
    background: rgba(201,190,255,.35) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 28%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* Embed snippet code block (was #0f172a) */
.owner-workspace .emb-snippet,
.owner-workspace .emb-code,
.emb-snippet,
.emb-code {
    background: #F5F3FF !important;
    background-color: #F5F3FF !important;
    color: #2A2560 !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) !important;
    font-family: var(--ow-mono, monospace) !important;
}
.owner-workspace .emb-platform__logo--code,
.emb-platform__logo--code {
    background: linear-gradient(135deg, #635bff 0%, #8B84FF 100%) !important;
}

/* ============================================================
 * Wave2-C — 2FA warning banner accent hex → brand.
 * (Side-tab 3px left-border removed per impeccable audit — the
 * toast already conveys severity via icon + tinted bg + full
 * border; the extra side-tab was AI-decoration, not signal.)
 * ============================================================ */
.owner-workspace .aa-2fa-toast__cta,
.aa-2fa-toast__cta {
    color: var(--ow-brand, #635bff) !important;
}
.owner-workspace .aa-2fa-toast__cta:hover,
.aa-2fa-toast__cta:hover {
    color: var(--ow-brand-hover, #5257e6) !important;
}
.owner-workspace .aa-2fa-toast__icon,
.aa-2fa-toast__icon {
    background: linear-gradient(135deg, rgba(201,190,255,.35), color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent)) !important;
    color: var(--ow-brand, #635bff) !important;
}

/* Argon .navbar-top#navbar-main renders as an EMPTY slot on legacy
   pages when the static_owner_menus sidebar owns the whole navigation.
   Empty <a>/<form>/<ul> children render as a blank ~60px bar at the top
   of every page. Hide it — the sidebar has all nav/brand/user menu. */
body:has(.owner-workspace) #navbar-main.navbar-top,
.owner-workspace #navbar-main.navbar-top,
.owner-workspace .navbar-top.navbar-dark {
    display: none !important;
}

/* .navbar-search-dark (found in same nav) → light search */
.owner-workspace .navbar-search-dark {
    background: rgba(255,255,255,.75) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
}
.owner-workspace .navbar-search-dark input {
    color: var(--ow-ink, #0f172a) !important;
}
.owner-workspace .navbar-search-dark input::placeholder {
    color: var(--ow-muted, #6b7280) !important;
}

/* Wave2-C: partials/infoboxes/box.blade.php default bg-yellow → purple */
.owner-workspace .icon-shape.bg-yellow,
.icon-shape.bg-yellow {
    background: linear-gradient(135deg, #635bff, #8B84FF) !important;
    background-image: linear-gradient(135deg, #635bff, #8B84FF) !important;
    color: #ffffff !important;
}

/* Wave2-C: static_owner sidebar plugin badge amber → pastel accent */
.owner-workspace .navbar-vertical .sf-plugin-badge {
    color: var(--ow-brand-ink, #3b32d6) !important;
    background: rgba(201,190,255,.35) !important;
}

/* ============================================================
 * .ow-barchart — lifted from admin_analytics `.aa-chart`.
 * User asked for the admin-analytics chart UI pattern in the
 * dashboard (not the actual chart data). Pure CSS bar chart:
 * <div> divs with inline `height: X%`, no Chart.js dependency.
 * ============================================================ */
.owner-workspace .ow-barchart {
    display: flex;
    align-items: flex-end;
    /* The gap closes up before the columns do. Twelve months at a fixed
       10px cost 110px of a phone-width card, which is what pushed the
       last month past the right edge on a 4" till. */
    gap: clamp(3px, 1.4vw, 10px);
    height: 100%;
    padding: 0 4px 20px;
}
.owner-workspace .ow-barchart__col {
    flex: 1;
    /* Flex items floor at min-content, so without this the columns
       refuse to shrink below the width of "Août"/"608" and the row
       overflows instead of fitting. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
    cursor: default;
}
.owner-workspace .ow-barchart__val {
    font-size: 11px;
    font-weight: 700;
    color: var(--ow-body, #425466);
    font-variant-numeric: tabular-nums;
}
.owner-workspace .ow-barchart__bar {
    width: 100%;
    max-width: 32px;
    border-radius: 6px 6px 4px 4px;
    min-height: 4px;
    background: linear-gradient(180deg, #635bff 0%, #a5a0ff 100%);
    /* Only opacity + box-shadow — GPU-composited, no layout thrash.
       Bar height is set via inline style once on render; no runtime
       height change to animate, so no `transition: height` here. */
    transition: opacity 200ms cubic-bezier(0.4,0,0.2,1),
                box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
    opacity: 0.90;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent);
}
.owner-workspace .ow-barchart__col:hover .ow-barchart__bar {
    opacity: 1;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent);
}
.owner-workspace .ow-barchart__lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--ow-muted, #6b7280);
    margin-top: 2px;
    letter-spacing: 0;
    text-transform: none;
}
/* Empty state overlay — reuses .orders-chart-empty for compat */
.owner-workspace .ow-barchart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(247,248,250,.75);
    border-radius: 8px;
    pointer-events: none;
    text-align: center;
    padding: 24px;
}

/* ============================================================
 * /apps plugin-search — morphing pattern lifted from the
 * reservation panel's .ow-searchmorph.
 *
 *   Default: 40×40 icon-only pill (loupe visible, input hidden).
 *   Focus-within: expands to 260px on desktop, full-width on mobile.
 *   Text mode when user is typing (input has value) stays expanded.
 *
 * Purely CSS-driven — no JS wire-up. Uses :focus-within on the
 * input-group wrapper + :placeholder-shown on the input for the
 * "empty state" collapse trick.
 * ============================================================ */
.owner-workspace .form-group:has(#pluginSearch) {
    max-width: none !important;
    flex: 0 0 auto !important;
    min-width: 40px;
    padding: 0 !important;
    margin: 0 !important;
}
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch) {
    background: rgba(201,190,255,.20) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 25%, transparent) !important;
    border-radius: 999px !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    display: flex !important;
    align-items: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    transition:
        width 260ms cubic-bezier(0.32,0.72,0,1),
        background 200ms cubic-bezier(0.32,0.72,0,1),
        border-color 200ms cubic-bezier(0.32,0.72,0,1),
        box-shadow 200ms cubic-bezier(0.32,0.72,0,1);
    flex-wrap: nowrap !important;
}
/* Expand when user focuses the input OR when the input has a value */
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch):focus-within,
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch:not(:placeholder-shown)) {
    width: 260px;
    background: rgba(255,255,255,.90) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent) !important;
    padding: 0 14px 0 0 !important;
}
/* Loupe icon container — fixed 40x40 pill on the left */
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch) .input-group-prepend,
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch) .input-group-text {
    background: transparent !important;
    border: 0 !important;
    color: var(--ow-brand, #635bff) !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch) .input-group-text i {
    color: var(--ow-brand, #635bff) !important;
    font-size: 14px !important;
    margin: 0 !important;
}
/* Input itself — transparent, no border, no default styling */
.owner-workspace #pluginSearch {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--ow-ink, #0f172a) !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 14px !important;
    height: 40px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    outline: 0 !important;
    /* Hide input when collapsed — appears when wrapper expands */
    opacity: 0;
    transition: opacity 200ms 100ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch):focus-within #pluginSearch,
.owner-workspace .input-group.input-group-alternative:has(#pluginSearch:not(:placeholder-shown)) #pluginSearch {
    opacity: 1;
}
.owner-workspace #pluginSearch::placeholder {
    color: var(--ow-faint, #94a3b8) !important;
}
/* Phone mode — takes the full row when expanded */
@media (max-width: 640px) {
    .owner-workspace .input-group.input-group-alternative:has(#pluginSearch):focus-within,
    .owner-workspace .input-group.input-group-alternative:has(#pluginSearch:not(:placeholder-shown)) {
        width: 100% !important;
        max-width: none !important;
    }
    .owner-workspace #pluginSearch {
        font-size: 16px !important;  /* prevents iOS zoom on focus */
    }
}

/* /apps mt--9 fix — Argon shipped -8rem (-128px) overlap, way more
   than every other page's mt--7 (-80px). Normalize to -80px so /apps
   has the same banner/card gap as the rest of the app. */
.owner-workspace .header + .container-fluid.mt--9,
.owner-workspace .header.bg-gradient-primary + .container-fluid.mt--9 {
    margin-top: -80px !important;
}

/* Table cell links (restaurant name, owner email on /restaurants;
   any inline link in a data table) — INK color, not brand purple.
   Table content should be readable normal text; the ambient link
   rule higher up in this file was leaking brand color into cells. */
.owner-workspace .table td a,
.owner-workspace .table tbody td a,
.owner-workspace .table td a:not([class*="btn"]):not(.dropdown-item),
.owner-workspace .table tbody td a[href^="mailto:"],
.owner-workspace .table tbody td a[href^="tel:"] {
    color: var(--ow-ink, #0f172a) !important;
    font-weight: 500;
    text-decoration: none !important;
}
.owner-workspace .table td a:hover,
.owner-workspace .table tbody td a:hover {
    color: var(--ow-brand-ink, #3b32d6) !important;
    text-decoration: underline !important;
}

/* ============================================================
 * Admin stats KPIs (/home for admin role) — dashboard/admin_stats.blade.php.
 * User: "not forced to follow the whole app UI, just make it nice".
 * Clean flat cards, muted uppercase eyebrow, big value, colored icon
 * circle preserved (they carry semantic meaning per KPI).
 * ============================================================ */
body:has(.owner-workspace) .row.align-items-stretch > [class^="col-"] > .card.card-stats,
.owner-workspace .row.align-items-stretch > [class^="col-"] > .card.card-stats {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    transition: transform 200ms cubic-bezier(0.32,0.72,0,1), box-shadow 200ms cubic-bezier(0.32,0.72,0,1);
}
.owner-workspace .card.card-stats:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.10) !important;
}
.owner-workspace .card.card-stats .card-body {
    padding: 22px 24px !important;
}
.owner-workspace .card.card-stats .card-title {
    text-transform: uppercase !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: var(--ow-muted, #6b7280) !important;
    margin: 0 0 6px !important;
}
.owner-workspace .card.card-stats .h2,
.owner-workspace .card.card-stats span.h2,
.owner-workspace .card.card-stats .font-weight-bold {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: var(--ow-ink, #0f172a) !important;
    font-variant-numeric: tabular-nums;
}
.owner-workspace .card.card-stats .text-sm.text-muted,
.owner-workspace .card.card-stats p.text-sm {
    color: var(--ow-muted, #6b7280) !important;
    font-size: 12.5px !important;
    margin-top: 12px !important;
}
/* Admin KPI icon circles — kept as semantic colors (green/orange/blue/red
   per metric) but flat + softer shadow to fit the DA. */
.owner-workspace .card.card-stats .icon.icon-shape {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px -4px rgba(15,23,42,.15) !important;
    background-image: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.owner-workspace .card.card-stats .icon.icon-shape i {
    font-size: 18px;
    color: #ffffff !important;
}
/* Force flat colors on inline-gradient icon squares — replaces the
   linear-gradient inline styles Blade ships. */
.owner-workspace .card.card-stats .icon.icon-shape[style*="059652"],
.owner-workspace .card.card-stats .icon.icon-shape[style*="047857"] {
    background: #10b981 !important;
}
.owner-workspace .card.card-stats .icon.icon-shape[style*="f59e0b"],
.owner-workspace .card.card-stats .icon.icon-shape[style*="d97706"] {
    background: #f59e0b !important;
}
.owner-workspace .card.card-stats .icon.icon-shape[style*="3b82f6"],
.owner-workspace .card.card-stats .icon.icon-shape[style*="2563eb"] {
    background: #3b82f6 !important;
}
.owner-workspace .card.card-stats .icon.icon-shape[style*="1e293b"],
.owner-workspace .card.card-stats .icon.icon-shape[style*="0f172a"] {
    background: var(--ow-brand, #635bff) !important;
}
.owner-workspace .card.card-stats .icon.icon-shape[style*="ef4444"],
.owner-workspace .card.card-stats .icon.icon-shape[style*="dc2626"] {
    background: #ef4444 !important;
}

/* Bootstrap .bg-primary utility on planner "today" column — pastel wash */
.owner-workspace .bg-primary.today-column,
.owner-workspace .today-column.bg-primary,
.owner-workspace [class*="planner-"] .bg-primary.text-white,
.owner-workspace [class*="staff"] .bg-primary.text-white {
    background: rgba(201,190,255,.35) !important;
    background-color: rgba(201,190,255,.35) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
/* Same for .card-header.bg-primary + .card.border-primary in shifts/schedule */
.owner-workspace [class*="staff"] .card-header.bg-primary,
.owner-workspace [class*="schedule"] .card-header.bg-primary {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .card.border-primary {
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
}

/* Custom .shf-preset, .pd-back-link, .pd-status-toggle */
.owner-workspace .shf-preset,
.owner-workspace .pd-back-link,
.owner-workspace .pd-status-toggle {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: var(--ow-radius, 12px) !important;
    padding: 10px 18px !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    transition: all 200ms cubic-bezier(0.32,0.72,0,1) !important;
    text-decoration: none !important;
    cursor: pointer;
}
.owner-workspace .shf-preset:hover,
.owner-workspace .pd-back-link:hover,
.owner-workspace .pd-status-toggle:hover {
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    transform: translateY(-1px);
}
.owner-workspace .pd-status-toggle--active {
    background: rgba(16,185,129,.10) !important;
    border-color: rgba(16,185,129,.35) !important;
    color: #047857 !important;
}
.owner-workspace .pd-status-toggle--inactive {
    background: rgba(107,114,128,.10) !important;
    border-color: rgba(107,114,128,.35) !important;
    color: #6b7280 !important;
}

/* Nuclear override: any element with inline background:#635bff (old
   Stripe purple), #635bff (new brand), #0a0a0a or #1E293B (dark slabs)
   — force back to glass. The `i` flag on attribute selectors is case-
   insensitive, so #635bff / #635BFF / #635Bff all match one selector. */
.owner-workspace [style*="#635bff" i],
.owner-workspace [style*="#635bff" i] {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace [style*="#0a0a0a" i],
.owner-workspace [style*="#1e293b" i],
.owner-workspace [style*="#0f172a" i]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    background: rgba(255,255,255,.55) !important;
    background-color: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(15,23,42,.04) !important;
}
.owner-workspace [style*="#0a0a0a" i]:hover,
.owner-workspace [style*="#1e293b" i]:hover {
    background: rgba(255,255,255,.85) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* ============================================================
 * CUSTOM HERO BANNERS ON MISC PAGES — sh-hero (/share/menu),
 * any "*-hero" or "*-topbar" pattern. Unify to the same purple
 * treatment as the Argon .header.bg-gradient-primary.
 * ============================================================ */
.owner-workspace .sh-hero,
.owner-workspace [class*="-hero"]:not(.card-body):not(.hero-video),
.owner-workspace [class$="-hero"] {
    position: relative;
    background:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        radial-gradient(ellipse 720px 340px at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image:
        radial-gradient(ellipse 900px 380px at 12% 0%, rgba(255,255,255,.22) 0%, transparent 55%),
        radial-gradient(ellipse 720px 340px at 100% 100%, rgba(0,0,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    border-radius: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 8px 32px -12px color-mix(in srgb, var(--ow-brand, #635bff) 45%, transparent) !important;
    overflow: hidden;
}
.owner-workspace .sh-hero h1,
.owner-workspace .sh-hero h2,
.owner-workspace .sh-hero h3,
.owner-workspace [class*="-hero"] h1,
.owner-workspace [class*="-hero"] h2,
.owner-workspace [class$="-hero"] h1,
.owner-workspace [class$="-hero"] h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.owner-workspace .sh-hero p,
.owner-workspace [class*="-hero"] p {
    color: rgba(255,255,255,.85) !important;
}

/* Flash message / postal-code-saved style toast — kill the ugly
   default browser alert / Argon flash slab; use glass card. */
.owner-workspace .alert.alert-success,
body:has(.owner-workspace) .alert.alert-success {
    background: rgba(16,185,129,.10) !important;
    border: 1px solid rgba(16,185,129,.35) !important;
    color: #065f46 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 16px -8px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 500;
}
.owner-workspace .alert.alert-info,
body:has(.owner-workspace) .alert.alert-info {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px) saturate(1.2);
}
/* Toastr (jQuery toastr.js) toasts — glass style */
body:has(.owner-workspace) #toast-container > .toast-success,
.toast-success {
    background: rgba(16,185,129,.90) !important;
    background-color: rgba(16,185,129,.90) !important;
    border-radius: 12px !important;
    padding: 14px 22px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 8px 24px -6px rgba(15,23,42,.20) !important;
}
body:has(.owner-workspace) #toast-container > .toast-error,
.toast-error {
    background: rgba(220,38,38,.90) !important;
    background-color: rgba(220,38,38,.90) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 8px 24px -6px rgba(15,23,42,.20) !important;
}
body:has(.owner-workspace) #toast-container > .toast-info,
.toast-info {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 90%, transparent) !important;
    background-color: color-mix(in srgb, var(--ow-brand, #635bff) 90%, transparent) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: 0 8px 24px -6px rgba(15,23,42,.20) !important;
}

/* ============================================================
 * UI/UX AUDIT PASS — button visibility, spacing, hit-target,
 * accessibility fixes from sub-agent findings.
 * ============================================================ */

/* CRITICAL: .btn.text-light on a light row bg = invisible.
   Force ink color when the light utility is applied on a button. */
.owner-workspace .btn.text-light,
.owner-workspace a.btn.text-light {
    color: var(--ow-body, #425466) !important;
}
.owner-workspace .btn.text-light:hover {
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* Category action rows (.cat-actions) — increase gap so destructive
   delete is clearly separated from edit/reorder */
.owner-workspace .cat-actions {
    gap: 10px !important;
    display: inline-flex !important;
    align-items: center;
}
/* Category action buttons — trash icon variant tints red */
.owner-workspace .cat-btn.cat-btn--delete,
.owner-workspace .cat-btn[data-action="delete"],
.owner-workspace .cat-btn .fa-trash,
.owner-workspace .cat-btn .fa-times {
    color: #b91c1c !important;
}
.owner-workspace .cat-btn:hover .fa-trash,
.owner-workspace .cat-btn:hover .fa-times {
    color: #991b1b !important;
}

/* .reorder-btn / .sm-btn min-touch target — 32×32 minimum for mobile */
.owner-workspace .reorder-btn,
.owner-workspace .sm-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    border-radius: 8px !important;
}

/* .sd__clock-btn — staff dashboard clock-in/out. Bumped to 48px for
   wet-hand rushed clock-in mobile use. Color-differentiated so
   clock-in (green tint) and clock-out (red tint) can't be misclicked. */
.owner-workspace .sd__clock-btn,
.sd__clock-btn {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}
.owner-workspace .sd__clock-btn[data-action="clock-in"],
.owner-workspace .sd__clock-btn.sd__clock-btn--in,
.sd__clock-btn[data-action="clock-in"] {
    background: rgba(16,185,129,.12) !important;
    border-color: rgba(16,185,129,.45) !important;
    color: #047857 !important;
}
.owner-workspace .sd__clock-btn[data-action="clock-out"],
.owner-workspace .sd__clock-btn.sd__clock-btn--out,
.sd__clock-btn[data-action="clock-out"] {
    background: rgba(220,38,38,.10) !important;
    border-color: rgba(220,38,38,.45) !important;
    color: #b91c1c !important;
}

/* .pp-card__cta-btn on VIP plan — gold fill as default state
   (currently only shows on hover; user finding: VIP card CTA reads
   WEAKER than standard plan CTAs despite being the highest-value). */
.owner-workspace .pp-card--vip .pp-card__cta-btn,
.pp-card--vip .pp-card__cta-btn {
    background: linear-gradient(180deg, #F5D67C 0%, #D4AF37 100%) !important;
    border-color: #B8941E !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px -4px rgba(180,148,30,.35) !important;
}
.owner-workspace .pp-card--vip .pp-card__cta-btn:hover,
.pp-card--vip .pp-card__cta-btn:hover {
    background: linear-gradient(180deg, #FFDC81 0%, #E4BF47 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px -6px rgba(180,148,30,.45) !important;
}

/* .plm-header-actions — bulk actions toolbar. Wrap don't column-stack. */
.owner-workspace .plm-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center;
}
/* Bulk-action buttons visually grouped */
.owner-workspace .plm-btn-sm + .plm-btn-sm {
    margin-left: 0 !important;
}

/* .header-action-btn (settings page destructive Clear Cache) — differentiate
   weight so Test Email + Clear Cache aren't visually identical. */
.owner-workspace .header-action-btn[data-action="clear-cache"],
.owner-workspace .header-action-btn.header-action-btn--danger,
.header-action-btn[data-action="clear-cache"] {
    background: rgba(220,38,38,.08) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #b91c1c !important;
}

/* Danger zone panel — wrap Close Account in a proper bordered container */
.owner-workspace .danger-zone,
.owner-workspace [class*="danger-zone"] {
    border: 1px solid rgba(220,38,38,.20) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    background: rgba(220,38,38,.02);
    margin-top: 24px;
}
.owner-workspace .danger-zone h4,
.owner-workspace [class*="danger-zone"] h4 {
    color: #b91c1c !important;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Card actions with only right-aligned buttons — add sticky pattern
   when the card has .card-sticky-footer class */
.owner-workspace .card .card-footer.sticky-footer,
.owner-workspace .form-sticky-footer {
    position: sticky;
    bottom: 0;
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(15,23,42,.08);
    padding: 14px 22px !important;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Any anchor styled as button — visual affordance for cursor */
.owner-workspace a.btn,
.owner-workspace a[class*="btn"],
.owner-workspace a[role="button"] {
    cursor: pointer;
}
/* Dropdown-toggle caret — force caret to be visible even without JS icon */
.owner-workspace .dropdown-toggle:not(.dropdown-toggle--no-caret)::after {
    content: "" !important;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px !important;
    vertical-align: 2px;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0;
    opacity: 0.7;
}
/* Loading state — .btn-loading class swaps content with an inline spinner */
.owner-workspace .btn.btn-loading,
.owner-workspace .btn.is-loading,
.owner-workspace button:disabled[data-loading="true"] {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.owner-workspace .btn.btn-loading::after,
.owner-workspace .btn.is-loading::after,
.owner-workspace button:disabled[data-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.7;
    animation: ow-btn-spin 700ms linear infinite;
}
@keyframes ow-btn-spin { to { transform: rotate(360deg); } }

/* Bulk-action toolbar container — group with hairline */
.owner-workspace .btn-group,
.owner-workspace .bulk-actions {
    display: inline-flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.owner-workspace .btn-group > .btn,
.owner-workspace .bulk-actions > .btn {
    border-radius: 0 !important;
    border-right: 1px solid rgba(15,23,42,.10) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.owner-workspace .btn-group > .btn:last-child,
.owner-workspace .bulk-actions > .btn:last-child {
    border-right: 0 !important;
}

/* Adjacent buttons in headers / footers — ensure 8px gap
   (many templates put .btn.btn right against each other) */
.owner-workspace .card-header .btn + .btn,
.owner-workspace .card-footer .btn + .btn,
.owner-workspace .modal-footer .btn + .btn,
.owner-workspace .form-row .btn + .btn,
.owner-workspace .d-flex .btn + .btn:not(.btn-block) {
    margin-left: 8px !important;
}
/* Table row action toolbars (.tableactions, .btn-toolbar) */
.owner-workspace .btn-toolbar > .btn + .btn,
.owner-workspace .actions-row > .btn + .btn {
    margin-left: 6px !important;
}
/* Adjacent .order-action pair (Accept + Reject) — 8px gap */
.owner-workspace .order-action + .order-action {
    margin-left: 8px !important;
}

/* Modal footer / card footer — ensure buttons align RIGHT with gap.
   Argon's .modal-footer sometimes centers or left-aligns. */
.owner-workspace .modal-footer {
    justify-content: flex-end !important;
    gap: 8px;
    padding: 16px 22px !important;
}

/* Reorder icon buttons - even icon-only get 32×32 touch target */
.owner-workspace .btn.btn-icon-only,
.owner-workspace .btn-icon-only {
    min-width: 32px !important;
    min-height: 32px !important;
}

/* Filter toggle — user reported blank on coupons. Fallback caret glyph
   via ::before so it renders even when the .ni Nucleo font hasn't loaded. */
.owner-workspace #show-hide-filters:not(:has(i:not(:empty))):before,
.owner-workspace .btn.btn-icon:empty:before,
.owner-workspace #show-hide-filters .btn-inner--icon:empty:before {
    content: "\25BC";  /* ▼ black down-pointing triangle U+25BC */
    font-size: 10px;
    color: currentColor;
    display: inline-block;
    line-height: 1;
}
/* Ensure #show-hide-filters + its Nucleo icon inherit ink so if font
   IS loaded, the caret shows up visibly */
.owner-workspace #show-hide-filters,
.owner-workspace #show-hide-filters i,
.owner-workspace #show-hide-filters .btn-inner--icon {
    color: var(--ow-ink, #0f172a) !important;
}
.owner-workspace #show-hide-filters .ni,
.owner-workspace #show-hide-filters i.ni-bold-down {
    color: inherit !important;
    font-size: 13px !important;
    line-height: 1;
    display: inline-block;
}

/* Allergens picker button */
.owner-workspace .emoji-pick,
.emoji-pick {
    font-family: "DM Sans", system-ui, sans-serif !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: var(--ow-ink, #0f172a) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    cursor: pointer;
    transition: all 160ms cubic-bezier(0.4,0,0.2,1);
}
.owner-workspace .emoji-pick:hover,
.emoji-pick:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    transform: translateY(-1px);
}

/* ============================================================
 * OUT-OF-SCOPE ARGON PATTERNS — the top navbar and sidebar sit
 * OUTSIDE .main-content.owner-workspace. Their btn-link + Argon
 * primary-blue #5e72e4 leaks through. Unscoped rule targets these
 * only when logged in (Argon chrome only renders for authed users).
 * ============================================================ */
body:has(.owner-workspace) .btn-link,
body:has(.owner-workspace) .btn-link.text-black,
body:has(.owner-workspace) .navbar-top .btn-link,
body:has(.owner-workspace) #navbar-main .btn-link,
body:has(.owner-workspace) .navbar .btn-link {
    color: var(--ow-brand-ink, #3b32d6) !important;
}
/* Any remaining Argon-blue (#5e72e4 = rgb(94,114,228)) inline color
   leaks — force to brand purple system-wide when owner-workspace exists. */
body:has(.owner-workspace) a.text-primary,
body:has(.owner-workspace) .text-primary {
    color: var(--ow-brand-ink, #3b32d6) !important;
}

/* BEM semantic tints — .btn--primary/-success/-danger/-warning
   inherit the neutral glass shape above then get their tint here. */
.owner-workspace .btn--primary,
.owner-workspace .btn--save,
.owner-workspace .btn--add,
.owner-workspace .btn--next,
.owner-workspace .btn--grant {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink) !important;
}
.owner-workspace .btn--primary:hover,
.owner-workspace .btn--save:hover,
.owner-workspace .btn--add:hover,
.owner-workspace .btn--next:hover,
.owner-workspace .btn--grant:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 55%, transparent) !important;
}
.owner-workspace .btn--success {
    background: rgba(16,185,129,.10) !important;
    border-color: rgba(16,185,129,.35) !important;
    color: #047857 !important;
}
.owner-workspace .btn--success:hover {
    background: rgba(16,185,129,.18) !important;
    border-color: rgba(16,185,129,.55) !important;
}
.owner-workspace .btn--danger,
.owner-workspace .btn--delete,
.owner-workspace .btn--revoke,
.owner-workspace .btn-delete,
.owner-workspace .btn-remove {
    background: rgba(220,38,38,.09) !important;
    border-color: rgba(220,38,38,.35) !important;
    color: #b91c1c !important;
}
.owner-workspace .btn--danger:hover,
.owner-workspace .btn--delete:hover,
.owner-workspace .btn--revoke:hover,
.owner-workspace .btn-delete:hover,
.owner-workspace .btn-remove:hover {
    background: rgba(220,38,38,.18) !important;
    border-color: rgba(220,38,38,.55) !important;
}
/* BEM ghost / text — no glass, just text link */
.owner-workspace .btn--ghost,
.owner-workspace .btn--text,
.owner-workspace .btn-ghost {
    background: transparent !important;
    border: 0 !important;
    color: var(--ow-brand-ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.owner-workspace .btn--ghost:hover,
.owner-workspace .btn--text:hover,
.owner-workspace .btn-ghost:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent) !important;
    color: var(--ow-brand-hover) !important;
}
/* Filepond upload trigger button + browser file input */
.owner-workspace input[type="file"]::-webkit-file-upload-button,
.owner-workspace .filepond--credits,
.owner-workspace .filepond--label-action {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink) !important;
    border-radius: var(--ow-radius) !important;
    padding: 8px 14px !important;
    cursor: pointer;
}

/* ============================================================
 * Argon page-hero banner — pastel #C9BEFF wash, DARK ink text.
 *
 * Rebuilt per user contract: no saturated purple slab with white
 * text (bad contrast + not the DA). Instead the banner is a
 * pastel lavender wash (--ow-pastel-accent = #C9BEFF) with soft
 * mirror-glass depth and dark ink text. The pastel is the wash,
 * the accent purple stays for interactive elements only.
 *
 * Applies to every Argon variant: .header.bg-gradient-primary,
 * .bg-gradient-info, .bg-gradient-default, .bg-gradient-dark,
 * .bg-info, .bg-primary, .bg-dark. All fold into one look.
 * ============================================================ */
/* ============================================================
 * UNIFIED PAGE-HERO BANNER — every page, admin + owner, MUST
 * look the same. Reference: /restaurants/create.
 *
 * Same structure everywhere:
 *  - Solid flat purple gradient rectangle
 *  - 258px tall (Argon pb-8 pt-md-8 native)
 *  - No border-radius (plain rectangle, sits under content)
 *  - White H1 in .display-1/2/3, `.text-white` friendly
 *  - Content card overlaps up via .mt--7 (-80px)
 *
 * Anything matching `.header` gets this treatment, regardless of
 * padding utility classes shipped in the Blade or the presence of a
 * `.mask.bg-gradient-default` overlay or an inline background-image.
 * Also covers admin's .aa-header + custom .*-hero + shf-header etc.
 * ============================================================ */
.owner-workspace .header,
.owner-workspace header.bg-gradient-primary,
.owner-workspace header.bg-gradient-info,
.owner-workspace .aa-header,
.owner-workspace .sh-hero,
.owner-workspace .shf-header,
.owner-workspace .mtw__header,
.owner-workspace .clients-hero,
.owner-workspace .staff-hero,
.owner-workspace .trs-hero,
.owner-workspace .tr-hero,
.owner-workspace [class$="-hero"] {
    position: relative !important;
    background: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px -8px color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    /* Force uniform padding regardless of Argon utility classes shipped
       in each Blade (some have pb-8 pt-md-8, some have malformed pb-, etc). */
    padding-top: 5rem !important;    /* Argon pt-5 md */
    padding-bottom: 8rem !important;  /* Argon pb-8 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 258px !important;
    display: flex !important;
    align-items: center !important;
}
/* Kill any inline background-image (profile-cover.jpg pattern) — the
   attribute selector variant with high specificity + !important beats
   inline non-!important. */
.owner-workspace .header[style*="background-image"],
.owner-workspace .header[style*="background-size"] {
    background-image: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
}
/* Catch-light on top edge — pastel mirror-glass signature */
.owner-workspace .header.bg-gradient-primary::before,
.owner-workspace .header.bg-gradient-info::before,
.owner-workspace header.bg-gradient-primary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, transparent 100%);
    pointer-events: none;
}
/* Titles + text on saturated purple = WHITE. Applies to every .header
   variant: bg-gradient-*, plain .header with pb-8/pt-md-8 pattern, and
   .header:has(.mask) (Argon banner with dark overlay). */
.owner-workspace .header h1,
.owner-workspace .header h2,
.owner-workspace .header h3,
.owner-workspace .header .display-1,
.owner-workspace .header .display-2,
.owner-workspace .header .text-white,
.owner-workspace .header .text-light {
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.15);
    font-weight: 700 !important;
}
/* Muted / paragraph text on purple: translucent white */
.owner-workspace .header .text-muted,
.owner-workspace .header p {
    color: rgba(255,255,255,.82) !important;
}
/* Breadcrumbs on pastel */
.owner-workspace .header.bg-gradient-primary .breadcrumb,
.owner-workspace .header.bg-gradient-info .breadcrumb {
    background: transparent !important;
    padding: 0;
}
.owner-workspace .header.bg-gradient-primary .breadcrumb-item,
.owner-workspace .header.bg-gradient-primary .breadcrumb-item a,
.owner-workspace .header.bg-gradient-info .breadcrumb-item,
.owner-workspace .header.bg-gradient-info .breadcrumb-item a {
    color: rgba(255,255,255,.85) !important;
    font-weight: 500;
}
.owner-workspace .header.bg-gradient-primary .breadcrumb-item.active,
.owner-workspace .header.bg-gradient-info .breadcrumb-item.active {
    color: #ffffff !important;
}
.owner-workspace .header.bg-gradient-primary .breadcrumb-item + .breadcrumb-item::before,
.owner-workspace .header.bg-gradient-info .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.55);
}
/* Action buttons inside pastel banner — the ONE atom, brand-purple primary */
.owner-workspace .header.bg-gradient-primary .btn-neutral,
.owner-workspace .header.bg-gradient-primary .btn-white,
.owner-workspace .header.bg-gradient-primary .btn.text-white,
.owner-workspace .header.bg-gradient-info .btn-neutral,
.owner-workspace .header.bg-gradient-info .btn-white {
    background: #ffffff !important;
    color: var(--ow-ink) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 4px 12px -4px rgba(15,23,42,.10) !important;
}
.owner-workspace .header.bg-gradient-primary .btn-neutral:hover,
.owner-workspace .header.bg-gradient-primary .btn-white:hover {
    transform: var(--ow-hover-lift);
    box-shadow: 0 8px 20px -6px rgba(15,23,42,.14) !important;
}
.owner-workspace .header.bg-gradient-primary .btn-outline-light,
.owner-workspace .header.bg-gradient-primary .btn-outline-white,
.owner-workspace .header.bg-gradient-info .btn-outline-light,
.owner-workspace .header.bg-gradient-info .btn-outline-white {
    background: rgba(255,255,255,.55) !important;
    color: var(--ow-ink) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    backdrop-filter: blur(6px);
}
.owner-workspace .header.bg-gradient-primary .btn-outline-light:hover,
.owner-workspace .header.bg-gradient-primary .btn-outline-white:hover {
    background: #ffffff !important;
    border-color: rgba(15,23,42,.08) !important;
    transform: var(--ow-hover-lift);
}
/* KPI/stat cards floated into the pastel banner get lift shadow */
.owner-workspace .header.bg-gradient-primary + .container-fluid .card-stats,
.owner-workspace .header.bg-gradient-primary ~ .container-fluid .card {
    box-shadow: 0 24px 60px -20px rgba(15,23,42,.15) !important;
}

/* aaatable's custom shell page pattern uses class families with
   a "*-shell" wrapper and "*-topbar" dark hero banner (sf-shell +
   sf-topbar for staff, re-shell + re-topbar for restaurants edit,
   pos-shell + pos-topbar for POS Cloud, etc.). All variants use the
   same anthracite gradient. Flatten every -topbar variant to match
   the rest of the owner console — the H1 alone establishes the page. */
.owner-workspace [class*="-topbar"] {
    background: transparent !important;
    background-image:
        radial-gradient(ellipse 600px 200px at 100% 0%, color-mix(in srgb, var(--ow-brand, #635bff) 6%, transparent), transparent 70%) !important;
    color: var(--ow-ink) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--ow-line-soft);
}
.owner-workspace [class*="-topbar"] *,
.owner-workspace [class*="-topbar__title"],
.owner-workspace [class*="-topbar__id"],
.owner-workspace [class*="-topbar__inner"],
.owner-workspace [class*="-topbar"] .text-white {
    color: var(--ow-ink) !important;
}
.owner-workspace [class*="-topbar__subtitle"],
.owner-workspace [class*="-topbar"] .text-muted,
.owner-workspace [class*="-topbar"] p {
    color: var(--ow-body) !important;
}
/* Action buttons inside the *-topbar were designed for a dark bg —
   flip their border/text to work on the now-light surface. */
.owner-workspace [class*="-topbar"] .btn-outline-light,
.owner-workspace [class*="-topbar"] .btn-outline-white,
.owner-workspace [class*="-topbar"] .btn.text-white {
    background: var(--ow-surface) !important;
    border-color: var(--ow-line) !important;
    color: var(--ow-body) !important;
}
.owner-workspace [class*="-topbar"] .btn-outline-light:hover,
.owner-workspace [class*="-topbar"] .btn-outline-white:hover {
    background: var(--ow-sunken) !important;
    border-color: var(--ow-ink) !important;
    color: var(--ow-ink) !important;
}
/* Sub-shell containers that also carry the anthracite gradient
   (breadcrumb strips, hero cards) get the same treatment. */
.owner-workspace [class*="-shell"] [style*="linear-gradient(135deg"] {
    background-image: radial-gradient(ellipse 600px 200px at 100% 0%, color-mix(in srgb, var(--ow-brand, #635bff) 4%, transparent), transparent 70%) !important;
}
.owner-workspace .header .text-muted,
.owner-workspace .header .breadcrumb-item a {
    color: var(--ow-muted) !important;
}
.owner-workspace .header .breadcrumb {
    background: transparent !important;
    padding: 0;
    margin: 0 0 8px;
}
.owner-workspace .header .breadcrumb-item.active {
    color: var(--ow-body) !important;
}

/* Button-dark / bg-dark / bg-gradient-dark handled in the unified
   atom block above. Ambient body background is set on tokens file. */
.owner-workspace,
.owner-workspace .main-content { min-height: 100vh; }

/* Bigger, quieter page titles across the whole owner UI.
   Argon page-header used .display-1/2/3 for h1s; scale them up
   with tighter kerning so the H1 alone establishes each page. */
.owner-workspace .display-1,
.owner-workspace h1.display-1,
.owner-workspace .dashboard-overview-title {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--ow-ink);
    margin-bottom: 8px;
}

/* ============================================================
 * .ow-glass — reusable mirror-glass utility.
 * Apply on any container to get the aaatable × Purple hero
 * surface: translucent white bg, real backdrop-filter blur,
 * catch-light top edge, pastel-purple bottom-glow shadow,
 * Apple-style hover lift.
 *
 * The tokens (--ow-glass-*) live in owner-workspace-tokens.css.
 * Applied here to: .ow-kpi (KPIs), .earnings-display (weekly),
 * .orders-chart (chart card).
 * ============================================================ */
.owner-workspace .ow-glass,
.owner-workspace .card-stats,
.owner-workspace .earnings-display,
.owner-workspace .orders-chart {
    background: var(--ow-glass-bg) !important;
    background-color: rgba(255,255,255,.72) !important;
    border: var(--ow-glass-border) !important;
    border-radius: var(--ow-radius-lg) !important;
    backdrop-filter: var(--ow-glass-blur);
    -webkit-backdrop-filter: var(--ow-glass-blur);
    box-shadow: var(--ow-glass-ring), var(--ow-glass-glow) !important;
    transition:
        transform var(--ow-dur) var(--ow-ease-hover),
        box-shadow var(--ow-dur) var(--ow-ease-hover) !important;
    will-change: transform;
}
.owner-workspace .ow-glass:hover,
.owner-workspace .card-stats:hover,
.owner-workspace .earnings-display:hover,
.owner-workspace .orders-chart:hover {
    transform: var(--ow-hover-lift) !important;
    box-shadow: var(--ow-glass-ring), var(--ow-glass-glow-hover) !important;
}

/* Weekly total needs more generous padding + bigger radius */
.owner-workspace .earnings-display {
    padding: 30px 28px !important;
    border-radius: var(--ow-radius-xl) !important;
}
/* Chart card keeps its own hover-neutralized state (chart re-renders
   on transform which is jarring — kill the lift on this one only). */
.owner-workspace .orders-chart:hover {
    transform: none !important;
}

/* Regular Argon .card (not glass): flat white + Apple hover */
.owner-workspace .card:not(.card-stats):not(.earnings-display):not(.orders-chart):not(.ow-kpi) {
    background: var(--ow-surface);
    border-radius: var(--ow-radius-lg);
    border: 1px solid var(--ow-line-soft);
    box-shadow: var(--ow-shadow-card);
    transition:
        box-shadow var(--ow-dur) var(--ow-ease-hover),
        transform var(--ow-dur) var(--ow-ease-hover);
    will-change: transform;
}
.owner-workspace .card:not(.card-stats):not(.earnings-display):not(.orders-chart):not(.ow-kpi):hover {
    box-shadow: var(--ow-shadow-card-hover);
}
.owner-workspace .card-header {
    border-top-left-radius: var(--ow-radius-lg);
    border-top-right-radius: var(--ow-radius-lg);
}

/* ============================================================
 * Frontend-design pass — anti-default sweep.
 * Kill Argon's ALL-CAPS card-title utility ("text-uppercase")
 * everywhere INSIDE owner-workspace content — it's the top
 * "AI eyebrow" tell. Sidebar section headers (.navbar-heading)
 * are exempt because the user chose Argon-default sidebar.
 * ============================================================ */
.owner-workspace .text-uppercase:not(.navbar-heading):not(.navbar-heading *) {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}
.owner-workspace .card-title.text-uppercase,
.owner-workspace h5.text-uppercase,
.owner-workspace h6.text-uppercase {
    font-size: 13.5px !important;
    color: var(--ow-muted) !important;
}
/* .ls-1 (Argon letter-spacing) — no longer needed in sentence case */
.owner-workspace .ls-1 { letter-spacing: 0 !important; }

/* Chips, badges, status pills */
.owner-workspace .badge {
    padding: 4px 10px; border-radius: 999px;
    font-weight: 500; font-size: 12px; letter-spacing: 0;
}
.owner-workspace .badge-success,
.owner-workspace .badge-pill.badge-success {
    background: var(--ow-success-wash); color: var(--ow-success);
}
.owner-workspace .badge-primary,
.owner-workspace .badge-pill.badge-primary {
    background: var(--ow-brand-wash); color: var(--ow-brand-ink);
}
.owner-workspace .badge-warning { background: var(--ow-warning-wash); color: var(--ow-warning); }
.owner-workspace .badge-danger { background: var(--ow-danger-wash); color: var(--ow-danger); }

/* Inputs — Bootstrap form-control -> atom-kit input */
.owner-workspace .form-control {
    background: var(--ow-surface); border: 1px solid var(--ow-line);
    border-radius: var(--ow-radius); color: var(--ow-ink);
    font-size: 14px; padding: 10px 14px; height: auto;
    min-height: var(--ow-control-h);
    transition: border-color 160ms var(--ow-ease),
                box-shadow 160ms var(--ow-ease);
    box-shadow: none;
}
.owner-workspace .form-control:focus {
    border-color: var(--ow-brand); box-shadow: var(--ow-ring); outline: none;
}
.owner-workspace .form-control::placeholder { color: var(--ow-faint); }

/* Tables — atom-kit typography, hairlines, Apple hover on rows */
.owner-workspace .table { color: var(--ow-body); font-size: 13.5px; }
.owner-workspace .table thead th {
    text-transform: none; font-size: 12px; font-weight: 600;
    letter-spacing: 0; color: var(--ow-muted);
    border-bottom: 1px solid var(--ow-line);
    padding: 12px 16px; background: transparent;
}
.owner-workspace .table td {
    padding: 14px 16px; border-top: 1px solid var(--ow-line-soft);
    vertical-align: middle;
    transition: background var(--ow-dur-fast) var(--ow-ease);
}
/* Row-level hover — pastel wash across the whole row */
.owner-workspace .table tbody tr {
    transition: background var(--ow-dur-fast) var(--ow-ease);
}
.owner-workspace .table tbody tr:hover {
    background: var(--ow-pastel-accent-faint) !important;
}
.owner-workspace .table tbody tr:hover td {
    background: transparent;
}

/* List groups — mirror the table row hover */
.owner-workspace .list-group-item {
    background: var(--ow-surface);
    border-color: var(--ow-line-soft) !important;
    padding: 12px 16px;
    transition: background var(--ow-dur-fast) var(--ow-ease);
}
.owner-workspace .list-group-item:hover {
    background: var(--ow-pastel-accent-faint) !important;
}
.owner-workspace .list-group-item.active {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    color: var(--ow-brand-ink) !important;
    font-weight: 500;
}

/* Ambient — links, but NOT anchor-styled buttons (btn-success, btn-danger,
   btn-warning etc. paint their own text against a colored surface, and
   overriding with brand-ink washes them into unreadable purple-on-green). */
.owner-workspace a:not([class*="btn"]):not(.nav-link):not(.breadcrumb-item a) {
    color: var(--ow-brand-ink);
}
.owner-workspace a:not([class*="btn"]):not(.nav-link):hover {
    color: var(--ow-brand-hover);
}
/* Glass buttons: text stays semantic (green/red/purple), not white.
   Only ICONS/inner spans might need explicit color — inherit from parent
   so they follow the button's semantic color. */
.owner-workspace .btn-success > *,
.owner-workspace .btn-danger > *,
.owner-workspace .btn-warning > *,
.owner-workspace .btn-info > *,
.owner-workspace .btn-primary > * {
    color: inherit !important;
}

/* ============================================================
 * Global Argon-element atom-kit overrides.
 * Every legacy pattern (dropdowns, modals, nav-tabs, pagination,
 * form-selects, alerts, text-* utility colors) inherits the new
 * design aesthetic — one radius, one accent, no leftover
 * Argon-blue #5e72e4.
 * ============================================================ */

/* Utility text colors — every "primary" flips to aaatable purple */
.owner-workspace .text-primary { color: var(--ow-brand-ink, #4f46e5) !important; }
.owner-workspace .text-info { color: #0369a1 !important; }
.owner-workspace .text-success { color: #08a37a !important; }
.owner-workspace .text-danger { color: #dc2626 !important; }
.owner-workspace .text-warning { color: #b45309 !important; }

/* Utility bg colors — pastel wash variants of the accent */
.owner-workspace .bg-primary:not(.header):not(.btn) {
    background-color: var(--ow-brand, #635bff) !important;
}
.owner-workspace .bg-success-light { background: #d1fae5 !important; color: #08a37a !important; }
.owner-workspace .bg-danger-light  { background: #fee2e2 !important; color: #dc2626 !important; }

/* Dropdown menus — soft shadow, 12px radius, no Argon gradient chrome.
   Emil: transform-origin from trigger area (top-left default), scale-in
   entrance (0.95 → 1 with fade), interruptible. */
.owner-workspace .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.08) !important;
    padding: 6px !important;
    min-width: 200px;
    font-family: "DM Sans", system-ui, sans-serif;
    transform-origin: top left;
    transition:
        opacity var(--ow-dur-fast) var(--ow-ease-out),
        transform var(--ow-dur-fast) var(--ow-ease-out) !important;
}
.owner-workspace .dropdown-menu:not(.show) {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}
.owner-workspace .dropdown-menu.show {
    opacity: 1;
    transform: scale(1);
}
.owner-workspace .dropdown-menu.dropdown-menu-right {
    transform-origin: top right;
}
.owner-workspace .dropdown-item {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: var(--ow-body, #425466) !important;
    font-size: 14px !important;
    transition: background 140ms cubic-bezier(0.4,0,0.2,1);
}
.owner-workspace .dropdown-item:hover,
.owner-workspace .dropdown-item:focus {
    background: var(--ow-brand-pastel-soft, #f5f4ff) !important;
    color: var(--ow-brand-ink, #4f46e5) !important;
}
.owner-workspace .dropdown-item.active,
.owner-workspace .dropdown-item:active {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
}
.owner-workspace .dropdown-divider {
    border-top: 1px solid var(--ow-line-soft, #f0f2f4) !important;
    margin: 6px 0;
}

/* Modals — atom-kit shell + Emil enter animation.
   Nothing scales from scale(0); starts at 0.96 + opacity 0 → 1. */
.owner-workspace .modal-content {
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 72px -20px rgba(15,23,42,.30), 0 8px 24px -8px rgba(15,23,42,.10) !important;
    overflow: hidden;
    transform-origin: center;
    transition:
        opacity var(--ow-dur) var(--ow-ease-out),
        transform var(--ow-dur) var(--ow-ease-out) !important;
}
.owner-workspace .modal.fade .modal-dialog {
    transition: transform var(--ow-dur) var(--ow-ease-out) !important;
    transform: translate(0, -8px) scale(0.98);
}
.owner-workspace .modal.show .modal-dialog {
    transform: translate(0, 0) scale(1);
}
.owner-workspace .modal-backdrop {
    background: rgba(15,23,42,.55) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity var(--ow-dur) var(--ow-ease-out);
}
.owner-workspace .modal-backdrop.show { opacity: 1; }
.owner-workspace .modal-backdrop.fade { opacity: 0; }
.owner-workspace .modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ow-line-soft, #f0f2f4) !important;
    padding: 20px 24px !important;
}
.owner-workspace .modal-header .modal-title,
.owner-workspace .modal-header h5,
.owner-workspace .modal-header h4 {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--ow-ink, #0f172a) !important;
    letter-spacing: -0.01em !important;
}
.owner-workspace .modal-body { padding: 22px 24px !important; }
.owner-workspace .modal-footer {
    padding: 16px 24px !important;
    background: #fafbfd !important;
    border-top: 1px solid var(--ow-line-soft, #f0f2f4) !important;
}

/* Pagination */
.owner-workspace .pagination .page-link {
    color: var(--ow-body, #425466) !important;
    border: 1px solid var(--ow-line, #e6e9eb) !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    margin: 0 2px;
    padding: 6px 12px !important;
    font-size: 13.5px;
    font-weight: 500;
}
.owner-workspace .pagination .page-link:hover {
    background: var(--ow-brand-pastel-soft, #f5f4ff) !important;
    color: var(--ow-brand-ink, #4f46e5) !important;
    border-color: var(--ow-brand-pastel, #eeecff) !important;
}
.owner-workspace .pagination .page-item.active .page-link {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--ow-brand, #635bff) 45%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent);
}
.owner-workspace .pagination .page-item.disabled .page-link {
    color: var(--ow-faint, #94a3b8) !important;
    background: #fafbfd !important;
}

/* Nav tabs / pills */
.owner-workspace .nav-tabs {
    border-bottom: 1px solid var(--ow-line-soft, #f0f2f4) !important;
}
.owner-workspace .nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: var(--ow-muted, #6b7280) !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: color 160ms cubic-bezier(0.4,0,0.2,1), border-color 160ms cubic-bezier(0.4,0,0.2,1);
}
.owner-workspace .nav-tabs .nav-link:hover {
    color: var(--ow-ink, #0f172a) !important;
    border-bottom-color: var(--ow-line, #e6e9eb) !important;
}
.owner-workspace .nav-tabs .nav-link.active {
    color: var(--ow-brand-ink, #4f46e5) !important;
    border-bottom-color: var(--ow-brand, #635bff) !important;
    background: transparent !important;
}
.owner-workspace .nav-pills .nav-link {
    background: transparent !important;
    color: var(--ow-body, #425466) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;
}
.owner-workspace .nav-pills .nav-link.active {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 14%, transparent) !important;
    color: var(--ow-brand-ink, #3b32d6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent);
}

/* Custom select / select2 wrapping */
.owner-workspace .custom-select,
.owner-workspace select.form-control {
    background: #ffffff !important;
    border: 1px solid var(--ow-line, #e6e9eb) !important;
    border-radius: 10px !important;
    color: var(--ow-ink, #0f172a) !important;
    font-size: 14px !important;
    padding: 10px 36px 10px 14px !important;
    height: auto !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ow-muted, #6b7280) 50%),
        linear-gradient(135deg, var(--ow-muted, #6b7280) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) center,
        calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none !important;
}
.owner-workspace .custom-select:focus,
.owner-workspace select.form-control:focus {
    border-color: var(--ow-brand, #635bff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
    outline: 0 !important;
}

/* Alerts — flat modern washes, no more Argon boxed shadows */
.owner-workspace .alert {
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
}
.owner-workspace .alert-success {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}
.owner-workspace .alert-danger {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
.owner-workspace .alert-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
.owner-workspace .alert-info,
.owner-workspace .alert-primary {
    background: var(--ow-brand-pastel-soft, #f5f4ff) !important;
    border-color: var(--ow-brand-pastel, #eeecff) !important;
    color: var(--ow-brand-ink, #4f46e5) !important;
}

/* Progress bars — thin, brand */
.owner-workspace .progress {
    height: 8px !important;
    background: var(--ow-line-soft, #f0f2f4) !important;
    border-radius: 999px !important;
    overflow: hidden;
}
.owner-workspace .progress-bar {
    background: linear-gradient(90deg, var(--ow-brand, #635bff), var(--ow-brand-hover, #7d6dff)) !important;
    border-radius: 999px !important;
}

/* Icon squares from Argon (.icon-shape) — kept where present but
   restyled with brand wash + monoline treatment */
.owner-workspace .icon-shape {
    border-radius: 10px !important;
    background: var(--ow-brand-pastel-soft, #f5f4ff) !important;
    color: var(--ow-brand-ink, #4f46e5) !important;
    box-shadow: none !important;
}
.owner-workspace .icon-shape.bg-gradient-red,
.owner-workspace .icon-shape.bg-gradient-danger { background: #fee2e2 !important; color: #dc2626 !important; }
.owner-workspace .icon-shape.bg-gradient-green,
.owner-workspace .icon-shape.bg-gradient-success { background: #d1fae5 !important; color: #08a37a !important; }
.owner-workspace .icon-shape.bg-gradient-orange,
.owner-workspace .icon-shape.bg-gradient-warning { background: #fef3c7 !important; color: #b45309 !important; }
.owner-workspace .icon-shape.bg-gradient-info { background: #dbeafe !important; color: #0369a1 !important; }

/* Custom-control switch (Bootstrap toggle) — brand purple */
.owner-workspace .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--ow-brand, #635bff) !important;
    border-color: var(--ow-brand, #635bff) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
}

/* ============================================================
 * UI/UX Pro Max pass — forms, focus, touch targets, feedback.
 * ============================================================ */

/* Labels — visible, above inputs, semibold body */
.owner-workspace label,
.owner-workspace .form-label,
.owner-workspace .col-form-label {
    color: var(--ow-ink) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px !important;
    display: block;
}
/* Helper / hint text */
.owner-workspace .form-text,
.owner-workspace .text-muted.form-text,
.owner-workspace small.form-text {
    color: var(--ow-muted) !important;
    font-size: 12.5px !important;
    margin-top: 4px !important;
}
/* Invalid feedback — inline, near field */
.owner-workspace .invalid-feedback,
.owner-workspace .form-control.is-invalid ~ .invalid-feedback {
    display: block;
    color: var(--ow-danger) !important;
    font-size: 12.5px !important;
    margin-top: 4px !important;
}
.owner-workspace .form-control.is-invalid,
.owner-workspace .custom-select.is-invalid {
    border-color: var(--ow-danger) !important;
    box-shadow: 0 0 0 3px rgba(185,28,28,.12) !important;
}
.owner-workspace .form-control.is-valid {
    border-color: var(--ow-success) !important;
}

/* Form-check (checkbox + radio) — glass, purple check */
.owner-workspace .form-check-input,
.owner-workspace .custom-control-input {
    accent-color: var(--ow-brand) !important;
    cursor: pointer;
}
.owner-workspace .form-check-input[type="checkbox"],
.owner-workspace .form-check-input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid rgba(15,23,42,.20) !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,.8) !important;
    transition: border-color var(--ow-dur-fast) var(--ow-ease);
}
.owner-workspace .form-check-input[type="radio"] { border-radius: 999px !important; }
.owner-workspace .form-check-input:hover {
    border-color: var(--ow-brand) !important;
}
.owner-workspace .form-check-input:checked {
    background-color: var(--ow-brand) !important;
    border-color: var(--ow-brand) !important;
}
.owner-workspace .form-check-label,
.owner-workspace .custom-control-label {
    color: var(--ow-body) !important;
    cursor: pointer;
    padding-left: 4px;
}

/* Argon custom toggle switch (checkbox variant) → glass purple */
.owner-workspace .custom-toggle input[type="checkbox"]:checked ~ .custom-toggle-slider {
    background: var(--ow-brand) !important;
}
.owner-workspace .custom-toggle-slider {
    background: rgba(15,23,42,.15) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.10);
    transition: background var(--ow-dur) var(--ow-ease);
}

/* Focus-visible ring on all buttons (matches token ring) */
.owner-workspace .btn:focus-visible,
.owner-workspace button:focus-visible,
.owner-workspace input:focus-visible,
.owner-workspace select:focus-visible,
.owner-workspace textarea:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent),
        0 1px 2px rgba(15,23,42,.04) !important;
}

/* Touch targets — minimum 44×44 for public-facing CTAs.
   Dense admin can drop to 32-40 in .btn-sm contexts, but the
   default .btn keeps 40px and .btn-lg meets AAA touch. */
.owner-workspace .btn:not(.btn-sm):not(.btn-lg) {
    min-height: 40px !important;
}

/* Close buttons on modals/alerts */
.owner-workspace .close {
    color: var(--ow-muted, #6b7280) !important;
    opacity: 0.8;
    font-weight: 400 !important;
    font-size: 20px !important;
    transition: color 140ms;
}
.owner-workspace .close:hover { color: var(--ow-ink, #0f172a) !important; opacity: 1; }
.owner-workspace .btn-warning,
.owner-workspace .btn-warning * {
    color: #1c1a15 !important;
}
.owner-workspace .quicksand,
.owner-workspace [class*="quicksand"] {
    font-family: "DM Sans", system-ui, sans-serif !important;
}

/* Dashboard v2 specific polish */
.owner-workspace .dashboard-overview-title {
    font-size: 44px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.1; color: var(--ow-ink); margin-bottom: 6px;
}
.owner-workspace .earnings-display {
    background: var(--ow-glass-bg);
    backdrop-filter: var(--ow-glass-blur);
    -webkit-backdrop-filter: var(--ow-glass-blur);
    border: var(--ow-glass-border);
    border-radius: var(--ow-radius-xl);
    box-shadow: var(--ow-glass-ring), var(--ow-glass-glow);
    padding: 32px 28px;
}
.owner-workspace .earnings-display .display-2 {
    font-size: 44px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ow-ink); margin-bottom: 4px;
}

/* Order-row ID badges get mono, matching mockup */
.owner-workspace .table td .badge { font-family: var(--ow-mono); font-size: 12px; }

/* ============================================================
 * KPI hero tiles — literal aaatable × Purple mockup contract.
 * NO icon squares. Sentence-case label + massive value + delta.
 *   • 2×2 grid on the main col (repeats to 1 column on mobile)
 *   • Sentence-case label 13.5px muted (NOT uppercase)
 *   • Display value ~52px, weight 700, tight tracking
 *   • Small unit in muted color after value
 *   • Delta chip below: ↑/↓ + %  + reference period
 *     .kpi__delta.ok = green, .bad = red
 *   • Card is white on gray page, 20px radius, soft border, faint shadow
 * ============================================================ */
.owner-workspace .ow-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
@media (max-width: 640px) {
    .owner-workspace .ow-kpi-grid { grid-template-columns: 1fr; }
}

.owner-workspace .ow-kpi {
    background: var(--ow-glass-bg) !important;
    background-color: rgba(255,255,255,.72) !important;
    border: var(--ow-glass-border) !important;
    border-radius: var(--ow-radius-lg) !important;
    padding: 22px 24px !important;
    box-shadow: var(--ow-glass-ring), var(--ow-glass-glow) !important;
    backdrop-filter: var(--ow-glass-blur);
    -webkit-backdrop-filter: var(--ow-glass-blur);
    transition:
        transform var(--ow-dur) var(--ow-ease-hover),
        box-shadow var(--ow-dur) var(--ow-ease-hover);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    margin: 0;
    will-change: transform;
}
.owner-workspace .ow-kpi:hover {
    transform: var(--ow-hover-lift);
    box-shadow: var(--ow-glass-ring), var(--ow-glass-glow-hover) !important;
}

.owner-workspace .ow-kpi__label {
    font-size: 13.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #6b7280;
    line-height: 1.3;
}
.owner-workspace .ow-kpi__value {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .owner-workspace .ow-kpi__value { font-size: 40px; }
}
.owner-workspace .ow-kpi__value .unit,
.owner-workspace .ow-kpi__unit {
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    margin-left: 2px;
}

.owner-workspace .ow-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    margin-top: 2px;
}
.owner-workspace .ow-kpi__delta.ok,
.owner-workspace .ow-kpi__delta--up { color: #08a37a; }
.owner-workspace .ow-kpi__delta.bad,
.owner-workspace .ow-kpi__delta--down { color: #dc2626; }
.owner-workspace .ow-kpi__delta.neutral,
.owner-workspace .ow-kpi__delta--neutral { color: #6b7280; }

.owner-workspace .ow-kpi-grid--admin-fees {
    margin-top: 4px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .owner-workspace .ow-kpi-grid--admin-fees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
 * Right-column stack — mockup fidelity
 * ============================================================ */
.owner-workspace .ow-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.02);
}
.owner-workspace .ow-search svg {
    width: 18px; height: 18px;
    stroke: #94a3b8; stroke-width: 2; fill: none;
    flex-shrink: 0;
}
.owner-workspace .ow-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: 400 14px "DM Sans", system-ui, sans-serif;
    color: #0f172a;
}
.owner-workspace .ow-search input::placeholder { color: #94a3b8; }

.owner-workspace .ow-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    margin-top: 16px;
    position: relative;
}
.owner-workspace .ow-alert__icon {
    width: 20px; height: 20px; flex-shrink: 0; color: #c2410c;
    margin-top: 2px;
}
.owner-workspace .ow-alert__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }
.owner-workspace .ow-alert__body { flex: 1; font-size: 13px; line-height: 1.4; color: #7c2d12; }
.owner-workspace .ow-alert__title { font-weight: 600; margin-bottom: 2px; color: #7c2d12; }
.owner-workspace .ow-alert__cta { color: #c2410c; font-weight: 600; text-decoration: none; }
.owner-workspace .ow-alert__cta:hover { text-decoration: underline; color: #c2410c; }
.owner-workspace .ow-alert__close {
    position: absolute; top: 8px; right: 10px;
    background: transparent; border: 0; cursor: pointer;
    color: #a3a3a3; font-size: 16px; line-height: 1; padding: 4px;
}

/* Weekly total card — pure white, no more heavy mirror-glass */
.owner-workspace .earnings-display {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 16px -8px rgba(15,23,42,.06) !important;
}
.owner-workspace .earnings-display h1 {
    font-size: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #0f172a !important;
    margin: 8px 0 4px !important;
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.owner-workspace .earnings-display h1 .unit {
    font-size: 15px; font-weight: 500; color: #6b7280;
}
.owner-workspace .earnings-display .text-muted { color: #6b7280 !important; font-size: 13px !important; }
.owner-workspace .earnings-display .h5 { font-size: 13.5px !important; font-weight: 500 !important; margin-bottom: 4px !important; }

/* Orders-by-month chart wrapper — minimal, no card chrome */
.owner-workspace .orders-chart {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
    margin-top: 16px !important;
}
.owner-workspace .orders-chart h4 {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 12px !important;
}
/* Was a flat 380px while .ow-barchart was 240px, leaving 140px of empty
   card under the month labels. The bars now fill the box, and the box
   follows the viewport so a till does not get a desktop-tall chart. */
.owner-workspace #orders-chart { height: clamp(220px, 34vh, 320px) !important; }

/* ID pill on recent orders — purple wash (mockup) not green */
.owner-workspace .table td .badge.badge-success {
    background: #eeecff !important;
    color: #4f46e5 !important;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
}
/* "Sur place" / "Livraison" method chip — hairline outline */
.owner-workspace .order-method {
    display: inline-block;
    padding: 5px 14px;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px;
    font-size: 12.5px;
    color: #374151;
    font-weight: 400;
    line-height: 1.2;
}
/* Recent Orders card polish */
.owner-workspace .card {
    border-radius: 16px !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 16px -8px rgba(15,23,42,.06) !important;
}
.owner-workspace .card-header {
    background: transparent !important;
    padding: 20px 22px 10px !important;
    border-bottom: 0 !important;
}
.owner-workspace .card-header h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}
.owner-workspace .table thead th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: transparent !important;
    border-top: 1px solid rgba(15,23,42,.06) !important;
}
.owner-workspace .table tbody tr:last-child td { border-bottom: 0; }

/* "Voir tout" link at top-right of Recent Orders card */
.owner-workspace .card-header .btn-outline-primary {
    background: transparent !important;
    border: 0 !important;
    color: var(--ow-brand-ink, #4f46e5) !important;
    font-weight: 500;
    padding: 4px 8px !important;
    box-shadow: none !important;
}
.owner-workspace .card-header .btn-outline-primary:hover {
    background: color-mix(in srgb, var(--ow-brand, #635bff) 6%, transparent) !important;
    color: var(--ow-brand-hover, #3b32d6) !important;
}

/* ============================================================
 * Sidebar overrides intentionally removed.
 * User preferred the Argon-default sidebar rendering; all
 * refactor energy is now spent on the main content column.
 * ============================================================ */

/* ============================================================
 * Emil final polish — reduced-motion, will-change hints,
 * interruptible transitions, no keyframes on interactive UI.
 * ============================================================ */

/* Toast animation (2FA alert etc.) — enter from below with fade */
.owner-workspace .ow-alert {
    animation: ow-alert-in 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes ow-alert-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Respect prefers-reduced-motion — kill all non-essential motion */
@media (prefers-reduced-motion: reduce) {
    .owner-workspace *,
    .owner-workspace *::before,
    .owner-workspace *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .owner-workspace .btn:hover,
    .owner-workspace .card:hover,
    .owner-workspace .ow-kpi:hover {
        transform: none !important;
    }
}

/* GPU hints where they help most (hover transforms) */
.owner-workspace .btn,
.owner-workspace .ow-kpi,
.owner-workspace .card-stats,
.owner-workspace .earnings-display {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Table-row hover — subtle color-only transition (rows shouldn't lift) */
.owner-workspace .table tbody tr {
    will-change: background;
}

/* ============================================================
 * ★ FINAL NUCLEAR HERO UNIFICATION ★
 *
 * Placed at the END of the file so it wins every specificity tie
 * (later CSS rule beats earlier one at same specificity). Kills:
 *  - Any hover transform/lift/shadow on hero classes
 *  - Any radial-gradient catch-lights left in from earlier rules
 *  - Any border-radius on hero elements
 *  - Any transition/animation on hero background
 *  - Font-family mismatch — forces DM Sans on all hero text
 *
 * If a page still shows a different banner after this, its Blade
 * ships a hero class NOT listed here — grep the DOM and add it.
 * ============================================================ */
.owner-workspace .header,
.owner-workspace header.bg-gradient-primary,
.owner-workspace header.bg-gradient-info,
.owner-workspace .aa-header,
.owner-workspace .sh-hero,
.owner-workspace .shf-header,
.owner-workspace .mtw__header,
.owner-workspace .clients-hero,
.owner-workspace .staff-hero,
.owner-workspace .trs-hero,
.owner-workspace .tr-hero,
.owner-workspace [class$="-hero"] {
    /* One and only banner: flat purple rectangle, uniform padding.
       h1 pinned to TOP so content overlapping up via mt--7 clears it. */
    background: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-attachment: initial !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 20px -8px color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    padding: 40px 24px 128px !important;
    min-height: 258px !important;
    margin: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    transition: none !important;
    transform: none !important;
    animation: none !important;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    overflow: hidden !important;
}
/* Kill hover on every hero variant — banners don't move. */
.owner-workspace .header:hover,
.owner-workspace header.bg-gradient-primary:hover,
.owner-workspace .aa-header:hover,
.owner-workspace .sh-hero:hover,
.owner-workspace .shf-header:hover,
.owner-workspace .mtw__header:hover,
.owner-workspace .clients-hero:hover,
.owner-workspace .staff-hero:hover,
.owner-workspace .trs-hero:hover,
.owner-workspace .tr-hero:hover,
.owner-workspace [class$="-hero"]:hover {
    transform: none !important;
    box-shadow: 0 4px 20px -8px color-mix(in srgb, var(--ow-brand, #635bff) 35%, transparent) !important;
    background: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
}
/* Kill inline background-image on plain .header (profile-cover.jpg) */
.owner-workspace .header[style*="background-image"],
.owner-workspace .header[style*="background:"],
.owner-workspace .header[style*="url("] {
    background: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
    background-image: linear-gradient(135deg, #7c74ff 0%, #635bff 55%, #4c46cc 100%) !important;
}
/* Every text child inside any hero — WHITE, DM Sans, uniform sizing */
.owner-workspace .header h1,
.owner-workspace .header h2,
.owner-workspace .header h3,
.owner-workspace .header h4,
.owner-workspace .header h5,
.owner-workspace .header h6,
.owner-workspace .header p,
.owner-workspace .header span,
.owner-workspace .header a,
.owner-workspace .header .display-1,
.owner-workspace .header .display-2,
.owner-workspace .header .display-3,
.owner-workspace .header .display-4,
.owner-workspace .header .text-white,
.owner-workspace .header .text-light,
.owner-workspace .header .text-muted,
.owner-workspace .header [class*="title"],
.owner-workspace .header [class*="Title"],
.owner-workspace .aa-header h1,
.owner-workspace .aa-header h2,
.owner-workspace .aa-header .aa-title,
.owner-workspace .aa-header .aa-eyebrow,
.owner-workspace .aa-header p,
.owner-workspace .sh-hero h1,
.owner-workspace .sh-hero h2,
.owner-workspace .sh-hero p,
.owner-workspace [class$="-hero"] h1,
.owner-workspace [class$="-hero"] h2,
.owner-workspace [class$="-hero"] h3,
.owner-workspace [class$="-hero"] p {
    color: #ffffff !important;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
    text-transform: none !important;
}
.owner-workspace .header h1,
.owner-workspace .header .display-1,
.owner-workspace .header .display-2,
.owner-workspace .aa-header h1,
.owner-workspace .sh-hero h1,
.owner-workspace [class$="-hero"] h1 {
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.owner-workspace .header p,
.owner-workspace .aa-header p,
.owner-workspace [class$="-hero"] p {
    color: rgba(255,255,255,.85) !important;
    font-weight: 400 !important;
}
/* Kill the mask overlay (Argon's .mask.bg-gradient-default photo mask) */
.owner-workspace .header .mask,
.owner-workspace .header > .mask {
    display: none !important;
}
/* Content container that overlaps up into the banner — Argon .mt--7 */
.owner-workspace .header + .container-fluid.mt--7,
.owner-workspace .header + div .mt--7,
.owner-workspace .aa-header + .container-fluid.mt--7 {
    margin-top: -80px !important;
    position: relative;
    z-index: 2;
}

/* ============================================================
 * .ow wrapper (/restaurants/onboard AI-assisted wizard) —
 * bespoke layout that doesn't use the standard .card.bg-secondary
 * shell. Style it so it LOOKS like the conventional card treatment.
 * The auto-injected banner h1 now has the page title, so hide the
 * redundant .ow__title / .ow__subtitle that used to sit at the top
 * of the bare content area — they were the "text floating around"
 * the user reported.
 * ============================================================ */
.owner-workspace .ow {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
    padding: 24px 28px !important;
    margin: -80px auto 40px !important;
    max-width: 1200px;
    position: relative;
    z-index: 2;
    font-family: "DM Sans", system-ui, sans-serif !important;
}
/* Hide the redundant title + subtitle — banner already shows it.
   Content proceeds directly with the numbered step sections below. */
.owner-workspace .ow > .ow__title,
.owner-workspace .ow > .ow__subtitle {
    display: none !important;
}
/* Each step section — clean separation with a hairline above (except
   the first). Matches the standard .card > .card-header + .card-body
   convention where sections are visually delimited. */
.owner-workspace .ow-section {
    padding: 20px 0 !important;
    border-top: 1px solid rgba(15,23,42,.06) !important;
    margin: 0 !important;
    background: transparent !important;
}
.owner-workspace .ow-section:first-child,
.owner-workspace .ow > .ow-section:first-of-type {
    border-top: 0 !important;
    padding-top: 4px !important;
}
.owner-workspace .ow-step-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.owner-workspace .ow-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ow-brand, #635bff) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}
.owner-workspace .ow-step-head h2 {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ow-ink, #0f172a) !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.01em !important;
}
.owner-workspace .ow-step-head > div > p {
    color: var(--ow-muted, #6b7280) !important;
    font-size: 13.5px !important;
    margin: 0 !important;
}
/* Form grid + fields */
.owner-workspace .ow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.owner-workspace .ow-field--wide { grid-column: 1 / -1; }
.owner-workspace .ow-field label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ow-ink, #0f172a) !important;
    margin-bottom: 6px !important;
}
.owner-workspace .ow-field input,
.owner-workspace .ow-field select,
.owner-workspace .ow-field textarea {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid var(--ow-line, #e6e9eb) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 14px !important;
    color: var(--ow-ink, #0f172a) !important;
    transition: border-color 160ms, box-shadow 160ms;
}
.owner-workspace .ow-field input:focus,
.owner-workspace .ow-field select:focus,
.owner-workspace .ow-field textarea:focus {
    border-color: var(--ow-brand, #635bff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent) !important;
    outline: 0 !important;
}
/* Section internals: preview tables, chips, add-item buttons */
.owner-workspace .ow-cat {
    border: 1px solid var(--ow-line-soft, #f0f2f4);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    background: #fafbfd;
}
.owner-workspace .ow-cat__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.owner-workspace .ow-items {
    width: 100%;
    font-size: 13.5px;
}
.owner-workspace .ow-items th {
    text-align: left;
    padding: 8px 10px;
    color: var(--ow-muted, #6b7280);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--ow-line-soft);
}
.owner-workspace .ow-items td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ow-line-soft);
}
.owner-workspace .ow-in {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13.5px;
}
.owner-workspace .ow-in:focus {
    background: #ffffff;
    border-color: var(--ow-brand, #635bff);
    outline: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ow-brand, #635bff) 15%, transparent);
}
.owner-workspace .ow-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.owner-workspace .ow-actions__hint {
    font-size: 12px;
    color: var(--ow-muted, #6b7280);
}
.owner-workspace .ow-paste label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ow-ink);
    margin-bottom: 6px;
}
.owner-workspace .ow-paste textarea {
    width: 100%;
    background: #fafbfd;
    border: 1px solid var(--ow-line);
    border-radius: 10px;
    padding: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--ow-ink);
    resize: vertical;
}
.owner-workspace .ow-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 999px;
    margin-top: 8px;
}
.owner-workspace .ow-status--idle { background: rgba(15,23,42,.06); color: var(--ow-muted); }
.owner-workspace .ow-status--ok { background: rgba(16,185,129,.14); color: #047857; }
.owner-workspace .ow-status--err { background: rgba(220,38,38,.10); color: #b91c1c; }
.owner-workspace .ow-status--pending { background: color-mix(in srgb, var(--ow-brand, #635bff) 10%, transparent); color: var(--ow-brand-ink); }

/* ============================================================
 * /apps card-header title clipping — Argon .card.bg-secondary
 * with mt--7 was raising the "Modules" h3 into the h1 banner
 * because banner h1 was center-aligned. Now banner h1 sits at
 * TOP (align-items: flex-start above), so card overlapping into
 * the BOTTOM 60% of the banner clears the h1 cleanly.
 *
 * Also ensure the .card-header h3 sits inside the visible area,
 * not clipped by the banner overlap.
 * ============================================================ */
.owner-workspace .card.bg-secondary .card-header {
    padding-top: 24px !important;
    padding-bottom: 16px !important;
}
.owner-workspace .card.bg-secondary .card-header h3 {
    margin-top: 0 !important;
    color: var(--ow-ink) !important;
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* ============================================================
 * Mobile parity ≤640px — atom-kit surfaces
 *
 * Desktop-first restructuring across this session (banner canonical,
 * .col-8/.col-4 collapsed to flex-between, card-headers restructured)
 * risks overflow at narrow viewports. Scope every override behind
 * .owner-workspace so nothing bleeds outside the owner console; use
 * @media (max-width: 640px) so desktop is never touched.
 * ============================================================ */
@media (max-width: 640px) {
    /* Banner title — display-2 at 36px is fine for short words but
       long titles ("Subscription plans", "Manage restaurants") crowd
       a 343px content column. Scale to 28px on phones. */
    .owner-workspace .display-2 { font-size: 28px !important; line-height: 1.2 !important; }
    .owner-workspace .display-1 { font-size: 34px !important; line-height: 1.15 !important; }

    /* Canonical purple banner — pb-8/pt-md-8 (96px) is generous on
       phone; reclaim ~24px so the KPI row starts higher without
       destroying the shape. Keep pt-5 (48px) intact for status-bar. */
    .owner-workspace .header.bg-gradient-primary.pb-8 { padding-bottom: 5rem !important; }

    /* .aa-stat KPI card — on desktop the value (34px) sits opposite a
       44×44 icon at flex-end. On 375px, a long value like "€ 12,345.67"
       collides with the icon. Allow wrap + shrink value slightly so
       icon can drop to a new row rather than crush the number. */
    .owner-workspace .aa-stat,
    .aa-stat {
        padding: 20px 20px !important;
        min-height: 0 !important;
        flex-wrap: wrap;
        gap: 12px;
    }
    .owner-workspace .aa-stat__value,
    .aa-stat__value { font-size: 28px !important; }
    .owner-workspace .aa-stat__icon,
    .aa-stat__icon { width: 40px; height: 40px; font-size: 16px; }

    /* Card chrome — 20px 24px is default; recover 8px per side so
       forms + table cells fit without horizontal scroll. */
    .owner-workspace .card-header { padding: 16px 20px; }
    .owner-workspace .card-body { padding: 16px 20px; }

    /* Module detail toggle pill (.pd-status-toggle) — 10px 18px pill
       + 44×44 icon on the banner action strip can exceed the row on
       375px. Tighten padding so the pill fits on one line. */
    .owner-workspace .pd-status-toggle,
    .owner-workspace .pd-back-link,
    .owner-workspace .shf-preset {
        padding: 8px 14px !important;
        font-size: 13px;
    }

    /* Card-header action strips — general/index.blade.php already
       has flex-wrap; add gap and full-width alignment so the wrapped
       row doesn't have odd right-drift. Applies to any card-header
       action row across the owner console. */
    .owner-workspace .card-header .d-flex.justify-content-end,
    .owner-workspace .card-header .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }
    .owner-workspace .card-header .d-flex.justify-content-between > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Order detail card-header — the timestamp title
       ("#123 - Sun Sep 20 22:37") is long. Wrap gracefully. */
    .owner-workspace .card-header h3 {
        font-size: 15px;
        line-height: 1.35;
        word-break: break-word;
    }

    /* Table-responsive is already wrapping tables; reinforce that
       tables never break the viewport. */
    .owner-workspace .table-responsive { -webkit-overflow-scrolling: touch; }

    /* .aa-header (admin analytics header) uses same shape; align. */
    .owner-workspace .aa-header,
    .aa-header { padding: 32px 20px !important; }
    .owner-workspace .aa-header h1,
    .aa-header h1 { font-size: 28px !important; }
}

/* ============================================================
 * ─── Accessibility (WCAG 2.2 AA) ────────────────────────────
 *
 * Strong dual-ring focus indicator, reduced-motion coverage
 * extensions for custom pills/toggles, and skip-link styling.
 * All additions live behind .owner-workspace so nothing bleeds
 * outside the owner console (except .ow-skip-link, which lives
 * at body root so it works for guests too).
 * ============================================================ */

/* Dual-ring focus indicator — 2px white inner + 2px purple outer.
   Works on any background: white ring gives 4.5:1+ contrast on the
   purple banner, purple ring gives 5:1 on white surfaces. Later in
   the file so it beats the earlier softer .btn:focus-visible ring
   at same specificity. */
.owner-workspace a:focus-visible,
.owner-workspace .btn:focus-visible,
.owner-workspace button:focus-visible,
.owner-workspace input:focus-visible,
.owner-workspace select:focus-visible,
.owner-workspace textarea:focus-visible,
.owner-workspace .pd-status-toggle:focus-visible,
.owner-workspace .pd-back-link:focus-visible,
.owner-workspace .shf-preset:focus-visible,
.owner-workspace .nav-link:focus-visible,
.owner-workspace .nav-pills .nav-link:focus-visible,
.owner-workspace .dropdown-item:focus-visible,
.owner-workspace [role="button"]:focus-visible,
.owner-workspace [tabindex]:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px #635bff !important;
}

/* On the purple banner, invert: light halo outside, dark offset
   inside so the ring remains visible against the gradient. */
.owner-workspace .header.bg-gradient-primary a:focus-visible,
.owner-workspace .header.bg-gradient-primary .btn:focus-visible,
.owner-workspace .header.bg-gradient-primary button:focus-visible {
    box-shadow:
        0 0 0 2px rgba(15, 23, 42, .55),
        0 0 0 4px #ffffff !important;
}

/* Skip-to-main-content link — visible on focus, off-screen otherwise.
   Lives as the first tabbable element in layouts/app.blade.php so
   keyboard users can jump past the sidebar + navbar in one Tab. */
.ow-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 10000;
    background: #635bff;
    color: #ffffff !important;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent);
    transition: top 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* On the diner's pages the link keeps its behaviour and loses the
   console brand — the storefront's near-black, which is what every other
   control on those pages uses. */
.ow-skip-link--client {
    background: #0b0d12;
    box-shadow: 0 4px 12px rgba(11, 13, 18, .30);
    font-family: inherit;
}

.ow-skip-link:focus,
.ow-skip-link:focus-visible {
    top: 8px;
    color: #ffffff !important;
    text-decoration: none;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Reduced-motion extension — the earlier block covers .btn/.card/
   .ow-kpi hover transforms; add every custom pill/toggle transform
   introduced by this session's polish (translateY -1px hovers). */
@media (prefers-reduced-motion: reduce) {
    .owner-workspace .pd-status-toggle:hover,
    .owner-workspace .pd-back-link:hover,
    .owner-workspace .shf-preset:hover,
    .owner-workspace .aa-stat:hover,
    .owner-workspace .aa-plans__row:hover,
    .owner-workspace .aa-chart__col:hover,
    .ow-skip-link {
        transform: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* .sr-only — Bootstrap 4 ships one but we reinforce it under our
   scope so text labels next to decorative dots/icons stay hidden
   from sighted users but announced by screen readers. */
.owner-workspace .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ============================================================
 * NUCLEO (.ni) ICONS — stop the 24x24 SVG being cropped.
 *
 * nucleo.css is not loaded; hero.css substitutes every .ni-*
 * class with a background SVG and a 24x24 box, but sets no
 * background-size. All the legacy CSS still sizes .ni as if it
 * were a font glyph (font-size, line-height, ch-ish widths), so
 * any box under 24x24 silently clipped the artwork:
 *   sidebar nav links   32.4 x 21.6  -> 2.4px off the bottom
 *   .plm-group-header   16.2 x 21.6  -> 7.8px off the right
 *   .plm-module rows    18   x 21.6  -> 6px off the right
 * 26 of the 43 icons on /apps were cut.
 *
 * Unscoped on purpose: the sidebar renders outside
 * .owner-workspace, and it is the worst affected surface.
 * `contain` makes the SVG fit whatever box the legacy rules
 * hand it, so no future size override can crop it again.
 * ============================================================ */
.ni {
    background-size: contain;
    background-position: center;
}

/* ============================================================
 * Payment badge in the orders list.
 *
 * The list could be FILTERED by payment status but never showed it, so a
 * cashier looking for the table that still owes money had to open each
 * order in turn. Unpaid is the one being scanned for, so it is the only
 * one that carries colour weight; paid recedes.
 * ============================================================ */
.owner-workspace .orders-pay {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 10px;
}
.owner-workspace .orders-pay--paid   { background: #e8f7ef; color: #0f7a46; }
.owner-workspace .orders-pay--unpaid { background: #fff4e5; color: #b45309; }
.owner-workspace .orders-pay--void   { background: #f1f3f5; color: #6b7280; }

/* ============================================================
 * .ow-confirm — the console's own "are you sure".
 *
 * Replaces window.confirm() on the order actions, which rendered the
 * browser's own grey system box: wrong typeface, wrong buttons, and on
 * the Sunmi an Android alert that looks nothing like the till it
 * interrupts.
 *
 * Colours are LITERAL, not var(--ow-*). The dialog is appended to
 * <body>, outside .owner-workspace, and custom properties do not
 * cascade to an element that sits above the one declaring them — the
 * documented trap that made the toast pills invisible.
 * ============================================================ */
.ow-confirm {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .45);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ow-confirm[hidden] { display: none; }

.ow-confirm__card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
    padding: 26px 26px 20px;
    max-width: 420px;
    width: 100%;
    text-align: left;
}
.ow-confirm__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: #0f172a;
    margin: 0 0 20px;
}
.ow-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.ow-confirm__btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.ow-confirm__btn--cancel {
    background: #fff;
    border-color: #e6e9eb;
    color: #425466;
}
.ow-confirm__btn--cancel:hover { background: #f7f8fa; }

.ow-confirm__btn--ok {
    background: #635bff;
    color: #fff;
}
.ow-confirm__btn--ok:hover { background: #5248f5; }

/* Refunds move real money back; they do not get the same button as
   "this was paid in cash". */
.ow-confirm__btn--danger { background: #b91c1c; }
.ow-confirm__btn--danger:hover { background: #a11717; }