/* Cholo's Cafe canonical color system and component color contracts. */

:root {
    --cholos-burgundy: #5A171B;
    --cholos-burgundy-dark: #411014;
    --cholos-burgundy-soft: #7A3338;
    --cholos-gold: #D6871F;
    --cholos-gold-dark: #B96E13;
    --cholos-gold-light: #EBCB9D;
    --cholos-cream: #FFF9F1;
    --cholos-warm-cream: #F8EEDF;
    --cholos-blush: #F3E1DB;
    --cholos-cocoa: #3F2925;
    --cholos-muted-brown: #765F59;
    --cholos-white: #FFFFFF;
    --cholos-border: #E8D4B8;

    --brand-primary: var(--cholos-burgundy);
    --brand-primary-hover: var(--cholos-burgundy-dark);
    --brand-primary-soft: var(--cholos-blush);
    --brand-secondary: var(--cholos-burgundy-soft);
    --brand-accent: var(--cholos-gold);
    --brand-accent-hover: var(--cholos-gold-dark);
    --brand-accent-soft: var(--cholos-gold-light);
    --brand-background: var(--cholos-cream);
    --brand-background-alt: var(--cholos-warm-cream);
    --brand-surface: var(--cholos-white);
    --brand-text: var(--cholos-cocoa);
    --brand-text-muted: var(--cholos-muted-brown);
    --brand-border: var(--cholos-border);
    --brand-focus: rgba(214, 135, 31, 0.38);
    --brand-shadow: 0 10px 28px rgba(83, 36, 24, 0.10);

    --bs-primary: #5A171B;
    --bs-primary-rgb: 90, 23, 27;
    --bs-secondary: #D6871F;
    --bs-secondary-rgb: 214, 135, 31;
    --bs-body-color: #3F2925;
    --bs-body-bg: #FFF9F1;
    --bs-link-color: #5A171B;
    --bs-link-hover-color: #411014;
    --bs-border-color: #E8D4B8;
    --bs-focus-ring-color: rgba(214, 135, 31, 0.38);
}

body.cafepos-staff,
body.cafepos-customer,
body.cafepos-admin,
body.cafepos-cashier {
    background-color: var(--brand-background);
    color: var(--brand-text);
}

body.cafepos-staff h1,
body.cafepos-staff h2,
body.cafepos-staff h3,
body.cafepos-staff h4,
body.cafepos-customer h1,
body.cafepos-customer h2,
body.cafepos-customer h3,
body.cafepos-customer h4 {
    color: var(--brand-primary);
}

.btn-primary,
body.cafepos-staff .btn-success,
body.cafepos-customer .btn-success,
.customer-primary-action,
.reservation-order-fab {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: var(--cholos-white) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
body.cafepos-staff .btn-success:hover,
body.cafepos-staff .btn-success:focus-visible,
body.cafepos-customer .btn-success:hover,
body.cafepos-customer .btn-success:focus-visible,
.customer-primary-action:hover,
.reservation-order-fab:hover {
    border-color: var(--brand-primary-hover) !important;
    background: var(--brand-primary-hover) !important;
    color: var(--cholos-white) !important;
}

.btn-warning,
.btn-accent {
    border-color: var(--brand-accent) !important;
    background: var(--brand-accent) !important;
    color: var(--cholos-burgundy-dark) !important;
}

.btn-warning:hover,
.btn-warning:focus-visible,
.btn-accent:hover,
.btn-accent:focus-visible {
    border-color: var(--brand-accent-hover) !important;
    background: var(--brand-accent-hover) !important;
    color: var(--cholos-white) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.customer-secondary-action {
    border-color: var(--brand-primary) !important;
    background: transparent;
    color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.customer-secondary-action:hover,
.customer-secondary-action:focus-visible {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: var(--cholos-white) !important;
}

body.cafepos-staff .card,
body.cafepos-customer .card,
body.cafepos-staff .metric-card,
body.cafepos-staff .admin-section-card,
body.cafepos-staff .dash-insight-card,
body.cafepos-staff .operational-table-wrap {
    border-color: var(--brand-border) !important;
    background-color: var(--brand-surface);
    box-shadow: var(--brand-shadow);
}

body.cafepos-staff .card,
body.cafepos-customer .card {
    border-radius: 14px;
}

.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-color: var(--brand-border);
    background-color: var(--brand-surface);
    color: var(--brand-text);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.2rem var(--brand-focus);
}

body.cafepos-staff .table {
    --bs-table-bg: var(--brand-surface);
    --bs-table-color: var(--brand-text);
    --bs-table-border-color: var(--brand-border);
    --bs-table-hover-bg: rgba(214, 135, 31, 0.07);
    --bs-table-striped-bg: rgba(214, 135, 31, 0.04);
}

body.cafepos-staff .table > thead > tr > th,
body.cafepos-staff .table-light > * {
    background-color: var(--brand-background-alt) !important;
    color: var(--brand-primary) !important;
}

body.cafepos-staff .table-active > * {
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-text) !important;
}

body.cafepos-admin .sidebar,
body.cafepos-cashier .sidebar,
body.cafepos-cashier #cashier-sidebar.sidebar {
    background: var(--brand-primary) !important;
    border-right-color: var(--brand-primary-hover) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 12px 0 36px rgba(83, 36, 24, 0.18);
}

body.cafepos-admin .sidebar-brand h4,
body.cafepos-cashier .sidebar h4,
body.cafepos-admin .sidebar .sidebar-nav-link,
body.cafepos-cashier .sidebar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
}

