/* =============================================================================
 * Copyright (c) 2025-2026 Custom Launch Ltd. All Rights Reserved.
 * Website  : https://customlaunch.co.uk
 *
 * PROPRIETARY & CONFIDENTIAL SOFTWARE
 * Developed by Aadarsh Kachhwaha for Custom Launch Ltd.
 *
 * NOTICE: This source code is the exclusive intellectual property of Custom
 * Launch Ltd. Any unauthorised copying, modification, distribution, reverse
 * engineering, or use of this software — in whole or in part, by any means or
 * medium — without prior written permission from Custom Launch Ltd is strictly
 * prohibited and may result in civil and/or criminal proceedings.
 * ============================================================================= */

/* Fallback values for the --cl-* custom properties. Every theme.css file
 * under assets/themes/<name>/ only overrides a subset of these (see
 * layout/header.php for how Fleet Control Plane / branding overrides
 * layer on top) — these fallbacks are what the "default" theme actually
 * renders with. */
:root {
    --cl-primary: #2563eb;
    --cl-on-primary: #ffffff;
    --cl-accent: #2563eb;
    --cl-bg: #f9fafb;
    --cl-text: #1f2937;
    --cl-secondary: #ffffff;
    --cl-surface: #ffffff;
    --cl-border: #e5e7eb;
    --cl-danger: #dc2626;
    --cl-success: #16a34a;
    --cl-hover-tint: rgba(127, 127, 127, 0.1);
    --cl-font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cl-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cl-heading-weight: 600;
    --cl-radius: 0.85rem;
    --cl-radius-sm: 0.55rem;
    --cl-border-width: 1px;
    --cl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --cl-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --cl-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--cl-font-body);
    color: var(--cl-text);
    background: var(--cl-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* A very faint ambient wash behind everything — depth without competing
 * with content. Guarded behind @supports so browsers without color-mix()
 * just keep the flat --cl-bg above instead of losing the background
 * entirely (an unsupported function invalidates the whole declaration,
 * not just that one layer). Reads as near-invisible on light themes and
 * a subtle glow on dark ones. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    body {
        background:
            radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--cl-primary) 7%, transparent), transparent 55%),
            radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--cl-accent) 5%, transparent), transparent 50%),
            var(--cl-bg);
        background-attachment: fixed;
    }
}

a {
    color: var(--cl-primary);
}

h1, h2, h3 {
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* ── App shell (sidebar + topbar, logged-in pages) ─────────────────── */

.cl-shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.cl-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--cl-surface, var(--cl-secondary));
    border-right: var(--cl-border-width, 1px) solid var(--cl-border);
    box-shadow: var(--cl-shadow-sm);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    position: relative;
    z-index: 1;
}

.cl-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    font-size: 1.15rem;
    text-decoration: none;
    color: inherit;
    padding: 0 0.5rem 1.5rem;
}

.cl-sidebar__logo {
    height: 44px;
    max-width: 100%;
    width: auto;
    border-radius: 0.25rem;
}

.cl-sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cl-sidebar__section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    font-weight: 700;
    padding: 0.5rem 0.75rem 0.35rem;
}

.cl-sidebar__footer {
    border-top: var(--cl-border-width, 1px) solid var(--cl-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.cl-sidebar__account {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
}

.cl-sidebar__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--cl-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.cl-sidebar__account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cl-sidebar__account-name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-sidebar__account-role {
    font-size: 0.75rem;
    opacity: 0.6;
}

.cl-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.88rem;
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
    border-radius: var(--cl-radius-sm);
}

.cl-sidebar__logout:hover {
    background: var(--cl-hover-tint);
    opacity: 1;
}

.cl-sidebar__collapse-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    margin-top: 0.15rem;
    background: transparent;
    border: none;
    border-radius: var(--cl-radius-sm);
    color: inherit;
    opacity: 0.7;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.cl-sidebar__collapse-btn:hover {
    background: var(--cl-hover-tint);
    opacity: 1;
}

.cl-sidebar__collapse-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}

.cl-shell__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cl-topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    background: var(--cl-surface, var(--cl-secondary));
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
    box-shadow: var(--cl-shadow-sm);
    position: relative;
    gap: 1rem;
    flex-wrap: wrap;
}

.cl-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--cl-primary), var(--cl-accent), transparent);
    opacity: 0.6;
}

.cl-topbar__title {
    margin: 0;
    font-size: 1.4rem;
}

