/* ============================================================
   Rasooiya — "Crimson Kitchen" theme (rich red & black)
   ============================================================ */
:root {
    /* structure */
    --cp-black: #140f10;
    --cp-night: #1c1416;
    --cp-charcoal: #241a1c;
    --cp-bg: #f6f2f1;
    --cp-surface: #ffffff;
    --cp-line: #ebe2e0;
    --cp-ink: #221b1c;
    --cp-muted: #857a78;

    /* brand */
    --cp-red: #d32f2f;
    --cp-red-600: #c62828;
    --cp-red-700: #a51d1d;
    --cp-red-800: #7f1616;
    --cp-red-soft: #fdecec;
    --cp-red-glow: rgba(211, 47, 47, .35);
    --cp-gold: #e0a552;
    --cp-gold-dim: #b98a53;

    --cp-pos: #1f8a4c;
    --cp-neg: #c62828;

    --cp-radius: 14px;
    --cp-shadow-sm: 0 1px 2px rgba(30, 12, 12, .05);
    --cp-shadow: 0 1px 2px rgba(30, 12, 12, .05), 0 10px 30px -14px rgba(30, 12, 12, .22);

    /* Bootstrap remap */
    --bs-primary: var(--cp-red);
    --bs-primary-rgb: 211, 47, 47;
    --bs-link-color: var(--cp-red-700);
    --bs-link-color-rgb: 165, 29, 29;
    --bs-link-hover-color: var(--cp-red-800);
    --bs-border-radius: 10px;
}

html, body { height: 100%; }

