/* ===== Dashboard Shared Styles ===== */
:root {
    --dash-bg: #f4f6fb;
    --dash-sidebar: #1e293b;
    --dash-sidebar-hover: #334155;
    --dash-primary: #6366f1;
    --dash-primary-dark: #4f46e5;
    --dash-green: #10b981;
    --dash-red: #ef4444;
    --dash-orange: #f59e0b;
    --dash-blue: #3b82f6;
    --dash-purple: #8b5cf6;
    --dash-text: #1e293b;
    --dash-text-muted: #64748b;
    --dash-border: #e2e8f0;
    --dash-white: #ffffff;
    --dash-radius: 12px;
    --dash-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; background:var(--dash-bg); color:var(--dash-text); min-height:100vh; }

.dash-layout { display:flex; min-height:100vh; }

/* SIDEBAR */
.dash-sidebar { width:250px; background:var(--dash-sidebar); color:white; flex-shrink:0; display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100; transition:all .3s ease; }
.sidebar-logo { padding:20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sidebar-logo .logo-icon { width:38px; height:38px; border-radius:10px; background:var(--dash-primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.sidebar-logo h3 { font-size:1.1rem; font-weight:600; color:white; }
.sidebar-nav { padding:15px 0; flex:1; overflow-y:auto; }
.sidebar-nav .nav-label { padding:15px 20px 8px; font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.4); font-weight:600; }
.sidebar-nav a { display:flex; align-items:center; gap:12px; padding:12px 20px; color:rgba(255,255,255,0.75); font-size:0.9rem; text-decoration:none; transition:all .2s; border-left:3px solid transparent; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:var(--dash-sidebar-hover); color:white; border-left-color:var(--dash-primary); }
.sidebar-nav a i { width:20px; text-align:center; }
.sidebar-footer { padding:15px 20px; border-top:1px solid rgba(255,255,255,0.1); }
.sidebar-footer a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.85rem; display:flex; align-items:center; gap:10px; transition:all .2s; }
.sidebar-footer a:hover { color:white; }

/* MAIN CONTENT */
.dash-main { flex:1; margin-left:250px; display:flex; flex-direction:column; min-height:100vh; }
.dash-topbar { background:var(--dash-white); padding:15px 25px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--dash-shadow); position:sticky; top:0; z-index:50; }
.dash-topbar h2 { font-size:1.3rem; font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:15px; }
.topbar-search { display:flex; align-items:center; background:var(--dash-bg); padding:8px 15px; border-radius:30px; gap:8px; }
.topbar-search input { border:none; background:transparent; outline:none; font-size:0.85rem; color:var(--dash-text); width:150px; }
.topbar-search i { color:var(--dash-text-muted); font-size:0.85rem; }
.notif-bell { position:relative; font-size:1.2rem; color:var(--dash-text-muted); cursor:pointer; }
.notif-bell .badge { position:absolute; top:-5px; right:-8px; background:var(--dash-red); color:white; font-size:0.65rem; padding:1px 5px; border-radius:50%; }
.user-profile { display:flex; align-items:center; gap:8px; cursor:pointer; }
.user-profile .avatar { width:35px; height:35px; border-radius:50%; background:var(--dash-primary); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:0.85rem; }
.user-profile span { font-weight:500; font-size:0.9rem; }

/* CONTENT */
.dash-content { padding:25px; flex:1; }
.demo-banner { background:linear-gradient(135deg,var(--dash-primary),var(--dash-purple)); color:white; border-radius:var(--dash-radius); padding:15px 20px; margin-bottom:25px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.demo-banner p { font-size:0.9rem; }
.demo-banner .demo-creds { background:rgba(255,255,255,0.2); padding:6px 15px; border-radius:30px; font-size:0.8rem; font-weight:500; }
.demo-banner .demo-cta { background:white; color:var(--dash-primary); padding:8px 18px; border-radius:30px; font-weight:600; font-size:0.85rem; text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:all .3s; }
.demo-banner .demo-cta:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }

