/* ============================================================
   CakeMyDay – Global Stylesheet
   Design tokens + utility classes (Tailwind-inspired)
   ============================================================ */

/* --- CSS Variables / Design Tokens --- app.css*/

:root {
    /* Brand palette (from brand guidelines) */
    --color-peach: #FDE0DA;
    /* Blush pink */
    --color-peach-dark: #F9C5BB;
    --color-mint: #E8F3B5;
    /* Lime green */
    --color-blue: #DCEEFF;
    /* Sky blue */
    --color-brown: #A87865;
    /* Primary brand colour */
    --color-brown-dark: #885A41;
    --color-brown-light: #886051;
    /* Headings */
    --color-gold: #EFD27E;
    /* Alert / accent yellow */
    --color-dark-brown: #3D2817;
    --color-darker-brown: #412B23;
    --color-red: #C24612;
    --color-dark-red: #7C4731;
    --color-brown49: #494949;
    --color-brown30: #453030;
    --color-olive: #667036;
    --color-green: #15803d;

    /* Functional colours */
    --color-success: #54C77E;
    --color-alert: #EFD27E;
    --color-error: #FD9F82;
    --color-info: #7498BA;
    --color-info-dark: #5C6C7C;

    /* Neutrals */
    --color-text: #333333;
    --color-muted: #595959;
    --color-border: #E5E5E5;
    --color-bg-light: #F9F5EF;
    --color-bg: #FAF6EF;
    /* #FFFBF5;
    --color-bg-creamy:#f5f0eb; */
    /* Cream – brand secondary */

    /* Typography */
    --font-brand: 'Calistoga', Georgia, serif;
    /* Logo / display */
    --font-serif: 'Laila', Georgia, serif;
    /* Headings */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    /* Body / UI */
    --font-nav: 'Raleway', sans-serif;
    /* Navigation */
    --font-accent: 'Great Vibes', cursive;
    /* Decorative */

    --radius-pill: 9999px;
    --radius-card: 16px;
    --radius-card-lg: 32px;
    --LR-padding: 2.5rem;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(168, 120, 101, 0.18);
}

