/* OpsDash — Mister Baker Brand Styles v2 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
    --mb-red:        #CB1142;
    --mb-red-dark:   #9E0D32;
    --mb-red-light:  #E05070;
    --mb-gold:       #DCB34D;
    --mb-beige:      #F2DCCA;
    --mb-beige-light:#FDF6F0;
    --mb-dark:       #1A1A2E;
    --mb-text:       #2D2D2D;
    --mb-text-muted: #6B7280;
    --mb-border:     #E5E7EB;
    --mb-success:    #10B981;
    --mb-warning:    #F59E0B;
    --mb-danger:     #EF4444;
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg:     0 10px 30px rgba(0,0,0,0.12);
    --radius:        12px;
    --radius-sm:     8px;
}

/* ── Global ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background: #F8F9FB;
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.6;
}

/* ── Navbar ── */
.mb-brand-nav {
    background: var(--mb-red) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 1px solid var(--mb-red-dark);
    padding: 0.65rem 0;
}
.brand-logo-box {
    background: rgba(255,255,255,0.95);
    color: var(--mb-red);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: 1px;
}
.brand-name {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.3px;
    color: #fff;
}
.mb-badge-role {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.3);
}
.navbar-nav .nav-link {
    color: rgba(255,255,255,0.82) !important;
    font-weight: 500;
    font-size: 0.88rem;
    padding: 0.4rem 0.85rem !important;
    border-radius: 50px;
    transition: background 0.15s, color 0.15s;
}
.navbar-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.12);
}
.navbar-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,0.2);
}

/* ── Login page ── */
.login-wrapper {
    min-height: 100vh;
    background: var(--mb-beige-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-image: radial-gradient(circle at 20% 80%, rgba(203,17,66,0.05) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(220,179,77,0.06) 0%, transparent 50%);
}
.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}
.login-card-top {
    background: var(--mb-red);
    padding: 1.75rem 2rem 1.5rem;
    text-align: center;
    position: relative;
}
.login-card-top::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 20px;
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.login-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 0.5rem;
}
.login-card-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0.3rem 0 0.1rem;
}
.login-card-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 0.78rem;
    margin: 0;
}
.login-card-body {
    padding: 1.75rem 2rem 2rem;
}
.login-form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mb-text-muted);
    margin-bottom: 0.4rem;
}
.login-input-wrap {
    position: relative;
}
.login-input-wrap .bi {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mb-text-muted);
    font-size: 0.95rem;
}
.login-input-wrap .form-control {
    padding-left: 36px;
    border-radius: var(--radius-sm);
    border-color: var(--mb-border);
    font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input-wrap .form-control:focus {
    border-color: var(--mb-red);
    box-shadow: 0 0 0 3px rgba(203,17,66,0.12);
}
.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--mb-text-muted);
    font-size: 0.75rem;
}

