/* =====================================================================
   Brand layer for the admin and branch panels.
   Colors come from config/restaurant.php (brand.*) through CSS variables
   printed in layouts/partials/_brand.blade.php — change them in .env.
   ===================================================================== */

:root {
    --brand-radius: 12px;
    --brand-radius-sm: 8px;
    --brand-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 4px 16px rgba(28, 25, 23, .05);
    --brand-shadow-hover: 0 2px 4px rgba(28, 25, 23, .06), 0 10px 28px rgba(28, 25, 23, .08);
    --brand-border: #ECE7E1;
    --brand-muted: #6B635C;
}

/* ---- Typography ---------------------------------------------------- */
body, .btn, .form-control, .custom-select, .dropdown-menu, .popover, .tooltip,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar, .nav, .table, input, select, textarea, button {
    font-family: var(--brand-font), system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif !important;
}
body { background-color: var(--brand-surface) !important; color: var(--brand-ink); }
.page-header-title, .page-header h1 { font-weight: 700; letter-spacing: -.01em; color: var(--brand-ink); }
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }

/* ---- Header -------------------------------------------------------- */
#header.navbar, .navbar.navbar-fixed {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--brand-border) !important;
    box-shadow: none !important;
}

/* ---- Sidebar ------------------------------------------------------- */
.navbar-vertical-aside { background: var(--brand-sidebar) !important; border-inline-end: 1px solid var(--brand-border) !important; }
.navbar-vertical-aside .navbar-brand-wrapper { border-bottom: 1px solid var(--brand-border); }
.navbar-vertical .nav-link { border-radius: var(--brand-radius-sm); margin: 1px 10px; transition: background-color .15s ease, color .15s ease; }
.navbar-vertical .nav-link:hover { background: rgba(var(--brand-rgb), .07); color: var(--brand-primary-dark); }
.navbar-vertical .nav-link.active,
.navbar-vertical .navbar-nav > .nav-item.active > .nav-link,
.navbar-vertical .show > .nav-link {
    background: rgba(var(--brand-rgb), .12) !important;
    color: var(--brand-primary-dark) !important;
    font-weight: 600;
}
.navbar-vertical .nav-link.active .nav-icon,
.navbar-vertical .nav-link.active i { color: var(--brand-primary) !important; }
.navbar-vertical .nav-subtitle, .nav-subtitle { color: var(--brand-muted) !important; letter-spacing: .04em; font-size: .72rem; }

/* ---- Cards ----------------------------------------------------------- */
.card {
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius) !important;
    box-shadow: var(--brand-shadow) !important;
}
.card-header { background: transparent; border-bottom: 1px solid var(--brand-border); }
.card-header-title { font-weight: 700; color: var(--brand-ink); }
a.card:hover, .card-hover-shadow:hover { box-shadow: var(--brand-shadow-hover) !important; }

/* Dashboard counters */
.dashboard--card, .order--card, .resturant-card {
    border-radius: var(--brand-radius) !important;
    border: 1px solid var(--brand-border) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard--card:hover, .order--card:hover, .resturant-card:hover { transform: translateY(-2px); box-shadow: var(--brand-shadow-hover); }

/* ---- Buttons ------------------------------------------------------- */
.btn { border-radius: var(--brand-radius-sm); font-weight: 600; }
.btn-primary, .btn--primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn--primary:hover, .btn-primary:focus, .btn--primary:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-outline-primary { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.btn-outline-primary:hover { background: var(--brand-primary) !important; color: #fff !important; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2) !important; }

/* ---- Forms ----------------------------------------------------------- */
.form-control, .custom-select, .select2-container .select2-selection {
    border-radius: var(--brand-radius-sm) !important;
    border-color: var(--brand-border) !important;
}
.form-control:focus, .custom-select:focus, .select2-container--focus .select2-selection {
    border-color: rgba(var(--brand-rgb), .6) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.toggle-switch-input:checked + .toggle-switch-label { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }

/* ---- Tables ---------------------------------------------------------- */
.table thead th {
    background: #FAF8F5 !important;
    color: var(--brand-muted) !important;
    font-weight: 600;
    font-size: .78rem;
    text-transform: none;
    border-bottom: 1px solid var(--brand-border) !important;
}
.table td, .table th { border-color: var(--brand-border) !important; vertical-align: middle; }
.table-hover tbody tr:hover, .table tbody tr:hover { background-color: rgba(var(--brand-rgb), .035); }

/* ---- Badges / status ------------------------------------------------ */
.badge { border-radius: 999px; font-weight: 600; padding: .35em .75em; }
.badge-soft-primary { background: rgba(var(--brand-rgb), .12) !important; color: var(--brand-primary-dark) !important; }

/* ---- Pagination / tabs ---------------------------------------------- */
.page-item.active .page-link { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.page-link { border-radius: var(--brand-radius-sm) !important; margin: 0 2px; color: var(--brand-ink); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--brand-primary) !important; border-bottom-color: var(--brand-primary) !important; }

/* ---- Modals / dropdowns --------------------------------------------- */
.modal-content { border-radius: var(--brand-radius) !important; border: none; box-shadow: 0 24px 48px rgba(28, 25, 23, .18); }
.dropdown-menu { border-radius: var(--brand-radius-sm); border: 1px solid var(--brand-border); box-shadow: var(--brand-shadow-hover); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-primary); }

/* ---- Scrollbars ----------------------------------------------------- */
* { scrollbar-color: rgba(var(--brand-rgb), .45) transparent; scrollbar-width: thin; }

/* ---- Loader: lighter than the old GIF ------------------------------- */
#loading img { width: 72px !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}