.cl-topbar__date {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    opacity: 0.6;
}

.cl-topbar__clock {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    opacity: 0.7;
}

.cl-topbar__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cl-topbar__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--cl-text);
    cursor: pointer;
    transition: background 0.15s ease;
}

.cl-topbar__icon-btn:hover {
    background: var(--cl-hover-tint);
}

/* ── Notification bell + dropdown ────────────────────────────────────── */

.cl-notif-bell {
    position: relative;
}

.cl-notif-bell__badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    background: var(--cl-danger);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--cl-secondary);
}

.cl-notif-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 2rem);
    background: var(--cl-secondary);
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    box-shadow: var(--cl-shadow-lg);
    z-index: 100;
    overflow: hidden;
}

.cl-notif-dropdown[hidden] {
    display: none;
}

.cl-notif-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
    font-weight: 700;
    font-size: 0.85rem;
}

.cl-btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--cl-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cl-notif-dropdown__list {
    max-height: 22rem;
    overflow-y: auto;
}

.cl-notif-dropdown__empty {
    padding: 1.2rem;
    text-align: center;
    color: var(--cl-text);
    opacity: 0.55;
    font-size: 0.82rem;
}

.cl-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-notif-item:last-child {
    border-bottom: none;
}

.cl-notif-item__body {
    flex: 1;
    min-width: 0;
}

.cl-notif-item__title {
    font-size: 0.82rem;
    font-weight: 600;
    border-left: 3px solid var(--cl-primary);
    padding-left: 0.4rem;
}

.cl-notif-item__msg {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.15rem;
    padding-left: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-notif-item__time {
    font-size: 0.68rem;
    opacity: 0.5;
    margin-top: 0.2rem;
    padding-left: 0.4rem;
}

.cl-notif-item__dismiss {
    background: none;
    border: none;
    color: var(--cl-text);
    opacity: 0.5;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.cl-notif-item__dismiss:hover {
    opacity: 1;
    color: var(--cl-danger);
}

/* ── Guest header (login page only — no sidebar/topbar chrome) ─────── */

@property --cl-prism-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.cl-guest-header {
    padding: 2.5rem 1.5rem 1.25rem;
    display: flex;
    justify-content: center;
}

.cl-guest-header__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    font-size: 1.1rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    isolation: isolate;
}

/* A soft, blurred rainbow halo drifting behind the logo badge — the
 * "prism" glow. Sits two layers back (z-index -2) so it never competes
 * with the crisp gradient ring in ::before. */
.cl-guest-header__brand::after {
    content: "";
    position: absolute;
    inset: -32px;
    z-index: -2;
    border-radius: 999px;
    background: conic-gradient(from var(--cl-prism-angle), #ff5f6d, #ffc371, #47e6b1, #4facfe, #a06bff, #ff5f6d);
    filter: blur(32px);
    opacity: 0.55;
}

/* A crisp 2.5px rainbow ring traced around the badge edge via mask
 * subtraction (content-box knocked out of the padding-box), giving the
 * "prism" refraction look without touching the badge's own background. */
.cl-guest-header__brand::before {
    content: "";
    position: absolute;
    inset: -2.5px;
    z-index: -1;
    border-radius: inherit;
    padding: 2.5px;
    background: conic-gradient(from var(--cl-prism-angle), #ff5f6d, #ffc371, #47e6b1, #4facfe, #a06bff, #ff5f6d);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .cl-guest-header__brand {
        background: color-mix(in srgb, var(--cl-surface, #ffffff) 65%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: var(--cl-shadow-md);
    }
}

html.cl-animations-enabled .cl-guest-header__brand::before,
html.cl-animations-enabled .cl-guest-header__brand::after {
    animation: cl-prism-spin 10s linear infinite;
}

@keyframes cl-prism-spin {
    to { --cl-prism-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-guest-header__brand::before,
    .cl-guest-header__brand::after {
        animation: none;
    }
}

.cl-guest-header__logo {
    height: 48px;
    width: auto;
    border-radius: 0.35rem;
    display: block;
}

/* ── Guest screen animated background ──────────────────────────────────
 * No video asset — a couple of large, blurred colour blobs drift slowly
 * via keyframes, plus a soft highlight that follows the pointer (JS in
 * footer.php just writes --cl-mx/--cl-my; this is all the actual visual
 * work). Sits behind everything at z-index -1, fixed so it doesn't
 * scroll with the (short) guest pages. prefers-reduced-motion stops the
 * drift/follow but leaves the static blobs in place. */
.cl-guest-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background-image: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 80px,
        rgba(255, 95, 109, 0.07) 80px,
        rgba(255, 195, 113, 0.07) 102px,
        rgba(71, 230, 177, 0.07) 124px,
        rgba(79, 172, 254, 0.07) 146px,
        rgba(160, 107, 255, 0.07) 168px,
        transparent 190px,
        transparent 260px
    );
    background-size: 200% 200%;
    animation: cl-prism-sheen 40s ease-in-out infinite;
}

.cl-guest-bg::before,
.cl-guest-bg::after {
    content: "";
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}

.cl-guest-bg::before {
    top: -22vmax;
    left: -16vmax;
    background: radial-gradient(circle, var(--cl-primary), transparent 70%);
    animation: cl-blob-drift-a 24s ease-in-out infinite;
}

.cl-guest-bg::after {
    bottom: -26vmax;
    right: -16vmax;
    background: radial-gradient(circle, var(--cl-accent), transparent 70%);
    animation: cl-blob-drift-b 28s ease-in-out infinite;
}

.cl-guest-bg__pointer {
    position: absolute;
    inset: 0;
}

@keyframes cl-prism-sheen {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .cl-guest-bg__pointer {
        background: radial-gradient(
            600px circle at var(--cl-mx, 50%) var(--cl-my, 40%),
            color-mix(in srgb, var(--cl-accent) 14%, transparent),
            transparent 60%
        );
    }
}

@keyframes cl-blob-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8vmax, 6vmax) scale(1.15); }
}

