/* The pages that are not the map - the start page, project settings, new project, admin (Luka, 2026-10-20).
   Loaded AFTER style.css, which is the map page's sheet: it pins html and body to the window with
   overflow hidden, and on these pages that left a long page with no scrollbar. Here the window scrolls
   like any ordinary page. The header is shared too, so the four pages cannot drift apart again. */
html, body { height: auto; overflow: visible; }
html { overflow-y: auto; }
body { background: var(--bg); color: var(--text); font-family: var(--font-ui);
       min-height: 100vh; display: flex; flex-direction: column; }

/* ONE line: SUBTERRA, the page's own link(s) right after it, the user's items on the right. */
header { background: var(--surface); border-bottom: 2px solid var(--accent); padding: 16px 32px;
         display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
header h1 { font-size: 18px; letter-spacing: 2px; border-left: 4px solid var(--accent);
            padding-left: 12px; font-weight: 600; margin: 0; }
header .app-subtitle { color: var(--text-muted); font-size: 13px; display: flex; gap: 14px; margin: 0; }
header .spacer { flex: 1; }
header .who, header a { color: var(--text-muted); font-size: 13px; text-decoration: none; }
header a:hover { color: var(--accent); }

/* The content uses the window's whole width (Luka, 2026-10-20) - never a column squeezed to the left. */
main { padding: 24px 32px 48px; width: 100%; box-sizing: border-box; }
a.btn { text-decoration: none; display: inline-block; }   /* a link that looks like a button */
a.btn[hidden] { display: none; }

/* ── A card's "Shrani" in its title row (Luka, 2026-10-23; settings.js) ──
   Greyed until something in the card changes; after a save "Shranjeno ✓" until the next change. The label box
   holds both words in both languages in one grid cell, so neither a save nor a language switch resizes it. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.card-head h2 { margin: 0; }
.card-save { flex: 0 0 auto; }
.card-save:disabled { background: transparent !important; border-color: var(--border) !important;
                      color: var(--text-muted) !important; opacity: .7; cursor: default; }
.card-save.saved:disabled { opacity: 1; background: transparent !important; border-color: var(--state-on, #3fb950) !important;
                            color: var(--state-on, #3fb950) !important; }
/* A disabled Shrani does nothing on hover (fix 4, Luka 2026-10-23): style.css's `.btn.primary:hover` turned it red. */
.btn.card-save:disabled:hover { background: transparent !important; border-color: var(--border) !important;
                                color: var(--text-muted) !important; opacity: .7; }
.btn.card-save.saved:disabled:hover { border-color: var(--state-on, #3fb950) !important;
                                      color: var(--state-on, #3fb950) !important; opacity: 1; }
.btn.card-save:disabled:not(.saved) { cursor: not-allowed; }
.save-label { display: inline-grid; }
.save-label > span { grid-area: 1 / 1; text-align: center; }
.save-label > .save-off { visibility: hidden; }

/* ── The area map (area-picker.js) on the new-project and settings pages (Luka, 2026-10-23; fork A's block) ──
   "Nariši območje" while on: an OPAQUE green button with white text (style.css's active-mode background is
   see-through, and over the map tiles the button vanished). The map's buttons are opaque at rest too. */
.ap-map .btn { background: var(--btn-bg) !important; }
.ap-map .btn.ap-draw.active-mode { background: var(--state-on) !important; border-color: var(--state-on) !important;
                                   color: #ffffff !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.ap-map .btn.ap-draw.active-mode:hover { background: var(--state-on) !important; color: #ffffff !important;
                                         border-color: var(--heading) !important; }

/* ── The error page (static/error.html, views/frontend.error_page; 2026-10-23) ──
   The login card's look; the reference of a server error and the status code in small muted type. */
.error-card .login-title { margin-bottom: 8px; }
.error-card .login-sub { margin-bottom: 4px; }
.error-ref { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }
.error-ref code { user-select: all; }
.error-ref[hidden] { display: none; }
.error-code { font-size: 11px; color: var(--text-muted); margin: 14px 0 0; text-align: right; letter-spacing: 1px; }

/* The help page (2026-11-02). */
.help { max-width: 760px; font-size: 14px; line-height: 1.6; }
.help h2.help-title { font-size: 22px; font-weight: 600; margin: 0 0 12px; color: var(--text); }
.help h3 { font-size: 16px; font-weight: 600; margin: 28px 0 8px; color: var(--text); scroll-margin-top: 12px; }
.help p { margin: 0 0 10px; }
.help ol, .help ul { margin: 0 0 10px; padding-left: 22px; }
.help li { margin-bottom: 6px; }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13px; }
.help-toc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
.help-toc a:hover { color: var(--accent); }

/* Getting started (2026-11-03): the help page's look, and on paper one or two A4 pages. */
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide h3 { margin-top: 18px; }
.help-guide { margin-top: 4px; font-weight: 600; }
@media print {
  @page { size: A4; margin: 14mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; }
  body > header, .guide-print { display: none !important; }
  /* style.css's map print hides every body child but #print-area, with an id in its selector: this one outranks it. */
  body > main#guide-body, body > main#help-body { display: block !important; }
  .help { max-width: none; color: #000; }
  .guide { max-width: none; font-size: 10pt; line-height: 1.38; color: #000; padding: 0; margin: 0; }
  .guide h2.help-title { font-size: 15pt; color: #000; margin: 0 0 4px; }
  .guide h3 { font-size: 11pt; color: #000; margin: 9px 0 2px; break-after: avoid; }
  .guide p { margin: 0 0 4px; }
  .guide section { break-inside: avoid; }
}