/* ================================================
   MasterMy Barber - White/Light Theme Override
   For Tenant Dashboard
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    --primary-color: #b8943c;
    --primary-dark: #8a6e28;
    --primary-light: #d4b060;

    --success-color: #16a34a;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --info-color: #0891b2;

    --bg-body: #f8f7f5;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #fafaf9;
    --bg-topbar: #ffffff;
    --bg-input: #f5f4f2;
    --bg-light: #f5f4f2;
    --bg-white: #ffffff;

    --text-primary: #1a1714;
    --text-dark: #1a1714;
    --text-gray: #6b6460;
    --text-light: #9c9490;
    --text-muted: #b0aba8;

    --border-color: rgba(0,0,0,0.07);
    --border-gold: rgba(184,148,60,0.3);
    --border-hover: rgba(184,148,60,0.5);

    --gold: #b8943c;
    --gold-light: #d4b060;
    --gold-dark: #8a6e28;
    --gold-glow: rgba(184,148,60,0.12);
    --gold-glow-strong: rgba(184,148,60,0.22);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.12);
    --shadow-gold: 0 0 20px rgba(184,148,60,0.15);
}

/* Scrollbar */
::-webkit-scrollbar-thumb { background: var(--border-gold); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Sidebar overrides */
.sidebar { box-shadow: 2px 0 20px rgba(0,0,0,0.06); border-right: 1px solid var(--border-color); }
.sidebar-footer { border-top: 1px solid var(--border-color); }
.sidebar-footer .sidebar-user { background: var(--bg-input); border-radius: 12px; margin: 8px; padding: 10px 12px; }

/* Topbar */
.topbar { box-shadow: 0 2px 12px rgba(0,0,0,0.05); border-bottom: 1px solid var(--border-color); }

/* Cards */
.stat-card { border: 1px solid var(--border-color); }
.card { border: 1px solid var(--border-color); }

/* Table */
.table thead th { background: var(--bg-input) !important; color: var(--text-gray) !important; border-color: var(--border-color) !important; }
.table tbody tr:hover td { background: rgba(184,148,60,0.04) !important; }

/* Forms */
.form-control, .form-select {
    background: var(--bg-input) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: var(--text-primary) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--border-gold) !important;
    box-shadow: 0 0 0 3px var(--gold-glow) !important;
}
.form-label { color: var(--text-gray) !important; }
.form-control::placeholder { color: var(--text-light) !important; }

/* Modal */
.modal-content { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
.modal-header { border-bottom: 1px solid var(--border-color) !important; }
.modal-footer { border-top: 1px solid var(--border-color) !important; }
.modal-title { color: var(--text-primary) !important; }
.btn-close { filter: none !important; }

/* Kanban */
.kanban-col { background: var(--bg-input); }
.kanban-card { background: var(--bg-card); border: 1px solid var(--border-color); }
.kanban-card:hover { border-color: var(--border-gold); }

/* Search box */
.search-box { background: var(--bg-input); border: 1px solid var(--border-color); }
.search-box input { color: var(--text-primary); }
.search-box input::placeholder { color: var(--text-light); }

/* Mobile sidebar */
.mobile-sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border-color); }
.sidebar-overlay { background: rgba(0,0,0,0.4); }

/* Mobile nav */
.mobile-nav { background: var(--bg-topbar); border-top: 1px solid var(--border-color); }

/* Nav link active */
.nav-link.active {
    background: linear-gradient(135deg, rgba(184,148,60,0.12), rgba(184,148,60,0.06));
    color: var(--gold);
    border-color: var(--border-gold);
}
.nav-link:hover { background: rgba(184,148,60,0.06); color: var(--text-primary); }

/* Page header */
.page-header { border-bottom: 1px solid var(--border-color); background: var(--bg-topbar); }

/* Footer */
.main-footer { border-top: 1px solid var(--border-color); }

/* Badge */
.nav-badge { background: var(--danger-color); }