@keyframes cl-blob-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vmax, -8vmax) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-guest-bg,
    .cl-guest-bg::before,
    .cl-guest-bg::after {
        animation: none;
    }
    .cl-guest-bg__pointer {
        display: none;
    }
}

/* ── Nav links (used inside .cl-sidebar__nav) ──────────────────────── */

.cl-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--cl-radius-sm);
    color: inherit;
    text-decoration: none;
    font-size: 0.92rem;
    opacity: 0.85;
}

.cl-nav-link:hover {
    background: var(--cl-hover-tint);
    text-decoration: none;
    opacity: 1;
}

.cl-nav-link--active {
    background: var(--cl-hover-tint);
    color: var(--cl-primary);
    opacity: 1;
    font-weight: 600;
}

.cl-nav-link--active::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--cl-primary), var(--cl-accent));
}

.cl-nav-link__icon {
    font-size: 1.05rem;
    line-height: 1;
}

.cl-nav-badge {
    margin-left: auto;
    background: var(--cl-danger);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    min-width: 1.1rem;
    text-align: center;
}

html.cl-sidebar-collapsed .cl-nav-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    margin-left: 0;
    padding: 0.1rem 0.3rem;
    font-size: 0.6rem;
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.cl-main {
    flex: 1;
    padding: 2rem;
}

.cl-main--guest {
    display: flex;
    padding: 0 1.5rem;
}

.cl-footer {
    padding: 1rem 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
}

.cl-footer p {
    margin: 0.15rem 0;
}

.cl-dashboard-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* ── Cards ──────────────────────────────────────────────────────────── */