/* STAT CARDS */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:25px; }
.stat-card { background:var(--dash-white); border-radius:var(--dash-radius); padding:20px; box-shadow:var(--dash-shadow); display:flex; align-items:center; gap:15px; transition:all .3s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,0.08); }
.stat-icon { width:55px; height:55px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:white; flex-shrink:0; }
.stat-info h4 { font-size:0.8rem; color:var(--dash-text-muted); font-weight:500; margin-bottom:2px; }
.stat-info .stat-value { font-size:1.5rem; font-weight:700; }
.stat-info .stat-change { font-size:0.75rem; color:var(--dash-green); font-weight:500; }
.stat-info .stat-change.down { color:var(--dash-red); }

/* GRID LAYOUTS */
.dash-grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:25px; }
.dash-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:25px; }
.dash-grid-1 { margin-bottom:25px; }

/* CARDS */
.dash-card { background:var(--dash-white); border-radius:var(--dash-radius); box-shadow:var(--dash-shadow); overflow:hidden; }
.dash-card-header { padding:18px 20px; border-bottom:1px solid var(--dash-border); display:flex; align-items:center; justify-content:space-between; }
.dash-card-header h3 { font-size:1rem; font-weight:600; }
.dash-card-header .card-action { font-size:0.8rem; color:var(--dash-primary); cursor:pointer; font-weight:500; }
.dash-card-body { padding:20px; }
.dash-card-body.table-pad { padding:0; }

