/* ==========================================================================
   AI Research Assistant — Academic Research Workspace
   Self-contained app shell + palette from docs/arsitektur.md.
   Depends only on Bootstrap 5 for grid/components.
   ========================================================================== */

:root {
    --color-bg:#F8FAFC;
    --color-bg-soft:#F5F3EA;
    --color-surface:#FFFFFF;
    --color-primary:#1E3A8A;
    --color-primary-dark:#0F172A;
    --color-secondary:#4F46E5;
    --color-accent:#0F766E;
    --color-accent-soft:#CCFBF1;
    --color-warning:#F59E0B;
    --color-danger:#DC2626;
    --color-success:#16A34A;
    --color-text:#111827;
    --color-muted:#64748B;
    --color-border:#E2E8F0;
    /* Brand */
    --brand-900:#0F172A; --brand-800:#172554; --brand-700:#1E3A8A;
    --brand-600:#1E3A8A; --brand-500:#2563EB; --brand-400:#60A5FA;
    --brand-300:#93C5FD; --brand-200:#BFDBFE; --brand-100:#DBEAFE; --brand-50:#EFF6FF;
    --secondary-600:#4F46E5; --secondary-50:#EEF2FF;
    /* Evidence / references */
    --accent-700:#0F766E; --accent-500:#14B8A6; --accent-300:#5EEAD4; --accent-100:#CCFBF1;
    /* Neutral */
    --slate-950:#020617; --slate-900:#0F172A; --slate-800:#1E293B; --slate-700:#334155;
    --slate-600:#475569; --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1;
    --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC; --white:#FFFFFF;
    /* Semantic */
    --success-600:#16A34A; --success-100:#DCFCE7;
    --warning-600:#F59E0B; --warning-100:#FEF3C7;
    --danger-600:#DC2626;  --danger-100:#FEE2E2;
    --info-600:#0284C7;    --info-100:#E0F2FE;

    /* Tokens */
    --app-bg:var(--color-bg);
    --card-bg:var(--white);
    --card-border:var(--slate-200);
    --card-shadow:0 10px 24px rgba(15,23,42,.05);
    --text-strong:var(--color-text);
    --text-normal:var(--slate-700);
    --text-muted:var(--slate-500);
    --primary:var(--color-primary);
    --primary-hover:var(--brand-800);
    --primary-soft:var(--brand-50);
    --radius:8px;
    --radius-sm:6px;
    --sidebar-w:264px;
    --topbar-h:64px;

    /* Bootstrap overrides */
    --bs-primary:#1E3A8A;
    --bs-primary-rgb:30,58,138;
    --bs-body-color:#334155;
    --bs-body-bg:#F8FAFC;
    --bs-border-color:#E2E8F0;
    --bs-link-color:#1E3A8A;
    --bs-link-hover-color:#172554;
    --bs-border-radius:6px;
}

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

body {
    font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    background:var(--app-bg);
    color:var(--text-normal);
    font-size:.9rem;
}

a { text-decoration:none; }

/* ---------- Typography helpers ---------- */
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-xs{font-size:.72rem}.fs-sm{font-size:.82rem}.fs-lg{font-size:1.05rem}.fs-xl{font-size:1.25rem}.fs-2xl{font-size:1.6rem}
.text-strong{color:var(--text-strong)!important}
.text-muted{color:var(--text-muted)!important}
.text-brand{color:var(--brand-600)!important}
.text-accent{color:var(--accent-700)!important}

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app-shell { min-height:100vh; }

.app-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
    display:flex; flex-direction:column; z-index:1040;
    transition:transform .25s ease;
    overflow:hidden;
}
.app-sidebar .sidebar-scroll { overflow-y:auto; flex:1; padding:.5rem .75rem 1.5rem; }
.app-sidebar .sidebar-scroll::-webkit-scrollbar{width:6px}
.app-sidebar .sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:3px}

.sidebar-brand {
    height:var(--topbar-h); display:flex; align-items:center; gap:.6rem;
    padding:0 1.25rem; flex-shrink:0; font-weight:800; font-size:1.2rem;
}
.sidebar-brand .brand-mark {
    width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--brand-600),var(--secondary-600)); color:#fff; font-size:1rem;
    box-shadow:0 4px 12px rgba(30,58,138,.24);
}
/* Logo hasil upload admin: tinggi dikunci, lebar mengikuti rasio. */
.sidebar-brand .brand-logo { height:34px; width:auto; max-width:170px; object-fit:contain; }

