/* ================================================
   TOKENS
   Flat, neutral design: no gradients, no elevation shadows,
   no hover lift. One accent colour (--accent) so a tenant
   brand colour can replace it later.
   ================================================ */
:root {
    --accent: #1f2937;
    --accent-hover: #111827;
    --accent-subtle: #f3f4f6;
    --accent-contrast: #ffffff;
    --focus-ring: rgba(31, 41, 55, 0.15);

    --success: #15803d;
    --success-subtle: #f0fdf4;
    --warning: #b45309;
    --danger: #b91c1c;
    --danger-subtle: #fef2f2;
    --info-subtle: #f3f4f6;

    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    --white: #ffffff;

    --border: var(--gray-200);
    --border-strong: var(--gray-300);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;

    /* Legacy aliases still referenced from app.js */
    --primary: var(--accent);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-50);
    min-height: 100vh;
    color: var(--gray-900);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--gray-900);
}

a:hover {
    color: var(--gray-600);
}

/* ================================================
   LOGIN SECTION
   ================================================ */
#login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
}

.login-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}

.login-card h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--gray-900);
    font-weight: 600;
    font-size: 1.5rem;
}

.login-card h2 i {
    color: var(--gray-500);
    margin-right: 0.25rem;
}

.login-card .form-label {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.login-card .form-control {
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
}

.login-card .btn-primary {
    padding: 0.625rem;
    font-size: 1rem;
    width: 100%;
}

/* ================================================
   NAVBAR
   ================================================ */
.navbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0.625rem 0;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--gray-900);
}

.navbar-brand:hover {
    color: var(--gray-900);
}

.navbar-brand i {
    color: var(--gray-500);
}

.customer-info {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.customer-info .discount-badge {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--border);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.nav-link {
    color: var(--gray-600) !important;
    font-weight: 500;
    padding: 0.5rem 0.875rem !important;
    border-radius: var(--radius);
}

.nav-link:hover {
    color: var(--gray-900) !important;
    background: var(--gray-100);
}

/* Active page: grey fill plus darker, bolder text (inactive links are grey). */
.nav-link.active {
    color: var(--gray-900) !important;
    background: var(--gray-100);
    font-weight: 600;
}

/* ================================================
   MAIN CONTAINER
   ================================================ */
.main-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ================================================
   CATEGORY SIDEBAR
   ================================================ */
.category-sidebar {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1rem;
    border: 1px solid var(--border);
    position: sticky;
    top: 80px;
}

.category-sidebar h6 {
    color: var(--gray-500);
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0.25rem 0.5rem 0.75rem;
}

.category-sidebar .list-group-item {
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius);
    margin-bottom: 2px;
    color: var(--gray-700);
    background: transparent;
}

.category-sidebar .list-group-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

/* Selected category: filled with the accent colour. The old grey fill was
   ~1.1:1 against white and hard to see (WCAG 1.4.11). */
.category-sidebar .list-group-item.active {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}

.category-sidebar .list-group-item.active:hover {
    background: var(--accent-hover);
    color: var(--accent-contrast);
}

/* The count badge is .bg-secondary, which forces a light grey background
   with !important — override it here or white text disappears on it. */
.category-sidebar .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: var(--accent-contrast);
}

.category-sidebar .badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
    border-radius: var(--radius-sm);
    background: transparent !important;
    color: var(--gray-500);
}

/* ================================================
   PRODUCT CARDS
   ================================================ */
.product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.product-card:hover {
    border-color: var(--border-strong);
}

.product-image-container {
    height: 200px;
    position: relative;
    overflow: hidden;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border);
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card .card-body {
    padding: 1rem;
}

.product-card .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    min-height: 2.8em;
    color: var(--gray-900);
}

