/* Freshly Grocery design system: primitive -> semantic -> component tokens. */
:root {
    --primitive-primary: #388D74;
    --primitive-primary-dark: #2F765F;
    --primitive-primary-light: #DDEFE7;
    --primitive-secondary: #748837;
    --primitive-bg: #F4E7D8;
    --primitive-bg-mint: #D7E9E1;
    --primitive-surface: #FFF9F1;
    --primitive-surface-white: #FFFFFF;
    --primitive-text: #355625;
    --primitive-text-secondary: #6F756E;
    --primitive-muted: #A3A59F;
    --primitive-border: #E4DED4;
    --primitive-success: #2F9B72;
    --primitive-warning: #D99A32;
    --primitive-error: #C95745;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 9999px;

    --shadow-card: 0 4px 16px rgba(47, 77, 62, 0.06);
    --shadow-elevated: 0 8px 24px rgba(47, 77, 62, 0.08);
    --shadow-device: 0 20px 50px rgba(47, 77, 62, 0.14);

    --semantic-page-bg: var(--primitive-bg);
    --semantic-surface: var(--primitive-surface);
    --semantic-surface-elevated: var(--primitive-surface-white);
    --semantic-text: var(--primitive-text);
    --semantic-text-secondary: var(--primitive-text-secondary);
    --semantic-border: var(--primitive-border);
    --semantic-primary: var(--primitive-primary);
    --semantic-primary-hover: var(--primitive-primary-dark);
    --semantic-success: var(--primitive-success);
    --semantic-warning: var(--primitive-warning);
    --semantic-error: var(--primitive-error);

    --component-card-radius: 16px;
    --component-control-height: 44px;
    --component-button-radius: 9999px;
    --component-input-radius: 9999px;
    --component-focus-ring: 0 0 0 3px rgba(56, 141, 116, 0.22);
}

.freshly-page,
.freshly-page * {
    box-sizing: border-box;
}

.freshly-page {
    min-height: 100dvh;
    color: var(--semantic-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 10% 10%, rgba(215, 233, 225, 0.9), transparent 35%),
        radial-gradient(circle at 90% 30%, rgba(243, 220, 198, 0.8), transparent 35%),
        var(--semantic-page-bg);
}

/* Auth/keypad pages: keep the keypad in its own grid row and let the content scroll. */
body.freshly-auth-page {
    height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--semantic-page-bg);
}

body.freshly-auth-page .scroll-container {
    width: min(100%, 430px);
    margin-inline: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

body.freshly-auth-page .scroll-container::-webkit-scrollbar { display: none; }

body.freshly-auth-page .pin-top,
body.freshly-auth-page .top-content {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

body.freshly-auth-page .pin-top::-webkit-scrollbar,
body.freshly-auth-page .top-content::-webkit-scrollbar { display: none; }

body.freshly-auth-page .keypad-section,
body.freshly-auth-page .pin-bottom {
    width: min(100%, 430px);
    margin-inline: auto;
    flex-shrink: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

body.freshly-auth-page .key-btn,
body.freshly-auth-page .key { min-height: 44px; }

/* Customer shell: consistent max-width, surfaces, pills and safe bottom actions. */
body.freshly-customer-page {
    min-height: 100dvh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    color: var(--semantic-text);
    background:
        radial-gradient(circle at 12% 0%, rgba(215, 233, 225, 0.88), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(244, 231, 216, 0.84), transparent 34%),
        var(--semantic-page-bg);
}

body.freshly-customer-page #dashboardShell,
body.freshly-customer-page > .mobile-content,
body.freshly-customer-page > .receipt-container {
    width: min(100%, 430px);
    max-width: 430px;
    margin-inline: auto;
}

body.freshly-customer-page #dashboardShell {
    min-height: 100dvh;
    height: 100dvh !important;
    overflow: hidden;
    background: var(--semantic-surface-elevated);
    box-shadow: var(--shadow-device);
}

body.freshly-customer-page .dashboard-header-gradient {
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 249, 241, 0.7), transparent 30%),
        linear-gradient(145deg, var(--primitive-bg-mint), var(--primitive-surface));
}

body.freshly-customer-page .category-tab,
body.freshly-customer-page .modal-content,
body.freshly-customer-page .receipt-card {
    border-color: var(--semantic-border);
    border-radius: var(--radius-md);
}

body.freshly-customer-page .category-tab.active,
body.freshly-customer-page .add-to-cart-btn,
body.freshly-customer-page .btn-primary {
    background: var(--semantic-primary);
}

