/* Offline Viewer POC Styles */
/* Refined dark (default) theme variables */
:root {
  --bg: #22262b;
  --bg-alt: #2e3339;
  --border: #444b52;
  --text: #e3e6e9;
  --text-dim: #b4bac0;
  --accent: #ff6a21;
  --accent-hover: #ff7d3d;
  --accent-bg: rgba(255,106,33,.12);
  --focus-ring: #ff8b50;
  --radius: 5px;
  --font-stack: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --shadow: 0 2px 6px -2px rgba(0,0,0,.5);
}

/* Light theme (opt-in with body.theme-light) */
body.theme-light {
  --bg: #f7f9fb;
  --bg-alt: #eef2f6;
  --border: #d5dbe1;
  --text: #293138;
  --text-dim: #5d6670;
  --accent: #005fa3;
  --accent-hover: #0a74bd;
  --accent-bg: rgba(0,95,163,.12);
  --focus-ring: #1c8fe5;
  --shadow: 0 2px 6px -2px rgba(0,0,0,.15);
}
* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-stack); background: var(--bg); color: var(--text); transition: background .25s, color .25s; }
header#app-header { display:flex; align-items:center; gap:1rem; padding:.55rem 1.1rem; background: var(--bg-alt); border-bottom:1px solid var(--border); box-shadow: var(--shadow); }
.branding { font-weight:600; }
.branding .tag { font-size:.7rem; background: var(--accent); color:#fff; padding:.15rem .4rem; border-radius: var(--radius); }
#search { flex:1; max-width:340px; padding:.48rem .7rem; border:1px solid var(--border); background: var(--bg); color:var(--text); border-radius: var(--radius); }
#search:focus { outline:2px solid var(--focus-ring); }

.theme-toggle-btn { all:unset; cursor:pointer; padding:.45rem .8rem; border:1px solid var(--border); border-radius: var(--radius); font-size:.72rem; letter-spacing:.5px; background: var(--accent-bg); color: var(--accent); display:flex; align-items:center; gap:.45rem; }
.theme-toggle-btn:hover { background: var(--accent); color:#fff; }
.theme-toggle-btn:focus { outline:2px solid var(--focus-ring); }
#layout { display:flex; min-height: calc(100vh - 102px); }
aside#nav { width:280px; border-right:1px solid var(--border); background: var(--bg-alt); overflow:auto; height: calc(100vh - 102px); position:sticky; top:0; }
#nav-list { list-style:none; margin:0; padding:.25rem 0; }
#nav-list li { margin:0; }
#nav-list button { all:unset; display:block; width:100%; text-align:left; padding:.4rem .7rem; cursor:pointer; color: var(--text); font-size:.8rem; border-left:4px solid transparent; }
#nav-list button:hover { background: var(--accent-bg); }
#nav-list button.active { background: var(--accent-bg); border-left-color: var(--accent); }
#nav-list li.node.dir > button.dir-btn { font-weight:600; position:relative; }
#nav-list li.node.dir > button.dir-btn::before { content:'▶'; font-size:.6rem; position:absolute; left:.25rem; top:50%; transform:translateY(-50%); opacity:.7; }
#nav-list li.node.dir.expanded > button.dir-btn::before { content:'▼'; }
#nav-list ul.dir-children { list-style:none; margin:0; padding:0 0 0 .6rem; border-left:1px solid var(--border); }
#nav-list ul.dir-children > li > button { padding-left:1.1rem; }
main#content { flex:1; padding:1rem 1.25rem; overflow:auto; }
main#content img { max-width:100%; height:auto; }
main#content img.broken-resource { outline:2px dashed var(--accent); filter:grayscale(1) brightness(.65); position:relative; }
main#content img.broken-resource::after { content:'⛔'; position:absolute; top:4px; left:4px; background: var(--accent); color:#fff; font-size:.6rem; padding:2px 4px; border-radius:3px; }
footer#app-footer { font-size:.7rem; padding:.5rem .9rem; background: var(--bg-alt); border-top:1px solid var(--border); box-shadow: var(--shadow); }
.placeholder { opacity:.6; font-style:italic; }
#breadcrumb { font-size:.72rem; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
#breadcrumb .crumb { cursor:pointer; color: var(--accent); padding:.15rem .4rem; border-radius: var(--radius); }
#breadcrumb .crumb:hover { background: var(--accent-bg); }
#breadcrumb .sep { opacity:.5; }
pre.prettyprint { background:#161a1f; padding:.65rem .85rem; border:1px solid #31373d; border-radius: var(--radius); }
body.theme-light pre.prettyprint { background:#ffffff; border-color:#d0d7de; }
code { font-family: Consolas, "Courier New", monospace; }
#status { opacity:.65; font-weight:500; }

/* Light theme component adjustments */
body.theme-light #nav-list button.active,
body.theme-light #nav-list button:hover { background: var(--accent-bg); }
body.theme-light pre.prettyprint { color:#22262b; }
/* Scrollbar styling (WebKit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#141619; }
::-webkit-scrollbar-thumb { background:#2f343a; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#3f454c; }
@media (max-width: 900px) {
  aside#nav { width:200px; }
}