/* ═══════════════════════════════════════════════════════
   byTNT Brand v5.0 — Greenwood, Indiana USA
   Blue-Red · DM Sans + Bebas Neue · 4 Apps
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900&family=Bebas+Neue&display=swap');

:root {
    --primary:    #1a56db;
    --primary-d:  #1143c0;
    --primary-l:  #5b8dee;
    --secondary:  #7c3aed;
    --accent:     #e02424;
    --success:    #10b981;
    --warning:    #f59e0b;
    --danger:     #e02424;
    --gradient:   linear-gradient(135deg, #1a56db 0%, #7c3aed 50%, #e02424 100%);
    --gradient-h: linear-gradient(90deg, #1a56db 0%, #e02424 100%);
    --font:       'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Bebas Neue', sans-serif;
    --shadow-sm:  0 1px 4px rgba(26,86,219,.1);
    --shadow-md:  0 4px 20px rgba(26,86,219,.13);
    --radius:     14px; --radius-sm: 8px; --radius-lg: 22px;
}

/* ── DM Sans everywhere ── */
*, body, input, button, textarea, select {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

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

/* ── Sidebar ── */
.sidebar-item.active { background: rgba(26,86,219,.1); color: var(--primary); border-left: 3px solid var(--primary); }
.sidebar-item:hover  { background: rgba(26,86,219,.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: 900; 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,#1a56db,#e02424); }
.lang-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chip { background: rgba(26,86,219,.08); color: var(--primary); }
.cat-pill.active { background: var(--primary); color: #fff; }
.salon-card:hover { box-shadow: 0 8px 28px rgba(26,86,219,.15); }

/* ── Dark mode ── */
html.dark-mode {
    --primary:#5b8dee; --primary-d:#1a56db; --secondary:#a78bfa; --accent:#f87171;
    --gradient:linear-gradient(135deg,#1a56db 0%,#6d28d9 50%,#991b1b 100%);
    --gradient-h:linear-gradient(90deg,#1a56db,#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); }