/* ============================================================
   StudyBridge design system
   ============================================================ */
:root {
    --sb-primary: #4f46e5;
    --sb-primary-600: #4338ca;
    --sb-primary-700: #3730a3;
    --sb-accent: #7c3aed;
    --sb-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --sb-sidebar: linear-gradient(195deg, #1e1b4b 0%, #312e81 60%, #3730a3 100%);

    --sb-ink: #1f2430;
    --sb-muted: #6b7280;
    --sb-line: #e9ebf2;
    --sb-bg: #f5f6fb;
    --sb-card: #ffffff;

    --sb-success: #10b981;
    --sb-info: #0ea5e9;
    --sb-warning: #f59e0b;
    --sb-danger: #ef4444;

    --sb-radius: 16px;
    --sb-radius-sm: 12px;
    --sb-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
    --sb-shadow-lg: 0 12px 40px rgba(49,46,129,.18);
    --sb-sidebar-w: 264px;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--sb-ink);
    background: var(--sb-bg);
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; }

a { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .5rem 1rem; }
.btn-primary {
    background: var(--sb-grad);
    border: none;
    box-shadow: 0 4px 14px rgba(79,70,229,.30);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sb-primary-600);
    box-shadow: 0 6px 20px rgba(79,70,229,.40);
    transform: translateY(-1px);
}
.btn-outline-primary { color: var(--sb-primary); border-color: #d6d8f5; }
.btn-outline-primary:hover { background: var(--sb-primary); border-color: var(--sb-primary); }
.btn-sm { border-radius: 8px; }
.btn-link { color: var(--sb-primary); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
}
.card .card-body { padding: 1.25rem 1.35rem; }

.badge { font-weight: 600; padding: .4em .65em; border-radius: 8px; }

/* ============================================================
   App shell (sidebar + main)
   ============================================================ */
.sb-app { background: var(--sb-bg); }

.sb-shell { display: flex; min-height: 100vh; }

.sb-sidebar {
    width: var(--sb-sidebar-w);
    flex: 0 0 var(--sb-sidebar-w);
    background: var(--sb-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
}

.sb-brand {
    display: flex; align-items: center; gap: .7rem;
    padding: .4rem .5rem 1.25rem;
    color: #fff;
}
.sb-brand .sb-logo {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 1.25rem;
}
.sb-brand .sb-brand-name { font-weight: 800; font-size: 1.15rem; line-height: 1; }
.sb-brand .sb-brand-sub { font-size: .72rem; color: rgba(255,255,255,.6); }

.sb-nav { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; }
.sb-nav .sb-nav-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.45); padding: .75rem .85rem .35rem;
}
.sb-nav a {
    display: flex; align-items: center; gap: .8rem;
    padding: .65rem .85rem; border-radius: 11px;
    color: rgba(255,255,255,.78); font-weight: 600; font-size: .93rem;
    transition: all .15s ease;
}
.sb-nav a i { font-size: 1.1rem; width: 1.25rem; text-align: center; opacity: .9; }
.sb-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-nav a.active {
    background: rgba(255,255,255,.14);
    color: #fff;
    box-shadow: inset 3px 0 0 #c4b5fd;
}

.sb-sidebar-foot { margin-top: auto; padding-top: 1rem; }
.sb-userbox {
    display: flex; align-items: center; gap: .7rem;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px; padding: .6rem .7rem;
}
.sb-avatar {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
    display: grid; place-items: center; font-weight: 700; color: #fff;
    background: var(--sb-grad);
}
.sb-userbox .sb-uname { font-size: .85rem; font-weight: 700; color: #fff; line-height: 1.1; }
.sb-userbox .sb-urole { font-size: .72rem; color: rgba(255,255,255,.6); text-transform: capitalize; }

/* ---------- Main column ---------- */
.sb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.sb-topbar {
    height: 68px; background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--sb-line);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem; position: sticky; top: 0; z-index: 20;
}
.sb-topbar .sb-page-title { font-size: 1.2rem; margin: 0; }
.sb-burger {
    border: 1px solid var(--sb-line); background: #fff; border-radius: 10px;
    width: 40px; height: 40px; display: grid; place-items: center; color: var(--sb-ink);
}
.sb-content { padding: 1.75rem 1.5rem; flex: 1 1 auto; }
@media (min-width: 1400px) { .sb-content { padding: 2rem 2.5rem; } }

