/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; background: #f0f2f5; color: #1d1d1f; }
a { text-decoration: none; color: inherit; }

/* ── Auth Pages ─────────────────────────────────────────── */
.auth-bg { min-height:100vh; background:#f0f2f5; display:flex; align-items:center; justify-content:center; padding:1rem; }
.auth-card { background:#fff; border-radius:20px; padding:2.5rem; width:100%; max-width:480px; box-shadow:0 4px 24px rgba(0,0,0,.08); }
.auth-logo { margin-bottom:1.25rem; }
.auth-title-wrap { text-align:center; margin-bottom:1.75rem; }
.auth-title { font-size:1.6rem; font-weight:700; color:#222; margin-bottom:4px; }
.auth-subtitle { color:#888; font-size:.9rem; }
.auth-form { width:100%; display:flex; flex-direction:column; gap:1rem; }
.auth-error { background:#fef2f2; color:#dc2626; border-radius:8px; padding:.6rem .9rem; font-size:.85rem; text-align:center; }
.auth-field { display:flex; flex-direction:column; gap:.4rem; }
.auth-label { font-size:.72rem; font-weight:700; color:#555; letter-spacing:.05em; text-transform:uppercase; }
.auth-input-wrap { display:flex; align-items:center; background:#f0f4ff; border-radius:10px; padding:0 .9rem; gap:.6rem; height:50px; }
.auth-input-wrap svg { color:#94a3b8; flex-shrink:0; width:16px; height:16px; }
.auth-input { flex:1; border:none; background:transparent; outline:none; font-size:.95rem; color:#222; font-family:inherit; }
.auth-input::placeholder { color:#94a3b8; }
.auth-eye { background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; display:flex; align-items:center; }
.auth-btn { margin-top:.5rem; width:100%; height:50px; background:#2563eb; color:#fff; border:none; border-radius:10px; font-size:1rem; font-weight:600; cursor:pointer; transition:background .2s; font-family:inherit; }
.auth-btn:hover { background:#1d4ed8; }
.auth-btn:disabled { opacity:.7; cursor:not-allowed; }
.auth-footer { margin-top:1.25rem; font-size:.875rem; color:#888; text-align:center; }
.auth-link { color:#2563eb; font-weight:700; }
.auth-link:hover { text-decoration:underline; }

/* ── Admin Shell ────────────────────────────────────────── */
.app-header { background:#fff; border-bottom:1px solid #e8edf5; box-shadow:0 1px 8px rgba(0,0,0,.06); position:sticky; top:0; z-index:50; height:72px; display:flex; align-items:center; padding:0 24px; justify-content:space-between; }
.app-logo img { height:44px; object-fit:contain; }
.header-user { display:flex; align-items:center; gap:16px; }
.header-user-info { text-align:right; line-height:1.3; }
.header-user-info .name { font-weight:500; font-size:.875rem; color:#222; }
.header-user-info .email { font-size:.75rem; color:#94a3b8; }
.btn-logout { display:flex; align-items:center; gap:7px; background:#f0f4ff; border:none; border-radius:10px; padding:8px 14px; cursor:pointer; color:#2563eb; font-weight:500; font-size:.85rem; transition:background .15s; font-family:inherit; }
.btn-logout:hover { background:#dbeafe; }
.btn-logout svg { width:16px; height:16px; }

.app-body { display:flex; min-height:calc(100vh - 72px); }

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar { width:260px; flex-shrink:0; background:#fbfbfc; border-right:1px solid #e5e5ea; padding:24px 16px; position:sticky; top:72px; height:calc(100vh - 72px); overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.nav-section-label { font-size:.7rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; padding:8px 16px 4px; }
.nav-sep { border-top:1px solid #f0f2f5; margin:8px 0; }
.nav-link { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:12px; font-size:.95rem; font-weight:500; color:#515154; transition:all .25s; cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:inherit; text-decoration:none; }
.nav-link:hover { background:#f0f2f5; color:#1d1d1f; }
.nav-link:hover .nav-icon { color:#2563eb; }
.nav-link.active { background:#2563eb; color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.25); transform:scale(1.01); }
.nav-link.active .nav-icon { color:#fff; }
.nav-link.active .nav-icon-wrap { background:rgba(255,255,255,.2); }
.nav-icon-wrap { padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .25s; }
.nav-link:hover .nav-icon-wrap { transform:scale(1.1); }
.nav-icon { width:18px; height:18px; color:#86868b; transition:color .25s; }
.nav-dropdown-btn { display:flex; align-items:center; justify-content:space-between; }
.nav-dropdown-btn .chevron { width:16px; height:16px; color:#86868b; transition:transform .2s; }
.nav-dropdown-btn.open .chevron { transform:rotate(180deg); }
.nav-submenu { display:none; flex-direction:column; gap:2px; padding:4px 0 4px 12px; }
.nav-submenu.open { display:flex; }
.nav-submenu a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:.88rem; font-weight:500; color:#515154; transition:all .2s; }
.nav-submenu a:hover { background:#f0f2f5; color:#1d1d1f; }
.nav-submenu a svg { width:15px; height:15px; color:#86868b; }

/* ── Main Content ───────────────────────────────────────── */
.app-main { flex:1; min-width:0; padding:32px; }

/* ── Page Header ────────────────────────────────────────── */
.page-title { font-size:1.875rem; font-weight:700; color:#1d1d1f; letter-spacing:-.02em; }
.page-subtitle { font-size:.9rem; color:#71717a; margin-top:4px; }

/* ── KPI Cards ──────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.kpi-card { background:#fff; border-radius:16px; padding:24px; border:1px solid #e5e5ea; box-shadow:0 2px 12px rgba(0,0,0,.04); transition:all .3s; }
.kpi-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-4px); }
.kpi-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.kpi-icon svg { width:24px; height:24px; color:#fff; }
.kpi-label { font-size:.8rem; font-weight:700; color:#515154; text-transform:uppercase; letter-spacing:.06em; }
.kpi-value { font-size:2.25rem; font-weight:700; color:#1d1d1f; line-height:1; }
.kpi-badge { font-size:.72rem; font-weight:600; padding:2px 6px; border-radius:6px; }

/* ── Big Container (list/table pages) ──────────────────── */
.big-card { background:#fff; border-radius:2rem; box-shadow:0 4px 30px rgba(0,0,0,.04); border:1px solid #f3f4f6; overflow:hidden; }
.big-card-header { display:grid; gap:16px; padding:20px 32px; background:rgba(249,250,251,.5); border-bottom:1px solid #f3f4f6; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#a1a1aa; }

/* ── Status Badges ──────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:9999px; font-size:.66rem; font-weight:700; }
.badge-green { background:#ecfdf5; color:#059669; border:1px solid rgba(16,185,129,.12); }
.badge-green .dot { width:6px; height:6px; border-radius:50%; background:#10b981; animation:pulse-dot 1.5s infinite; }
.badge-gray  { background:#fafafa; color:#71717a; border:1px solid #e4e4e7; }
.badge-gray .dot { width:6px; height:6px; border-radius:50%; background:#a1a1aa; }
.badge-red   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.badge-blue  { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
@keyframes pulse-dot { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:#000; color:#fff; border:none; border-radius:9999px; padding:10px 24px; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .2s; font-family:inherit; text-decoration:none; }
.btn-primary:hover { background:#27272a; }
.btn-blue { display:inline-flex; align-items:center; gap:6px; background:#2563eb; color:#fff; border:none; border-radius:12px; padding:8px 14px; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; box-shadow:0 4px 6px rgba(37,99,235,.2); transition:all .2s; font-family:inherit; text-decoration:none; }
.btn-blue:hover { background:#1d4ed8; transform:translateY(-1px); }
.btn-icon { padding:6px; border-radius:8px; background:none; border:none; cursor:pointer; color:#a1a1aa; transition:all .15s; display:flex; }
.btn-icon:hover { background:#f4f4f5; color:#1d1d1f; }
.btn-icon.danger:hover { background:#fff1f2; color:#e11d48; }
.btn-green { display:inline-flex; align-items:center; gap:6px; background:#059669; color:#fff; border:none; border-radius:12px; padding:8px 14px; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; box-shadow:0 4px 6px rgba(5,150,105,.2); transition:all .2s; font-family:inherit; }
.btn-green:hover { background:#047857; transform:translateY(-1px); }

/* ── Form Controls ──────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; margin-bottom:0; }
.form-label { font-size:.78rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:6px; }
.form-input { width:100%; border-radius:12px; background:rgba(243,244,246,.8); border:1.5px solid transparent; padding:12px 16px; font-size:.95rem; outline:none; transition:all .15s; font-family:inherit; color:#1d1d1f; }
.form-input:focus { background:#fff; border-color:rgba(37,99,235,.4); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.form-input::placeholder { color:#94a3b8; }
textarea.form-input { resize:vertical; min-height:80px; }

/* ── Toggle Switch ──────────────────────────────────────── */
.toggle-wrap { display:flex; align-items:center; gap:12px; }
.toggle { position:relative; width:48px; height:28px; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; inset:0; background:#d1d5db; border-radius:14px; cursor:pointer; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; left:4px; bottom:4px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.toggle input:checked + .toggle-slider { background:#3b82f6; }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }
.toggle-label { font-size:.9rem; font-weight:500; color:#374151; }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs-bar { display:flex; gap:4px; background:rgba(244,244,245,.6); border-radius:9999px; padding:4px; width:fit-content; }
.tab-btn { padding:8px 16px; border-radius:9999px; font-size:.82rem; font-weight:600; color:#71717a; background:none; border:none; cursor:pointer; transition:all .2s; font-family:inherit; }
.tab-btn.active { background:#fff; color:#1d1d1f; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.tab-btn:hover:not(.active) { color:#1d1d1f; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ── Wizard Steps ───────────────────────────────────────── */
.steps-bar { display:flex; gap:8px; margin-bottom:28px; }
.step-btn { flex:1; padding:10px 8px; border-radius:9999px; font-size:.8rem; font-weight:600; border:none; cursor:pointer; transition:all .2s; font-family:inherit; }
.step-btn.active { background:#2563eb; color:#fff; }
.step-btn.done { background:#dcfce7; color:#166534; }
.step-btn:not(.active):not(.done) { background:#f4f4f5; color:#71717a; }

/* ── Color Swatch Picker ────────────────────────────────── */
.color-swatch { display:flex; align-items:center; gap:12px; background:rgba(243,244,246,.8); border-radius:12px; padding:12px 16px; }
.color-swatch input[type=color] { width:28px; height:28px; border-radius:8px; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:pointer; padding:0; background:none; }
.color-swatch label { font-size:.82rem; font-weight:500; color:#6b7280; }

/* ── Table ──────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:12px 16px; text-align:left; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#a1a1aa; background:rgba(249,250,251,.5); border-bottom:1px solid #f3f4f6; }
.data-table td { padding:16px; border-bottom:1px solid #f9fafb; font-size:.875rem; color:#374151; }
.data-table tbody tr:hover { background:#fafafa; }
.data-table tbody tr:last-child td { border-bottom:none; }

/* ── Avatar ─────────────────────────────────────────────── */
.avatar { width:40px; height:40px; border-radius:50%; background:#2563eb; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; flex-shrink:0; }

/* ── Empty State ────────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:80px 24px; }
.empty-icon { width:80px; height:80px; background:#f4f4f5; border-radius:20px; display:flex; align-items:center; justify-content:center; }
.empty-icon svg { width:36px; height:36px; color:#a1a1aa; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:100; display:none; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:24px; padding:28px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.2); animation:modalIn .2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)} }
.modal-title { font-size:1.2rem; font-weight:700; color:#1d1d1f; margin-bottom:8px; }
.modal-desc { font-size:.875rem; color:#71717a; margin-bottom:24px; line-height:1.5; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; }

/* ── Spinner ────────────────────────────────────────────── */
.spinner { width:32px; height:32px; border:3px solid #e2e8f0; border-top-color:#2563eb; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Mobile ─────────────────────────────────────────────── */
.mobile-menu-btn { display:none; background:none; border:none; cursor:pointer; padding:4px; }
@media(max-width:768px) {
    .mobile-menu-btn { display:flex; align-items:center; }
    .sidebar { display:none; position:fixed; top:72px; left:0; bottom:0; width:280px; height:calc(100vh - 72px); z-index:40; box-shadow:4px 0 20px rgba(0,0,0,.1); }
    .sidebar.open { display:flex; }
    .app-main { padding:16px; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .big-card-header { display:none; }
}