body.cafepos-admin .sidebar-brand-subtitle,
body.cafepos-admin .sidebar-nav-group-label,
body.cafepos-cashier .sidebar small {
    color: rgba(255, 255, 255, 0.65) !important;
}

body.cafepos-admin .sidebar .sidebar-nav-link .bi,
body.cafepos-cashier .sidebar .nav-link .bi {
    color: var(--brand-accent-soft);
}

body.cafepos-admin .sidebar .sidebar-nav-link:hover,
body.cafepos-cashier .sidebar .nav-link:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.09) !important;
    color: var(--cholos-white) !important;
}

body.cafepos-admin .sidebar .sidebar-nav-link.active,
body.cafepos-admin .sidebar .sidebar-nav-link[aria-current="page"],
body.cafepos-cashier .sidebar .nav-link.active {
    border-color: transparent !important;
    border-left: 3px solid var(--brand-accent) !important;
    background: rgba(214, 135, 31, 0.20) !important;
    color: var(--cholos-white) !important;
    box-shadow: none;
}

body.cafepos-admin .sidebar .sidebar-nav-link.active::before,
body.cafepos-admin .sidebar .sidebar-nav-link[aria-current="page"]::before {
    content: none;
}

body.cafepos-admin .sidebar .sidebar-count-badge,
body.cafepos-admin .sidebar .sidebar-nav-link.active .sidebar-count-badge {
    border-color: var(--brand-accent) !important;
    background: var(--brand-accent) !important;
    color: var(--cholos-burgundy-dark) !important;
}

body.cafepos-admin .sidebar-logout {
    border-top-color: rgba(255, 255, 255, 0.18) !important;
}

body.cafepos-admin .sidebar-logout .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: var(--cholos-white) !important;
}

.customer-topbar {
    border-bottom-color: var(--brand-border);
    background: color-mix(in srgb, var(--brand-background) 94%, transparent);
}

.customer-brand-text strong {
    color: var(--brand-primary);
}

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

.customer-nav-link {
    color: var(--brand-text);
}

.customer-nav-link:hover {
    background: var(--brand-background-alt);
    color: var(--brand-primary-hover);
}

.customer-nav-link.is-active {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
}

.customer-hero,
.customer-section {
    border-color: var(--brand-border);
    background: linear-gradient(135deg, rgba(90, 23, 27, 0.035), rgba(214, 135, 31, 0.075));
}

.customer-kicker,
.customer-section-label {
    color: var(--cholos-gold-dark);
}

.customer-hero h1,
.customer-section h2 {
    color: var(--brand-primary);
}

.customer-hero p,
.customer-section p {
    color: var(--brand-text-muted);
}

body.cafepos-cashier .category-chip.active,
body.cafepos-cashier .nav-link.active,
body.cafepos-cashier #pos-checkout-form .btn-success {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: var(--cholos-white) !important;
}

body.cafepos-cashier .pos-product-card,
body.cafepos-cashier .pos-cart-panel,
body.cafepos-cashier .modal-content {
    border-color: var(--brand-border);
    background-color: var(--brand-surface);
}

body.cafepos-cashier .pos-product-card:focus-within,
body.cafepos-cashier .pos-product-card:hover {
    border-color: var(--brand-accent);
}

/* Fixed client identity: compact Cholo's marks in every application shell. */
.customer-brand-logo-wrap {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    padding: 0.25rem !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    background: var(--brand-surface) !important;
    overflow: hidden;
}

.customer-brand-logo,
body.cafepos-admin .staff-sidebar-brandline img,
body.cafepos-cashier .staff-sidebar-brandline img,
.customer-footer-brand img,
.cholos-login-logo {
    display: block;
    max-width: 100%;
    object-fit: contain !important;
    background: var(--brand-surface) !important;
}

.customer-brand-logo {
    width: 100% !important;
    height: 100% !important;
}

body.cafepos-admin .staff-sidebar-brandline img,
body.cafepos-cashier .staff-sidebar-brandline img {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-color: var(--brand-accent-soft) !important;
    border-radius: 8px !important;
}

.cholos-login-logo {
    width: 92px !important;
    height: 92px !important;
    margin-inline: auto;
    border-radius: 8px !important;
}

.customer-footer {
    border-top: 4px solid var(--brand-accent) !important;
    background: var(--cholos-burgundy-dark) !important;
    color: var(--cholos-white) !important;
}

.customer-footer h5,
.customer-footer-brand,
.customer-footer-brand span {
    color: var(--cholos-white) !important;
}

.customer-footer-brand img {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    padding: 0.25rem !important;
    border: 1px solid var(--brand-accent-soft) !important;
    border-radius: 8px !important;
}

.customer-footer-tagline,
.customer-footer-list .bi,
.customer-footer-socials .bi {
    color: var(--brand-accent-soft) !important;
}

.customer-footer-list a,
.customer-footer-socials a {
    color: var(--cholos-white) !important;
}

.customer-footer-bottom {
    border-top-color: rgba(235, 203, 157, 0.28) !important;
}

@media (max-width: 991.98px) {
    body.cafepos-admin .sidebar,
    body.cafepos-cashier #cashier-sidebar.sidebar {
        background: var(--brand-primary) !important;
    }
}

@media (max-width: 575.98px) {
    .customer-brand-logo-wrap {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
    }

    .customer-footer-brand img {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }
}