:root{
  --navy:#1f4e79; --navy-d:#163a5a; --accent:#2d7dd2;
  --ink:#1c2733; --muted:#6b7785; --line:#e2e7ee; --bg:#f4f6f9;
  --card:#fff; --ok:#1f8a4c; --okbg:#e7f5ec; --err:#c0392b; --errbg:#fae9e7;
  --chip:#eef3f9; --radius:10px; --shadow:0 1px 3px rgba(20,40,70,.08);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.5;font-size:15px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:.2em 0 .6em}
.muted,.result-count{color:var(--muted)}
code{background:#eef1f5;padding:1px 5px;border-radius:4px;font-size:.9em}

/* ---- topbar ---- */
.topbar{background:var(--navy);color:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:50}
.topbar-inner{max-width:1180px;margin:0 auto;padding:0 18px;height:56px;
  display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600}
.brand:hover{text-decoration:none}
.brand-mark{background:#fff;color:var(--navy);font-weight:800;border-radius:6px;
  padding:2px 8px;font-size:.95rem;letter-spacing:.5px}
.topnav{display:flex;align-items:center;gap:18px}
.topnav a{color:#dce7f2}
.topnav a:hover{color:#fff;text-decoration:none}

.container{max-width:1180px;margin:0 auto;padding:22px 18px 60px}
.footer{text-align:center;color:var(--muted);font-size:.85rem;padding:24px}

/* ---- buttons ---- */
.btn,.btn-ghost,.btn-mini{display:inline-block;border:1px solid var(--navy);
  border-radius:8px;padding:8px 16px;font-size:.9rem;cursor:pointer;
  background:var(--navy);color:#fff;font-weight:500;transition:.15s}
.btn:hover{background:var(--navy-d);text-decoration:none;color:#fff}
.btn-ghost{background:#fff;color:var(--navy)}
.btn-ghost:hover{background:#eef3f9;text-decoration:none}
.btn-block{display:block;width:100%;text-align:center}
.btn-mini{padding:4px 9px;font-size:.78rem;border-radius:6px;
  background:#fff;color:var(--navy)}
.btn-mini:hover{background:#eef3f9}

/* ---- flashes ---- */
.flashes{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.flash{padding:10px 14px;border-radius:8px;font-size:.9rem}
.flash-success{background:var(--okbg);color:var(--ok)}
.flash-error{background:var(--errbg);color:var(--err)}

/* ---- type switch ---- */
.type-switch{display:inline-flex;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:3px;margin-bottom:16px}
.seg{padding:6px 18px;border-radius:999px;color:var(--muted);font-weight:500}
.seg:hover{text-decoration:none}
.seg-active{background:var(--navy);color:#fff}

/* ---- filters ---- */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:22px;box-shadow:var(--shadow);position:sticky;top:68px;z-index:20}
.filter-search{position:relative;margin-bottom:12px}
.filter-search input[type=search]{width:100%;padding:11px 14px;font-size:1rem;
  border:1px solid var(--line);border-radius:8px}
.search-suggest{position:absolute;left:0;right:0;top:100%;background:#fff;
  border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;
  box-shadow:var(--shadow);max-height:340px;overflow:auto;z-index:30}
.search-suggest a{display:block;padding:9px 14px;color:var(--ink);border-bottom:1px solid var(--line)}
.search-suggest a:hover{background:#f3f7fb;text-decoration:none}
.search-suggest .ss-code{font-weight:700;color:var(--navy);margin-right:6px}
.search-suggest .ss-dept{color:var(--muted);font-size:.8rem}
.filter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.filter-field{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted)}
.filter-field select,.filter-field input{font-size:.9rem;padding:6px 8px;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff}
.filter-field select[multiple]{height:auto}
.filter-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.result-count{margin-left:auto;font-size:.85rem}

/* ---- departments / cards ---- */
.dept{margin-bottom:14px}
.dept details{background:transparent}
.dept summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--navy);color:#fff;border-radius:8px;font-weight:600}
.dept summary::-webkit-details-marker{display:none}
.dept summary::before{content:"▸";transition:.15s}
.dept details[open] summary::before{transform:rotate(90deg)}
.dept-count{margin-left:auto;background:rgba(255,255,255,.2);border-radius:999px;
  padding:1px 10px;font-size:.8rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px;padding:14px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.card-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.code-badge{background:var(--navy);color:#fff;font-weight:700;font-size:.78rem;
  padding:2px 9px;border-radius:6px;letter-spacing:.3px;white-space:nowrap}
.code-badge-lg{font-size:.95rem;padding:4px 12px}
.card-title{font-weight:600;font-size:1.05rem;color:var(--ink)}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--muted);font-size:.84rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip);border-radius:7px;padding:4px 9px;font-size:.8rem;color:#33485e}
.chip b{color:var(--navy);font-weight:600}
.systems{display:flex;flex-wrap:wrap;gap:6px}
.sys{font-size:.74rem;color:var(--muted);border:1px dashed var(--line);
  border-radius:6px;padding:2px 7px}
.related{font-size:.84rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.related-label{color:var(--muted)}
.rel-link{background:#eaf2fb;color:var(--accent);border-radius:6px;padding:2px 8px;font-weight:600}
.rel-missing{background:#f0f0f0;color:#9aa4ad;cursor:help}
.card-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}

.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);
  padding:30px;text-align:center;color:var(--muted)}

/* ---- doc page ---- */
.doc-back{margin-bottom:12px}
.doc-layout{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
.doc-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);min-width:0}
.doc-header h1{margin:.3em 0}
.doc-subline{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:.85rem}
.meta-table{width:100%;border-collapse:collapse;margin:18px 0}
.meta-table th{text-align:left;width:180px;vertical-align:top;color:var(--muted);
  font-weight:600;padding:7px 10px;border-bottom:1px solid var(--line)}
.meta-table td{padding:7px 10px;border-bottom:1px solid var(--line)}
.doc-aside{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px}
.aside-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.aside-block h3{margin:0 0 10px;font-size:.95rem}
.aside-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aside-parts li b{color:var(--navy)}
.aside-parts .names{font-size:.88rem}
.aside-parts .scope{font-size:.78rem;color:var(--muted)}
.aside-rel{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.aside-rel a{background:#eaf2fb;border-radius:6px;padding:3px 9px;font-weight:600}

/* rendered docx body */
.doc-body{margin-top:10px;overflow-x:auto}
.doc-body p{margin:.6em 0}
.doc-body h1,.doc-body h2,.doc-body h3{margin:1.1em 0 .4em;line-height:1.25}
.doc-body table{border-collapse:collapse;width:100%;margin:14px 0;font-size:.9rem}
.doc-body th,.doc-body td{border:1px solid var(--line);padding:7px 9px;
  vertical-align:top;text-align:left}
.doc-body thead th,.doc-body tr:first-child td{background:#eef3f9}
.doc-body ul,.doc-body ol{padding-left:1.4em}
.doc-body li{margin:.25em 0}

/* ---- login ---- */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#1f4e79,#163a5a)}
.login-box{background:#fff;border-radius:14px;padding:30px;width:340px;
  box-shadow:0 10px 40px rgba(0,0,0,.25)}
.login-brand{display:flex;align-items:center;gap:8px;font-weight:700;
  font-size:1.15rem;color:var(--navy);margin-bottom:18px}
.login-box label{display:block;margin-bottom:12px;font-size:.85rem;color:var(--muted)}
.login-box input{width:100%;padding:10px 12px;margin-top:4px;font-size:1rem;
  border:1px solid var(--line);border-radius:8px}
.login-hint{font-size:.78rem;color:var(--muted);text-align:center;margin:14px 0 0}

/* ---- admin / account ---- */
.user-form{margin:14px 0;display:flex;flex-direction:column;gap:12px}
.user-form.narrow{max-width:380px}
.checkbox{display:flex;align-items:center;gap:8px;font-size:.9rem}
.create-user,.upload-docs{margin:16px 0}
.create-user>summary,.upload-docs>summary{display:inline-block;margin-bottom:8px;list-style:none}
.docs-heading{margin:26px 0 6px;font-size:1.1rem}
.user-form .hint{font-size:.8rem;color:var(--muted);margin:0}
.users-table,.reindex-form{width:100%}
.users-table{border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.users-table th,.users-table td{padding:9px 12px;border-bottom:1px solid var(--line);
  text-align:left;font-size:.88rem}
.users-table thead th{background:#eef3f9}
.row-inactive{opacity:.55}
.row-actions{display:flex;flex-wrap:wrap;gap:6px}
.row-actions form{display:inline}
.reindex-form{margin-top:10px}

.error-page{text-align:center;padding:60px 20px}
.error-code{font-size:4rem;font-weight:800;color:var(--navy)}

@media (max-width:860px){
  .filter-row{grid-template-columns:1fr}
  .doc-layout{grid-template-columns:1fr}
  .doc-aside{position:static}
  .filters{position:static}
  .topnav{gap:12px;font-size:.9rem}
  .cards{grid-template-columns:1fr}
}