.cl-card {
    background: var(--cl-surface, var(--cl-secondary, #ffffff));
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-md);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.cl-card h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

/* ── Stat tiles ─────────────────────────────────────────────────────── */

.cl-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
}

.cl-stat-tile {
    background: var(--cl-surface, var(--cl-secondary, #ffffff));
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-sm);
    padding: 1rem 1.25rem;
}

.cl-stat-tile__value {
    font-family: var(--cl-font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cl-primary);
}

.cl-stat-tile__label {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* ── Tabs (admin/settings.php) ──────────────────────────────────────── */

.cl-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cl-tab {
    padding: 0.65rem 1rem;
    text-decoration: none;
    color: inherit;
    opacity: 0.65;
    font-size: 0.92rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.cl-tab:hover {
    opacity: 1;
}

.cl-tab--active {
    opacity: 1;
    color: var(--cl-primary);
    border-bottom-color: var(--cl-primary);
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.cl-btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--cl-radius-sm);
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));
    color: var(--cl-on-primary, #ffffff);
    box-shadow: var(--cl-shadow-sm);
}

.cl-btn:hover {
    filter: brightness(1.05);
}

.cl-btn--secondary {
    background: transparent;
    border-color: var(--cl-border);
    color: var(--cl-text);
    box-shadow: none;
}

.cl-btn--danger {
    background: var(--cl-danger);
    color: #ffffff;
}

.cl-btn--sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
}

.cl-btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

button {
    font-family: inherit;
}

/* ── Forms ──────────────────────────────────────────────────────────── */

.cl-form-group {
    margin-bottom: 1rem;
}

.cl-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.cl-form-group input[type="text"],
.cl-form-group input[type="email"],
.cl-form-group input[type="password"],
.cl-form-group input[type="number"],
.cl-form-group input[type="date"],
.cl-form-group textarea,
.cl-form-group select {
    width: 100%;
    max-width: 420px;
    padding: 0.5rem 0.65rem;
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--cl-surface, var(--cl-secondary, #fff));
    color: var(--cl-text);
    color-scheme: light dark;
}

.cl-form-group input[type="color"] {
    width: 3.5rem;
    height: 2.25rem;
    padding: 0.15rem;
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
}

.cl-form-group input:focus,
.cl-form-group textarea:focus,
.cl-form-group select:focus {
    outline: 2px solid var(--cl-accent);
    outline-offset: 1px;
}

.cl-form-group--checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}

.cl-form-hint {
    font-size: 0.8rem;
    opacity: 0.65;
    margin: 0.25rem 0 0;
}

.cl-form-error {
    color: var(--cl-danger);
}

/* ── Alerts ─────────────────────────────────────────────────────────── */

.cl-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--cl-radius-sm);
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.cl-alert--success {
    background: rgba(22, 163, 74, 0.1);
    color: var(--cl-success);
    border: 1px solid rgba(22, 163, 74, 0.3);
}

.cl-alert--error {
    background: rgba(220, 38, 38, 0.1);
    color: var(--cl-danger);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* ── Tables ─────────────────────────────────────────────────────────── */

.cl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cl-table th,
.cl-table td {
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
}

.cl-table__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Badges ─────────────────────────────────────────────────────────── */

.cl-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.06);
}

.cl-badge--admin {
    background: rgba(37, 99, 235, 0.12);
    color: var(--cl-primary);
}

.cl-badge--warn {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.cl-badge--danger {
    background: rgba(220, 38, 38, 0.12);
    color: var(--cl-danger);
}

/* ── Lists ──────────────────────────────────────────────────────────── */

.cl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cl-list li {
    padding: 0.35rem 0;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-list li:last-child {
    border-bottom: none;
}

.cl-list--links a {
    text-decoration: none;
}

.cl-list--links a:hover {
    text-decoration: underline;
}

/* ── Feature toggle switches (admin/settings.php) ──────────────────── */

.cl-feature-toggle-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cl-feature-toggle-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-feature-toggle-list li:last-child {
    border-bottom: none;
}

.cl-feature-toggle-list__label {
    font-weight: 500;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cl-feature-toggle-list__key {
    font-weight: normal;
    font-size: 0.78rem;
    opacity: 0.55;
}

.cl-switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.4rem;
}

.cl-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cl-switch__track {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.cl-switch__track::before {
    content: "";
    position: absolute;
    height: 1.1rem;
    width: 1.1rem;
    left: 0.15rem;
    top: 0.15rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.cl-switch input:checked + .cl-switch__track {
    background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));
}

.cl-switch input:checked + .cl-switch__track::before {
    transform: translateX(1.1rem);
}

/* ── Login shell ────────────────────────────────────────────────────── */

.cl-auth-shell {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.cl-auth-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--cl-surface, var(--cl-secondary, #ffffff));
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    padding: 2rem;
    box-shadow: var(--cl-shadow-lg);
    overflow: hidden;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .cl-auth-card {
        box-shadow: var(--cl-shadow-lg), 0 30px 60px -30px color-mix(in srgb, var(--cl-primary) 45%, transparent);
    }
}

.cl-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cl-primary), var(--cl-accent));
}

.cl-auth-card__title {
    margin: 0 0 0.25rem;
    text-align: center;
    color: var(--cl-primary);
}

.cl-auth-card__subtitle {
    margin: 0 0 1.5rem;
    text-align: center;
    opacity: 0.65;
    font-size: 0.9rem;
}

.cl-login-form .cl-form-group input {
    max-width: none;
}

/* ── Profile ────────────────────────────────────────────────────────── */

.cl-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

/* ── Notifications ──────────────────────────────────────────────────── */