/* Status badges */
.badge-waiting { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(217,119,6,0.2); }
.badge-inservice { background: rgba(59,130,246,0.1); color: #2563eb; border: 1px solid rgba(37,99,235,0.2); }
.badge-done { background: rgba(22,163,74,0.1); color: #16a34a; border: 1px solid rgba(22,163,74,0.2); }
.badge-called { background: rgba(168,85,247,0.1); color: #7c3aed; border: 1px solid rgba(124,58,237,0.2); }

/* Stat card icon colors in light mode */
.stat-icon { box-shadow: none; }

/* Section headers */
.section-title { color: var(--text-primary); }
.section-sub { color: var(--text-gray); }

/* Queue card customer info */
.queue-num-large {
    font-size: 52px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}

/* ── API Access Page Grid ── */
.api-main-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) {
    .api-main-grid { grid-template-columns: 1fr 300px; }
}
@media (max-width: 900px) {
    .api-main-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────
   SIDEBAR — Light Theme Explicit Overrides
   Prevents dark theme bleed-through
────────────────────────────────────────────── */
.sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,0.07) !important;
}
.sidebar-header { border-bottom: 1px solid rgba(0,0,0,0.07) !important; }
.sidebar-footer { border-top: 1px solid rgba(0,0,0,0.07) !important; }
.sidebar-user {
    background: #f5f4f2 !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 12px;
    margin: 8px;
    padding: 10px 12px;
}
.sidebar-user-name { color: #1a1714 !important; font-size: 13px; font-weight: 600; }
.sidebar-user-role { color: #9c9490 !important; font-size: 11px; }
.sidebar-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}

.nav-link {
    color: #6b6460 !important;
}
.nav-link:hover {
    background: rgba(184,148,60,0.06) !important;
    color: #1a1714 !important;
}
.nav-link.active {
    background: linear-gradient(135deg, rgba(184,148,60,0.13), rgba(184,148,60,0.06)) !important;
    color: #b8943c !important;
    border-color: rgba(184,148,60,0.28) !important;
}
.nav-link.active i { color: #b8943c !important; }

/* ─────────────────────────────────────────────
   TOPBAR — Light Theme Explicit
────────────────────────────────────────────── */
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.user-name { color: #1a1714 !important; }
.user-role { color: #9c9490 !important; }
.topbar-icon i { color: #6b6460 !important; }
.search-box {
    background: #f5f4f2 !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 10px;
}
.search-box input { color: #1a1714 !important; background: transparent !important; }
.datetime-time { color: #1a1714 !important; }
.datetime-date { color: #9c9490 !important; }

/* ─────────────────────────────────────────────
   MAIN CONTENT — Light Background
────────────────────────────────────────────── */
.main-content { background: #f4f3f0 !important; }
.page-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    margin-bottom: 20px;
}
.page-title { color: #1a1714 !important; }
.page-subtitle { color: #6b6460 !important; }

/* ─────────────────────────────────────────────
   MOBILE SIDEBAR — Light Theme
────────────────────────────────────────────── */
.mobile-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.1) !important;
}
.mobile-sidebar-header { border-bottom: 1px solid rgba(0,0,0,0.07) !important; }

/* ─────────────────────────────────────────────
   MAIN WRAPPER RESPONSIVE
   Tenant layout
────────────────────────────────────────────── */
@media (max-width: 992px) {
    .main-wrapper { margin-left: 0 !important; }
    .sidebar { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); }
    .sidebar.active { transform: translateX(0) !important; box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important; }
    .main-content { padding: 14px !important; padding-bottom: 80px !important; }
}
@media (max-width: 600px) {
    .page-header { padding: 14px 14px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .page-header .btn-gold,
    .page-header .btn-ghost { font-size: 12.5px !important; padding: 8px 12px !important; }
    .page-title { font-size: 18px !important; }
    .stat-card { padding: 14px !important; }
    .kpi-value { font-size: 22px !important; }
}

/* ─────────────────────────────────────────────
   MOBILE NAV — Light Theme Override
────────────────────────────────────────────── */
.mobile-nav {
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
}
.mobile-nav-item { color: #9c9490 !important; }
.mobile-nav-item.active { color: #b8943c !important; }
.mobile-nav-item span { font-size: 10px !important; }