/* public/assets/css/dashboard-base.css */

:root{--bg:#0b1220;--surface:rgba(255,255,255,0.06);--text:#e8ecf3;--muted:#9aa3b2;--border:rgba(255,255,255,0.1);--primary:#6ea8fe;--primary-strong:#3d7bfa;--shadow:0 10px 30px rgba(0,0,0,.35);--radius:10px;--ring:0 0 0 3px rgba(110,168,254,.25);--success:#5ee7d0;--warning:#f59e0b;--easy:#5ee7d0;--med:#ffe38c;--hard:#ff6f8c;--difficult:#c792ea;--veteran:#89ddff;--new:#9cc2ff;--cat-programming:#82aaff;--cat-database:#c3e88d;--cat-cloud:#ffcb6b;--cat-devops:#f07178;--cat-security:#c792ea;--cat-automation:#89ddff;--cat-ai:#f78c6c;--cat-latest:#80cbc4;--cat-frontend:#ffca82;--cat-backend:#5ee7d0}
:root.light{--bg:#f8fafc;--surface:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--primary:#3b82f6;--primary-strong:#2563eb;--shadow:0 4px 20px rgba(15,23,42,.05);--ring:0 0 0 3px rgba(59,130,246,.25);--success:#10b981;--warning:#f59e0b;--easy:#10b981;--med:#f59e0b;--hard:#ef4444;--difficult:#a78bfa;--veteran:#22d3ee;--new:#3b82f6;--cat-programming:#60a5fa;--cat-database:#4ade80;--cat-cloud:#facc15;--cat-devops:#f87171;--cat-security:#a78bfa;--automation:#22d3ee;--cat-ai:#fb923c;--cat-latest:#2dd4bf;--cat-frontend:#ff9a1f;--cat-backend:#00bfa5}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden;font-size:15px}
body{font-family:'Ubuntu',system-ui;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.surface{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-weight:600;transition:all .2s ease}
.btn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
:root.light .btn:hover{background:#f1f5f9}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-strong));color:#fff;border-color:transparent}
.btn-primary:hover{background:var(--med);color:var(--text);opacity:1;transform:translateY(-1px)}
.btn-small{padding:4px 8px;font-size:.75rem;border-radius:6px}
.btn-icon { padding: 4px; width: 28px; height: 28px; }
.btn-icon svg { width: 16px; height: 16px; }

.app{display:grid;grid-template-columns:240px 1fr;height:100vh}
aside.sidebar{position:sticky;top:0;height:100vh;padding:1.25rem;display:flex;flex-direction:column;gap:1.5rem;border-right:1px solid var(--border);background:linear-gradient(190deg, rgba(110, 168, 254, 0.15) 0%, rgba(94, 231, 208, 0.05) 100%);}
:root.light aside.sidebar{background:linear-gradient(190deg, #eff6ff 0%, #f0fdfa 100%);}
.brand{display:flex;align-items:center;justify-content:space-between;padding:0 .5rem}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem}
.logo .logo-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(180deg,var(--primary),var(--primary-strong));color:#fff}
nav.primary ul{display:flex;flex-direction:column}
nav.primary .section-title{color: var(--muted);font-size: 0.8rem;font-weight: 700;text-transform: uppercase;letter-spacing: .06em;padding: 1rem 0.7rem 0.5rem;border-bottom: 1px solid var(--border);margin-bottom: 0.5rem;}
nav.primary li a{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:8px;color:var(--muted);font-size:.9rem;font-weight:500}
nav.primary li a svg{width:18px;height:18px}
nav.primary li a:hover,nav.primary li a.active{background:var(--surface);color:var(--text)}

main {display: flex; flex-direction: column; height: 100vh; overflow: hidden;}
.app-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative;}
.context-header { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); display: none; flex-direction: column; gap: 0.75rem; }
.main-content {flex-grow: 1; padding: 1.5rem; overflow-y: auto;}
.footer {padding: .75rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; display: flex; justify-content: space-between; background: var(--bg);}
.app-header .greeting { display: flex; align-items: center; gap: 1rem; }
.app-header .header-avatar { width: 48px; height: 48px; border-radius: 50%; }
.app-header .greeting h1 { font-size: 1.25rem; margin: 0; }
.app-header .greeting p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.app-header .header-stats { display: flex; align-items: center; gap: 1.5rem; }
.app-header .stat-block { display: flex; align-items: center; gap: 0.75rem; }
.app-header .stat-block i { color: var(--muted); }
.app-header .stat-block .stat-value { font-size: 1.1rem; font-weight: 700; }
.app-header .stat-block .stat-label { font-size: 0.8rem; color: var(--muted); }
.app-header .subscription-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:999px;font-weight:600;font-size:.8rem;}
.app-header .subscription-badge.pro{background:var(--warning);color:#fff}
.app-header .subscription-badge.free{background:var(--border);color:var(--muted)}

.context-header .filter-group { display: flex; align-items: center; gap: 1rem; }
.context-header .filter-label { font-size: 0.9rem; font-weight: 700; color: var(--muted); flex-shrink: 0; width: 80px; }
.context-header .filter-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.context-header .filter-btn { display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:8px;font-size:.85rem;font-weight:500;border:1px solid var(--border);text-decoration:none;cursor:pointer;transition:all .25s ease;background:var(--surface);position:relative}
.context-header .filter-btn.active { color:#fff; background: var(--primary-strong); border-color: var(--primary-strong); font-weight: 600; }
.context-header .filter-btn:hover:not(.active) { background-color: var(--bg); }
.context-header .filter-btn[data-subtopic-id].active { background: var(--success); border-color: var(--success); }

.skeleton{background-color:var(--surface);position:relative;overflow:hidden}
.skeleton::after{content:'';position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 1.5s infinite}
:root.light .skeleton::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent)}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes move-dots{from{background-position:0 0}to{background-position:0 24px}}

.loading-spinner-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.mobile-menu-toggle { display: none; background: transparent; border: none; cursor: pointer; z-index: 1001; padding: 0.5rem; }
.mobile-menu-toggle span { display: block; width: 25px; height: 3px; background: var(--text); margin: 5px 0; transition: all 0.3s ease-in-out; border-radius: 3px; }
.main-content-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.main-content-overlay.active { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
    html, body { overflow: auto; }
    .app { grid-template-columns: 1fr; height: auto; }
    aside.sidebar { position: fixed; left: -280px; width: 280px; z-index: 1000; transition: left 0.3s ease-in-out; box-shadow: var(--shadow-large); }
    aside.sidebar.active { left: 0; }
    .mobile-menu-toggle { display: block; }
    
    /* MODIFICATION 1: Hide only the stat blocks, not the whole container */
    .app-header .header-stats .stat-block {
        display: none;
    }

    /* MODIFICATION 2: Add transition and transform for the main content area */
    main {
        transition: transform 0.3s ease-in-out;
    }
    .app.sidebar-active main {
        transform: translateX(280px);
    }
}
@media (max-width: 768px) {
    html { font-size: 14.4px; } /* Reduced by 10% from 16px */
    .main-content { padding: 0.9rem; } /* Reduced by 10% */
    .app-header { padding: 0.675rem 0.9rem; } /* Reduced by 10% */
    .app-header .greeting h1 { font-size: 0.99rem; } /* Reduced by 10% */
    .app-header .greeting p { display: none; }
    .app-header .header-avatar { width: 36px; height: 36px; } /* Reduced by 10% */
    .footer { flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; } /* Reduced by 10% */
    .context-header { padding: 0.675rem 0.9rem; } /* Reduced by 10% */
    .context-header .filter-group { flex-direction: column; align-items: flex-start; gap: 0.45rem; } /* Reduced by 10% */
    
    /* Additional 10% reduction for smaller screens */
    .btn { padding: 5.4px 10.8px; } /* Reduced by 10% */
    .btn-small { padding: 3.6px 7.2px; font-size: 0.675rem; } /* Reduced by 10% */
    .surface { border-radius: 9px; } /* Reduced by 10% */
}

/* Additional responsive scaling for very small screens */
@media (max-width: 480px) {
    html { font-size: 13.5px; } /* Further reduction for very small screens */
    .main-content { padding: 0.8rem; }
    .app-header { padding: 0.6rem 0.8rem; }
    .app-header .greeting h1 { font-size: 0.9rem; }
    .app-header .header-avatar { width: 32px; height: 32px; }
    
    /* Scale down spacing and padding throughout */
    .btn { padding: 4.8px 9.6px; font-size: 0.85rem; }
    .btn-small { padding: 3.2px 6.4px; font-size: 0.6rem; }
    .surface { border-radius: 8px; }
    
    /* Reduce gaps and margins */
    .app-header .greeting { gap: 0.8rem; }
    .app-header .header-stats { gap: 1.2rem; }
    .context-header .filter-group { gap: 0.4rem; }
}