body.freshly-customer-page .category-tab.active,
body.freshly-customer-page .add-to-cart-btn,
body.freshly-customer-page .btn-primary { color: #fff; }

body.freshly-customer-page .products-grid { gap: var(--space-3); }
body.freshly-customer-page .product-card { border-color: var(--primitive-primary-light); border-radius: var(--radius-md); }
body.freshly-customer-page .product-name { color: var(--semantic-text); }
body.freshly-customer-page .product-price { color: var(--semantic-primary); }

body.freshly-customer-page .bottom-nav,
body.freshly-customer-page .fixed.bottom-0 {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: rgba(255, 249, 241, 0.94);
    border-color: var(--semantic-border);
    backdrop-filter: blur(16px);
}

body.freshly-customer-page .card,
body.freshly-customer-page .bg-white.rounded-lg,
body.freshly-customer-page .receipt-card {
    border-color: var(--semantic-border);
    box-shadow: var(--shadow-card);
}

body.freshly-customer-page .header,
body.freshly-customer-page .tracking-header {
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 249, 241, 0.76), transparent 30%),
        linear-gradient(145deg, var(--primitive-bg-mint), var(--primitive-surface));
    border-color: var(--semantic-border);
}

body.freshly-customer-page .main-content,
body.freshly-customer-page .search-section,
body.freshly-customer-page .receipt-container,
body.freshly-customer-page #mainContent {
    width: min(100%, 430px);
    margin-inline: auto;
}

body.freshly-customer-page .transaction-card,
body.freshly-customer-page .section-card,
body.freshly-customer-page .breakdown-card,
body.freshly-customer-page .limit-focus,
body.freshly-customer-page .user-card,
body.freshly-customer-page .info-card,
body.freshly-customer-page .product-card {
    border-color: var(--semantic-border);
    box-shadow: var(--shadow-card);
}

body.freshly-customer-page .filter-btn.active,
body.freshly-customer-page .status-badge.processing,
body.freshly-customer-page .btn-add,
body.freshly-customer-page .action-btn.proceed {
    background: var(--semantic-primary);
    border-color: var(--semantic-primary);
}

body.freshly-customer-page .fixed-footer,
body.freshly-customer-page .footer-action {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Admin/staff surfaces share the same visual language while keeping Tailwind hooks intact. */
body.freshly-admin-page,
body.freshly-staff-page {
    min-height: 100dvh;
    color: var(--semantic-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(215, 233, 225, 0.72), transparent 28%),
        var(--semantic-page-bg);
}

body.freshly-admin-page .sidebar,
body.freshly-admin-page .topbar,
body.freshly-admin-page .bg-white {
    border-color: var(--semantic-border);
}

body.freshly-admin-page .sidebar { background: var(--semantic-surface); }
body.freshly-admin-page .topbar { background: rgba(255, 249, 241, 0.94); backdrop-filter: blur(16px); }
body.freshly-admin-page .admin-card,
body.freshly-admin-page .excel-table-wrapper,
body.freshly-admin-page .bg-white.rounded-lg,
body.freshly-admin-page .bg-white.rounded-xl {
    border-color: var(--semantic-border);
    box-shadow: var(--shadow-card);
}

body.freshly-admin-page .bg-green-600,
body.freshly-admin-page .bg-emerald-600,
body.freshly-admin-page .bg-blue-600,
body.freshly-admin-page .bg-indigo-600 {
    background-color: var(--semantic-primary);
}

body.freshly-staff-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.freshly-staff-page .solid-header,
body.freshly-staff-page .glass-header,
body.freshly-staff-page .glass-nav {
    border-color: var(--semantic-border);
    background: rgba(255, 249, 241, 0.94);
    color: var(--semantic-text);
    backdrop-filter: blur(16px);
}

body.freshly-staff-page .bg-blue-600,
body.freshly-staff-page .bg-indigo-600,
body.freshly-staff-page .bg-emerald-500 {
    background-color: var(--semantic-primary);
}

body.freshly-staff-page .text-blue-600,
body.freshly-staff-page .text-indigo-600,
body.freshly-staff-page .text-emerald-600 { color: var(--semantic-primary); }

@media (max-height: 620px) {
    body.freshly-auth-page .scroll-container { padding-top: 8px; }
    body.freshly-auth-page .logo-wrapper { margin-block: 0 6px; }
    body.freshly-auth-page .main-subtitle { margin-bottom: 10px; }
    body.freshly-auth-page .feature-card { margin-bottom: 10px; }
}

.freshly-shell {
    width: min(100% - 32px, 1200px);
    margin-inline: auto;
    padding-block: var(--space-6);
}

.freshly-mobile-frame {
    width: min(100%, 430px);
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--primitive-bg-mint);
    box-shadow: var(--shadow-device);
}

.freshly-card {
    background: var(--semantic-surface);
    border: 1px solid var(--semantic-border);
    border-radius: var(--component-card-radius);
    box-shadow: var(--shadow-card);
}