.cl-notification__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.cl-notification__header h2 {
    margin: 0;
}

.cl-notification--unread {
    border-left: 3px solid var(--cl-primary);
}

/* ── Survey rating questions ────────────────────────────────────────── */

.cl-rating-group {
    display: flex;
    gap: 0.5rem;
}

.cl-rating-option {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    cursor: pointer;
    font-weight: 600;
}

.cl-rating-option input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.cl-rating-option__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cl-radius-sm);
}

/* Same input:checked + sibling pattern as .cl-switch above — broader
 * browser support than :has(), and this hides the native radio via
 * opacity so there'd be no fallback indicator without it. */
.cl-rating-option input:checked + .cl-rating-option__value {
    background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));
    color: var(--cl-on-primary, #ffffff);
}

/* ── Analytics bar chart (plain CSS, no chart library) ─────────────── */

.cl-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 160px;
}

.cl-bar-chart__bar {
    flex: 1;
    min-height: 4px;
    background: linear-gradient(180deg, var(--cl-accent), var(--cl-primary));
    border-radius: 0.25rem 0.25rem 0 0;
}

.cl-bar-chart__labels {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.cl-bar-chart__labels span {
    flex: 1;
    text-align: center;
    font-size: 0.68rem;
    opacity: 0.55;
}

/* ── Responsive: collapse the sidebar to a top strip on narrow screens ── */

@media (max-width: 768px) {
    .cl-shell {
        flex-direction: column;
    }

    .cl-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-right: none;
        border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
        padding: 0.75rem 1rem;
    }

    .cl-sidebar__brand {
        padding: 0;
        margin-right: auto;
    }

    .cl-sidebar__nav {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        order: 3;
        margin-top: 0.5rem;
    }

    .cl-sidebar__section-label {
        display: none;
    }

    .cl-sidebar__footer {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        order: 2;
    }

    .cl-sidebar__account {
        margin-bottom: 0;
    }

    .cl-topbar {
        padding: 1rem 1.25rem;
    }

    .cl-main {
        padding: 1.25rem;
    }

    /* Collapsing to icon-only doesn't make sense once the sidebar is
     * already a horizontal top strip. */
    .cl-sidebar__collapse-btn {
        display: none;
    }
}

/* ── Sidebar collapse (desktop) ─────────────────────────────────────── */

html.cl-sidebar-collapsed .cl-sidebar {
    width: 76px;
}

html.cl-sidebar-collapsed .cl-sidebar__brand span,
html.cl-sidebar-collapsed .cl-sidebar__section-label,
html.cl-sidebar-collapsed .cl-nav-link__label,
html.cl-sidebar-collapsed .cl-sidebar__account-info,
html.cl-sidebar-collapsed .cl-sidebar__logout-label,
html.cl-sidebar-collapsed .cl-sidebar__collapse-label {
    display: none;
}

html.cl-sidebar-collapsed .cl-sidebar__brand,
html.cl-sidebar-collapsed .cl-nav-link,
html.cl-sidebar-collapsed .cl-sidebar__account,
html.cl-sidebar-collapsed .cl-sidebar__logout,
html.cl-sidebar-collapsed .cl-sidebar__collapse-btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

html.cl-sidebar-collapsed .cl-sidebar__collapse-icon {
    transform: rotate(180deg);
}

/* ── Logo preview (Settings > General) ─────────────────────────────── */

.cl-logo-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cl-logo-preview__img {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 0.25rem;
    background: #ffffff;
}

/* ── Animation feature (features/animation) ─────────────────────────
 * Every rule in this section is scoped under html.cl-animations-enabled
 * — layout/header.php only adds that class when the "animation" feature
 * flag is on (see $cl_animations_enabled), so turning the feature off
 * from Settings > Features removes all of this in one place, leaving
 * every element exactly where it lands with no transition at all.
 * prefers-reduced-motion is honoured regardless of the flag. */

html.cl-animations-enabled .cl-sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html.cl-animations-enabled .cl-sidebar__collapse-icon {
    transition: transform 0.3s ease;
}

html.cl-animations-enabled .cl-nav-link {
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

html.cl-animations-enabled .cl-nav-link:hover {
    transform: translateX(3px);
}

html.cl-animations-enabled .cl-nav-link--active::before {
    animation: cl-glow-pulse 2.4s ease-in-out infinite;
}

html.cl-animations-enabled .cl-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

html.cl-animations-enabled .cl-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--cl-shadow-md);
}