*:focus-visible {
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
iframe {
    display: block;
    max-width: 100%;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
}

/* --- Utility: Layout --- */
.min-h-screen {
    min-height: 100vh;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-50 {
    z-index: 50;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.grid {
    display: grid;
}

.block {
    display: block;
}

.hidden {
    display: none !important;
}

.sidebar-offset {
    margin-left: 220px;
    transition: margin-left 0.3s ease;
}

@media (max-width: 1088px) {
    .sidebar-offset {
        margin-left: 68px;
    }
}

/* Below the desktop breakpoint the sidebar becomes an off-canvas drawer,
   so the main content reclaims the full width (no sidebar gutter). */
@media (max-width: 1023.98px) {
    .sidebar-offset {
        margin-left: 0;
    }
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* --- Utility: Spacing --- */
.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.p-10 {
    padding: 2.5rem;
}

.p-12 {
    padding: 3rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pt-10 {
    padding-top: 2.5rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pl-14 {
    padding-left: 3.5rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-12 {
    margin-top: 3rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mb-20 {
    margin-bottom: 5rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-12 {
    margin-left: 3rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-12 {
    gap: 3rem;
}

.space-y-2>*+* {
    margin-top: 0.5rem;
}

.space-y-3>*+* {
    margin-top: 0.75rem;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

.space-y-7>*+* {
    margin-top: 1.75rem;
}

.space-y-16>*+* {
    margin-top: 4rem;
}

/* --- Utility: Sizing --- */
.w-1\.5 {
    width: 0.375rem;
}

.h-1\.5 {
    height: 0.375rem;
}

.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.w-7 {
    width: 1.75rem;
}

.h-7 {
    height: 1.75rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-10 {
    width: 2.5rem;
}

.h-10 {
    height: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.w-14 {
    width: 3.5rem;
}

.h-14 {
    height: 3.5rem;
}

.w-16 {
    width: 4rem;
}

.h-16 {
    height: 4rem;
}

.w-20 {
    width: 5rem;
}

.h-20 {
    height: 5rem;
}

.w-24 {
    width: 6rem;
}

.h-24 {
    height: 6rem;
}

.h-48 {
    height: 12rem;
}

.h-80 {
    height: 20rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-5xl {
    max-width: 64rem;
}

.max-w-6xl {
    max-width: 72rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.aspect-square {
    aspect-ratio: 1;
}

/* --- Utility: Typography --- */
.font-brand {
    font-family: var(--font-brand);
}

.font-serif {
    font-family: var(--font-serif);
}

.font-nav {
    font-family: var(--font-nav);
}

.font-accent {
    font-family: var(--font-accent);
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.leading-none {
    line-height: 1;
}

.leading-relaxed {
    line-height: 1.625;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.uppercase {
    text-transform: uppercase;
}

/* --- Utility: Colors --- */
.text-white {
    color: #fff;
}

.text-peach {
    color: var(--color-peach);
}

.text-peach-dark {
    color: var(--color-peach-dark);
}

.text-brown {
    color: var(--color-brown);
}

.text-gold {
    color: var(--color-gold);
}

.text-text {
    color: var(--color-text);
}

.text-muted {
    color: var(--color-muted);
}

.text-dark-brown {
    color: var(--color-dark-brown);
}

.bg-white {
    background-color: #fff;
}

.bg-peach {
    background-color: var(--color-peach);
}

.bg-mint {
    background-color: var(--color-mint);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-light {
    background-color: var(--color-bg-light);
}

/* --- Utility: Borders --- */
.border {
    border: 1px solid var(--color-border);
}

.border-2 {
    border-width: 2px;
    border-style: solid;
}

.border-t {
    border-top: 1px solid var(--color-border);
}

.border-b {
    border-bottom: 1px solid;
}

.border-t-2 {
    border-top-width: 2px;
    border-top-style: solid;
}

.border-0 {
    border: none;
}

.border-white {
    border-color: rgba(255, 255, 255, 0.3);
}

.border-peach {
    border-color: var(--color-peach);
}

.border-mint {
    border-color: var(--color-mint);
}

.border-border {
    border-color: var(--color-border);
}

/* --- Utility: Border Radius --- */
.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* --- Utility: Shadows --- */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* --- Utility: Gradient helpers --- */
.gradient-peach {
    background: linear-gradient(135deg, var(--color-peach), var(--color-peach-dark));
}

.gradient-brown {
    background: linear-gradient(135deg, var(--color-brown), var(--color-brown-dark));
}

.gradient-mint-blue {
    background: linear-gradient(135deg, var(--color-mint), var(--color-blue));
}

/* --- Utility: Pointer Events --- */
.pointer-events-none {
    pointer-events: none;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

/* --- Utility: Opacity --- */
.opacity-5 {
    opacity: 0.05;
}

.opacity-10 {
    opacity: 0.10;
}

.opacity-15 {
    opacity: 0.15;
}

.opacity-20 {
    opacity: 0.20;
}

.opacity-50 {
    opacity: 0.50;
}

/* === Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bounceY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(12px);
    }
}

@keyframes cakeWiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
}

.animate-slide-down {
    animation: slideDown 0.2s ease forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease forwards;
}

.animate-bounce-y {
    animation: bounceY 1.5s ease-in-out infinite;
}

.animate-wiggle {
    animation: cakeWiggle 0.5s ease-in-out infinite;
    animation-delay: 2s;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-600 {
    animation-delay: 0.6s;
}

.delay-1200 {
    animation-delay: 1.2s;
}

.delay-1400 {
    animation-delay: 1.4s;
}

.delay-1600 {
    animation-delay: 1.6s;
}

/* === Transitions === */
.transition-all {
    transition: all 0.2s ease;
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:scale-102:hover {
    transform: scale(1.02);
}

.hover\:-translate-y-2:hover {
    transform: translateY(-8px);
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* === Page Backgrounds === */
.page-bg-blue {
    background-color: var(--color-blue);
    min-height: 100vh;
}

.page-bg-white {
    background-color: #fff;
}

/* === Card === */
.card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.card-sm {
    border-radius: 1rem;
}

.card-lg {
    border-radius: var(--radius-card-lg);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: var(--font-sans);
    white-space: nowrap;
    font-family: var(--font-serif);
}

.btn-danger {
    background-color: #fd9f82;
    color: #fff !important;
}

.btn-danger:hover {
    background-color: #f0845f;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(253, 159, 130, 0.45);
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-peach {
    background: var(--color-peach);
    color: var(--color-text);
}

.btn-peach:hover {
    background: var(--color-peach-dark);
    transform: scale(1.05);
}

.btn-peach:disabled,
.btn-peach:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    background: var(--color-peach);
}

.btn-red,
.btn-white:hover {
    background: var(--color-red);
    border: 2px solid var(--color-red);
    color: white;
    padding: 18px 24px;

}

.btn-white,
.btn-red:hover {
    background: transparent;
    border: 2px solid var(--color-red);
    color: var(--color-red);
    padding: 18px 24px;

}

.btn-red:disabled,
.btn-red:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--color-red);
    border: 2px solid var(--color-red);
    color: white;
    box-shadow: none;
    transform: none;
}

.btn-brown {
    background: var(--color-brown);
    border: 2px solid var(--color-brown);
    color: #fff;
}

.btn-brown:hover {
    background: var(--color-brown-dark);
    border-color: var(--color-brown-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(168, 120, 101, 0.45);
}

.btn-outline {
    background: var(--color-bg);

    color: var(--color-text);
}

.btn-outline:hover {
    background: var(--color-bg-light);

    box-shadow: 0 4px 14px rgba(168, 120, 101, 0.2);
}

.btn-outline:disabled,
.btn-outline:disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--color-bg);
    border-color: var(--color-border);
}

.btn-outline-white {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    backdrop-filter: blur(4px);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-outline-peach {
    background: var(--color-peach);
    border: 2px solid var(--color-peach);
    color: var(--color-text);
}

.btn-outline-peach:hover {
    background: #f0a898;
    border-color: #f0a898;
    color: var(--color-text);
    box-shadow: 0 4px 14px rgba(255, 214, 201, 0.55);
}

.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 3.5rem;
    font-size: 1.25rem;
}

.btn-xl {
    padding: 1.25rem 3.5rem;
    font-size: 1.25rem;
}

.btn-icon {
    padding: 0.6rem;
}

/* === Form Inputs === */
.form-input {
    width: 100%;
    min-width: 0;
    height: fit-content;
    padding: 1rem 1.5rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--color-peach);
    box-shadow: 0 0 0 4px rgba(255, 214, 201, 0.2);
}

.form-input.with-icon {
    padding-left: 3.5rem;
}

/* Native <select> dropdowns: replace the OS arrow with a single chevron pinned just
   inside the right edge. Without this, .form-input's right padding leaves a large gap
   between the arrow and the border on every dropdown across the app. */
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23857a72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.custom-select-wrapper {
    position: relative;
}

.custom-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text);
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.custom-select-trigger:focus {
    border-color: var(--color-peach);
    box-shadow: 0 0 0 4px rgba(255, 214, 201, 0.2);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 50;
    animation: slideDown 0.15s ease forwards;
}

.custom-select-option {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.custom-select-option:hover {
    background: var(--color-bg-light);
}

.custom-select-option.is-selected {
    background: var(--color-red);
    color: #fff;
    font-weight: 600;
}

.form-label {
    display: block;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-serif);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.hidden {
    display: none;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-dark-red);
    pointer-events: none;
}

/* === Badge === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    border: none;
}

.badge-active {
    background: rgba(239, 210, 126, 0.25);
    color: #7A5C10;
}

.badge-paid {
    background: rgba(84, 199, 126, 0.2);
    color: #1E6B3F;
}

.badge-gold {
    background: rgba(239, 210, 126, 0.2);
    color: var(--color-text);
    border: 2px solid rgba(239, 210, 126, 0.5);
}

/* === Nav Item === */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-nav);
    font-weight: 600;
    font-size: 0.9375rem;
    color: #999999;
    transition: color 0.2s ease;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.nav-link:hover {
    color: #555555;
}

.nav-link.active {
    color: #333333;
}

/* === Header === */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
    box-shadow: 0 1px 3px rgba(168, 120, 101, 0.1);
    border-bottom: 1px solid var(--color-border);
    height: 84px;
}

.header-inner {
    height: 100%;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* === Landing Header === */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 251, 245, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    height: 84px;
}

/* === Portal Dropdown === */
.portal-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 18rem;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 20;
    animation: slideDown 0.2s ease forwards;
}

/* === Mobile Menu === */
.mobile-menu {
    border-top: 1px solid var(--color-border);
    padding: 1rem 0;
    animation: fadeInUp 0.2s ease forwards;
}

/* === User Chip === */
.user-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
}

.app-header .user-chip {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0.625rem;
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-peach), var(--color-peach-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-text);
    flex-shrink: 0;
}

/* === Calendar Grid === */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.cal-day {
    aspect-ratio: 1;
    border-radius: 1rem;
    border: 2px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--color-bg-light);
    font-size: 0.875rem;
    color: var(--color-muted);
}

.cal-day:hover {
    border-color: var(--color-mint);
}

.cal-day.has-birthday {
    background: rgba(255, 214, 201, 0.3);
    border-color: var(--color-peach);
    font-weight: 600;
    color: var(--color-text);
}

.cal-day.has-birthday:hover {
    background: rgba(255, 214, 201, 0.4);
}

.cal-cake {
    position: absolute;
    bottom: 0.2rem;
    animation: cakeWiggle 0.5s ease-in-out infinite;
    animation-delay: 2s;
    color: var(--color-peach);
}

.cal-day.is-holiday {
    background: var(--color-mint);
    border-color: #A7D3C1;
    color: var(--color-text);
    font-weight: 600;
}

.cal-day.is-holiday::after {
    content: 'H';
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    font-size: 0.65rem;
    color: #4A7C66;
}

.cal-holiday-name {
    font-size: 0.65rem;
    color: #4A7C66;
    text-align: center;
    line-height: 1.1;
    margin-top: 0.2rem;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-table-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.5fr) minmax(90px, auto) minmax(70px, auto) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
}

.max-width {
    max-width: 1259px;
}

/* === Stat Card === */
.stat-card {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    font-family: var(--font-serif);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.2s;
}

.stat-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
}

/* === Pricing Card === */
.pricing-header {
    background: linear-gradient(135deg, var(--color-brown), var(--color-brown-dark));
    color: #fff;
    text-align: center;
    padding: 2rem;
}

/* === How It Works Steps === */
.step-row {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.step-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* === Dashboard Tablet === */
.dashboard-page {
    min-height: 100vh;
}

.orderhistory-page-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.ql-snow {
    background: white;
}

@media (max-width: 874px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-calendar {
        display: none !important;
    }

    .dashboard-upcoming,
    .celebration-card {
        width: 100% !important;
    }

    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 1rem !important;
    }

    .dashboard-stats .stat-card {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    .dashboard-stats .stat-card p:last-child {
        /* Fluid size so a large amount shrinks to fit a narrow card instead of
           overflowing once it can no longer wrap. */
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
    }

    .dashboard-upcoming {
        padding: 1rem !important;
    }

    .employees-grid {
        grid-template-columns: 1fr !important;
    }

    .employees-grid>* {
        min-width: 0;
    }

    .employees-form-card {
        padding: 1rem !important;
        overflow: hidden;
    }

    .employees-list-card {
        padding: 1rem !important;
    }

    .employees-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* === Employees page: toolbar (filter card) + pagination on mobile === */
@media (max-width: 768px) {
    .employees-toolbar {
        gap: 0.625rem;
    }

    /* Search and the months dropdown each take the full width of the card
       so the dropdown is wider and easier to use, not crammed beside search. */
    .employees-toolbar .employees-search {
        flex: 1 1 100%;
        min-width: 0;
    }

    .employees-toolbar .employees-month-filter {
        flex: 1 1 100%;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Order-status segmented control spans the row and splits evenly. */
    .employees-toolbar .employees-order-filter {
        display: flex !important;
        flex: 1 1 100%;
        width: 100%;
    }

    .employees-toolbar .employees-order-filter > button {
        flex: 1 1 0;
        padding: 0 0.5rem !important;
    }

    /* Sort + refresh share the last row and grow to fill it. */
    .employees-toolbar > .btn {
        flex: 1 1 auto;
    }

    /* Pagination: range on its own centered line, controls centered below. */
    .employees-pagination {
        justify-content: center;
        padding: 1rem !important;
    }

    .employees-pagination-range {
        flex: 1 1 100%;
        text-align: center;
    }

    .employees-pagination-controls {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* === Billing page mobile === */
@media (max-width: 768px) {
    .billing-header {
        margin-bottom: 1.5rem !important;
    }

    .billing-title {
        font-size: 1.75rem !important;
    }

    .billing-subtitle {
        font-size: 1rem !important;
    }

    /* Current-plan hero: tighter padding, and stack the status badge/icon
       above the plan details instead of leaving it stranded to the side
       once the row wraps. */
    .billing-hero {
        padding: 1.5rem !important;
    }

    .billing-hero-row {
        flex-direction: column-reverse;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .billing-hero-status {
        text-align: left !important;
    }

    .billing-hero-status-icon {
        width: 4rem !important;
        height: 4rem !important;
        margin: 0 !important;
        font-size: 1.75rem !important;
    }

    /* Smaller so a currency-prefixed price ("EUR 5") doesn't overflow. */
    .billing-hero-price {
        font-size: 2.5rem !important;
    }

    /* Section cards (plans, cancel): drop the wide 2rem side padding. */
    .billing-section {
        padding: 1.25rem !important;
    }

    /* Plan action (price + switch button) spans the row; full-width button
       gives a comfortable tap target. */
    .billing-plan-action {
        flex: 1 1 100%;
        align-items: stretch !important;
    }

    .billing-plan-action > .btn {
        width: 100%;
    }
}

/* === Holidays page mobile: date field goes full-width like the name field === */
@media (max-width: 768px) {
    .holiday-date-field {
        flex: 1 1 100% !important;
    }

    .holiday-date-input {
        width: 100% !important;
    }
}

/* === Admin Dashboard Mobile === */
@media (max-width: 768px) {
    .admin-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .admin-main-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-main-grid>* {
        min-width: 0;
    }

    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-form-grid>* {
        min-width: 0;
    }
}

/* Below the sidebar breakpoint the sidebar collapses to an off-canvas drawer,
   so the dashboard's 3fr/1fr calendar+list layout no longer has room: it would
   cram the "This Month" list into a narrow right-hand column (looks off-centre /
   shifted right). Collapse the grid to a single full-width column here. The
   calendar stays visible (stacked above the list) down to 874px, where the
   phone rules above hide it. */
@media (max-width: 1023.98px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-grid > * {
        min-width: 0;
    }

    .dashboard-upcoming {
        width: 100% !important;
    }
}

/* === Mobile === */
@media (max-width: 425px) {
    :root {
        --LR-padding: 1rem;
    }
}

/* === Responsive === */
@media (max-width: 768px) {
    .baker-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .baker-management-grid {
        grid-template-columns: 1fr !important;
    }

    .baker-management-grid>* {
        min-width: 0;
    }

    .baker-profile-fields-grid {
        grid-template-columns: 1fr !important;
    }

    .baker-profile-fields-grid>* {
        min-width: 0;
    }

    .baker-management-grid .form-input {
        padding: 0 0.7rem;
    }


    .md\:hidden {
        display: none;
    }

    .hidden.md\:flex {
        display: flex;
    }

    .step-row,
    .step-row:nth-child(even) {
        flex-direction: column;
    }

    .header-inner {
        padding: 0 1rem;
    }

    .lg\:flex {
        display: none !important;
    }

    .lg\:hidden {
        display: flex !important;
    }

    .grid-cols-md-2 {
        grid-template-columns: 1fr;
    }

    .grid-cols-md-3 {
        grid-template-columns: 1fr;
    }

    .grid-cols-md-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) {
    .sm\:flex-row {
        flex-direction: row;
    }

    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .hidden.md\:flex {
        display: flex;
    }

    .grid-cols-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .grid-cols-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex !important;

    }

    .lg\:hidden {
        display: none !important;
    }

    .grid-cols-lg-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* === Footer === */
.footer {
    background: linear-gradient(135deg, var(--color-brown), var(--color-brown-dark));
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-link {
    color: #F5F0E6;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #fff;
}

/* === Object Fit === */
.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

/* === BlUR === */
.blur-3xl {
    filter: blur(64px);
}

/* === Order Detail Panel Timeline === */
.order-timeline {
    display: flex;
    align-items: flex-start;
}

.order-tl-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    text-align: center;
}

.order-tl-step::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
}

.order-tl-step:first-child::before {
    display: none;
}

.order-tl-step--done::before,
.order-tl-step--current::before {
    background: var(--color-brown);
}

.order-tl-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    box-sizing: border-box;
    z-index: 1;
}

.order-tl-step--done .order-tl-dot {
    background: var(--color-brown);
    border-color: var(--color-brown);
}

.order-tl-step--current .order-tl-dot {
    background: var(--color-peach);
    border-color: var(--color-brown);
}

.order-tl-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-muted);
}

.order-tl-step--current .order-tl-label {
    color: var(--color-text);
    font-weight: 700;
}

.backdrop-blur {
    backdrop-filter: blur(8px);
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

/* Remove default Bootstrap overrides from Blazor template */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    display: none;
}

#blazor-error-ui[style*="display: block"] {
    display: block;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    right: 0;
    z-index: 1000;
}

.delivery-info {
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--color-bg-light);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.delivery-info-label {
    color: var(--color-muted);
    font-weight: 600;
    white-space: nowrap;
}

.delivery-info-value {
    color: var(--color-text);
    font-weight: 600;
}

.delivery-info-missing {
    color: #b91c1c;
}

.delivery-info-missing a {
    color: #b91c1c;
    text-decoration: underline;
    font-weight: 600;
}

.onboarding-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
}

.onboarding-warning svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.onboarding-warning a {
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================================
   MOBILE REDESIGN FOUNDATION (shared, additive)
   ------------------------------------------------------------
   Standard breakpoints used across the authenticated app:
     phone   : max-width 768px
     tablet  : 769px – 1023px
     desktop : min-width 1024px   (fixed sidebar appears here)
   Sidebar -> drawer switch: 1024px.   Table -> card switch: 768px.
   All rules below are max-width (mobile additions) so the desktop
   layout at >=1024px is never altered.
   ============================================================ */

/* --- Visibility helpers --- */
.show-mobile {
    display: none;
}

@media (max-width: 1023.98px) {
    .hide-desktop-down {
        /* visible at tablet/phone, hidden on desktop sidebar layout */
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block;
    }
}

/* --- Responsive stat / card grids ---
   Add one of these classes to a grid container. The base (desktop)
   column count is in the class name; it collapses on smaller screens. */
.resp-grid-4,
.resp-grid-3,
.resp-grid-2 {
    display: grid;
    gap: 1.5rem;
}

.resp-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

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

.resp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1023.98px) {

    .resp-grid-4,
    .resp-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .resp-grid-4,
    .resp-grid-3,
    .resp-grid-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --- Responsive two-column form rows ---
   Collapse paired fields (e.g. City / Postcode) to a single column. */
@media (max-width: 768px) {
    .resp-form-2col {
        grid-template-columns: 1fr !important;
    }

    .resp-form-2col > * {
        min-width: 0;
    }
}

/* --- Slide-over / detail panels ---
   Desktop keeps a fixed max width; phones get a full-screen sheet.
   !important guards against any residual inline width on the panel. */
.slide-over {
    width: min(480px, 100%);
}

@media (max-width: 768px) {
    .slide-over {
        width: 100% !important;
    }
}

/* --- Responsive tables: stacked label/value cards on phones ---
   Markup: add class="rtable" to the <table> and a data-label="Header"
   attribute to each <td>. The header row is hidden visually but kept
   for screen readers. Each row becomes a bordered card. */
@media (max-width: 768px) {
    table.rtable,
    table.rtable thead,
    table.rtable tbody,
    table.rtable th,
    table.rtable td,
    table.rtable tr {
        display: block;
    }

    /* Visually hide the header row but keep it accessible. */
    table.rtable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    table.rtable tr {
        margin-bottom: 0.75rem;
        padding: 0.5rem 1rem;
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        background: #fff;
    }

    table.rtable td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.4rem 0;
        text-align: right;
        border: none;
        border-bottom: 1px solid var(--color-bg-light);
    }

    table.rtable td:last-child {
        border-bottom: none;
    }

    table.rtable td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--color-muted);
        text-align: left;
    }

    /* Cells with no label (e.g. an actions column) span full width. */
    table.rtable td[data-label=""]::before,
    table.rtable td:not([data-label])::before {
        content: none;
    }

    table.rtable td:not([data-label]),
    table.rtable td[data-label=""] {
        justify-content: flex-end;
    }

    /* --- Baker dashboard "Today's Orders" quick-list ---
   These rows are laid out as a single inline flex row on desktop.
   On phones the order metadata + status badge + action button can't
   fit on one line, so the action button gets clipped off the card's
   right edge. Let the row wrap and give the action group its own full
   width line below the order details (issue #37). */
@media (max-width: 768px) {
    .today-order-row {
        flex-wrap: wrap;
        align-items: flex-start !important;
        gap: 0.625rem;
    }

    .today-order-main {
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem !important;
    }

    /* On mobile, push the recipient name to the right edge of the card. */
    .today-order-main .too-recipient {
        margin-left: auto;
    }

    .today-order-actions {
        width: 100%;
        justify-content: space-between !important;
    }
}


    /* Action button groups inside a stacked row: fill the row,
       buttons share the width evenly and stay aligned. */
    table.rtable td .rtable-actions {
        width: 100%;
    }

    table.rtable td .rtable-actions > * {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   MOBILE TOP BAR + OFF-CANVAS DRAWER (shared chrome)
   ------------------------------------------------------------
   Used by AppHeader / AdminHeader / BakerHeader. Each layout
   renders its own .app-topbar content and tags its <nav>
   sidebar with .app-drawer (+ .app-drawer--open when toggled).
   Active only below the 1024px desktop breakpoint; at >=1024px
   the fixed sidebar renders exactly as before.
   ============================================================ */
.app-topbar {
    display: none;
}

.app-drawer-overlay {
    display: none;
}

.app-topbar__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text);
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.app-topbar__burger:hover {
    background: rgba(0, 0, 0, 0.05);
}

.app-topbar__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.app-topbar__title {
    font-family: var(--font-brand);
    font-size: 1.05rem;
    color: var(--color-text);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

@media (max-width: 1023.98px) {
    .app-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        z-index: 45;
        padding: 0 0.75rem;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
    }

    /* Reserve room for the fixed top bar inside the scrolling main area. */
    .sidebar-offset {
        padding-top: 60px;
    }

    /* Off-canvas behaviour for any sidebar tagged .app-drawer. */
    .app-drawer {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }

    .app-drawer.app-drawer--open {
        transform: translateX(0);
    }

    .app-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgba(0, 0, 0, 0.45);
    }
}

/* ============================================================
   TOGGLE SWITCH + ICON DELETE BUTTON (reusable)
   ============================================================ */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.toggle-track {
    width: 40px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: #cbd5e1;
    transition: background 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-track {
    background: var(--color-red);
}

.toggle-switch input:checked + .toggle-track::after {
    transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-track {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Compact red icon-only delete button. */
.btn-delete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 0.625rem;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.btn-delete-icon:hover {
    background: #dc2626;
}

.btn-delete-icon:active {
    background: #b91c1c;
}

/* ── Sortable table headers ───────────────────────────────────────────
   Shared across every data table (admin .ap-tbl tables and the inline-
   styled Company/Baker tables). A header with .sort-th is clickable and
   shows a sort indicator: a muted ↕ when inactive, a brown ↑/↓ on the
   currently-sorted column. */
.sort-th {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.sort-th:hover {
    color: var(--color-text);
}

.sort-ind {
    margin-left: 0.2rem;
    font-size: 0.85em;
    color: var(--color-border);
}

.sort-th.is-sorted .sort-ind {
    color: var(--color-brown);
}