/* ============================================================
   Portal Dokumen SmartKidz — tambahan di atas app.css + theme.css
   ============================================================ */

/* ---------- Utilitas ---------- */
.w-full { width: 100%; justify-content: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.badge-info { background: rgba(30, 107, 184, .1); color: var(--sk-blue); }
html[data-theme="dark"] .badge-info { background: rgba(96, 165, 250, .14); color: #60a5fa; }
.narrow-card { max-width: 560px; }
.form-grid-1 { grid-template-columns: 1fr; }
.doc-form-actions { padding: 14px 22px 18px; border-top: 1px solid var(--border); }

/* ---------- Login ---------- */
.auth-note { margin-top: 18px; font-size: 12px; color: var(--text-3); font-weight: 600; text-align: center; line-height: 1.5; }

/* ---------- Sidebar & topbar ---------- */
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em;
}
.nav-cat { gap: 10px; }
.cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin: 0 4px; }
.nav-count {
  margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.nav-item.active .nav-count { color: var(--primary); border-color: transparent; background: var(--surface); }
.top-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  color: var(--text-3); width: 260px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.top-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.top-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.top-search input { border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; width: 100%; }
@media (max-width: 900px) { .top-search { display: none; } }

/* ---------- Kategori, format, tag ---------- */
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--cat); background: color-mix(in srgb, var(--cat) 11%, transparent);
}
.cat-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-theme="dark"] .cat-chip { color: color-mix(in srgb, var(--cat) 60%, #fff); background: color-mix(in srgb, var(--cat) 20%, transparent); }

.ext-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 42px; height: 26px; padding: 0 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  color: #fff; background: #64748b;
}
.ext-docx, .ext-doc, .ext-odt, .ext-rtf { background: #2b579a; }
.ext-xlsx, .ext-xls, .ext-ods, .ext-csv { background: #217346; }
.ext-pptx, .ext-ppt, .ext-odp { background: #c43e1c; }
.ext-pdf { background: #d32f2f; }
.ext-md, .ext-txt { background: #475569; }
.ext-png, .ext-jpg, .ext-jpeg, .ext-svg { background: #7c3aed; }

.tag-internal, .tag-shared {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.tag-internal { color: var(--warn); background: var(--warn-tint); }
.tag-shared { color: var(--success); background: var(--success-tint); }

/* ---------- Daftar dokumen ---------- */
.doc-list td { vertical-align: middle; }
.doc-cell { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 260px; }
.doc-cell strong { display: block; font-weight: 700; font-size: 13.5px; line-height: 1.35; }
.doc-cell small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.doc-cell:hover strong { color: var(--primary); }

/* ---------- Dashboard ---------- */
.dash-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.dash-grid-2 > .card { margin-bottom: 0; }
@media (max-width: 1080px) { .dash-grid-2 { grid-template-columns: 1fr; } }
#deliverable { margin-bottom: 18px; }
.dash-table td i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.dash-table a { color: inherit; text-decoration: none; }
.dash-table a:hover { color: var(--primary); }
.stat-value small { font-size: 14px; color: var(--text-3); font-weight: 700; }
.stat-hint.is-warn { color: var(--warn); }
a.card.stat { color: inherit; text-decoration: none; }

.ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ms-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ms-item:last-child { border-bottom: 0; }
.ms-id {
  flex-shrink: 0; width: 40px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.ms-body { flex: 1; min-width: 0; }
.ms-body strong { display: block; font-size: 13px; font-weight: 700; }
.ms-body span { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.ms-days { font-size: 11.5px; font-weight: 800; color: var(--text-3); white-space: nowrap; }
.ms-item.is-past { opacity: .55; }
.ms-item.is-next .ms-id { background: var(--primary); border-color: var(--primary); color: #fff; }
.ms-item.is-next .ms-days { color: var(--primary); }

.dlv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 4px 16px 16px; }
.dlv-item { display: flex; gap: 10px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.dlv-item.is-filled { border-style: solid; border-color: rgba(22, 163, 74, .3); background: var(--success-tint); }
.dlv-no {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.dlv-item.is-filled .dlv-no { background: var(--success); border-color: var(--success); color: #fff; }
.dlv-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.dlv-body strong { font-size: 12.5px; font-weight: 700; }
.dlv-body a { color: var(--text-2); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dlv-body a:hover { color: var(--primary); }
.dlv-body em { font-style: normal; color: var(--text-3); }
.dlv-empty { color: var(--text-3); font-weight: 600; }
.dlv-body a.dlv-add { color: var(--primary); font-weight: 700; }

.recent-list { display: flex; flex-direction: column; padding: 0 8px 8px; }
.recent-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.recent-item:hover { background: var(--surface-2); }
.recent-body { min-width: 0; }
.recent-body strong { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-body small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 600; }

.tracker-kv { margin-bottom: 14px; }
.kv-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.tracker-table th, .tracker-table td { font-size: 12px; padding: 7px 8px; }
.howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.howto li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); font-weight: 600; line-height: 1.5; }
.howto svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); margin-top: 1px; }

/* ---------- Halaman dokumen ---------- */
.doc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .doc-layout { grid-template-columns: 1fr; } }
.doc-layout .card { margin-bottom: 0; }
.doc-side { display: flex; flex-direction: column; gap: 18px; }
.doc-viewer-card .card-head .row-actions { gap: 6px; }
.doc-viewer { position: relative; background: var(--surface-2); border-top: 1px solid var(--border); min-height: 420px; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.doc-frame { display: block; width: 100%; height: calc(100vh - 220px); min-height: 560px; border: 0; background: #fff; }
.doc-viewer:fullscreen { border-radius: 0; }
.doc-viewer:fullscreen .doc-frame { height: 100vh; }
.doc-image { padding: 16px; text-align: center; }
.doc-image img { max-width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-md); background: #fff; }
.doc-viewer .empty-state { padding: 80px 20px; }
.doc-spin { width: 28px; height: 28px; border-width: 3px; margin-bottom: 10px; border-color: var(--border-strong); border-top-color: var(--primary); }
.doc-error { display: block; max-width: 640px; margin: 12px auto 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--danger-tint); color: var(--danger); font-size: 11.5px; white-space: pre-wrap; text-align: left; }

.doc-prose { background: var(--surface); padding: 28px 34px; font-size: 14px; line-height: 1.7; color: var(--text); max-height: calc(100vh - 220px); overflow: auto; }
.doc-prose h1, .doc-prose h2, .doc-prose h3, .doc-prose h4 { margin: 1.3em 0 .5em; line-height: 1.3; }
.doc-prose h1 { font-size: 22px; } .doc-prose h2 { font-size: 18px; } .doc-prose h3 { font-size: 15.5px; }
.doc-prose p, .doc-prose ul, .doc-prose ol, .doc-prose pre, .doc-prose table, .doc-prose blockquote { margin: 0 0 1em; }
.doc-prose ul, .doc-prose ol { padding-left: 1.4em; }
.doc-prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.doc-prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; overflow: auto; }
.doc-prose pre code { background: none; padding: 0; }
.doc-prose table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc-prose th, .doc-prose td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; }
.doc-prose blockquote { border-left: 3px solid var(--primary); padding-left: 12px; color: var(--text-2); }
.doc-prose a { color: var(--primary); }
.doc-text { margin: 0; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

.doc-desc { font-size: 13px; color: var(--text-2); font-weight: 600; line-height: 1.55; }
.doc-filename { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-card .card-head h2 { font-size: 14.5px; }
.side-card .file-drop { margin: 0; }

.ver-list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; max-height: 360px; overflow: auto; }
.ver-item { display: flex; align-items: center; gap: 6px; border-radius: var(--r-md); padding-right: 6px; }
.ver-item:hover { background: var(--surface-2); }
.ver-item.is-active { background: var(--primary-tint); }
.ver-main { flex: 1; min-width: 0; display: flex; gap: 10px; padding: 9px 8px; color: inherit; text-decoration: none; }
.ver-no {
  flex-shrink: 0; min-width: 36px; height: 24px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.ver-item.is-active .ver-no { background: var(--primary); border-color: var(--primary); color: #fff; }
.ver-body { min-width: 0; }
.ver-body strong { display: block; font-size: 12.5px; font-weight: 700; }
.ver-body small { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; }
.ver-note { font-style: italic; overflow-wrap: anywhere; }
.ver-latest { font-style: normal; font-size: 10px; font-weight: 800; color: var(--success); background: var(--success-tint); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }

/* ---------- Form ---------- */
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; margin-top: 18px; border-color: rgba(220, 38, 38, .25); }
.danger-zone strong { display: block; font-size: 14px; color: var(--danger); }
.danger-zone span { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.file-drop.is-drag { border-color: var(--primary); background: var(--primary-tint); }
.temp-pass { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 800; padding: 2px 8px; border-radius: 5px; background: var(--surface); user-select: all; }

@media (max-width: 720px) {
  .kv-2 { grid-template-columns: 1fr; }
  .doc-prose { padding: 18px; }
  .danger-zone { flex-direction: column; align-items: flex-start; }
}