.nav-section { margin-top:1rem; }
.nav-section-title {
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    padding:0 .9rem; margin-bottom:.4rem;
}
.app-sidebar .nav-link {
    display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem; margin-bottom:.15rem;
    border-radius:var(--radius-sm); font-weight:500; font-size:.86rem; line-height:1.2;
    transition:background .15s,color .15s;
}
.app-sidebar .nav-link svg { width:18px; height:18px; flex-shrink:0; }

/* Admin: dark sidebar */
.app-sidebar--dark { background:var(--slate-900); border-right:1px solid rgba(255,255,255,.06); }
.app-sidebar--dark .sidebar-brand { color:#fff; }
.app-sidebar--dark .nav-section-title { color:var(--slate-400); }
.app-sidebar--dark .nav-link { color:var(--slate-300); }
.app-sidebar--dark .nav-link:hover { background:var(--slate-800); color:#fff; }
.app-sidebar--dark .nav-link.active { background:var(--brand-600); color:#fff; box-shadow:0 4px 12px rgba(30,58,138,.35); }

/* Member: light sidebar */
.app-sidebar--light { background:var(--white); border-right:1px solid var(--slate-200); }
.app-sidebar--light .sidebar-brand { color:var(--slate-900); }
.app-sidebar--light .nav-section-title { color:var(--slate-400); }
.app-sidebar--light .nav-link { color:var(--slate-600); }
.app-sidebar--light .nav-link:hover { background:var(--slate-100); color:var(--slate-900); }
.app-sidebar--light .nav-link.active { background:var(--brand-50); color:var(--brand-700); font-weight:600; }

/* Sidebar upgrade card (member) */
.sidebar-upsell {
    margin:.75rem; padding:1rem; border-radius:var(--radius);
    background:linear-gradient(135deg,var(--brand-600),var(--accent-700)); color:#fff;
}
.sidebar-upsell h6 { color:#fff; font-weight:700; margin-bottom:.25rem; }
.sidebar-upsell p { font-size:.75rem; color:var(--brand-100); margin-bottom:.6rem; }
.sidebar-upsell .btn { background:#fff; color:var(--brand-700); font-weight:700; width:100%; border:none; }

/* Content area */
.app-content {
    margin-left:var(--sidebar-w); min-height:100vh;
    display:flex; flex-direction:column;
}

/* Topbar */
.app-topbar {
    height:var(--topbar-h); position:sticky; top:0; z-index:1035;
    background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid var(--slate-200);
    display:flex; align-items:center; gap:1rem; padding:0 1.5rem;
}
/* Menu profil harus di atas kartu sticky "Lanjutkan Analisis" (z-index 1020). */
.app-topbar .dropdown-menu { z-index:1080; }
.app-topbar .topbar-title { font-weight:700; color:var(--slate-900); font-size:1rem; margin:0; }
.sidebar-toggle {
    background:transparent; border:none; width:38px; height:38px; border-radius:9px;
    display:grid; place-items:center; color:var(--slate-600); cursor:pointer;
}
.sidebar-toggle:hover { background:var(--slate-100); }

.app-body { padding:1.5rem; flex:1; }
@media (min-width:1400px){ .app-body{ padding:1.75rem 2rem; } }

/* Topbar user dropdown */
.topbar-user { display:flex; align-items:center; gap:.6rem; cursor:pointer; }
.topbar-user .user-meta { line-height:1.15; text-align:right; }
.topbar-user .user-meta .u-name { font-weight:600; font-size:.83rem; color:var(--slate-800); display:block; }
.topbar-user .user-meta .u-role { font-size:.7rem; color:var(--slate-500); }

/* Avatar initial */
.avatar-initial {
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
    color:#fff; font-weight:700; border-radius:50%;
}

/* ---------- Sidebar responsive (off-canvas) ---------- */
.sidebar-backdrop {
    position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1035;
    opacity:0; visibility:hidden; transition:opacity .25s;
}
@media (max-width:991.98px){
    .app-sidebar { transform:translateX(-100%); }
    body.sidebar-open .app-sidebar { transform:translateX(0); }
    body.sidebar-open .sidebar-backdrop { opacity:1; visibility:visible; }
    .app-content { margin-left:0; }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
.page-header { margin-bottom:1.25rem; }
.page-title { font-size:1.35rem; font-weight:700; color:var(--slate-900); margin:0; }
.page-subtitle { color:var(--text-muted); font-size:.85rem; margin-top:.15rem; }

.breadcrumb-mini { font-size:.78rem; color:var(--slate-400); margin-bottom:.3rem; }
.breadcrumb-mini a { color:var(--slate-500); }

/* Cards */
.card {
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--radius); box-shadow:var(--card-shadow);
}
.card-header {
    background:transparent; border-bottom:1px solid var(--slate-100);
    font-weight:600; color:var(--slate-800); padding:1rem 1.25rem;
}
.card-body { padding:1.25rem; }

/* KPI / stat card */
.stat-card { display:flex; align-items:center; gap:1rem; }
.stat-icon {
    width:52px; height:52px; border-radius:13px; display:grid; place-items:center; flex-shrink:0;
}
.stat-icon svg{ width:24px; height:24px; }
.stat-value { font-size:1.55rem; font-weight:800; color:var(--brand-900); line-height:1; }
.stat-label { font-size:.78rem; color:var(--slate-500); margin-top:.25rem; }

.bg-primary-soft,.bg-primary-light{background:var(--brand-50)!important;color:var(--brand-600)!important}
.bg-success-soft,.bg-success-light{background:var(--success-100)!important;color:var(--success-600)!important}
.bg-warning-soft,.bg-warning-light{background:var(--warning-100)!important;color:var(--warning-600)!important}
.bg-danger-soft,.bg-danger-light{background:var(--danger-100)!important;color:var(--danger-600)!important}
.bg-info-soft,.bg-info-light{background:var(--info-100)!important;color:var(--info-600)!important}
.bg-accent-soft{background:var(--accent-100)!important;color:var(--accent-700)!important}

.text-primary{color:var(--brand-600)!important}

/* Buttons */
.btn { border-radius:var(--radius-sm); font-weight:600; font-size:.85rem; padding:.5rem 1rem; }
.btn-primary { background:var(--brand-600); border-color:var(--brand-600); }
.btn-primary:hover,.btn-primary:focus { background:var(--brand-700); border-color:var(--brand-700); }
.btn-outline-primary { color:var(--brand-600); border-color:var(--brand-200); }
.btn-outline-primary:hover { background:var(--brand-600); border-color:var(--brand-600); }
.btn-light { background:var(--slate-100); border-color:var(--slate-100); color:var(--slate-700); }
.btn-light:hover { background:var(--slate-200); border-color:var(--slate-200); }
.btn-lg { padding:.7rem 1.4rem; font-size:.95rem; }
.btn-sm { padding:.32rem .7rem; font-size:.78rem; }

/* Badges */
.badge { font-weight:600; padding:.4em .7em; border-radius:7px; font-size:.72rem; }
.badge-soft-primary{background:var(--brand-50);color:var(--brand-600)}
.badge-soft-success{background:var(--success-100);color:var(--success-600)}
.badge-soft-warning{background:var(--warning-100);color:var(--warning-600)}
.badge-soft-danger{background:var(--danger-100);color:var(--danger-600)}
.badge-soft-info{background:var(--info-100);color:var(--info-600)}
.badge-soft-muted{background:var(--slate-100);color:var(--slate-600)}

/* Tables */
.table { color:var(--slate-700); margin-bottom:0; }
.table > thead th {
    background:var(--slate-50); color:var(--slate-500); font-weight:600;
    font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
    border-bottom:1px solid var(--slate-200); padding:.75rem 1rem; white-space:nowrap;
}
.table > tbody td { padding:.85rem 1rem; vertical-align:middle; border-color:var(--slate-100); }
.table-hover > tbody > tr:hover > * { background:var(--slate-50); }

/* Forms */
.form-label { font-weight:600; font-size:.82rem; color:var(--slate-700); margin-bottom:.35rem; }
.form-control,.form-select {
    border-radius:var(--radius-sm); border-color:var(--slate-200);
    padding:.55rem .8rem; font-size:.86rem; color:var(--slate-900);
}
.form-control:focus,.form-select:focus {
    border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(79,70,229,.15);
}
.form-control::placeholder { color:var(--slate-400); }
.form-text { font-size:.76rem; color:var(--slate-500); }
.input-group-text { background:var(--slate-50); border-color:var(--slate-200); color:var(--slate-500); }

/* Form switch theming */
.form-check-input:checked { background-color:var(--brand-600); border-color:var(--brand-600); }
.form-check-input:focus { box-shadow:0 0 0 3px rgba(79,70,229,.15); border-color:var(--brand-400); }

/* Dropdown */
.dropdown-menu {
    border:1px solid var(--slate-200); border-radius:var(--radius-sm);
    box-shadow:0 12px 32px rgba(15,23,42,.12); padding:.4rem; font-size:.85rem;
}
.dropdown-item { border-radius:8px; padding:.5rem .7rem; font-weight:500; color:var(--slate-700); }
.dropdown-item:hover { background:var(--slate-100); }
.dropdown-item.text-danger:hover { background:var(--danger-100); }

/* Progress */
.progress { background:var(--slate-100); border-radius:99px; height:8px; }
.progress-bar { background:var(--brand-600); border-radius:99px; }

/* Alerts */
.alert { border-radius:var(--radius-sm); border:none; font-size:.85rem; }
.alert-success { background:var(--success-100); color:var(--success-600); }
.alert-danger { background:var(--danger-100); color:var(--danger-600); }
.alert-warning { background:var(--warning-100); color:var(--warning-600); }
.alert-info { background:var(--info-100); color:var(--info-600); }

/* Soft section panel */
.panel-soft { background:var(--slate-50); border:1px solid var(--slate-200); border-radius:var(--radius); }

/* Empty state */
.empty-state { text-align:center; padding:3rem 1rem; }
.empty-state svg { width:48px; height:48px; color:var(--slate-300); margin-bottom:.75rem; }

/* Plan / pricing card (member subscription page) */
.plan-card { border:1.5px solid var(--slate-200); border-radius:var(--radius); transition:.2s; height:100%; background:#fff; }
.plan-card:hover { border-color:var(--brand-300); transform:translateY(-3px); }
.plan-card.is-current { border-color:var(--brand-600); box-shadow:0 12px 28px rgba(30,58,138,.14); }
.plan-card.is-popular { border-color:var(--accent-500); }
.plan-price { font-size:1.8rem; font-weight:800; color:var(--brand-900); }
.plan-feature-list { list-style:none; padding:0; margin:0; }
.plan-feature-list li { display:flex; gap:.5rem; align-items:flex-start; padding:.3rem 0; font-size:.82rem; }
.plan-feature-list .ok { color:var(--success-600); }
.plan-feature-list .no { color:var(--slate-300); }

/* Judul (research result) selectable card */
.judul-card { border:1.5px solid var(--slate-200); border-radius:var(--radius-sm); transition:.15s; cursor:pointer; }
.judul-card:hover { border-color:var(--brand-400); background:var(--brand-50); }
.judul-card.selected { border-color:var(--brand-600); background:var(--brand-50); }

/* Feather sizing helpers (kept for compatibility) */
.feather-14{width:14px;height:14px}.feather-16{width:16px;height:16px}.feather-18{width:18px;height:18px}
.feather-24{width:24px;height:24px}.feather-48{width:48px;height:48px}

/* ==========================================================================
   AUTH PAGES (login / register / forgot / reset)
   ========================================================================== */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-form-side {
    display:flex; flex-direction:column; justify-content:center;
    padding:2.5rem clamp(1.5rem,5vw,4rem); background:#fff;
}
.auth-form-inner { width:100%; max-width:420px; margin:0 auto; }
.auth-visual-side {
    background:linear-gradient(160deg,var(--brand-700),var(--brand-900));
    color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:center;
    position:relative; overflow:hidden;
}
.auth-visual-side::before{
    content:""; position:absolute; width:380px; height:380px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-120px; right:-120px;
}
.auth-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.5rem; color:var(--slate-900); margin-bottom:1.75rem; }
.auth-brand .brand-mark { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-600),var(--brand-800)); color:#fff; }
.auth-brand .brand-logo { height:38px; width:auto; max-width:190px; object-fit:contain; }
.auth-title { font-size:1.6rem; font-weight:800; color:var(--slate-900); margin-bottom:.3rem; }
.auth-subtitle { color:var(--slate-500); margin-bottom:1.5rem; font-size:.9rem; }
.btn-google {
    display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
    background:#fff; border:1.5px solid var(--slate-200); color:var(--slate-700);
    font-weight:600; padding:.65rem; border-radius:var(--radius-sm);
}
.btn-google:hover { background:var(--slate-50); border-color:var(--slate-300); }
.auth-divider { display:flex; align-items:center; gap:.75rem; color:var(--slate-400); font-size:.78rem; margin:1.1rem 0; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--slate-200); }
.pass-wrap { position:relative; }
.pass-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--slate-400); border:none; background:none; padding:0; }
.auth-feature { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.25rem; }
.auth-feature .af-icon { width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,.12); display:grid; place-items:center; flex-shrink:0; }