.price-display {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.discounted-price {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.original-price {
    font-size: 0.85rem;
    color: var(--gray-500);
    text-decoration: line-through;
}

.badge.bg-success {
    background: var(--success-subtle) !important;
    color: var(--success);
    font-weight: 600;
    padding: 0.25em 0.5em;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.badge.bg-secondary {
    background: var(--gray-100) !important;
    color: var(--gray-700);
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.product-card .card-footer {
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
}

.qty-input {
    width: 50px !important;
    text-align: center;
    font-weight: 600;
}

.product-card .input-group .btn {
    padding: 0.25rem 0.75rem;
}

/* ================================================
   CART BADGE
   ================================================ */
#cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 50px;
    min-width: 20px;
}

/* Feedback when the cart count changes (cart.js animateCartChange).
   The whole button flashes and sends out a ring — a moving icon/badge alone
   was too subtle to notice. Text colour is left alone (nav-link sets it with
   !important, and dark text stays readable on the light flash). */
#nav-cart.cart-changed-up {
    animation: cart-flash-up 1s ease-out;
}

#nav-cart.cart-changed-down {
    animation: cart-flash-down 1s ease-out;
}

@keyframes cart-flash-up {
    0%   { background-color: #bbf7d0; box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.45); }
    60%  { background-color: #dcfce7; box-shadow: 0 0 0 10px rgba(21, 128, 61, 0); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

@keyframes cart-flash-down {
    0%   { background-color: var(--gray-300); box-shadow: 0 0 0 0 rgba(75, 85, 99, 0.35); }
    60%  { background-color: var(--gray-200); box-shadow: 0 0 0 10px rgba(75, 85, 99, 0); }
    100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(75, 85, 99, 0); }
}

@keyframes cart-flash-up-static {
    0%, 40% { background-color: #bbf7d0; }
    100%    { background-color: transparent; }
}

@keyframes cart-flash-down-static {
    0%, 40% { background-color: var(--gray-300); }
    100%    { background-color: transparent; }
}

#nav-cart.cart-changed-up #cart-badge {
    animation: cart-badge-pop 0.45s ease-out;
}

#nav-cart.cart-changed-down #cart-badge {
    animation: cart-badge-shrink 0.35s ease-out;
}

#nav-cart.cart-changed-up .fa-shopping-cart,
#nav-cart.cart-changed-down .fa-shopping-cart {
    animation: cart-icon-wiggle 0.45s ease-in-out;
}

@keyframes cart-badge-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}

@keyframes cart-badge-shrink {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.7); }
    100% { transform: scale(1); }
}

@keyframes cart-icon-wiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-12deg); }
    75%      { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the colour flash (not motion), drop the expanding ring */
    #nav-cart.cart-changed-up {
        animation: cart-flash-up-static 1s ease-out;
    }

    #nav-cart.cart-changed-down {
        animation: cart-flash-down-static 1s ease-out;
    }

    #nav-cart.cart-changed-up #cart-badge,
    #nav-cart.cart-changed-down #cart-badge,
    #nav-cart.cart-changed-up .fa-shopping-cart,
    #nav-cart.cart-changed-down .fa-shopping-cart {
        animation: none;
    }
}

/* ================================================
   MODALS
   ================================================ */
.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.modal-header {
    background: var(--white);
    color: var(--gray-900);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
}

.modal-title {
    font-weight: 600;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--border);
}

.modal-body .price-display {
    margin-top: 1rem;
}

.modal-body .discounted-price {
    font-size: 1.5rem;
}

/* ================================================
   CARDS (General)
   ================================================ */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Allow datepicker to overflow card boundaries */
.card:has(.datepicker) {
    overflow: visible;
}

.card-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    padding: 0.875rem 1.25rem;
    color: var(--gray-900);
}

/* ================================================
   TABLES
   ================================================ */
.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-top: none;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
}

.table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--gray-50);
}

/* ================================================
   BUTTONS
   All variants set --bs-btn-* so Bootstrap's own colours
   never leak into hover/active/disabled states.
   ================================================ */
.btn {
    font-weight: 500;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow) !important;
}

.btn-primary {
    --bs-btn-color: var(--accent-contrast);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-contrast);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--accent-contrast);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-color: var(--accent-contrast);
    --bs-btn-disabled-bg: var(--gray-400);
    --bs-btn-disabled-border-color: var(--gray-400);
}

