/* ============================================================================
   meniu.cc — "vm" global theme
   Design language from the NEW_DESIGN handoff (Modernist / Meniu.cc Landing v3):
     · Fonts     : Sora (headings/brand) + Manrope (body)
     · Accent    : vivid red  oklch(0.55 0.21 27)  ≈ #d01d21  (+ tonal ramp)
     · Ground    : warm off-white  #fdfcfc / #f7f5f4
     · Shape     : rounded corners, soft ink-tinted shadows

   Loads AFTER the compiled Bootstrap and custom.css in every wrapper, so it
   re-skins the whole app (frontend, dashboard, admin) two ways:
     1. redefining the :root CSS-variable palette (the app's var(--primary…) rules)
     2. overriding Bootstrap's standard hardcoded primary classes (.btn-primary…)
   Light-only rules are scoped to [data-theme-style="light"] so dark mode is safe.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ─── palette + tokens (both the frontend and admin bundles read these) ─── */
:root {
    --primary: #d01d21;
    --primary-100: #ffefec;
    --primary-200: #ffdcd6;
    --primary-300: #ffbbb1;
    --primary-400: #fd7468;
    --primary-500: #d01d21;
    --primary-600: #ac0311;
    --primary-700: #8a050d;
    --primary-800: #690509;
    --primary-900: #4c0707;

    --font-family-sans-serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-vm-heading: "Sora", "Manrope", system-ui, sans-serif;

    --border-radius: 0.75rem;
    --border-radius-lg: 1.15rem;
    --border-radius-sm: 0.5rem;

    --vm-ink: #1a1616;
    --vm-shadow-sm: 0 1px 2px rgba(26, 22, 22, 0.06);
    --vm-shadow-md: 0 4px 18px rgba(26, 22, 22, 0.06);
    --vm-shadow-lg: 0 18px 48px rgba(26, 22, 22, 0.12);
    --vm-primary-shadow: 0 6px 18px rgba(208, 29, 33, 0.26);
}

/* ─── warm ground, light mode only (dark mode keeps its own bg/text) ─── */
[data-theme-style="light"] {
    --body-bg: #fdfcfc;
    --gray-50: #f7f5f4;
    --gray-100: #f2efee;
    --gray-200: #eae6e5;
}
body[data-theme-style="light"] { background: var(--gray-50); color: var(--vm-ink); }

/* ─── base typography ─── */
body { font-family: var(--font-family-sans-serif); -webkit-font-smoothing: antialiased; }

/* No letter-spacing on these: non-zero tracking makes Blink/WebKit paint color-emoji
   glyphs twice, and user content (store/menu/item names) with emoji renders through
   these heading/button classes. The landing keeps its own scoped tracking (.vm-landing),
   where there is no user emoji. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4,
.navbar-brand, .card-title, .modal-title, .dialog-title {
    font-family: var(--font-vm-heading);
    font-weight: 800;
}
h5, h6, .h5, .h6 { font-family: var(--font-vm-heading); font-weight: 700; }

/* ─── links ─── */
a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-600); }
a.text-muted:hover { color: var(--primary) !important; }

/* ─── buttons ─── */
.btn {
    font-family: var(--font-vm-heading);
    font-weight: 700;
    border-radius: var(--border-radius);
}
.btn-lg { border-radius: var(--border-radius-lg); }
.btn-sm { border-radius: var(--border-radius-sm); }

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--vm-primary-shadow);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    box-shadow: var(--vm-primary-shadow);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
}
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(208, 29, 33, 0.35);
}
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(208, 29, 33, 0.3); }
.btn-link { color: var(--primary); }
.btn-link:hover { color: var(--primary-600); }

/* ─── color utilities (Bootstrap hardcodes these to the old blue) ─── */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.text-primary-600 { color: var(--primary-600) !important; }
.text-primary-900 { color: var(--primary-900) !important; }
.bg-primary-100 { background-color: var(--primary-100) !important; }

/* ─── badges as pills ─── */
.badge { border-radius: 999px; font-weight: 600; }
.badge-primary { color: #fff; background-color: var(--primary); }

/* ─── forms ─── */
.form-control, .custom-select, .input-group-text,
.custom-file-label, textarea, select {
    border-radius: var(--border-radius);
}
.form-control:focus, .custom-select:focus, .custom-file-input:focus ~ .custom-file-label {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 0.2rem rgba(208, 29, 33, 0.15);
}
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* checkboxes / radios / switches */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--primary);
    background-color: var(--primary);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(208, 29, 33, 0.25); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--primary-400); }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: var(--primary-200); border-color: var(--primary-200); }
.custom-range::-webkit-slider-thumb { background-color: var(--primary); }
.custom-range::-moz-range-thumb { background-color: var(--primary); }
.custom-range::-ms-thumb { background-color: var(--primary); }
input, textarea, select { accent-color: var(--primary); }

/* ─── cards ─── */
.card {
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(26, 22, 22, 0.07);
}
[data-theme-style="light"] .card { box-shadow: var(--vm-shadow-md); }
.card .card-header:first-child { border-radius: calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0; }
.card-title { font-family: var(--font-vm-heading); }

/* ─── navbar (dashboard + frontend) ─── */
.navbar-brand { font-family: var(--font-vm-heading); font-weight: 800; }
[data-theme-style="light"] .navbar-main {
    background: rgba(253, 252, 252, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(26, 22, 22, 0.07);
}
/* backdrop-filter creates a stacking context, which traps the user dropdown (z-index 1000)
   inside the navbar's layer — without a high z-index here, page cards painted over the open
   menu. 1030 = Bootstrap's navbar tier, still below modals (1050). */
.navbar-main {
    position: relative;
    z-index: 1030;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--primary); }

/* ─── pagination ─── */
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }
.page-link { color: var(--primary); border-radius: var(--border-radius-sm); }
.page-link:hover { color: var(--primary-600); }
.page-link:focus { box-shadow: 0 0 0 0.2rem rgba(208, 29, 33, 0.25); }

/* ─── nav pills / tabs ─── */
.nav-pills .nav-link { border-radius: var(--border-radius); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--primary); color: #fff; }

/* ─── dropdowns ─── */
.dropdown-menu { border-radius: var(--border-radius-lg); border: 1px solid rgba(26, 22, 22, 0.08); box-shadow: var(--vm-shadow-lg); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--primary); color: #fff; }

/* ─── alerts / progress / list groups ─── */
.alert { border-radius: var(--border-radius); }
.alert-primary { color: var(--primary-800); background-color: var(--primary-100); border-color: var(--primary-200); }
.progress-bar { background-color: var(--primary); }
.list-group-item.active { background-color: var(--primary); border-color: var(--primary); }

/* ─── tables ─── */
.table th, .table-custom th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ─── modals ─── */
.modal-content { border-radius: var(--border-radius-lg); border: 0; box-shadow: var(--vm-shadow-lg); }

/* ─── misc rounding on common containers ─── */
.rounded, .rounded-2x { border-radius: var(--border-radius) !important; }
.custom-file, .custom-file-label, .toast, .popover, .list-group { border-radius: var(--border-radius); }