/* docs.smooker.org — mon.smooker.org design language:
   dark left sidebar (#1e2228, 220px, Terminus-ish mono), green accent #3dba6e,
   content pane right. clock-bar.js reserves top/bottom space via html padding. */
@font-face {
    font-family: 'Terminus';
    src: url('/fonts/terminus-14n.woff') format('woff');
    font-weight: 400;
    unicode-range: U+0000-00FF, U+0400-04FF;
}
@font-face {
    font-family: 'Terminus';
    src: url('/fonts/terminus-14b.woff') format('woff');
    font-weight: 700;
    unicode-range: U+0000-00FF, U+0400-04FF;
}
@font-face {
    font-family: 'Terminus16';
    src: url('/fonts/terminus-16n.woff') format('woff');
    font-weight: 400;
    unicode-range: U+0000-00FF, U+0400-04FF;
}
@font-face {
    font-family: 'Terminus16';
    src: url('/fonts/terminus-16b.woff') format('woff');
    font-weight: 700;
    unicode-range: U+0000-00FF, U+0400-04FF;
}

/* clock-bar space, reserved STATICALLY — no JS race, no FOUC:
   the bars are ~28px each (4+4 padding + ~14px line + 1px border).
   clock-bar.js will overwrite the vars after measuring; since we
   self-host the script, the estimate matches its own constants. */
:root {
    --cb-top-h: 28px;
    --cb-foot-h: 28px;
    /* ВЪЗДУХ на съдържанието (дясното pane) — ЕДНАКЪВ горе и долу. Sidebar-ът е
       долепен до bar-овете като в mon. Пипай само това число. */
    --air: 26px;
}
/* NB: clock-bar.js слага html padding = var(--cb-*) с !important, затова
   въздухът е върху #layout (margin), не върху html. */
html { padding-top: var(--cb-top-h); padding-bottom: var(--cb-foot-h); }

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Terminus', 'Courier New', monospace;
    background: #12151a;
    color: #cdd6e0;
}
#layout {
    display: flex;
    min-height: calc(100vh - var(--cb-top-h, 0px) - var(--cb-foot-h, 0px));
}

/* ── Sidebar ── */
#sidebar {
    width: 220px;
    min-width: 220px;
    background: #1e2228;
    color: #cdd6e0;
    display: flex;
    flex-direction: column;
}
/* ── Sidebar header + auth — VERBATIM ot mon.smooker.org ── */
#sidebar-header {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Terminus16', monospace;
    color: #fff;
    border-bottom: 1px solid #2e3440;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#sidebar-header .sh-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
#sidebar-header .user-info {
    font-size: 11px;
    color: #6b7585;
    font-weight: 400;
}
#sidebar-header .current-user {
    color: #6b7585;
    cursor: pointer;
    border-bottom: 1px dotted #4e5a6a;
}
#sidebar-header .current-user:hover { color: #cdd6e0; }

#auth-dropdown {
    display: none;
    padding: 8px 14px;
    border-bottom: 1px solid #2e3440;
    flex-shrink: 0;
}
#auth-dropdown.open { display: block; }
.auth-main-btn {
    width: 100%;
    background: #3dba6e;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px;
    font-size: 12px;
    font-family: 'Terminus', monospace;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
}
.auth-main-btn:hover { background: #34a660; }
#inline-login input[type="text"],
#inline-login input[type="password"] {
    width: 100%;
    background: #2a3040;
    border: 1px solid #3a4258;
    color: #cdd6e0;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: 'Terminus', monospace;
    outline: none;
    margin-bottom: 4px;
}
#inline-login input:focus { border-color: #3dba6e; }
#inline-login .login-error {
    color: #e07070;
    font-size: 11px;
    margin-top: 4px;
}

#lang-toggle {
    background: #2a3040;
    border: 1px solid #3a4258;
    color: #6b7585;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: 'Terminus', monospace;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    margin-left: 6px;
}
#lang-toggle:hover { color: #cdd6e0; border-color: #3dba6e; }

#sidenav { display: flex; flex-direction: column; padding: 12px 0; }
#sidenav a {
    color: #cdd6e0;
    text-decoration: none;
    padding: 10px 14px;
    font-size: 13px;
    border-left: 3px solid transparent;
}
#sidenav a:hover { background: #262b33; }
#sidenav a.active { border-left-color: #3dba6e; background: #262b33; color: #fff; }