.freshly-card-elevated {
    background: var(--semantic-surface-elevated);
    border: 1px solid rgba(228, 222, 212, 0.8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
}

.freshly-btn,
.freshly-btn-primary,
.freshly-btn-secondary,
.freshly-icon-btn {
    min-height: var(--component-control-height);
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
    -webkit-tap-highlight-color: transparent;
}

.freshly-btn,
.freshly-btn-primary,
.freshly-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 20px;
    border-radius: var(--component-button-radius);
    font-size: 0.875rem;
    font-weight: 700;
}

.freshly-btn-primary {
    color: #fff;
    background: var(--semantic-primary);
    box-shadow: var(--shadow-card);
}

.freshly-btn-primary:hover { background: var(--semantic-primary-hover); }
.freshly-btn-primary:active,
.freshly-btn-secondary:active,
.freshly-icon-btn:active { transform: scale(0.98); }

.freshly-btn-secondary {
    color: var(--semantic-primary);
    background: var(--primitive-primary-light);
}

.freshly-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--component-control-height);
    min-width: var(--component-control-height);
    border-radius: 50%;
    color: var(--semantic-text);
    background: var(--semantic-surface-elevated);
    box-shadow: var(--shadow-card);
}

.freshly-input,
.freshly-select {
    width: 100%;
    min-height: var(--component-control-height);
    padding: 11px 14px;
    color: var(--semantic-text);
    background: var(--semantic-surface-elevated);
    border: 1px solid var(--semantic-border);
    border-radius: var(--component-input-radius);
    font: inherit;
    outline: none;
}

.freshly-input::placeholder { color: var(--primitive-muted); }
.freshly-input:focus,
.freshly-select:focus { border-color: var(--semantic-primary); box-shadow: var(--component-focus-ring); }

.freshly-focus:focus-visible,
.freshly-btn:focus-visible,
.freshly-btn-primary:focus-visible,
.freshly-btn-secondary:focus-visible,
.freshly-icon-btn:focus-visible,
.freshly-input:focus-visible,
.freshly-select:focus-visible {
    outline: 2px solid var(--semantic-primary);
    outline-offset: 3px;
}

.freshly-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 24px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
}

.freshly-badge-success { color: #216f51; background: #e2f4eb; }
.freshly-badge-warning { color: #865d15; background: #fff0d1; }
.freshly-badge-error { color: #8f392e; background: #fbe5e0; }
.freshly-badge-muted { color: var(--semantic-text-secondary); background: #f1eee8; }

.freshly-product-card {
    overflow: hidden;
    padding: var(--space-3);
    background: var(--semantic-surface);
    border: 1px solid rgba(228, 222, 212, 0.8);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.freshly-product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.freshly-product-card img { transition: transform 180ms ease-out; }
.freshly-product-card:hover img { transform: scale(1.03); }

.freshly-quantity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.freshly-quantity > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--semantic-border);
    border-radius: 50%;
    color: var(--semantic-primary);
    background: var(--semantic-surface-elevated);
    cursor: pointer;
}

.freshly-table-wrap { overflow-x: auto; border: 1px solid var(--semantic-border); border-radius: var(--radius-md); }
.freshly-table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--semantic-surface); }
.freshly-table th,
.freshly-table td { padding: 12px 14px; border-bottom: 1px solid var(--semantic-border); text-align: left; }
.freshly-table th { color: var(--semantic-text-secondary); background: rgba(215, 233, 225, 0.42); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.freshly-table td { color: var(--semantic-text); font-size: 0.8125rem; }
.freshly-table tr:last-child td { border-bottom: 0; }

.freshly-bottom-nav {
    position: fixed;
    z-index: 50;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 32px), 398px);
    margin-inline: auto;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-pill);
    background: rgba(255, 249, 241, 0.82);
    box-shadow: var(--shadow-elevated);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.freshly-bottom-nav a,
.freshly-bottom-nav button { min-width: 44px; min-height: 44px; }
.freshly-safe-bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.freshly-keypad { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.freshly-muted { color: var(--semantic-text-secondary); }
.freshly-price { color: var(--semantic-text); font-variant-numeric: tabular-nums; font-weight: 700; }

@media (min-width: 640px) {
    .freshly-shell { width: min(100% - 48px, 1200px); padding-block: var(--space-8); }
}

@media (min-width: 1024px) {
    .freshly-shell { width: min(100% - 64px, 1200px); }
}

@media (prefers-reduced-motion: reduce) {
    .freshly-btn,
    .freshly-btn-primary,
    .freshly-btn-secondary,
    .freshly-icon-btn,
    .freshly-product-card,
    .freshly-product-card img { transition: none; }
}

@media print {
    .freshly-page { min-height: auto; background: #fff; }
    .freshly-bottom-nav { display: none !important; }
    .freshly-card,
    .freshly-card-elevated,
    .freshly-product-card { box-shadow: none; }
    .freshly-table-wrap { overflow: visible; }
}