html.cl-animations-enabled .cl-btn:active {
    transform: translateY(0);
}

html.cl-animations-enabled .cl-switch__track,
html.cl-animations-enabled .cl-switch__track::before {
    transition: background 0.2s ease, transform 0.2s ease;
}

html.cl-animations-enabled .cl-tab {
    transition: color 0.15s ease, border-color 0.15s ease;
}

html.cl-animations-enabled .cl-card,
html.cl-animations-enabled .cl-stat-tile,
html.cl-animations-enabled .cl-auth-card {
    animation: cl-fade-in-up 0.4s ease both;
}

html.cl-animations-enabled .cl-alert {
    animation: cl-fade-in-up 0.3s ease both;
}

html.cl-animations-enabled .cl-stat-grid .cl-stat-tile:nth-child(1) { animation-delay: 0s; }
html.cl-animations-enabled .cl-stat-grid .cl-stat-tile:nth-child(2) { animation-delay: 0.05s; }
html.cl-animations-enabled .cl-stat-grid .cl-stat-tile:nth-child(3) { animation-delay: 0.1s; }
html.cl-animations-enabled .cl-stat-grid .cl-stat-tile:nth-child(4) { animation-delay: 0.15s; }

html.cl-animations-enabled .cl-dashboard-columns .cl-card:nth-child(1) { animation-delay: 0.1s; }
html.cl-animations-enabled .cl-dashboard-columns .cl-card:nth-child(2) { animation-delay: 0.15s; }
html.cl-animations-enabled .cl-dashboard-columns .cl-card:nth-child(3) { animation-delay: 0.2s; }

@keyframes cl-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cl-glow-pulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.cl-animations-enabled * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Deploy output (Settings > Deploy) ──────────────────────────────── */

.cl-deploy-output {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--cl-radius-sm);
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: 240px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Theme picker (Settings > General > Theme) ──────────────────────── */

.cl-theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.cl-theme-option {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    border: 2px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-theme-option:hover {
    border-color: var(--cl-accent);
}

.cl-theme-option--active {
    border-color: var(--cl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-accent) 20%, transparent);
}

.cl-theme-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cl-theme-option__swatches {
    display: flex;
    gap: 0.4rem;
}

.cl-theme-option__swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    flex-shrink: 0;
}

.cl-theme-option__name {
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    font-size: 0.95rem;
}

.cl-theme-option__desc {
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.4;
}

/* Live preview card — its own scoped set of --cl-* vars is written by
 * JS on selection (see admin/settings.php), so everything inside just
 * reads var(--cl-*) like the rest of the app and re-skins instantly,
 * with zero network round-trip and zero effect on the surrounding page. */
.cl-theme-preview {
    background: var(--cl-bg);
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cl-theme-preview__bar {
    display: flex;
    gap: 0.35rem;
    padding: 0.6rem 0.9rem;
    background: var(--cl-secondary);
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-theme-preview__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--cl-border);
}

.cl-theme-preview__body {
    padding: 1.5rem;
}

.cl-theme-preview__card {
    max-width: 380px;
    padding: 1.25rem;
    background: var(--cl-surface);
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-sm);
}

.cl-theme-preview__label {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cl-primary);
    font-family: var(--cl-font-body);
}

.cl-theme-preview__heading {
    margin: 0 0 0.5rem;
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    color: var(--cl-text);
}

.cl-theme-preview__text {
    margin: 0 0 1rem;
    font-family: var(--cl-font-body);
    color: var(--cl-text);
    opacity: 0.75;
    font-size: 0.9rem;
}

.cl-theme-preview__btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    font-family: var(--cl-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--cl-primary);
    color: var(--cl-on-primary, #ffffff);
    border-radius: var(--cl-radius-sm);
}

/* ── Product Showcase (client/products.php, admin/showcase.php) ─────── */

.cl-showcase-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cl-showcase-intro h2 {
    margin: 0 0 0.25rem;
}

.cl-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.cl-showcase-card {
    background: var(--cl-surface);
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cl-showcase-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--cl-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-showcase-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-showcase-card__thumb-fallback {
    font-family: var(--cl-font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--cl-primary);
    opacity: 0.5;
}

.cl-showcase-card__status {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}

.cl-showcase-card__body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.cl-showcase-card__category {
    align-self: flex-start;
}

.cl-showcase-card__name {
    margin: 0;
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
}

.cl-showcase-card__tagline {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.75;
    flex: 1;
}

.cl-showcase-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    position: relative;
}

