/* Opt-in navigation layout. All existing content and other themes stay intact. */
.vertical-navigation[hidden] { display:none!important; }
html[data-theme="vertical"] { --vertical-width:232px; }
html[data-theme="vertical"] #tabs .tab-main,
html[data-theme="vertical"] #tabs .tab-admin { display:none!important; }
html[data-theme="vertical"] #tabs .vertical-navigation { display:flex; flex-direction:column; gap:8px; }
html[data-theme="vertical"] #tabs .vertical-brand { display:flex; align-items:center; gap:12px; padding:16px 8px 24px; }
html[data-theme="vertical"] #tabs .vertical-brand img { width:56px; height:40px; object-fit:contain; background:white; border-radius:6px; }
html[data-theme="vertical"] #tabs details { border:0; border-radius:8px; padding:0; margin:0; }
html[data-theme="vertical"] #tabs details[hidden] { display:none!important; }
html[data-theme="vertical"] #tabs summary { padding:14px 12px; cursor:pointer; font-size:15px; font-weight:700; list-style-position:inside; }
html[data-theme="vertical"] #tabs summary:focus-visible,
html[data-theme="vertical"] #tabs button:focus-visible { outline:3px solid #68baff; outline-offset:-3px; }
html[data-theme="vertical"] #tabs button[data-tab] { width:100%!important; min-height:46px; padding:12px 16px!important; margin:0; text-align:left; white-space:normal; line-height:1.5; font-size:14px!important; border:0!important; border-radius:6px!important; }
html[data-theme="vertical"] #tabs button[hidden] { display:none!important; }
html[data-theme="vertical"] #tabs .vertical-collapse { margin-top:20px; min-height:44px; }
@media(min-width:901px) {
  html[data-theme="vertical"] #app { padding-left:var(--vertical-width); }
  html[data-theme="vertical"] #app>header { background:#fff; color:#17344e; border-bottom:1px solid #d9e3eb; box-shadow:none; }
  html[data-theme="vertical"] #app>header h1 { color:#17344e; font-size:18px; }
  html[data-theme="vertical"] #app>header #who { color:#526a80; }
  html[data-theme="vertical"] #tabs { position:fixed!important; inset:0 auto 0 0!important; width:var(--vertical-width)!important; box-sizing:border-box; height:100dvh; overflow-y:auto; display:block!important; padding:16px 12px!important; background:#15324b!important; color:#f4f8fc; border:0; z-index:65; }
  html[data-theme="vertical"] #tabs button[data-tab] { background:transparent!important; color:#e5edf5!important; box-shadow:none!important; }
  html[data-theme="vertical"] #tabs details.is-current>summary { background:#2466a3; color:white; border-radius:8px; }
  html[data-theme="vertical"] #tabs details[open] { background:#1c3e59; }
  html[data-theme="vertical"] #tabs button[data-tab]:hover { background:#294e6b!important; }
  html[data-theme="vertical"] #tabs button[data-tab].active { background:#d9ebff!important; color:#075bb7!important; }
  html[data-theme="vertical"] #tabs .vertical-collapse { background:#23465f; color:white; border:1px solid #456078; }
  html[data-theme="vertical"] #panel { min-width:0; }
  html[data-theme="vertical"].vertical-collapsed { --vertical-width:100px; }
  html[data-theme="vertical"].vertical-collapsed #tabs .vertical-brand,
  html[data-theme="vertical"].vertical-collapsed #tabs details,
  html[data-theme="vertical"].vertical-collapsed #tabs button[data-tab] { display:none!important; }
}
@media(max-width:900px) {
  html[data-theme="vertical"] #tabs .vertical-brand,
  html[data-theme="vertical"] #tabs .vertical-collapse { display:none; }
  html[data-theme="vertical"] #tabs details { background:white; border:1px solid #dae3eb; }
  html[data-theme="vertical"] #tabs summary { color:#19354f; min-height:48px; box-sizing:border-box; }
  html[data-theme="vertical"] #tabs details.is-current>summary { background:#e7f1fc; color:#075bb7; }
  html[data-theme="vertical"] #tabs button[data-tab] { padding-left:28px!important; background:#fff!important; }
  html[data-theme="vertical"] #tabs button[data-tab].active { background:#dcecff!important; color:#075bb7!important; }
}