/* chrome.css - the ONE top bar, on every surface: the public pages, Simple mode, Pro mode.
   Rendered by js/landing-nav.js; Bootstrap's .navbar underneath. This file is loaded after
   bootstrap.min.css by every page, and next to whichever page stylesheet the surface has
   (landing.css or style.css), so it relies only on tokens both define (--border, --text, --text2,
   --bg2) and declares its own for the rest. */
:root { --nav-bg: rgba(249,249,249,.94); --si-accent: #e07b00; --si-accent-hover: #c46b00; }
/* Nearly opaque on purpose. The bar sits over the 3D scene, which is dark even in light theme,
   and a 72%-white bar let that dark come through the blur - so "light mode" produced a grey nav
   rather than a white one. Translucency only reads as translucency over content of similar
   lightness; over a dark scene it just reads as dirty. */
[data-bs-theme="dark"] { --nav-bg: rgba(28,28,30,.82); }

/* the bar's little confirmation (a save to the account): bottom centre, gone by itself */
.site-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: .55rem 1rem; border-radius: 999px; font-size: 14px; z-index: 1090; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.site-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.site-nav { background: var(--nav-bg); backdrop-filter: blur(12px);
            border-bottom: 0.5px solid var(--border);
            --bs-navbar-brand-font-size: 15px; --bs-nav-link-font-size: 13px;
            --bs-navbar-color: var(--text2); --bs-navbar-hover-color: var(--text);
            --bs-navbar-active-color: var(--text); --bs-navbar-brand-color: var(--text);
            --bs-navbar-brand-hover-color: var(--text); }
.site-nav .navbar-brand { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.site-nav .theme-btn { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
/* the bar's own buttons follow the brand accent whatever the page's Bootstrap primary is (the Pro
   app flips its primary to blue in dark mode; the bar does not) */
.site-nav .btn { --bs-btn-border-radius: 9px; --bs-btn-font-weight: 600; }
.site-nav .btn-primary { --bs-btn-bg: var(--si-accent); --bs-btn-border-color: var(--si-accent);
                         --bs-btn-hover-bg: var(--si-accent-hover); --bs-btn-hover-border-color: var(--si-accent-hover);
                         --bs-btn-active-bg: var(--si-accent-hover); --bs-btn-active-border-color: var(--si-accent-hover);
                         --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.site-nav .btn-outline-secondary { --bs-btn-color: var(--text2); --bs-btn-border-color: var(--border);
                                   --bs-btn-hover-bg: var(--bg2); --bs-btn-hover-color: var(--text);
                                   --bs-btn-hover-border-color: var(--border); --bs-btn-active-bg: var(--bg2);
                                   --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--border); }
.site-nav .dropdown-menu { --bs-dropdown-bg: var(--surface, var(--bg2)); --bs-dropdown-border-color: var(--border);
                           --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--bg2);
                           --bs-dropdown-link-hover-color: var(--text); font-size: 13px; }

/* Maps in the dark theme: the tiles are OSM's light raster (there is no dark set on our origin), so
   invert them - the standard trick, with the hue rotated back so water stays blue and greens green. */
[data-bs-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.65); }

/* the account button: avatar, the name, a caret - the name hides on the narrowest phones */
.account-btn { display: inline-flex; align-items: center; gap: 6px; --bs-btn-border-radius: 9px; --bs-btn-font-weight: 600; --bs-btn-font-size: 12px; max-width: 200px; }
.account-btn .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn .caret { font-size: 10px; opacity: .7; }
@media (max-width: 575.98px) { .account-btn .account-name, .account-btn .caret { display: none; } }

/* the mode switch (Simplu | Pro) in the bar, app pages only */
.mode-switch .btn { --bs-btn-color: var(--text2); --bs-btn-border-color: var(--border); --bs-btn-font-weight: 600; --bs-btn-font-size: 12px; }
.mode-switch .btn.active { --bs-btn-active-bg: var(--si-accent); --bs-btn-active-border-color: var(--si-accent); --bs-btn-active-color: #fff; }

/* in-page anchors (#roadmap on Noutăți, #nl on the landing) land BELOW the fixed bar, not under it */
[id] { scroll-margin-top: 5rem; }

/* the cookie-consent bar (js/landing-nav.js): bottom of the viewport, over everything, one line */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; padding: .75rem 0;
           background: var(--nav-bg); backdrop-filter: blur(12px); border-top: 0.5px solid var(--border); }
.consent a { color: inherit; }

/* Pro mode under the fixed bar: the shell used to start at the top with its own topbar. */
.site-shell.with-site-nav { padding-top: 66px; }
/* The stepper's collapse handle sits at the stepper's top-right, over it, rendered by the shell
   (outside the drawer, so on a phone it stays reachable while the drawer is off-screen). */
.site-body { position: relative; }
.site-body > .sn-collapse { position: absolute; top: 8px; left: 216px; z-index: 910; }
.site-shell.sn-collapsed .site-body > .sn-collapse { left: 16px; }
@media (max-width: 900px) { .site-body > .sn-collapse { left: 12px; } }

/* PRINT (owner, 2026-09-21: "pdf, the button next to Înainte, is shit now"): the v2 bar is
   position: fixed, and a fixed element prints on EVERY page - plus its 66 px offset pushed the
   first sheet. css/style.css hides the old app's own chrome; this hides the shared one. */
@media print {
  .site-nav, .consent, .site-toast, footer[data-footer], .site-footer { display: none !important; }
  .site-shell.with-site-nav { padding-top: 0 !important; }
  body { padding-top: 0 !important; }
}