.cl-demo-creds {
    position: relative;
}

.cl-demo-creds__pop {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 220px;
    background: var(--cl-secondary);
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    box-shadow: var(--cl-shadow-lg);
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    z-index: 20;
}

.cl-demo-creds__pop[hidden] {
    display: none;
}

.cl-demo-creds__pop p {
    margin: 0.2rem 0;
}

.cl-demo-creds__hint {
    font-weight: 600;
    opacity: 0.7;
}

/* ── Portal Type / vertical picker (Settings > Portal Type) ─────────── */

.cl-vertical-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.cl-vertical-option {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem;
    border: 2px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-vertical-option:hover {
    border-color: var(--cl-accent);
}

.cl-vertical-option--active {
    border-color: var(--cl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-accent) 20%, transparent);
}

.cl-vertical-option--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.cl-vertical-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cl-vertical-option__icon {
    font-size: 1.75rem;
    line-height: 1;
}

.cl-vertical-option__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    font-size: 0.98rem;
}

.cl-vertical-option__tagline {
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.4;
}

/* ── Food Ordering vertical (features/food_ordering/) ────────────────── */
/* Page shell/nav lives in assets/css/verticals/food-portal.css (its own
 * top-nav, not the flagship sidebar) — these are the in-page component
 * styles shared with the flagship's --cl-* variables. */

.cl-food-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.cl-food-cat-filter .cl-badge {
    cursor: pointer;
    text-decoration: none;
}

.cl-food-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.cl-food-card {
    background: var(--cl-surface);
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cl-food-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--cl-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-food-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-food-card__thumb-fallback {
    font-size: 2.5rem;
}

.cl-food-card__fav-form {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.cl-food-card__fav-btn {
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    font-size: 1rem;
}

.cl-food-card__match {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
}

.cl-food-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.cl-food-card__name {
    font-family: var(--cl-font-heading);
    font-weight: var(--cl-heading-weight, 600);
    color: var(--cl-text);
    text-decoration: none;
}

/*
 * Stretched-link: makes the whole card clickable through to the item
 * page (not just the name text) without wrapping the card in an <a>,
 * which would be invalid HTML around the favourite/add-to-bag forms
 * already inside it. Those interactive elements sit above this via
 * z-index so they stay independently clickable.
 */
.cl-food-card__name::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cl-food-card__fav-form {
    z-index: 2;
}

.cl-food-card__footer {
    position: relative;
    z-index: 2;
}

.cl-food-card__name:hover {
    text-decoration: underline;
}

.cl-food-card__desc {
    font-size: 0.85rem;
    opacity: 0.75;
    flex: 1;
    margin: 0;
}

.cl-food-card__allergy-warning {
    font-size: 0.8rem;
    color: var(--cl-danger);
    margin: 0;
}

.cl-food-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cl-food-card__price {
    font-weight: 700;
}

.cl-food-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.cl-food-item__media {
    grid-row: span 2;
    background: var(--cl-secondary);
    border-radius: var(--cl-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    font-size: 3rem;
    overflow: hidden;
}

.cl-food-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-food-item__add-form {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .cl-food-item {
        grid-template-columns: 1fr;
    }
    .cl-food-item__media {
        grid-row: auto;
    }
}

.cl-food-review {
    padding: 0.75rem 0;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-food-review-form {
    margin-bottom: 1rem;
}

.cl-food-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.cl-food-qty-form input[type="number"] {
    padding: 0.35rem;
}

.cl-food-timeline {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    gap: 0.5rem;
}

.cl-food-timeline__step {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    border-radius: var(--cl-radius-sm);
    background: var(--cl-hover-tint);
    font-size: 0.8rem;
    opacity: 0.5;
}

.cl-food-timeline__step--done {
    background: var(--cl-primary);
    color: var(--cl-on-primary, #ffffff);
    opacity: 1;
}

.cl-food-plan-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.cl-food-plan-grid__day {
    border: var(--cl-border-width, 1px) solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 0.5rem;
    min-height: 120px;
}

.cl-food-plan-grid__day h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-align: center;
}

.cl-food-plan-grid__item {
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--cl-border-width, 1px) solid var(--cl-border);
}

.cl-food-plan-grid--admin select {
    width: 100%;
    font-size: 0.75rem;
}

@media (max-width: 900px) {
    .cl-food-plan-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}