/* ═══════════════════════════════════════════════════════════════════════════
   MaGO Brand System
   Font: Nunito  |  Colours: Orange #FF8A00 · Dark #1F1F1F · Gray #E5E5E5
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ── CSS custom properties ─────────────────────────────────────────────── */
:root {
    --brand-orange:    #FF8A00;
    --brand-orange-dk: #e07900;
    --brand-orange-lt: #fff5e6;
    --brand-dark:      #1F1F1F;
    --brand-gray:      #E5E5E5;
    --brand-bg:        #f5f6fa;
    --brand-white:     #FFFFFF;
    --brand-blue:      #3B82F6;
    --brand-green:     #10B981;
    --brand-red:       #EF4444;
}

/* ── Global font — * selector with !important beats inline style="" attrs ── */
*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── App page top-bars & headers ───────────────────────────────────────── */
header, .top-bar {
    background: var(--brand-dark) !important;
    background-image: none !important;
}

/* ── Active tab / primary button states ────────────────────────────────── */
.tab.active,
.tab-btn.active {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #fff !important;
}

/* Save / primary action buttons */
.save-btn {
    background: var(--brand-orange) !important;
    background-image: none !important;
}
.save-btn:hover  { background: var(--brand-orange-dk) !important; }
.save-btn.saved  { background: var(--brand-green) !important; }

/* Accept order button */
.btn-accept      { background: var(--brand-orange) !important; background-image: none !important; }
.btn-accept:hover{ background: var(--brand-orange-dk) !important; }

/* ── Input / select focus highlight ────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,138,0,0.12) !important;
    outline: none !important;
}

/* ── Section titles (old blue → dark) ──────────────────────────────────── */
.section-title { color: var(--brand-dark) !important; }

/* ── Sidebar active item ────────────────────────────────────────────────── */
.sidebar-item:hover { color: var(--brand-orange) !important; }
.sidebar-item.active {
    background: var(--brand-orange-lt) !important;
    color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}

/* ── Toggle switch on-state ────────────────────────────────────────────── */
.toggle input:checked + .toggle-slider { background: var(--brand-orange) !important; }

/* ── Selected chip ─────────────────────────────────────────────────────── */
.bound-chip.selected {
    background: var(--brand-orange-lt) !important;
    border-color: var(--brand-orange) !important;
    color: var(--brand-orange) !important;
}

/* ── Card notice info strip ────────────────────────────────────────────── */
.card-notice { background: #fff8ee !important; color: var(--brand-dark) !important; }
.card-notice a { color: var(--brand-orange) !important; }

/* ── Type-card selected state ──────────────────────────────────────────── */
.type-card:hover  { border-color: var(--brand-orange) !important; background: var(--brand-orange-lt) !important; }
.type-card.selected { border-color: var(--brand-orange) !important; background: var(--brand-orange-lt) !important; }
.type-card h3 { color: var(--brand-dark) !important; }

/* ── Heroicons inline SVG helper ───────────────────────────────────────── */
svg.hi {
    display: inline-block;
    vertical-align: -0.15em;
    width: 1em; height: 1em;
    flex-shrink: 0;
}
svg.hi-lg  { width: 1.4em; height: 1.4em; vertical-align: -0.3em; }
svg.hi-xl  { width: 1.8em; height: 1.8em; vertical-align: -0.4em; }
svg.hi-2xl { width: 2.4em; height: 2.4em; }