@import url("../fonts/fonts.css");

:root{
  --bg:#f4f5f7; --panel:#ffffff; --content:#ffffff; --ink:#1a1d24; --muted:#5b6675;
  --border:#d9dee6; --accent:#0b6b3a; --accent-ink:#ffffff; --hover:#eef6f0;
  --sidebar-w:340px; --fs:17px; --topbar-h:54px; --shadow:0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --bg:#14171c; --panel:#1b1f26; --content:#1e232b; --ink:#e8ebf0; --muted:#9aa6b6;
  --border:#333b46; --accent:#3fb27f; --accent-ink:#08130d; --hover:#222a33; --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
}
button{font-family:inherit;cursor:pointer}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:30;
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow);
}
.topbar .brand{font-weight:700;color:var(--accent);white-space:nowrap;font-size:16px}
.topbar .brand small{color:var(--muted);font-weight:500;margin-left:6px;font-size:12px}
.spacer{flex:1}
.tbtn{
  border:1px solid var(--border);background:var(--content);color:var(--ink);
  border-radius:8px;height:36px;min-width:36px;padding:0 10px;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.tbtn:hover{background:var(--hover);border-color:var(--accent)}
.search-box{position:relative;display:flex;align-items:center}
.search-box input{
  height:36px;border:1px solid var(--border);border-radius:8px;background:var(--content);
  color:var(--ink);padding:0 12px;width:230px;font-size:14px;font-family:inherit;
}
.search-box input:focus{outline:none;border-color:var(--accent)}
#menuBtn{display:inline-flex}

/* ---------- Layout ---------- */
.layout{position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;display:flex}
.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--panel);border-right:1px solid var(--border);
  overflow:auto;padding:10px 6px 40px;transition:transform .22s ease;
}
/* left-edge hover handle (shown only in auto-hide mode) */
#edgeZone{display:none;position:fixed;left:0;top:var(--topbar-h);bottom:0;width:18px;z-index:21;cursor:pointer}
/* desktop auto-hide: sidebar overlays content, reveals on hover */
@media (min-width:821px){
  body.ah .sidebar{position:absolute;top:0;left:0;bottom:0;z-index:22;
    transform:translateX(-101%);box-shadow:2px 0 18px rgba(0,0,0,.18)}
  body.ah.peek .sidebar{transform:translateX(0)}
  body.ah #edgeZone{display:block}
  body.ah #edgeZone::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:72px;border-radius:0 5px 5px 0;background:var(--accent);opacity:.55;transition:opacity .2s}
  body.ah.peek #edgeZone::before{opacity:0}
}
.reader{flex:1;overflow:auto;scroll-behavior:smooth;display:flex;justify-content:center;align-items:flex-start}
.reader-inner{
  width:100%;max-width:920px;background:var(--content);margin:18px;padding:32px 40px 80px;
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);min-height:60vh;
}

/* ---------- TOC tree ---------- */
.toc ul{list-style:none;margin:0;padding-left:14px}
.toc>ul{padding-left:4px}
.toc li{margin:1px 0}
.toc .row{
  display:flex;align-items:flex-start;gap:4px;border-radius:6px;padding:4px 6px;
  font-size:13.5px;line-height:1.35;color:var(--ink);
}
.toc .row:hover{background:var(--hover)}
.toc .row.folder{font-weight:600;cursor:pointer;color:var(--muted)}
.toc .row.leaf{cursor:pointer}
.toc .row.active{background:var(--accent);color:var(--accent-ink)}
.toc .tw{width:14px;flex:none;text-align:center;color:var(--muted);user-select:none;transition:transform .15s}
.toc .row.active .tw{color:var(--accent-ink)}
.toc li.collapsed>ul{display:none}
.toc li.collapsed>.row .tw{transform:rotate(-90deg)}

/* ---------- Search results ---------- */
.search-results{
  position:absolute;top:46px;right:0;width:min(560px,92vw);max-height:70vh;overflow:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);
  z-index:40;display:none;padding:6px;
}
.search-results.show{display:block}
.sr-item{padding:8px 10px;border-radius:8px;cursor:pointer}
.sr-item:hover,.sr-item.sel{background:var(--hover)}
.sr-item .t{font-weight:600;font-size:14px}
.sr-item .b{font-size:11.5px;color:var(--muted);margin-top:2px}
.sr-item .x{font-size:12.5px;color:var(--muted);margin-top:3px}
.sr-item mark{background:#ffe58a;color:#000;border-radius:2px;padding:0 1px}
.sr-empty,.sr-loading{padding:14px;color:var(--muted);font-size:13px;text-align:center}

/* ---------- Document content ---------- */
.reader-inner .doc{
  font-family:Arial,"Be Vietnam Pro","Helvetica Neue",Helvetica,sans-serif;
  font-size:var(--fs);line-height:1.6;color:var(--ink);
  word-wrap:break-word;overflow-wrap:break-word;
}
.doc p{margin:.5em 0;text-align:justify}
.doc td p,.doc th p{margin:.15em 0;text-align:inherit}
.doc img{max-width:100%;height:auto}
.doc a{color:var(--accent)}
.table-wrap{overflow-x:auto;margin:12px 0;border-radius:6px}
.doc table{border-collapse:collapse;max-width:100%;background:transparent}
.doc table td,.doc table th{padding:4px 7px;vertical-align:top}
/* gentle fallback grid only for tables Word marked as bordered */
.doc table[border]:not([border="0"]) td,
.doc table[border]:not([border="0"]) th{border:1px solid var(--border)}
.doc h1,.doc h2,.doc h3{line-height:1.3}
[data-theme="dark"] .doc img{filter:none}

.page-nav{display:flex;justify-content:space-between;gap:10px;margin-top:34px;padding-top:18px;border-top:1px solid var(--border)}
.page-nav button{flex:1;max-width:48%}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px;font-family:"Be Vietnam Pro",sans-serif}
.doc-title{font-family:"Be Vietnam Pro",sans-serif;font-size:20px;font-weight:700;margin:0 0 10px;color:var(--accent)}
.welcome{text-align:center;color:var(--muted);padding:60px 20px;font-family:"Be Vietnam Pro",sans-serif}
.welcome h2{color:var(--accent)}

/* scrollbars */
.sidebar::-webkit-scrollbar,.reader::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb,.reader::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}

.backdrop{display:none}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  #menuBtn{display:inline-flex}
  .search-box input{width:150px}
  .topbar .brand small{display:none}
  .hide-mobile{display:none}
  .sidebar{position:fixed;top:var(--topbar-h);bottom:0;left:0;z-index:25;transform:translateX(-100%);transition:transform .22s;box-shadow:4px 0 20px rgba(0,0,0,.25)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .backdrop{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(0,0,0,.4);z-index:24}
  .reader-inner{margin:8px;padding:20px 16px 60px}
}

/* ---------- Print / PDF ---------- */
@media print{
  .topbar,.sidebar,.backdrop,.page-nav,.crumb{display:none !important}
  .layout{position:static;display:block}
  .reader{overflow:visible;position:static;display:block}
  .reader-inner{margin:0;padding:0;border:none;box-shadow:none;max-width:none}
  body{overflow:visible;background:#fff;color:#000}
  .doc{color:#000}
  .table-wrap{overflow:visible}
}