/* ═══════════════════════════════════════════════════════
    Brand v5.0 — BYTNT, Indiana USA
   Blue-Red · Montserrat/Cormorant · 4 Apps
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root {
  --primary:    #9b7a6d;
  --primary-d:  #7f5f54;
  --primary-l:  #b79a8f;
  --secondary:  #6f6a66;
  --accent:     #9b7a6d;
  --success:    #0f7a3a;
  --warning:    #c67a00;
  --danger:     #c43c2b;
  --bg:         #d8c9c3;
  --surface:    #fbf7f3;
  --border:     rgba(28, 23, 21, .16);
  --muted:      #6a5f5a;
  --dark:       #1c1715;
  --radius:     12px;
  --radius-sm:  10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 6px rgba(24,18,16,.10);
  --shadow-md:  0 10px 28px rgba(24,18,16,.10);
  --font:       'Mango Dream', 'Montserrat', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}


/* ── Typography ── */
*, body, input, button, textarea, select {
    font-family: var(--font);
}

/* ── Buttons ── */
.btn-primary { background: var(--gradient-h); color: #fff; box-shadow: 0 4px 14px rgba(155,122,109,.28); }
.btn-primary:hover { opacity: .92; }
.btn-outline  { border-color: var(--primary); color: var(--primary); }
.btn-ghost    { background: rgba(155,122,109,.07); color: var(--primary); }

/* ── Forms ── */
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(155,122,109,.12); }

/* ── Sidebar ── */
.sidebar-item.active { background: rgba(155,122,109,.1); color: var(--primary); border-left: 3px solid var(--primary); }
.sidebar-item:hover  { background: rgba(155,122,109,.06); color: var(--primary); }

/* ── Tab bar ── */
.tab-item.active { color: var(--primary); }
.tab-item.active svg { stroke: var(--primary); }

/* ── Status badges ── */
.badge-confirmed { background: #dbeafe; color: #1e40af; }
.badge-pending   { background: #fef3c7; color: #92400e; }
.badge-completed { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }

/* ── Hero backgrounds ── */
.hero, .hero-section, .page-hero, .prof-hero, .confirm-hero,
.mb-hero, .staff-hero { background: var(--gradient); }

/* ── Top accent bar ── */
body::before {
    content: ''; display: block; position: fixed;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-h); z-index: 99999; pointer-events: none;
}

/* ── Stat helpers ── */
.stat-num  { font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.1; }
.stat-lbl  { font-size: .7rem; color: rgba(255,255,255,.8); margin-top: 2px; }

/* ── Misc ── */
.notif-badge, .tab-badge { background: var(--accent); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#5b8dee,#e02424); }
.loading-bar { background: linear-gradient(90deg,var(--primary),#e02424); }
.lang-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chip { background: rgba(155,122,109,.08); color: var(--primary); }
.cat-pill.active { background: var(--primary); color: #fff; }
.salon-card:hover { box-shadow: 0 8px 28px rgba(155,122,109,.15); }

/* ── Dark mode ── */
html.dark-mode {
    --primary:#5b8dee; --primary-d:var(--primary); --secondary:#a78bfa; --accent:#f87171;
    --gradient:linear-gradient(135deg,var(--primary) 0%,#6d28d9 50%,#991b1b 100%);
    --gradient-h:linear-gradient(90deg,var(--primary),#991b1b);
    --bg:#0a0f1e; --surface:#1e293b; --border:rgba(255,255,255,.09);
    --dark:#f1f5f9; --muted:#94a3b8;
}
html.dark-mode body   { background: #0a0f1e; color: #e2e8f0; }
html.dark-mode .card  { background: #1e293b; border-color: rgba(255,255,255,.08); }
html.dark-mode .form-control,
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select { background: rgba(255,255,255,.07); color: #e2e8f0; border-color: rgba(255,255,255,.14); }
html.dark-mode .app-tabbar { background: rgba(15,23,42,.97); border-color: rgba(255,255,255,.07); }
html.dark-mode .tab-item   { color: rgba(255,255,255,.45); }
html.dark-mode .tab-item.active { color: var(--primary); }
html.dark-mode .sidebar    { background: #0f172a; }
html.dark-mode footer      { background: #0f172a; }
html.dark-mode .site-nav   { background: rgba(10,15,30,.95); border-color: rgba(255,255,255,.08); }
html.dark-mode .site-nav-brand { color: #f1f5f9; }
html.dark-mode .nav-menu-btn { color: #e2e8f0; border-color: rgba(255,255,255,.15); }
html.dark-mode .nav-dropdown { background: #1e293b; border-color: rgba(255,255,255,.1); }
html.dark-mode .nd-item { color: #e2e8f0; }
html.dark-mode .nd-item:hover { background: rgba(255,255,255,.06); }
html.dark-mode .nd-biz-row { color: #e2e8f0; border-color: rgba(255,255,255,.1); }