/* =========================================================
   Sistem Review Dokumen — tema biru dongker
   ========================================================= */
:root {
  --navy-900: #0B1930;
  --navy-800: #102749;
  --navy-700: #17376a;
  --accent: #3B82F6;
  --accent-600: #2563EB;
  --sky: #93C5FD;
  --bg: #F1F5F9;
  --ink: #0f1f3a;
  --muted: #64748b;
  --line: #e2e8f0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(11,25,48,.06), 0 8px 24px -12px rgba(11,25,48,.18);
  --grad: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 59,130,246;
  --bs-link-color: var(--accent-600);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-size: .94rem; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600); --bs-btn-active-bg: var(--accent-600); --bs-btn-disabled-bg: var(--accent); }
.btn-navy { --bs-btn-color:#fff; --bs-btn-bg: var(--navy-800); --bs-btn-border-color: var(--navy-800); --bs-btn-hover-bg: var(--navy-700); --bs-btn-hover-border-color: var(--navy-700); --bs-btn-hover-color:#fff; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .22rem rgba(59,130,246,.18); }
.text-navy { color: var(--navy-800) !important; }

/* ---------- Layout admin ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 262px; flex: 0 0 262px; background: linear-gradient(185deg, var(--navy-900), var(--navy-800)); color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1040; transition: transform .25s ease; }
.sidebar .brand { padding: 1.35rem 1.4rem 1.1rem; display: flex; align-items: center; gap: .75rem; color: #fff; font-weight: 700; letter-spacing: .2px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--sky)); display: grid; place-items: center; color: var(--navy-900); font-size: 1.15rem; box-shadow: 0 6px 18px -6px rgba(59,130,246,.7); }
.brand small { display: block; font-weight: 500; color: var(--sky); font-size: .72rem; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
.side-label { font-size: .68rem; letter-spacing: 1.2px; text-transform: uppercase; color: #64809f; padding: 1rem 1.5rem .4rem; }
.side-nav { padding: 0 .8rem; display: flex; flex-direction: column; gap: 2px; }
.side-nav a, .side-nav button { display: flex; align-items: center; gap: .75rem; padding: .62rem .85rem; border-radius: 10px; color: #b8c7dc; font-weight: 500; background: none; border: 0; width: 100%; text-align: left; }
.side-nav a i, .side-nav button i { font-size: 1.05rem; opacity: .9; }
.side-nav a:hover, .side-nav button:hover { background: rgba(147,197,253,.10); color: #fff; }
.side-nav a.active { background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(59,130,246,.55)); color: #fff; box-shadow: 0 8px 20px -10px rgba(59,130,246,.9); }
.side-foot { margin-top: auto; padding: 1rem .8rem 1.2rem; border-top: 1px solid rgba(147,197,253,.12); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1030; }
.topbar h1 { font-size: 1.12rem; font-weight: 700; margin: 0; color: var(--navy-800); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.content { padding: 1.5rem; flex: 1; }
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); }
  .sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.4); }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(11,25,48,.5); z-index: 1035; }
  .content { padding: 1rem; }
}

/* ---------- Kartu ---------- */
.card-soft { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-soft > .card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.card-soft > .card-head h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--navy-800); }
.card-soft > .card-body-pad { padding: 1.25rem; }
.stat { position: relative; overflow: hidden; padding: 1.2rem 1.3rem; border-radius: var(--radius); color: #fff; background: var(--grad); box-shadow: var(--shadow); }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(147,197,253,.35), transparent 70%); }
.stat .num { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.stat .lbl { color: var(--sky); font-size: .8rem; letter-spacing: .4px; text-transform: uppercase; }
.stat i { position: absolute; right: 1.1rem; bottom: .8rem; font-size: 2.2rem; opacity: .22; }
.stat.alt { background: linear-gradient(135deg, #1d4ed8, #3B82F6); }
.stat.alt2 { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.stat.alt3 { background: linear-gradient(135deg, #1e3a8a, #4f46e5); }

/* ---------- Tabel ---------- */
.table-modern { margin: 0; }
.table-modern thead th { background: #f8fafc; color: var(--muted); font-size: .72rem; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--line); padding: .8rem 1rem; white-space: nowrap; }
.table-modern td { padding: .7rem 1rem; vertical-align: middle; border-color: #eef2f7; }
.table-modern tbody tr:hover { background: #f8fbff; }
.table-modern tr.hl { animation: hl 2.2s ease; }
@keyframes hl { 0%,40% { background: rgba(59,130,246,.18); } 100% { background: transparent; } }
.tree-cell { display: flex; align-items: center; gap: .35rem; min-width: 260px; }
.tree-toggle { width: 24px; height: 24px; border: 0; background: none; color: var(--muted); border-radius: 6px; display: inline-grid; place-items: center; flex: 0 0 24px; padding: 0; }
.tree-toggle:hover { background: #e8f0fe; color: var(--accent-600); }
.tree-toggle i { transition: transform .15s; }
.tree-toggle.collapsed i { transform: rotate(-90deg); }
.tree-toggle.empty { visibility: hidden; }
.ico-folder { color: #f59e0b; }
.ico-pdf { color: #ef4444; }
.badge-soft { background: #e8f0fe; color: var(--accent-600); font-weight: 600; }
.badge-soft-gray { background: #f1f5f9; color: var(--muted); font-weight: 600; }
.badge-soft-red { background: #fee2e2; color: #b91c1c; font-weight: 600; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 9px; }
.actions { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: nowrap; }
.actions form { margin: 0; }

/* ---------- Form ---------- */
.form-label { font-weight: 600; color: var(--navy-800); font-size: .85rem; }
.dropzone-lite { border: 2px dashed #bcd0ea; border-radius: 12px; background: #f8fbff; padding: 1.2rem; text-align: center; color: var(--muted); }
.dropzone-lite.drag { border-color: var(--accent); background: #eaf2ff; }
.access-list { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .75rem; background: #fff; }
.access-list label { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; cursor: pointer; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1000px 520px at 85% -10%, rgba(59,130,246,.35), transparent 60%), radial-gradient(800px 480px at -10% 110%, rgba(147,197,253,.22), transparent 60%), var(--grad); position: relative; overflow: hidden; }
.login-wrap::before, .login-wrap::after { content: ""; position: absolute; border: 1px solid rgba(147,197,253,.14); border-radius: 50%; }
.login-wrap::before { width: 620px; height: 620px; right: -180px; top: -160px; }
.login-wrap::after { width: 420px; height: 420px; left: -120px; bottom: -140px; }
.login-card { width: 100%; max-width: 410px; background: rgba(255,255,255,.97); border-radius: 20px; padding: 2.2rem 2rem 1.8rem; box-shadow: 0 30px 80px -20px rgba(2,8,23,.7); position: relative; z-index: 1; }
.login-card .brand-mark { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 15px; margin: 0 auto 1rem; }
.login-card h1 { font-size: 1.35rem; font-weight: 800; color: var(--navy-800); text-align: center; margin-bottom: .2rem; }
.login-card .sub { text-align: center; color: var(--muted); margin-bottom: 1.6rem; }
.input-icon { position: relative; }
.input-icon > i.lead-i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.input-icon .form-control { padding-left: 2.5rem; height: 46px; border-radius: 11px; }
.input-icon .toggle-pw { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #94a3b8; padding: .45rem .6rem; }
.btn-login { height: 46px; border-radius: 11px; font-weight: 700; background: var(--grad); border: 0; color: #fff; box-shadow: 0 12px 24px -12px rgba(16,39,73,.9); }
.btn-login:hover { filter: brightness(1.15); color: #fff; }

/* ---------- Halaman Review ---------- */
body.review-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.rv-top { background: var(--grad); color: #fff; height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: .9rem; padding: 0 1rem 0 1.1rem; box-shadow: 0 2px 14px rgba(11,25,48,.35); z-index: 20; }
.rv-top .brand-mark { width: 32px; height: 32px; font-size: 1rem; border-radius: 9px; }
.rv-top .title { font-weight: 700; letter-spacing: .2px; }
.rv-top .btn-ghost { color: #dbe7f7; border: 1px solid rgba(147,197,253,.28); background: rgba(255,255,255,.04); }
.rv-top .btn-ghost:hover { background: rgba(147,197,253,.18); color: #fff; }
.rv-main { flex: 1; display: flex; min-height: 0; }
.rv-left { flex: 0 0 30%; max-width: 30%; min-width: 300px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.rv-right { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #e9eef6; }
.rv-search { padding: .85rem .85rem .6rem; border-bottom: 1px solid var(--line); background: linear-gradient(#fff, #f8fbff); }
.rv-search .input-icon .form-control { height: 40px; }
.rv-tools { display: flex; gap: .4rem; margin-top: .55rem; }
.rv-tools .btn { font-size: .78rem; }
.rv-tree { flex: 1; overflow: auto; padding: .5rem .5rem 1.5rem; }
.tnode ul { list-style: none; margin: 0; padding-left: 0; }
.tnode-row { display: flex; align-items: center; gap: .15rem; border-radius: 9px; padding: 0 .4rem 0 0; margin: 1px 0; cursor: pointer; color: var(--ink); min-height: 36px; user-select: none; border: 1px solid transparent; }
.tnode-row:hover { background: #eef4ff; }
.tnode-row.active { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.06)); border-color: rgba(59,130,246,.45); color: var(--navy-900); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.tnode-row.locked { opacity: .5; cursor: default; }
.tnode-row .caret { width: 24px; height: 28px; flex: 0 0 24px; display: grid; place-items: center; color: #7b8aa3; border: 0; background: none; padding: 0; border-radius: 6px; }
.tnode-row .caret:hover { background: #dbe8ff; color: var(--accent-600); }
.tnode-row .caret i { transition: transform .15s; font-size: .8rem; }
.tnode.collapsed > .tnode-row .caret i { transform: rotate(-90deg); }
.tnode.collapsed > ul { display: none; }
.tnode-row .caret.none { visibility: hidden; }
.tnode-row .ico { flex: 0 0 auto; margin: 0 .45rem 0 .1rem; font-size: 1.08rem; }
.tnode-row .lbl { flex: 1; min-width: 0; line-height: 1.25; padding: .35rem 0; overflow-wrap: anywhere; }
.tnode-row mark { background: #fde68a; padding: 0 1px; border-radius: 3px; }
.tnode-row .pill { font-size: .68rem; background: #eef2f7; color: var(--muted); border-radius: 20px; padding: .05rem .5rem; margin-left: .35rem; }
.rv-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.rv-head { background: #fff; border-bottom: 1px solid var(--line); padding: .6rem 1rem; display: flex; align-items: center; gap: .75rem; min-height: 58px; flex-wrap: wrap; }
.rv-head .doc-title { font-weight: 700; color: var(--navy-800); font-size: 1.02rem; line-height: 1.2; }
.rv-head .crumb { font-size: .75rem; color: var(--muted); }
.rv-head .grow { flex: 1; min-width: 160px; }
.pdf-tools { display: flex; align-items: center; gap: .3rem; }
.pdf-tools .btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.pdf-tools .pg { font-size: .82rem; color: var(--muted); min-width: 74px; text-align: center; }
.rv-stage { position: relative; flex: 1; min-height: 0; }
.pdf-scroll { position: absolute; inset: 0; overflow: auto; padding: 1.1rem .8rem 2rem; scroll-behavior: auto; }
.pdf-page { background: #fff; margin: 0 auto 14px; box-shadow: 0 6px 22px -8px rgba(11,25,48,.35); position: relative; }
.pdf-page canvas { display: block; }
.pdf-page .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #b6c2d4; font-size: .85rem; }
.state { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 2rem; background: #e9eef6; z-index: 5; }
.state.show { display: grid; }
.state .box { max-width: 380px; }
.state .big { font-size: 3.2rem; color: #9db4d6; }
.state.error .big { color: #ef4444; }
.loader { display: none; position: absolute; inset: 0; background: rgba(233,238,246,.82); z-index: 6; place-items: center; }
.loader.show { display: grid; }
.spin { width: 44px; height: 44px; border: 4px solid #cfe0fb; border-top-color: var(--accent); border-radius: 50%; animation: sp .8s linear infinite; margin: 0 auto .8rem; }
@keyframes sp { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 8px; height: 30px; margin: 6px 8px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 991.98px) {
  .rv-left { position: fixed; top: 56px; bottom: 0; left: 0; width: min(88vw, 360px); max-width: none; flex-basis: auto; z-index: 30; transform: translateX(-102%); transition: transform .25s ease; box-shadow: 0 0 50px rgba(0,0,0,.35); }
  .rv-left.open { transform: none; }
  .rv-backdrop { display: none; }
  .rv-backdrop.show { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(11,25,48,.45); z-index: 25; }
  .rv-head .doc-title { font-size: .95rem; }
}
@media (min-width: 992px) { .rv-backdrop { display: none !important; } #btnDrawer { display: none; } }