/* CHARTS PLACEHOLDERS */
.chart-area { height:250px; border-radius:10px; background:linear-gradient(135deg,#f8fafc,#eef2f7); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.chart-area.bar-chart { background:repeating-linear-gradient(90deg,#eef2f7 0 60px,#f8fafc 60px 62px); }
.bar-container { display:flex; align-items:flex-end; gap:8px; height:80%; width:90%; }
.bar { flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--dash-primary),var(--dash-primary-dark)); min-height:15%; transition:all .3s; position:relative; }
.bar:hover { opacity:0.8; }
.bar:nth-child(2n) { background:linear-gradient(180deg,var(--dash-blue),#1e40af); }
.bar:nth-child(3n) { background:linear-gradient(180deg,var(--dash-green),#047857); }

/* PIE CHART (simple CSS) */
.pie-chart { width:150px; height:150px; border-radius:50%; background:conic-gradient(var(--dash-primary) 0 45%,var(--dash-blue) 45% 70%,var(--dash-green) 70% 88%,var(--dash-orange) 88% 100%); position:relative; margin:0 auto; }
.pie-chart::after { content:''; position:absolute; inset:30px; border-radius:50%; background:white; }
.pie-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } 
.pie-center span { font-weight:700; font-size:1.2rem; }

/* TABLE */
.dash-table { width:100%; border-collapse:collapse; }
.dash-table th { text-align:left; padding:12px 20px; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--dash-text-muted); border-bottom:1px solid var(--dash-border); background:#f8fafc; }
.dash-table td { padding:12px 20px; border-bottom:1px solid var(--dash-border); font-size:0.88rem; }
.dash-table tr:last-child td { border-bottom:none; }
.dash-table tr:hover td { background:#f8fafc; }
.avatar-sm { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:white; font-size:0.75rem; font-weight:600; margin-right:8px; }

/* BADGES */
.badge { display:inline-block; padding:4px 12px; border-radius:30px; font-size:0.75rem; font-weight:600; }
.badge-green { background:#d1fae5; color:#059669; }
.badge-red { background:#fee2e2; color:#dc2626; }
.badge-orange { background:#ffedd5; color:#ea580c; }
.badge-blue { background:#dbeafe; color:#2563eb; }
.badge-purple { background:#ede9fe; color:#7c3aed; }

/* ACTIVITY */
.activity-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--dash-border); }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:35px; height:35px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:0.85rem; flex-shrink:0; }
.activity-item p { font-size:0.85rem; }
.activity-item p strong { display:block; font-size:0.9rem; }
.activity-item span { color:var(--dash-text-muted); font-size:0.75rem; }

/* QUICK ACTIONS */
.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.quick-action { padding:15px; border:1px dashed var(--dash-border); border-radius:10px; text-align:center; cursor:pointer; transition:all .3s; font-size:0.85rem; font-weight:500; }
.quick-action:hover { border-color:var(--dash-primary); background:rgba(99,102,241,0.05); color:var(--dash-primary); }
.quick-action i { display:block; font-size:1.4rem; margin-bottom:8px; color:var(--dash-primary); }

/* TOGGLE SIDEBAR BTN (mobile) */
.sidebar-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--dash-text); }

/* RESPONSIVE */
@media (max-width: 992px) {
    .dash-sidebar { width:220px; transform:translateX(-100%); }
    .dash-sidebar.open { transform:translateX(0); }
    .dash-main { margin-left:0; }
    .sidebar-toggle { display:block; }
    .dash-grid-2, .dash-grid-3 { grid-template-columns:1fr; }
    .stat-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 576px) {
    .stat-cards { grid-template-columns:1fr; }
    .topbar-search { display:none; }
    .dash-content { padding:15px; }
}

/* ===== DEMO LOGIN SCREEN ===== */
.login-screen { position:fixed; inset:0; z-index:9999; background:linear-gradient(135deg,#1e293b,#0f172a); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.login-screen.hidden { display:none; }
.login-card { background:var(--dash-white); border-radius:var(--dash-radius); padding:35px; width:100%; max-width:400px; text-align:center; box-shadow:0 25px 60px rgba(0,0,0,0.35); animation:loginIn .4s ease; }
@keyframes loginIn { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
.login-brand { width:64px; height:64px; border-radius:16px; color:white; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 15px; box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.login-card h2 { font-size:1.25rem; margin-bottom:5px; }
.login-card > p { color:var(--dash-text-muted); font-size:0.9rem; margin-bottom:20px; }
.login-credbox { background:#eef2ff; border:1.5px dashed var(--dash-primary); border-radius:10px; padding:12px; font-size:0.85rem; color:var(--dash-text-muted); margin-bottom:20px; }
.login-credbox strong { color:var(--dash-primary); }
.login-form { display:flex; flex-direction:column; gap:12px; }
.login-form input { padding:13px 15px; border:1.5px solid var(--dash-border); border-radius:10px; font-family:inherit; font-size:0.9rem; outline:none; transition:border-color .3s; }
.login-form input:focus { border-color:var(--dash-primary); }
.login-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--dash-primary),var(--dash-purple)); color:white; font-size:0.95rem; font-weight:600; font-family:inherit; cursor:pointer; transition:transform .3s, box-shadow .3s; }
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,102,241,0.35); }
.login-error { color:var(--dash-red); font-size:0.8rem; display:none; }
.login-back { color:var(--dash-text-muted); text-decoration:none; font-size:0.85rem; display:inline-flex; align-items:center; justify-content:center; gap:7px; margin-top:5px; transition:color .2s; }
.login-back:hover { color:var(--dash-primary); }
.login-foot { margin-top:15px; font-size:0.8rem; color:var(--dash-text-muted); }
.login-foot a { color:var(--dash-primary); text-decoration:none; font-weight:600; }

/* ===== MODULE SUB-PAGES ===== */
.module-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.module-head h2 { font-size:1.15rem; font-weight:600; }
.module-head p { color:var(--dash-text-muted); font-size:0.85rem; }
.add-btn { background:linear-gradient(135deg,var(--dash-primary),var(--dash-purple)); color:white; text-decoration:none; padding:10px 20px; border-radius:10px; font-size:0.85rem; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:transform .3s, box-shadow .3s; }
.add-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,102,241,0.3); }
.info-card ul { list-style:none; }
.info-card ul li { padding:10px 0; border-bottom:1px dashed var(--dash-border); font-size:0.85rem; color:var(--dash-text-muted); display:flex; align-items:center; gap:10px; }
.info-card ul li:last-child { border-bottom:none; }
.info-card ul li i { color:var(--dash-primary); width:18px; text-align:center; }
.action-links { display:flex; flex-direction:column; gap:10px; }
.action-links a { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:10px; text-decoration:none; font-size:0.85rem; font-weight:600; transition:all .3s; }
.action-links a.whatsapp { background:#25d366; color:white; }
.action-links a.whatsapp:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 18px rgba(37,211,102,0.35); }
.action-links a.outline { border:1.5px solid var(--dash-primary); color:var(--dash-primary); }
.action-links a.outline:hover { background:rgba(99,102,241,0.08); }