@media (max-width:860px){
    .auth-wrap{ grid-template-columns:1fr; }
    .auth-visual-side{ display:none; }
}

/* Loading overlay (research generate) */
.loading-overlay {
    position:fixed; inset:0; z-index:9999;
    background:rgba(15,23,42,.72); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; flex-direction:column;
    color:#fff; text-align:center;
}
.loading-overlay.show { display:flex; }

/* Academic workspace components */
.workspace-hero {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.5rem; border:1px solid var(--card-border); border-radius:var(--radius);
    background:linear-gradient(135deg,#fff,var(--color-bg-soft));
}
.workspace-hero h2 { color:var(--text-strong); font-weight:800; font-size:1.55rem; }
.workspace-hero p { color:var(--text-muted); max-width:720px; }
.eyebrow {
    color:var(--accent-700); font-size:.72rem; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; margin-bottom:.35rem;
}
.metric-card {
    min-height:118px; display:flex; align-items:center; gap:1rem;
    padding:1.2rem; background:#fff; border:1px solid var(--card-border);
    border-radius:var(--radius); box-shadow:var(--card-shadow);
}
.metric-icon {
    width:48px; height:48px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
}
.metric-icon svg { width:22px; height:22px; }
.metric-label { color:var(--text-muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.metric-value { color:var(--text-strong); font-size:1.5rem; font-weight:800; line-height:1.15; }
.metric-value-sm { font-size:1.05rem; }
.metric-note { color:var(--text-muted); font-size:.78rem; margin-top:.15rem; }
.progress-panel {
    padding:1rem 1.2rem; border:1px solid var(--card-border); border-radius:var(--radius); background:#fff;
}
.saved-topic-item { padding:.85rem 0; border-bottom:1px solid var(--slate-100); }
.saved-topic-item:last-child { border-bottom:0; padding-bottom:0; }
.qc-tile {
    padding:1rem; border:1px solid var(--card-border); border-radius:var(--radius-sm); background:var(--slate-50);
}
.qc-tile span { display:block; color:var(--text-muted); font-size:.78rem; font-weight:700; }
.qc-tile strong { color:var(--text-strong); font-size:1.35rem; }
.trend-row {
    display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--slate-100);
}
.trend-row:last-child { border-bottom:0; padding-bottom:0; }
.trend-row span { color:var(--text-normal); }
.trend-row strong { color:var(--accent-700); }
.research-progress {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-bottom:1rem;
}
.research-step-pill {
    border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:.65rem .75rem; background:#fff;
    color:var(--text-muted); font-size:.8rem; font-weight:700;
}
.research-step-pill.active { border-color:var(--secondary-600); color:var(--secondary-600); background:var(--secondary-50); }
.mode-card {
    border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:1rem; height:100%;
    cursor:pointer; background:#fff; transition:border-color .15s, background .15s;
}
.mode-card:has(input:checked) { border-color:var(--secondary-600); background:var(--secondary-50); }
@media (max-width:767.98px){
    .workspace-hero { align-items:flex-start; flex-direction:column; }
    .research-progress { grid-template-columns:1fr; }
}

/* ==========================================================================
   UTIL
   ========================================================================== */
.divider { height:1px; background:var(--slate-200); margin:1rem 0; }
.hover-lift{transition:.2s}.hover-lift:hover{transform:translateY(-3px)}
.cursor-pointer{cursor:pointer}
.rounded-xl{border-radius:var(--radius)!important}