body {
    background: var(--cp-bg);
    color: var(--cp-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.display-serif,
.cp-brand span,
.cp-auth-hero h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.validation-summary-valid { display: none; }
.field-validation-valid { display: none; }

/* ---------- Bootstrap component overrides ---------- */
.btn { --bs-btn-border-radius: 9px; font-weight: 500; }

.btn-primary {
    --bs-btn-bg: var(--cp-red);
    --bs-btn-border-color: var(--cp-red);
    --bs-btn-hover-bg: var(--cp-red-700);
    --bs-btn-hover-border-color: var(--cp-red-700);
    --bs-btn-active-bg: var(--cp-red-800);
    --bs-btn-active-border-color: var(--cp-red-800);
    --bs-btn-disabled-bg: var(--cp-red);
    --bs-btn-disabled-border-color: var(--cp-red);
    background-image: linear-gradient(180deg, #de3a3a, var(--cp-red-600));
    box-shadow: 0 2px 10px -3px var(--cp-red-glow);
}
.btn-primary:hover { background-image: linear-gradient(180deg, var(--cp-red-600), var(--cp-red-700)); }

.btn-outline-primary {
    --bs-btn-color: var(--cp-red-700);
    --bs-btn-border-color: rgba(211, 47, 47, .5);
    --bs-btn-hover-bg: var(--cp-red);
    --bs-btn-hover-border-color: var(--cp-red);
    --bs-btn-active-bg: var(--cp-red-700);
}

.btn-outline-secondary {
    --bs-btn-color: #55494a;
    --bs-btn-border-color: #d9cecc;
    --bs-btn-hover-bg: #2a2022;
    --bs-btn-hover-border-color: #2a2022;
    --bs-btn-hover-color: #fff;
}

.btn-success { --bs-btn-bg: var(--cp-pos); --bs-btn-border-color: var(--cp-pos); --bs-btn-hover-bg: #176b3b; --bs-btn-hover-border-color: #176b3b; }

.text-bg-primary { background-color: var(--cp-red) !important; }
.badge.text-bg-light { background: #f1e9e7 !important; color: #6a5f5d !important; font-weight: 500; }

a, .btn-link { --bs-btn-link-color: var(--cp-red-700); color: var(--cp-red-700); }
.btn-link:hover { color: var(--cp-red-800); }

.form-control, .form-select {
    border-color: #ddd3d1;
    border-radius: 10px;
    padding: .5rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--cp-red);
    box-shadow: 0 0 0 .2rem rgba(211, 47, 47, .18);
}
.form-check-input:checked { background-color: var(--cp-red); border-color: var(--cp-red); }
.form-check-input:focus { border-color: var(--cp-red); box-shadow: 0 0 0 .2rem rgba(211, 47, 47, .18); }

.card {
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--cp-line);
    font-weight: 600;
    padding: .8rem 1rem;
}
.list-group-item { border-color: var(--cp-line); }

.table { --bs-table-hover-bg: #faf5f4; }
.table > thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cp-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--cp-line);
}
.table td, .table th { vertical-align: middle; }
.table > tfoot td, .table > tfoot th { border-top: 2px solid var(--cp-line); }
.table-warning { --bs-table-bg: #fdf5e9; }
.table-danger { --bs-table-bg: var(--cp-red-soft); }

.pagination { --bs-pagination-color: var(--cp-red-700); --bs-pagination-active-bg: var(--cp-red); --bs-pagination-active-border-color: var(--cp-red); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(211,47,47,.18); }

.alert { border-radius: 12px; border: 1px solid transparent; }
.alert-success { background: #eaf6ee; border-color: #cfe9d8; color: #1c6b3f; }
.alert-danger { background: var(--cp-red-soft); border-color: #f6d3d3; color: var(--cp-red-800); }
.alert-warning { background: #fdf3e3; border-color: #f4e2c2; color: #8a5a15; }

/* ---------- App shell ---------- */
.cp-shell { display: flex; min-height: 100vh; }

.cp-sidebar {
    width: 236px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(185deg, #241a1c 0%, #170f10 55%, #120c0d 100%);
    color: #cdbfbc;
    padding: 1.1rem 0 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid #000;
    box-shadow: inset -14px 0 26px -22px rgba(0, 0, 0, .9);
}
.cp-nav { flex: 1 1 auto; }
.cp-sidebar-foot {
    flex: 0 0 auto;
    margin-top: auto;
    padding: .9rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .18);
}
.cp-sidebar-user { display: flex; flex-direction: column; margin-bottom: .55rem; line-height: 1.25; }
.cp-sidebar-user span { color: #fff; font-weight: 600; font-size: .85rem; }
.cp-sidebar-user small { color: var(--cp-gold-dim); font-size: .72rem; }
.cp-sidebar-foot .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.25); --bs-btn-color: #e7dcda; --bs-btn-hover-bg: rgba(255,255,255,.1); --bs-btn-hover-border-color: rgba(255,255,255,.4); --bs-btn-hover-color: #fff; }

/* line icons (SVG sprite, coloured by currentColor) */
.cp-ico {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.18em;
}

.cp-topbar-brand,
.cp-tabbar,
.cp-fab { display: none; }   /* mobile-only, shown via media query */

.cp-sidebar::-webkit-scrollbar { width: 6px; }
.cp-sidebar::-webkit-scrollbar-thumb { background: #3a2c2e; border-radius: 3px; }

.cp-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .1rem 1.25rem 1.1rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cp-brand img { width: 34px; height: 34px; flex: none; }
.cp-brand span { font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: .3px; display: flex; flex-direction: column; line-height: 1.15; }
.cp-brand-tenant { font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 500; color: var(--cp-gold); letter-spacing: .01em; margin-top: 1px; }

.cp-sidebar .nav-link {
    color: #c6b7b4;
    padding: .55rem 1.25rem;
    font-size: .875rem;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: .7rem;
    transition: background .12s, color .12s, border-color .12s;
}
.cp-sidebar .nav-link .cp-ico { width: 18px; height: 18px; opacity: .8; }
.cp-sidebar .nav-link.active .cp-ico { opacity: 1; color: var(--cp-red); }
.cp-sidebar .nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.cp-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(211, 47, 47, .28), rgba(211, 47, 47, .04));
    color: #fff;
    border-left-color: var(--cp-red);
    font-weight: 600;
}
.cp-nav-heading {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cp-gold-dim);
    padding: 1.1rem 1.25rem .3rem;
    font-weight: 700;
}

.cp-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.cp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    background: var(--cp-surface);
    border-bottom: 1px solid var(--cp-line);
    padding: .8rem 1.6rem;
    padding-top: calc(.8rem + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 20;
}
.cp-topbar-title {
    font-weight: 700;
    font-size: 1.05rem;
    padding-left: .75rem;
    border-left: 4px solid var(--cp-red);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-back {
    border: 0;
    background: transparent;
    color: var(--cp-ink);
    border-radius: 9px;
    width: 36px;
    height: 36px;
    display: none;             /* mobile only */
    align-items: center;
    justify-content: center;
    flex: none;
    margin-left: -.4rem;
}
.cp-back .cp-ico { width: 22px; height: 22px; }
.cp-back:active { background: var(--cp-bg); }
.cp-topbar-brand { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.cp-user { display: flex; align-items: center; gap: .6rem; }
.cp-user-biz { font-weight: 700; font-size: .86rem; color: var(--cp-ink); }
.cp-user-biz::after { content: "·"; margin-left: .6rem; color: var(--cp-muted); }
.cp-user-name {
    font-weight: 600;
    background: #f2eae8;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
}
@media (max-width: 768px) { .cp-user-biz { display: none; } }

.cp-content { padding: 1.6rem; flex: 1; }

/* ---------- Dashboard hero ---------- */
.cp-dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--cp-radius);
    color: #f3e9e7;
    background:
        radial-gradient(600px 300px at 90% 140%, rgba(211, 47, 47, .4), transparent 60%),
        linear-gradient(150deg, #241a1c, #150f10);
    overflow: hidden;
}
.cp-dash-hero h2 { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; margin: 0 0 .25rem; color: #fff; }
.cp-dash-hero p { margin: 0; color: #cbbbb8; font-size: .9rem; max-width: 40rem; }
.cp-dash-hero img { width: 128px; height: 128px; margin: -1.4rem -0.6rem -2rem 0; flex: none; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }
@media (max-width: 640px) { .cp-dash-hero img { display: none; } }

/* ---------- Stat cards ---------- */
.cp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.cp-stat {
    position: relative;
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    padding: 1rem 1.2rem;
    box-shadow: var(--cp-shadow-sm);
    overflow: hidden;
}
.cp-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cp-red), var(--cp-gold));
}
.cp-stat .label { color: var(--cp-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cp-stat .value { font-size: 1.6rem; font-weight: 700; margin-top: .3rem; letter-spacing: -.01em; }
.cp-stat .value.pos { color: var(--cp-pos); }
.cp-stat .value.neg { color: var(--cp-neg); }

/* ---------- Dashboard mini-charts (dependency-free CSS bars) ---------- */
.cp-chart { display: flex; flex-direction: column; gap: .9rem; }
.cp-chart-row { display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; align-items: baseline; }
.cp-chart-row .cp-chart-name { font-weight: 600; font-size: .82rem; }
.cp-chart-row .cp-chart-val { font-size: .82rem; font-weight: 700; text-align: right; white-space: nowrap; }
.cp-chart-track {
    grid-column: 1 / -1;
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    overflow: hidden;
}
.cp-chart-fill {
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 3px;
    border-radius: 999px;
    background-image: linear-gradient(180deg, #e14b4b, var(--cp-red-600));
}
.cp-chart-fill.is-rev { background-image: linear-gradient(180deg, #34b36b, var(--cp-pos)); }
.cp-chart-fill.is-pos { background-image: linear-gradient(180deg, #34b36b, var(--cp-pos)); }
.cp-chart-fill.is-neg { background-image: linear-gradient(180deg, #e77, var(--cp-neg)); }
.cp-chart-fill.is-muted { background-image: linear-gradient(180deg, #b9a9a6, #8b7b78); }
/* benchmark / target marker sitting on the track */
.cp-chart-target {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 2px;
    background: var(--cp-ink);
    opacity: .55;
}
.cp-chart-row .cp-chart-sub { grid-column: 1 / -1; font-size: .72rem; color: var(--cp-muted); margin-top: -.1rem; }
.cp-chart-legend { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: .72rem; color: var(--cp-muted); margin-top: .2rem; }
.cp-chart-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: baseline; background: currentColor; }
.cp-chart-legend .k-target::before { width: 2px; height: 11px; border-radius: 0; background: var(--cp-ink); }

/* ---------- Autocomplete combobox ---------- */
.cp-combo { position: relative; }
.cp-combo-list {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    margin-top: 3px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px -10px rgba(30, 12, 12, .28);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.cp-combo-opt {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .45rem .6rem;
    border-radius: 7px;
    font-size: .875rem;
    color: var(--cp-ink);
}
.cp-combo-opt:hover { background: var(--cp-red-soft); }
.cp-combo-create { color: var(--cp-red-700); font-weight: 600; border-top: 1px solid var(--cp-line); margin-top: 2px; }
.cp-combo-empty { padding: .5rem .6rem; color: var(--cp-muted); font-size: .82rem; }

/* multi-select chips */
.cp-multicombo { position: relative; }
.cp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    min-height: calc(1.5em + .8rem + 2px);
    padding: .3rem .4rem;
    border: 1px solid #ddd3d1;
    border-radius: 10px;
    background: var(--cp-surface);
    cursor: text;
}
.cp-chips:focus-within { border-color: var(--cp-red); box-shadow: 0 0 0 .2rem rgba(211, 47, 47, .18); }
.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--cp-red-soft);
    color: var(--cp-red-800);
    border-radius: 999px;
    padding: .15rem .3rem .15rem .6rem;
    font-size: .82rem;
    font-weight: 500;
}
.cp-chip button {
    border: 0;
    background: rgba(127, 22, 22, .12);
    color: var(--cp-red-800);
    border-radius: 999px;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cp-chip button:hover { background: var(--cp-red); color: #fff; }
.cp-multicombo-search {
    flex: 1;
    min-width: 8rem;
    border: 0;
    outline: 0;
    padding: .25rem;
    font-size: .9rem;
    background: transparent;
}

/* ---------- Badges ---------- */
.badge-over { background: var(--cp-red-soft); color: var(--cp-red-800); font-weight: 600; }
.badge-ok { background: #e6f4ec; color: #1c6b3f; font-weight: 600; }

/* ============================================================
   Auth pages — full-bleed split
   ============================================================ */
.cp-plain { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.cp-auth-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}

.cp-auth-hero {
    position: relative;
    overflow: hidden;
    color: #f2e9e7;
    padding: 3.4rem 3.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(900px 460px at 12% -8%, #472326 0%, transparent 60%),
        radial-gradient(700px 500px at 110% 120%, rgba(211, 47, 47, .38) 0%, transparent 55%),
        linear-gradient(160deg, #241a1c 0%, #150f10 62%, #100b0c 100%);
}
.cp-auth-hero::after {
    /* thin gold rule accent */
    content: "";
    position: absolute;
    left: 3.6rem;
    right: 3.6rem;
    top: 6.4rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cp-gold), transparent);
    opacity: .5;
}

.cp-hero-brand { display: flex; align-items: center; gap: .7rem; position: relative; z-index: 3; }
.cp-hero-brand img { width: 40px; height: 40px; }
.cp-hero-brand span { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 700; color: #fff; }

.cp-hero-copy { position: relative; z-index: 3; max-width: 30rem; }
.cp-hero-copy h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}
.cp-hero-copy h1 em { color: var(--cp-gold); font-style: normal; }
.cp-hero-copy p.lead { color: #d3c3c0; font-size: 1rem; line-height: 1.6; }

.cp-hero-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .65rem; }
.cp-hero-points li { display: flex; align-items: center; gap: .6rem; color: #e7dcda; font-size: .92rem; }
.cp-hero-points li svg { flex: none; width: 20px; height: 20px; color: var(--cp-red); }

.cp-hero-foot { position: relative; z-index: 3; color: #a99a97; font-size: .8rem; }

/* plate collage */
.cp-plates { position: absolute; right: -40px; bottom: -46px; width: min(500px, 58%); aspect-ratio: 1; z-index: 1; pointer-events: none; }
.cp-plates img { position: absolute; filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .55)); }
.cp-plates .p-main { width: 62%; right: 6%; bottom: 6%; transform: rotate(-6deg); }
.cp-plates .p-dessert { width: 33%; right: 46%; bottom: 42%; transform: rotate(9deg); }
.cp-plates .p-salad { width: 32%; right: 2%; bottom: 48%; transform: rotate(-14deg); }

.cp-auth-form-panel {
    background: var(--cp-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}
.cp-auth-card { width: 100%; max-width: 384px; }
.cp-auth-brand-mobile { display: none; align-items: center; gap: .55rem; margin-bottom: 1.75rem; }
.cp-auth-brand-mobile img { width: 32px; height: 32px; }
.cp-auth-brand-mobile span { font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; font-weight: 700; }

.cp-auth-card h1.title { font-size: 1.55rem; font-weight: 700; margin-bottom: .25rem; }
.cp-auth-card p.sub { color: var(--cp-muted); margin-bottom: 1.6rem; }

.cp-auth-card .form-label { font-weight: 600; font-size: .82rem; margin-bottom: .3rem; color: #4c4142; }
.cp-auth-card .form-control { padding: .62rem .85rem; }

.cp-auth-submit {
    width: 100%;
    padding: .7rem 1rem;
    font-weight: 600;
    font-size: .95rem;
    margin-top: .3rem;
}

/* ---------- Language switcher ---------- */
.cp-lang { display: inline-flex; border: 1px solid var(--cp-line); border-radius: 999px; overflow: hidden; background: var(--cp-surface); }
.cp-lang-opt {
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cp-muted);
    text-decoration: none;
    line-height: 1.4;
}
.cp-lang-opt + .cp-lang-opt { border-left: 1px solid var(--cp-line); }
.cp-lang-opt:hover { text-decoration: none; color: var(--cp-ink); background: var(--cp-bg); }
.cp-lang-opt.active { background: var(--cp-red); color: #fff; }
/* on the dark login hero */
.cp-auth-hero .cp-lang { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.cp-auth-hero .cp-lang-opt { color: #cbbbb8; }
.cp-auth-hero .cp-lang-opt + .cp-lang-opt { border-left-color: rgba(255,255,255,.18); }
.cp-auth-hero .cp-lang-opt.active { background: var(--cp-red); color: #fff; }

/* ============================================================
   Mobile / "app" view
   ============================================================ */

/* Login: compact dark header + white sheet on small screens */
@media (max-width: 900px) {
    .cp-auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100dvh; }
    .cp-auth-hero {
        display: flex;
        padding: calc(2rem + env(safe-area-inset-top)) 1.5rem 2.5rem;
        justify-content: flex-start;
        gap: 1.1rem;
    }
    .cp-auth-hero::after { display: none; }
    .cp-hero-copy { max-width: none; }
    .cp-hero-copy h1 { font-size: 1.75rem; margin-bottom: .5rem; }
    .cp-hero-copy p.lead { display: none; }
    .cp-hero-points { margin-top: .9rem; gap: .45rem; }
    .cp-hero-points li { font-size: .85rem; }
    .cp-hero-foot, .cp-plates { display: none; }
    .cp-auth-brand-mobile { display: none; }
    .cp-auth-form-panel {
        align-items: flex-start;
        padding: 1.75rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        margin-top: -20px;
        box-shadow: 0 -10px 26px -14px rgba(0, 0, 0, .3);
    }
    .cp-auth-card { max-width: 440px; margin: 0 auto; }
    .cp-auth-card h1.title { font-size: 1.4rem; }
}
@media (max-width: 560px) {
    .cp-auth-hero { padding-left: 1.15rem; padding-right: 1.15rem; }
    .cp-hero-copy h1 { font-size: 1.5rem; }
    .cp-hero-points li:nth-child(n+3) { display: none; }
}

/* Bookings list: cards are mobile-only; the media query below shows them ≤900px */
.cp-orders-cards { display: none; }

/* ---------- App shell on mobile: hide sidebar, use a bottom tab bar ---------- */
@media (max-width: 900px) {
    .cp-shell { display: block; }
    .cp-sidebar { display: none; }
    .cp-main { width: 100%; min-height: 100dvh; }

    .cp-topbar { padding-left: 1rem; padding-right: 1rem; }
    .cp-topbar-brand { display: block; }
    .cp-back { display: inline-flex; }
    .cp-user-biz, .cp-user-name, .cp-user-signout, .cp-user-lang { display: none; }
    .cp-topbar-title { font-size: 1.05rem; border-left: 0; padding-left: 0; }

    .cp-content { padding: 1rem 1rem calc(4.9rem + env(safe-area-inset-bottom)); }
    .cp-content.cp-has-fab { padding-bottom: calc(7.6rem + env(safe-area-inset-bottom)); }
    .cp-dash-hero { padding: 1.15rem; }
    .cp-dash-hero h2 { font-size: 1.25rem; }

    /* wide content scrolls inside itself instead of breaking the page */
    .cp-content .table { white-space: nowrap; }
    .cp-content .card > .table { display: block; overflow-x: auto; }

    /* Bookings list: swap the desktop table for stacked, non-scrolling cards */
    .cp-orders-desktop { display: none; }
    .cp-orders-cards { display: flex; flex-direction: column; gap: .7rem; }

    /* bottom tab bar */
    .cp-tabbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        background: var(--cp-surface);
        border-top: 1px solid var(--cp-line);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -6px 20px -12px rgba(20, 10, 10, .2);
    }
    .cp-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: .5rem 0 .45rem;
        color: var(--cp-muted);
        font-size: .68rem;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cp-tab .cp-ico { width: 23px; height: 23px; stroke-width: 1.9; }
    .cp-tab.active { color: var(--cp-red); }
    .cp-tab.active .cp-ico { stroke-width: 2.3; }
    .cp-tab:active { background: var(--cp-bg); }

    /* floating "new booking" button */
    .cp-fab {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        position: fixed;
        right: 1rem;
        bottom: calc(4.6rem + env(safe-area-inset-bottom));
        z-index: 1035;
        padding: .7rem 1.1rem .7rem .9rem;
        border-radius: 999px;
        background-image: linear-gradient(180deg, #de3a3a, var(--cp-red-600));
        color: #fff;
        font-weight: 600;
        font-size: .9rem;
        text-decoration: none;
        box-shadow: 0 8px 20px -6px var(--cp-red-glow), 0 2px 6px rgba(0, 0, 0, .2);
    }
    .cp-fab .cp-ico { width: 20px; height: 20px; stroke-width: 2.6; }
    .cp-fab:active { transform: scale(.96); }
}

/* ---------- Bookings list: mobile card view (hidden on desktop; shown ≤900px above) ---------- */
.cp-order-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    padding: .85rem .95rem;
}
.cp-order-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.cp-order-card-num { font-weight: 700; text-decoration: none; color: var(--cp-ink); }
.cp-order-card-num:hover { text-decoration: underline; }
.cp-order-card-meta { color: var(--cp-muted); font-size: .82rem; margin-top: .3rem; }
.cp-order-card-amount { font-weight: 700; font-size: 1.1rem; margin-top: .5rem; }
.cp-order-card-actions { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; }
.cp-order-card-actions .btn { display: inline-flex; align-items: center; justify-content: center; padding: .4rem .55rem; }
.cp-order-card-actions form { display: inline-flex; }

/* ---------- "More" menu page ---------- */
.cp-more { max-width: 640px; margin: 0 auto; }

.cp-more-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    padding: 1.1rem;
    margin-bottom: 1.4rem;
}
.cp-more-account { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.cp-more-avatar {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem;
    color: #fff;
    background-image: linear-gradient(180deg, #de3a3a, var(--cp-red-600));
}
.cp-more-account strong { display: block; font-size: 1.02rem; }

.cp-more-group {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--cp-muted);
    padding: 0 .25rem .5rem;
    margin-top: 1.5rem;
}
.cp-more-group:first-of-type { margin-top: 0; }

.cp-more-list {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    overflow: hidden;
}
.cp-more-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    color: var(--cp-ink);
    text-decoration: none;
    border-top: 1px solid var(--cp-line);
}
.cp-more-row:first-child { border-top: 0; }
.cp-more-row:hover { text-decoration: none; background: var(--cp-bg); }
.cp-more-row:active { background: #f2eae8; }
.cp-more-row > .cp-ico:first-child { width: 22px; height: 22px; flex: none; color: var(--cp-red); }
.cp-more-row span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-more-row span strong { font-weight: 600; font-size: .95rem; }
.cp-more-row span small { color: var(--cp-muted); font-size: .78rem; }
.cp-more-row > .cp-ico:last-child { width: 16px; height: 16px; flex: none; color: var(--cp-muted); }

@media (max-width: 640px) {
    /* page headers (filters on the left, primary action on the right) stack */
    .cp-content > .d-flex.justify-content-between,
    .cp-content > div > .d-flex.justify-content-between { flex-wrap: wrap; gap: .6rem; }
    /* filter pill groups scroll sideways instead of wrapping mid-button */
    .cp-content .btn-group { max-width: 100%; overflow-x: auto; }
    .cp-content .btn-group::-webkit-scrollbar { display: none; }
    /* forms: full-width fields already via col-md-*; give date/number inputs breathing room */
    .cp-content .form-select, .cp-content .form-control { font-size: 16px; }  /* stops iOS zoom-on-focus */
}

@media (max-width: 480px) {
    .cp-stat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .cp-stat { padding: .8rem .9rem; }
    .cp-stat .value { font-size: 1.35rem; }
    .cp-dash-hero h2 { font-size: 1.15rem; }
}

/* ---------- Prep list (per-booking Grocery/Vegetable/Dairy/Utensils/Table-chairs checklist) ---------- */
.cp-prep-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 5rem; /* room above the sticky savebar */
}
@media (min-width: 1200px) {
    .cp-prep-groups { grid-template-columns: 1fr 1fr; }
}
.cp-prep-group {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    padding: 0;
    align-self: start;
}
.cp-prep-group-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
}
.cp-prep-group-head::-webkit-details-marker { display: none; }
.cp-prep-group-title { font-weight: 700; }
.cp-prep-group-count { color: var(--cp-pos); font-size: .82rem; font-weight: 600; min-width: 1.5em; }
.cp-prep-selectall { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--cp-muted); font-weight: 400; cursor: pointer; }
.cp-prep-rows { border-top: 1px solid var(--cp-line); padding: .3rem .5rem .6rem; }
.cp-prep-row { padding: .5rem .5rem; border-bottom: 1px dashed var(--cp-line); }
.cp-prep-row:last-child { border-bottom: 0; }
.cp-prep-row-check { display: flex; align-items: center; gap: .6rem; cursor: pointer; margin-bottom: 0; }
.cp-prep-row-name { flex: 1; }
.cp-prep-custom-name { flex: 1; }
.cp-prep-qty-group { display: flex; gap: .4rem; margin-top: .4rem; padding-left: 1.75rem; }
.cp-prep-qty { max-width: 5.5rem; }
.cp-prep-unit { max-width: 6rem; }
.cp-prep-note { flex: 1; min-width: 6rem; }
.cp-prep-row-blank { opacity: .85; }
.cp-prep-row-blank .cp-prep-qty-group { padding-left: 0; }
.cp-prep-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    padding: .8rem 1rem;
    box-shadow: var(--cp-shadow);
    margin-top: -4rem;
}
@media (max-width: 900px) {
    .cp-prep-savebar { bottom: calc(4.9rem + env(safe-area-inset-bottom)); }
}

/* ---------- Splash screen (shown once per browser tab / app open) ---------- */
.cp-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: var(--cp-black);
    transition: opacity .45s ease;
}
.cp-splash.cp-fade-out { opacity: 0; pointer-events: none; }
.cp-splash img { width: min(46vw, 190px); height: auto; }
.cp-splash-brand { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.6rem; color: #fff; letter-spacing: .02em; }
.cp-splash-tag { color: var(--cp-gold-dim); font-size: .85rem; }
.cp-splash-spin {
    width: 26px; height: 26px; margin-top: .4rem;
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: var(--cp-gold);
    border-radius: 50%;
    animation: cp-spin .8s linear infinite;
}

/* ---------- Global request loader (page navigations + form submits) ---------- */
.cp-page-loader {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(20, 15, 16, .12);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.cp-page-loader.cp-show { opacity: 1; pointer-events: all; }
.cp-page-loader-bar {
    margin-top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--cp-red) 40%, var(--cp-gold) 60%, transparent);
    background-size: 200% 100%;
    animation: cp-loader-sweep 1.1s ease-in-out infinite;
}
@keyframes cp-loader-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes cp-spin { to { transform: rotate(360deg); } }