@charset "utf-8";
/* CSS Document */

/* ===== CSS VARIABLES =====
   Single source of truth for every design token in the platform.
   Mirrors ThemeService::defaults() — keep these in sync. */
:root {
    /* ---------- BRAND ---------- */
    --brand:          #7c3aed;
    --brand-dark:     #5b21b6;
    --brand-light:    #ede9fe;
    --brand-focus:    rgba(124,58,237,0.2);
    --primary:        #7c3aed;   /* alias of --brand */
    --primary-light:  #ede9fe;
    --primary-dark:   #5b21b6;

    /* ---------- NEUTRALS ---------- */
    --bg:             #faf8ff;
    --card:           #ffffff;
    --text:           #1e1b2e;
    --text-2:         #1a1625;
    --subtext:        #6b7280;
    --muted:          #9ca3af;
    --border:         #e5e7eb;
    --border-light:   #f3f4f6;

    /* ---------- SEMANTIC PALETTE ---------- */
    --green:          #059669;
    --green-dark:     #047857;
    --green-light:    #ecfdf5;
    --green-border:   #a7f3d0;
    --red:            #dc2626;
    --red-dark:       #b91c1c;
    --red-light:      #fef2f2;
    --red-border:     #fecaca;
    --amber:          #d97706;
    --amber-dark:     #b45309;
    --amber-light:    #fffbeb;
    --amber-border:   #fbbf24;
    --blue:           #0284c7;
    --teal:           #14b8a6;
    --indigo:         #6366f1;
    --lime:           #22c55e;
    --orange:         #ea580c;
    --yellow:         #eab308;
    --grey:           #6b7280;
    --brown:          #92400e;

    /* ---------- TYPOGRAPHY ---------- */
    --font-main:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:      'SF Mono', Monaco, Consolas, monospace;
    --font-emoji:     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    --size-2xl:       1.85rem;
    --size-xl:        1.3rem;
    --size-lg:        1rem;
    --size-md:        0.95rem;
    --size-base:      0.88rem;
    --size-sm:        0.82rem;
    --size-xs:        0.72rem;
    --size-label:     0.6rem;
    --weight-reg:     400;
    --weight-med:     500;
    --weight-semi:    600;
    --weight-bold:    700;
    --weight-black:   800;
    --lh-tight:       1.2;
    --lh-normal:      1.5;
    --lh-relaxed:     1.6;
    --track-tight:    -0.02em;
    --track-normal:   0;
    --track-loose:    0.04em;
    --track-wide:     0.08em;

    /* ---------- SPACING ---------- */
    --space-3xl:      2rem;
    --space-2xl:      1.5rem;
    --space-xl:       1.25rem;
    --space-lg:       1rem;
    --space-md:       0.75rem;
    --space-sm:       0.5rem;
    --space-xs:       0.25rem;

    /* ---------- RADII ---------- */
    --radius-pill:    999px;
    --radius-2xl:     18px;
    --radius-xl:      16px;
    --radius-lg:      12px;
    --radius-md:      8px;
    --radius-sm:      6px;
    --radius:         0.75rem;   /* legacy alias */

    /* ---------- SHADOWS ---------- */
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:         0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lift:       0 4px 12px rgba(0,0,0,0.08);
    --shadow-modal:      0 -10px 40px rgba(0,0,0,0.18);
    --shadow-drawer:     -8px 0 30px rgba(0,0,0,0.15);
    --shadow-brand:      0 2px 10px rgba(124,58,237,0.3);
    --shadow-brand-lg:   0 8px 32px rgba(124,58,237,0.25);
    --shadow-green:      0 2px 10px rgba(5,150,105,0.3);
    --shadow-drop:       drop-shadow(0 2px 8px rgba(0,0,0,0.08));
    --shadow-inset:      inset 0 2px 4px rgba(0,0,0,0.1);

    /* ---------- MOTION ---------- */
    --ease-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:    cubic-bezier(0.22, 1.35, 0.36, 1);
    --ease-pop:       cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --dur-fast:       0.12s;
    --dur-base:       0.24s;
    --dur-slow:       0.45s;

    /* ---------- COMPONENT SIZES ---------- */
    --input-height:           44px;
    --topbar-h:               64px;
    --bottomnav-h:            64px;
    --sidebar-w:              240px;
    --slideout-w:             440px;
    --slideout-max-h-mobile:  92vh;

    /* ---------- Z-INDEX STACK ---------- */
    --z-topbar:           100;
    --z-sidebar:          90;
    --z-bottomnav:        100;
    --z-toast:            10100;
    --z-slideout:         9999;
    --z-slideout-overlay: 9998;
    --z-issue-modal:      10001;
    --z-success:          10050;

    /* ---------- GRADIENTS ---------- */
    --gradient-brand:                linear-gradient(135deg, #7c3aed, #5b21b6);
    --gradient-storefront:           linear-gradient(135deg, #fafafa 0%, #ede9fe 100%);
    /* One gradient per order status — start = saturated (bd), end = darker (fg). */
    --gradient-status-unpaid:        linear-gradient(135deg, #eab308, #a16207);
    --gradient-status-paid:          linear-gradient(135deg, #ca8a04, #a16207);
    --gradient-status-preflight:     linear-gradient(135deg, #8b5cf6, #7c3aed);
    --gradient-status-file_issue:    linear-gradient(135deg, #ea580c, #c2410c);
    --gradient-status-printing:      linear-gradient(135deg, #6366f1, #4338ca);
    --gradient-status-ready:         linear-gradient(135deg, #d97706, #b45309);
    --gradient-status-dispatched:    linear-gradient(135deg, #7c3aed, #6d28d9);
    --gradient-status-shipped:       linear-gradient(135deg, #14b8a6, #0f766e);
    --gradient-status-delivered:     linear-gradient(135deg, #059669, #047857);
    --gradient-status-pickedup:      linear-gradient(135deg, #22c55e, #15803d);
    --gradient-status-unclaimed:     linear-gradient(135deg, #e11d48, #be123c);
    --gradient-status-missing:       linear-gradient(135deg, #dc2626, #b91c1c);
    --gradient-status-cancelled:     linear-gradient(135deg, #64748b, #475569);
    --gradient-status-refunded:      linear-gradient(135deg, #9ca3af, #6b7280);

    /* ===== CANONICAL ORDER STATUS COLORS =====
       Single source of truth. Every surface that displays an order status
       (table badge, kanban pill, filter chip, slide-out, email preview, etc.)
       MUST use these variables. Do not introduce per-page overrides.
       Each status defines: --bg (light tint surface), --fg (text), --bd (border / saturated). */
    --status-unpaid-bg:     #fefce8; --status-unpaid-fg:     #a16207; --status-unpaid-bd:     #eab308;
    --status-paid-bg:       #fef9c3; --status-paid-fg:       #a16207; --status-paid-bd:       #ca8a04;
    --status-preflight-bg:  #f5f3ff; --status-preflight-fg:  #7c3aed; --status-preflight-bd:  #8b5cf6;
    --status-file_issue-bg: #fff7ed; --status-file_issue-fg: #c2410c; --status-file_issue-bd: #ea580c;
    --status-printing-bg:   #eef2ff; --status-printing-fg:   #4338ca; --status-printing-bd:   #6366f1;
    --status-ready-bg:      #fffbeb; --status-ready-fg:      #b45309; --status-ready-bd:      #d97706;
    --status-dispatched-bg: #f5f3ff; --status-dispatched-fg: #6d28d9; --status-dispatched-bd: #7c3aed;
    --status-shipped-bg:    #f0fdfa; --status-shipped-fg:    #0f766e; --status-shipped-bd:    #14b8a6;
    --status-delivered-bg:  #ecfdf5; --status-delivered-fg:  #047857; --status-delivered-bd:  #059669;
    --status-pickedup-bg:   #f0fdf4; --status-pickedup-fg:   #15803d; --status-pickedup-bd:   #22c55e;
    --status-unclaimed-bg:  #fff1f2; --status-unclaimed-fg:  #be123c; --status-unclaimed-bd:  #e11d48;
    --status-missing-bg:    #fef2f2; --status-missing-fg:    #b91c1c; --status-missing-bd:    #dc2626;
    --status-cancelled-bg:  #f8fafc; --status-cancelled-fg:  #475569; --status-cancelled-bd:  #64748b;
    --status-refunded-bg:   #f9fafb; --status-refunded-fg:   #6b7280; --status-refunded-bd:   #9ca3af;
}

/* ===== CANONICAL STATUS PILL =====
   Any element with class "status-tag status-{name}" gets the canonical look.
   Sizing is left to the host context (override font-size / padding as needed). */
.status-tag[class*="status-"],
.status-badge[class*="status-"] {
    background: var(--bg, transparent);
    color: var(--fg, inherit);
    border-color: var(--bd, transparent);
}
.status-tag.status-unpaid,     .status-badge.status-unpaid     { --bg: var(--status-unpaid-bg);     --fg: var(--status-unpaid-fg);     --bd: var(--status-unpaid-bd); }
.status-tag.status-paid,       .status-badge.status-paid       { --bg: var(--status-paid-bg);       --fg: var(--status-paid-fg);       --bd: var(--status-paid-bd); }
.status-tag.status-preflight,  .status-badge.status-preflight  { --bg: var(--status-preflight-bg);  --fg: var(--status-preflight-fg);  --bd: var(--status-preflight-bd); }
.status-tag.status-file_issue, .status-badge.status-file_issue { --bg: var(--status-file_issue-bg); --fg: var(--status-file_issue-fg); --bd: var(--status-file_issue-bd); }
.status-tag.status-printing,   .status-badge.status-printing   { --bg: var(--status-printing-bg);   --fg: var(--status-printing-fg);   --bd: var(--status-printing-bd); }
.status-tag.status-ready,      .status-badge.status-ready      { --bg: var(--status-ready-bg);      --fg: var(--status-ready-fg);      --bd: var(--status-ready-bd); }
.status-tag.status-dispatched, .status-badge.status-dispatched { --bg: var(--status-dispatched-bg); --fg: var(--status-dispatched-fg); --bd: var(--status-dispatched-bd); }
.status-tag.status-shipped,    .status-badge.status-shipped    { --bg: var(--status-shipped-bg);    --fg: var(--status-shipped-fg);    --bd: var(--status-shipped-bd); }
.status-tag.status-delivered,  .status-badge.status-delivered  { --bg: var(--status-delivered-bg);  --fg: var(--status-delivered-fg);  --bd: var(--status-delivered-bd); }
.status-tag.status-pickedup,   .status-badge.status-pickedup   { --bg: var(--status-pickedup-bg);   --fg: var(--status-pickedup-fg);   --bd: var(--status-pickedup-bd); }
.status-tag.status-unclaimed,  .status-badge.status-unclaimed  { --bg: var(--status-unclaimed-bg);  --fg: var(--status-unclaimed-fg);  --bd: var(--status-unclaimed-bd); }
.status-tag.status-missing,    .status-badge.status-missing    { --bg: var(--status-missing-bg);    --fg: var(--status-missing-fg);    --bd: var(--status-missing-bd); }
.status-tag.status-cancelled,  .status-badge.status-cancelled  { --bg: var(--status-cancelled-bg);  --fg: var(--status-cancelled-fg);  --bd: var(--status-cancelled-bd); }
.status-tag.status-refunded,   .status-badge.status-refunded   { --bg: var(--status-refunded-bg);   --fg: var(--status-refunded-fg);   --bd: var(--status-refunded-bd); }

/* ===== CANONICAL PRIORITY TIER COLORS =====
   For order turnaround tiers (early/best-value, standard, rush, urgent/express,
   critical/priority, lastminute). Same triple-channel scheme as statuses. */
:root {
    --tier-early-bg:      #f0fdf4; --tier-early-fg:      #059669; --tier-early-bd:      #059669;
    --tier-standard-bg:   #f0f9ff; --tier-standard-fg:   #0284c7; --tier-standard-bd:   #0284c7;
    --tier-rush-bg:       #fefce8; --tier-rush-fg:       #a16207; --tier-rush-bd:       #eab308;
    --tier-urgent-bg:     #fff7ed; --tier-urgent-fg:     #c2410c; --tier-urgent-bd:     #ea580c;
    --tier-critical-bg:   #fef2f2; --tier-critical-fg:   #b91c1c; --tier-critical-bd:   #dc2626;
    --tier-lastminute-bg: #faf5ff; --tier-lastminute-fg: #6d28d9; --tier-lastminute-bd: #7c3aed;

    /* ===== COMPONENT KNOBS =====
       Per-component padding / radius / font-size / etc. Components reference
       these vars instead of hardcoded values; theme editor exposes them. */

    /* Buttons — defaults match the historical .btn rule in admin-components.css
       so admin renders identically until the theme editor retones a token. */
    --btn-padding-y:     6px;
    --btn-padding-x:     12px;
    --btn-radius:        6px;
    --btn-font-size:     0.8rem;
    --btn-font-weight:   500;
    --btn-border-width:  1px;
    --btn-active-scale:  0.97;

    /* Cards (order / event / generic) */
    --card-radius:       12px;     /* default radius-lg */
    --card-border-width: 1px;
    --card-shadow:       0 1px 3px rgba(0,0,0,0.04);
    --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.08);
    --card-padding-y:    14px;
    --card-padding-x:    16px;

    /* Form inputs */
    --input-padding-y:        10px;
    --input-padding-x:        14px;
    --input-radius:           8px;     /* default radius-md */
    --input-border-width:     1px;
    --input-font-size:        0.95rem; /* default size-md */
    --input-focus-ring-width: 3px;

    /* Badges / pills */
    --badge-padding-y:    4px;
    --badge-padding-x:    10px;
    --badge-radius:       999px;   /* default radius-pill */
    --badge-font-size:    0.6rem;  /* default size-label */
    --badge-font-weight:  700;
    --badge-tracking:     0.04em;  /* default track-loose */

    /* Hero banner (storefront) */
    --hero-padding-y:        2rem;
    --hero-padding-x:        2.25rem;
    --hero-radius:           16px;  /* default radius-xl */
    --hero-border-top-width: 4px;

    /* Slide-out header band */
    --slideout-head-padding-top:    24px;
    --slideout-head-padding-bottom: 18px;
    --slideout-head-padding-x:      20px;
    --slideout-head-radius:         18px;  /* default radius-2xl */

    /* Sidebar nav items (portal dark theme) */
    --navitem-padding-y:    12px;
    --navitem-padding-x:    20px;
    --navitem-radius:       6px;
    --navitem-font-size:    0.9rem;
    --navitem-font-weight:  500;

    /* Step number circles (storefront "How it works") */
    --step-size:        44px;
    --step-radius:      50%;
    --step-font-size:   1.1rem;
    --step-font-weight: 800;
    --step-border-width:2px;

    /* Call pill (topnav phone link) */
    --callpill-padding-y: 8px;
    --callpill-padding-x: 14px;
    --callpill-radius:    999px;
    --callpill-font-size: 0.88rem;

    /* Gradients — composed CSS values for major surfaces */
    --gradient-brand:        linear-gradient(135deg, #7c3aed, #5b21b6);
    --gradient-storefront:   linear-gradient(135deg, #fafafa 0%, #ede9fe 100%);
    --gradient-card-success: linear-gradient(135deg, #059669, #047857);
}

/* ===== BASE STYLES & RESET ===== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Montserrat', sans-serif; 
}

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

a:hover {
    text-decoration: none;
}

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

body { 
    background: var(--bg); 
    color: var(--text); 
    line-height: 1.5;
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
    padding: 20px 0;
}

body.edit-mode {
    padding-bottom: 80px;
}

body.login-page { 
    font-family: 'Montserrat', sans-serif; 
    background: #faf8ff; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
}

/* ===== UTILITY CLASSES ===== */
.hidden { 
    display: none !important; 
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes fadeOut {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== LOADING AND SPINNER ===== */
.loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--subtext);
    font-size: 0.85rem;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
/* ===== PULSATING ANIMATIONS ===== */
@keyframes pulseAlert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulseWarning {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5);
    }
    50% { 
        opacity: 0.95;
        transform: scale(1.03);
        box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.5);
    }
}