/* ── Buttons ── */
.btn-mb-primary {
    background: var(--mb-red);
    border-color: var(--mb-red);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
    font-size: 0.88rem;
}
.btn-mb-primary:hover, .btn-mb-primary:focus {
    background: var(--mb-red-dark);
    border-color: var(--mb-red-dark);
    color: #fff;
}
.btn-mb-primary:active {
    transform: scale(0.98);
}
.btn-mb-primary:disabled {
    background: #e9a0c5;
    border-color: #e9a0c5;
    cursor: not-allowed;
}
.btn-mb-gold {
    background: var(--mb-gold);
    border-color: var(--mb-gold);
    color: #1a1a1a;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.btn-mb-gold:hover { background: #c9a040; border-color: #c9a040; color: #1a1a1a; }

/* ── Cards ── */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.card-header-mb {
    background: var(--mb-red);
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
}
.card-header-gold {
    background: var(--mb-gold);
    color: #1a1a1a;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
}

/* ── Dashboard Checklist Cards ── */
.checklist-card {
    border-left: 4px solid var(--mb-gold);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}
.checklist-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.checklist-card.completed { border-left-color: var(--mb-success); }

.badge-category {
    background: rgba(220,179,77,0.15);
    color: #7a5a1a;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}
.badge-completed {
    background: #d1fae5;
    color: #065f46;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
}
.badge-frequency {
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 50px;
}

/* ── Checklist Form ── */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border-left: 4px solid var(--mb-red);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.section-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mb-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.section-header-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--mb-dark);
    margin: 0;
}
.section-header-icon {
    color: var(--mb-text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.question-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--mb-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}
.question-card:focus-within {
    box-shadow: var(--shadow-md);
    border-color: rgba(203,17,66,0.2);
}
.question-label {
    font-weight: 500;
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--mb-text);
}
.required-star { color: var(--mb-red); font-weight: 700; flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.field-error { color: var(--mb-danger); font-size: 0.78rem; margin-top: 6px; display: none; }
.field-error.show { display: block; }

/* Radio groups */
.radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-option input[type="radio"] { display: none; }
.radio-option label {
    display: block;
    padding: 6px 18px;
    border: 2px solid var(--mb-border);
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.15s;
    color: var(--mb-text);
}
.radio-option label:hover { border-color: var(--mb-red); color: var(--mb-red); }
.radio-option input[type="radio"]:checked + label {
    background: var(--mb-red);
    border-color: var(--mb-red);
    color: #fff;
}

/* Scale slider */
.scale-slider-wrapper { display: flex; align-items: center; gap: 1rem; }
.scale-slider { accent-color: var(--mb-red); }
.scale-value-display {
    min-width: 36px;
    height: 36px;
    background: var(--mb-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Signature pad */
.signature-wrapper {
    border: 2px dashed var(--mb-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fafafa;
    transition: border-color 0.15s;
}
.signature-wrapper:hover { border-color: var(--mb-red); }
.signature-canvas { display: block; width: 100%; touch-action: none; }
.signature-controls { padding: 0.5rem; background: #f5f5f5; border-top: 1px solid #e0e0e0; }

/* Photo upload zone */
.photo-upload-zone {
    border: 2px dashed var(--mb-border);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafafa;
}
.photo-upload-zone:hover { border-color: var(--mb-red); background: rgba(203,17,66,0.02); }
.photo-upload-zone .bi { font-size: 1.8rem; color: var(--mb-text-muted); display: block; margin-bottom: 0.4rem; }
.photo-upload-zone span { font-size: 0.78rem; color: var(--mb-text-muted); }

/* Rating matrix */
.rating-matrix { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rating-matrix th {
    background: var(--mb-red);
    color: #fff;
    padding: 10px 14px;
    text-align: center;
    font-weight: 600;
    font-size: 0.78rem;
}
.rating-matrix td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
.rating-matrix tr:hover td { background: #fdf6f0; }
.rating-matrix td:first-child { font-weight: 500; }
.rating-matrix td input[type="radio"] { accent-color: var(--mb-red); }

/* Form controls */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--mb-border);
    font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mb-red);
    box-shadow: 0 0 0 3px rgba(203,17,66,0.12);
}
.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--mb-text-muted);
    margin-bottom: 0.35rem;
}

/* Page headers */
.page-header {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    border-left: 4px solid var(--mb-red);
    box-shadow: var(--shadow-sm);
}
.page-header h1 { font-weight: 700; color: var(--mb-dark); font-size: 1.5rem; margin: 0; }
.page-header p { color: var(--mb-text-muted); margin: 0.2rem 0 0; font-size: 0.83rem; }

/* Admin table */
.table-mb thead th {
    background: var(--mb-red);
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: none;
    padding: 0.85rem 1rem;
}
.table-mb tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-color: #f3f4f6;
}
.table-mb tbody tr:hover td { background: #fdf6f9; }
.table-mb tbody tr:nth-child(even) td { background: #fafafa; }
.table-mb tbody tr:nth-child(even):hover td { background: #fdf6f9; }

/* Alert */
.alert-mb-success {
    background: #fce4f3;
    border-color: var(--mb-red);
    color: var(--mb-red);
    border-radius: var(--radius);
}

/* Status badges — refined pill style */
.badge-status {
    display: inline-block;
    padding: 0.3em 0.85em;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.badge-on-track   { background: #d1fae5; color: #065f46; border-radius: 50px; padding: 0.3em 0.85em; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.badge-behind     { background: #fef3c7; color: #92400e; border-radius: 50px; padding: 0.3em 0.85em; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.badge-at-risk    { background: #fee2e2; color: #991b1b; border-radius: 50px; padding: 0.3em 0.85em; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.badge-no-activity{ background: #f3f4f6; color: #6b7280; border-radius: 50px; padding: 0.3em 0.85em; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }

/* Status text */
.status-active   { color: var(--mb-success); font-weight: 600; }
.status-inactive { color: var(--mb-danger); font-weight: 600; }

/* Sticky submit bar */
.sticky-submit-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 2px solid var(--mb-red);
    padding: 1rem 1.25rem;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Checklist progress bar */
.checklist-progress-bar {
    background: #fff;
    border-radius: var(--radius);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--mb-border);
}
.checklist-progress-bar .progress {
    height: 6px;
    border-radius: 50px;
    background: #f3f4f6;
    margin-top: 0.5rem;
}
.checklist-progress-bar .progress-bar {
    background: var(--mb-red);
    border-radius: 50px;
}

/* Reports chart */
.chart-container { position: relative; height: 300px; }

/* Responsive — KPI grid */
@media (min-width: 992px) {
    .kpi-col-desktop { flex: 0 0 16.666%; max-width: 16.666%; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .col-6 { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 767px) {
    .col-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 480px) {
    .login-card-body { padding: 1.5rem 1.25rem; }
    .question-card { padding: 1rem 1.1rem; }
    .radio-group { gap: 0.35rem; }
    .page-header { padding: 1rem 1.1rem; }
}

.bg-mb-blue { background-color: #9ACAEB !important; }
.text-mb-blue { color: #9ACAEB !important; }
.border-mb-blue { border-color: #9ACAEB !important; }

/* View mode response display */
.view-response-box {
  padding: 10px 14px;
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 5-column grid for KPI cards */
@media (min-width: 992px) {
    .col-lg-2dot4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* ── Fix: navbar dropdown z-index ──────────────────────────────────────────── */
.navbar {
    z-index: 1030 !important;
    position: relative;
}
.navbar { position: relative; }
.navbar .dropdown, .navbar .dropdown-toggle { position: static; }
.navbar .dropdown-menu {
    z-index: 1050 !important;
}
/* Ensure date filter bars don't overlap navbar dropdowns */
.agg-filter-bar,
.filter-bar,
[class*="filter"] {
    z-index: 10 !important;
    position: relative;
}


/* ── Fix: navbar dropdown z-index (above sticky filter bars) ──────────────── */
.navbar {
    z-index: 1100 !important;
    position: sticky !important;
    top: 0;
}
.navbar .dropdown-menu {
    z-index: 1200 !important;
}
/* Period sticky bar and filter bars must be below navbar dropdown */
.period-sticky {
    z-index: 100 !important;
}
.agg-filter-bar,
.agg-comparison-label {
    z-index: 10 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fix: Modal overlap with sticky navbar
   ─────────────────────────────────────────────────────────────────────────
   The navbar is pinned at z-index 1100 (position: sticky) above. Bootstrap
   defaults modals to 1055 and their backdrops to 1050 — which means modals
   render BEHIND the navbar and appear "chopped off" at the top. This block
   lifts modals above the navbar AND pushes their top edge BELOW the navbar,
   so the modal header starts under the red bar instead of being obscured by
   it.

   Applies globally to every modal on the site (Delivery, Celebrations,
   Sales Dashboard, everywhere).
   ═══════════════════════════════════════════════════════════════════════ */

/* Raise backdrop and modal above the navbar (1100). */
.modal-backdrop { z-index: 1150 !important; }
.modal          { z-index: 1200 !important; }

/* Reserve vertical space ABOVE the modal dialog equal to the navbar's
   height plus a comfortable gap. The navbar is ~66px tall; 95px leaves
   roughly 30px of breathing room between the red bar and the top of the
   modal so the dialog visibly "starts after" the navbar rather than
   hugging it. */
.modal.show {
    padding-top: 95px !important;
}
.modal-dialog {
    margin-top: 0 !important;
}
.modal-dialog-centered {
    /* Centred-vertical variant: shrink the available height by the navbar
       offset so "centred" genuinely means centred in the area BELOW the
       navbar. */
    min-height: calc(100% - 95px - 2rem) !important;
}

/* Scroll-lock: when a modal opens, Bootstrap adds `.modal-open` to <body>
   and removes scrollbar width. The sticky navbar doesn't need any extra
   fix here, but reinforcing z-index ordering prevents regressions if a
   future page sets its own navbar z-index. */
body.modal-open .navbar { z-index: 1100 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Platform-wide responsive layer — tablet + phone (shops mostly use these).
   Additive & mobile-scoped: desktop (≥ 992px) is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wide tables scroll inside their own container (smooth on touch), never the page. */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991px) {
    /* Stop a single over-wide element from scrolling the whole page sideways.
       Wide tables live in .table-responsive and keep their own scroll. */
    body { overflow-x: hidden; }

    /* Reclaim edge space on small screens. */
    .container, .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Finger-friendly tap targets. */
    .btn, .form-control, .form-select { min-height: 42px; }
    .btn-sm, .form-control-sm, .form-select-sm { min-height: 36px; }
    .dropdown-item, .nav-link { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    /* Filters & inline control rows: stack full-width and wrap instead of overflowing. */
    form .row > [class*="col-"] { margin-bottom: 0.5rem; }
    .filters-row, .d-flex.flex-wrap { flex-wrap: wrap !important; }
    .mb-qd-bar, .period-pills, .slicer-form { flex-wrap: wrap; }

    /* Tighter tables so more content fits before scrolling. */
    .table > :not(caption) > * > * { padding: 0.5rem 0.5rem; }
    table td, table th { font-size: 0.82rem; }

    /* Cards / page headers: less chrome, right-sized headings. */
    .card-body { padding: 1rem; }
    .page-header { padding: 1rem 1.1rem; }
    .page-header h1, .page-header > h1 { font-size: 1.4rem; }

    /* Modals use nearly the full width on small screens. */
    .modal-dialog:not(.modal-sm) { max-width: calc(100% - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; }
}

@media (max-width: 575px) {
    /* Phones: keep 2-up stat/KPI grids readable rather than cramming more across. */
    .row-cols-2 > .col { flex: 0 0 50%; max-width: 50%; }
    .kpi-value { font-size: 1.5rem !important; }
    h1 { font-size: 1.3rem; }
    /* Buttons that sit side-by-side wrap to their own line when tight. */
    .btn { white-space: normal; }
}