/* Order submit — kept as its own class so it can be coloured separately later */
.btn-success {
    --bs-btn-color: var(--accent-contrast);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-contrast);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--accent-contrast);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-color: var(--accent-contrast);
    --bs-btn-disabled-bg: var(--gray-400);
    --bs-btn-disabled-border-color: var(--gray-400);
}

.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--gray-800);
    --bs-btn-bg: var(--white);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--gray-900);
    --bs-btn-hover-bg: var(--gray-100);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--gray-900);
    --bs-btn-active-bg: var(--gray-200);
    --bs-btn-active-border-color: var(--gray-400);
    --bs-btn-disabled-color: var(--gray-400);
    --bs-btn-disabled-bg: var(--white);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: var(--white);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-subtle);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: var(--danger);
    --bs-btn-active-bg: var(--danger-subtle);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-disabled-color: var(--gray-400);
    --bs-btn-disabled-bg: var(--white);
    --bs-btn-disabled-border-color: var(--border);
}

/* ================================================
   FORM INPUTS
   ================================================ */
.form-control, .form-select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    background-color: var(--white);
}

.form-control:focus, .form-select:focus {
    border-color: var(--gray-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--gray-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ================================================
   ALERTS
   ================================================ */
.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 0.875rem 1rem;
}

.alert-success {
    background: var(--success-subtle);
    border-color: #bbf7d0;
    color: #14532d;
}

.alert-danger {
    background: var(--danger-subtle);
    border-color: #fecaca;
    color: #7f1d1d;
}

.alert-info {
    background: var(--info-subtle);
    border-color: var(--border);
    color: var(--gray-700);
}

/* ================================================
   EMPTY STATES
   ================================================ */
.empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}

/* ================================================
   ORDER CONFIRMATION
   ================================================ */
.fa-circle-check {
    color: var(--success);
}

/* ================================================
   SEARCH INPUT
   ================================================ */
/* Search field: input followed by an icon addon reads as one field */
.input-group .form-control:has(+ .input-group-text) {
    border-right: none;
}

.input-group .input-group-text {
    background: var(--white);
    border: 1px solid var(--border-strong);
    border-left: none;
    color: var(--gray-500);
}

.input-group .form-control:focus {
    box-shadow: none;
}

.input-group .form-control:focus + .input-group-text {
    border-color: var(--gray-500);
}

/* ================================================
   PAGE HEADER
   ================================================ */
h4 {
    font-weight: 600;
    color: var(--gray-900);
}

h4 small {
    font-weight: 400;
}

/* ================================================
   DROPDOWN
   ================================================ */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    padding: 0.25rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--gray-100);
    color: var(--gray-900);
}

.dropdown-item:active {
    background: var(--gray-200);
    color: var(--gray-900);
}

.dropdown-divider {
    margin: 0.25rem 0;
}

/* ================================================
   LOADING SPINNER
   ================================================ */
.fa-spinner {
    color: var(--gray-400);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .main-container {
        padding: 1rem;
    }

    .product-image-container {
        height: 160px;
    }

    .customer-info {
        display: none;
    }

    .navbar-nav {
        flex-direction: row;
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem;
    }

    .category-sidebar {
        position: static;
        margin-bottom: 1.5rem;
        padding: 0.75rem;
    }

    .category-sidebar .list-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .category-sidebar .list-group-item {
        flex: 0 0 auto;
        padding: 0.375rem 0.75rem;
        font-size: 0.85rem;
        border: 1px solid var(--border);
        margin-bottom: 0;
    }

    .category-sidebar .list-group-item.active {
        border-color: var(--accent);
    }

    .category-sidebar .badge {
        display: none;
    }

    .category-sidebar h6 {
        display: none;
    }

    .login-card {
        margin: 1rem;
        padding: 1.75rem;
    }

    .discounted-price {
        font-size: 1.05rem;
    }

    .product-card .card-title {
        font-size: 0.85rem;
        min-height: auto;
    }
}

/* ================================================
   SELECTION
   ================================================ */
::selection {
    background: var(--gray-200);
    color: var(--gray-900);
}