/* ── Content pane ── */
main { flex: 1; padding: var(--air) 28px; overflow-x: auto; }
h1, h2 { color: #fff; font-size: 16px; margin: 0.8em 0 0.6em; }
h2 { font-size: 14px; color: #9fb0c0; }
a { color: #569CD6; }
a:hover { color: #6A9955; }
small { color: #6b7585; }
.hint { color: #6b7585; margin-top: 3em; }
.err { color: #e05555; font-size: 12px; }

table { border-collapse: collapse; width: 100%; background: #1a1e24; font-size: 12px; }
th, td { border: 1px solid #2e3440; padding: 8px 10px; text-align: left; }
th { background: #22262e; color: #9fb0c0; }
tr:hover td { background: #20252c; }

form.filters { display: flex; gap: 8px; margin-bottom: 20px; }
form.meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    background: #1a1e24;
    border: 1px solid #2e3440;
    padding: 12px;
    max-width: 60em;
}
form.meta label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; align-items: center; }
input, select, button {
    background: #2a3040;
    border: 1px solid #3a4258;
    color: #cdd6e0;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
}
input:focus, select:focus { border-color: #3dba6e; outline: none; }
button { background: #3dba6e; color: #fff; border: none; font-weight: 700; cursor: pointer; }
button:hover { background: #34a660; }

pre.ocr {
    background: #1a1e24;
    border: 1px solid #2e3440;
    padding: 12px;
    white-space: pre-wrap;
    max-height: 30em;
    overflow: auto;
    font-size: 12px;
}
.stage-archived { color: #6b7585; }
.stage-categorized, .stage-registered { color: #3dba6e; }
ul { padding-left: 1.4em; }

@media (max-width: 700px) {
    #layout { flex-direction: column; }
    #sidebar { width: 100%; min-width: unset; }
    form.meta { grid-template-columns: 1fr; }
}

/* PDF viewer tab switcher */
.pdf-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.pdftab {
    padding: 4px 14px; border: 1px solid #4b5320; border-bottom: none;
    background: #2e3440; color: #d8dee9; cursor: pointer; border-radius: 4px 4px 0 0;
    font-size: 0.9em;
}
.pdftab.active { background: #4b5320; color: #fff; }
.pdftab:hover:not(.active) { background: #3b4252; }

/* inline PDF viewer (Firefox pdf.js in iframe) */
.pdfview {
    width: 100%;
    height: calc(100vh - var(--cb-top-h, 28px) - var(--cb-foot-h, 28px) - 2*var(--air, 26px));
    min-height: 500px;
    border: 1px solid #2e3440;
    background: #1a1e24;
    margin-bottom: 16px;
}
.ok { color: #3dba6e; }

/* OCR selection echo — FLOATING over the viewer, always visible */
#pdfwrap { position: relative; margin-bottom: 16px; }
#selecho-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: 55%;
    background: rgba(26,30,36,0.95);
    border: 1px solid #3dba6e;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    z-index: 10;
    pointer-events: none;
}
#selecho-wrap .se-label { color: #6b7585; margin-right: 8px; }
#selecho { color: #ffd75f; white-space: pre-wrap; }

/* share creation result (shown once) */
.share-new { background: #1a2420; border: 1px solid #3dba6e; padding: 12px; margin-bottom: 12px; }
.share-qrs { display: flex; gap: 24px; }
.share-qrs figure { margin: 0; text-align: center; }
.share-qrs img { background: #fff; padding: 6px; }
.share-qrs figcaption { font-size: 11px; color: #9fb0c0; margin-top: 4px; }

/* document list: whole row clickable — the link fills the cell, inherits color */
td a.rowlink { display: block; color: inherit; text-decoration: none; min-height: 1em; }
td a.rowlink:hover { text-decoration: none; }
tr:hover td a.rowlink { color: #7fd1a0; }
td.docname { max-width: 32em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* address book: tree + detail */
.ct-wrap { display: flex; gap: 2em; align-items: flex-start; flex-wrap: wrap; }
.ct-tree { flex: 1 1 20em; min-width: 18em; }
.ct-detail { flex: 2 1 26em; min-width: 20em; }
ul.tree, ul.tree ul { list-style: none; padding-left: 1.1em; margin: .2em 0; }
ul.tree { padding-left: 0; }
ul.tree li { margin: .15em 0; border-left: 1px dotted #3a4553; padding-left: .6em; }
ul.tree > li { border-left: 0; padding-left: 0; }
ul.tree a { text-decoration: none; }
ul.tree li.sel > a { color: #7fd1a0; font-weight: bold; }
.ct-title { font-size: 11px; color: #9fb0c0; }
.ct-path { font-size: 12px; color: #9fb0c0; margin: -.4em 0 1em; }
.ct-fields th { text-align: left; padding-right: 1em; font-weight: normal; color: #9fb0c0; }
.ct-qr { margin: 1em 0; }
.ct-qr img { background: #fff; padding: 6px; }
.ct-form label { display: block; margin: .3em 0; }
ul.ct-hits { list-style: none; padding: 0; }
ul.ct-hits li { padding: .4em 0; border-bottom: 1px solid #2a3340; }
ul.ct-hits .ct-path { margin: .1em 0 .1em 1.4em; }
ul.ct-hits .ct-title { margin-left: .8em; }