/* ---------- Stat cards ---------- */
.sb-stat {
    display: flex; align-items: center; gap: 1rem;
    background: var(--sb-card); border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius); padding: 1.15rem 1.25rem;
    box-shadow: var(--sb-shadow); transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.sb-stat:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-lg); }
.sb-stat .sb-stat-icon {
    width: 52px; height: 52px; border-radius: 14px; flex: 0 0 52px;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
}
.sb-stat .sb-stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.sb-stat .sb-stat-label { color: var(--sb-muted); font-size: .85rem; font-weight: 600; }
.bg-grad-indigo { background: var(--sb-grad); }
.bg-grad-green  { background: linear-gradient(135deg,#10b981,#059669); }
.bg-grad-blue   { background: linear-gradient(135deg,#0ea5e9,#2563eb); }
.bg-grad-amber  { background: linear-gradient(135deg,#f59e0b,#d97706); }

/* ---------- Section headers ---------- */
.sb-section-title { font-size: 1.05rem; font-weight: 700; }
.sb-eyebrow {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sb-muted); font-weight: 700;
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin: 0; }
.table thead th {
    font-size: .73rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--sb-muted); font-weight: 700; border-bottom: 1px solid var(--sb-line);
}
.table tbody td { border-color: var(--sb-line); padding-top: .85rem; padding-bottom: .85rem; }
.table-hover tbody tr:hover { background: #fafaff; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 10px; border-color: var(--sb-line); padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sb-primary); box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
}
.form-label { font-weight: 600; font-size: .88rem; }

/* ---------- Module / mode buttons ---------- */
.sb-module-card { transition: transform .15s ease, box-shadow .15s ease; }
.sb-module-card:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-lg); }
.sb-mode-btns .btn { display: inline-flex; align-items: center; gap: .35rem; }

.sb-empty {
    text-align: center; color: var(--sb-muted); padding: 2.5rem 1rem;
    border: 1px dashed var(--sb-line); border-radius: var(--sb-radius); background: #fff;
}
.sb-empty i { font-size: 2rem; opacity: .4; display: block; margin-bottom: .5rem; }

.alert { border: none; border-radius: var(--sb-radius-sm); font-weight: 500; }
.alert-success { background: #e7f8f1; color: #0f7a57; }
.alert-danger  { background: #fdecec; color: #b42318; }
.alert-info    { background: #e8f4fd; color: #0b5d9e; }
.alert-warning { background: #fef6e7; color: #b25e09; }

/* ============================================================
   Guest (login / landing)
   ============================================================ */
.sb-guest {
    min-height: 100vh;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(124,58,237,.18), transparent),
        radial-gradient(900px 500px at -10% 110%, rgba(79,70,229,.16), transparent),
        var(--sb-bg);
}
.sb-auth-card { border-radius: 22px; box-shadow: var(--sb-shadow-lg); overflow: hidden; }
.sb-auth-aside {
    background: var(--sb-sidebar); color: #fff; padding: 2.5rem;
    display: flex; flex-direction: column; justify-content: space-between;
}
.sb-auth-aside .sb-feat { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; }
.sb-auth-aside .sb-feat i { color: #c4b5fd; font-size: 1.15rem; margin-top: .1rem; }

.sb-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    color: #fff; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
}

/* ---------- Reader (Read mode) ---------- */
.sb-reader { font-size: 1.07rem; line-height: 1.8; max-width: 72ch; color: #2b3240; }
.sb-reader p { margin-bottom: 1rem; }
.sb-heading { scroll-margin-top: 84px; border-left: 3px solid var(--sb-primary); padding-left: .6rem; }
.sb-toc .nav-link { color: var(--sb-muted); border-radius: 8px; }
.sb-toc .nav-link:hover { color: var(--sb-primary); background: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767.98px) {
    .sb-sidebar { width: var(--sb-sidebar-w); }
    .sb-content { padding: 1.25rem 1rem; }
    .sb-reader { font-size: 1rem; }
}