/* The signed-in shell: sidebar at >= 1200 px, top bar with a <details> menu
   below; the public and internal layouts; page header pattern.

   The sidebar costs the content column 240 px of sidebar plus 80 px of page
   gutter. Below 1200 px that is more than the column can spare: at 1024 px
   the sidebar layout left .main 784 px where the top bar layout leaves it
   976 px, so the app was narrower at 1024 px than at 1023 px and stayed
   narrower all the way to 1440 px. 1199 is the threshold screen_settings.css
   already uses for .team-grid. */

/* ---- app grid ---- */
.page-app .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app-body { min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1 1 auto; padding: var(--space-5) 40px; max-width: 1400px; width: 100%; min-width: 0; }
/* The skip link sends focus here. A mouse click inside the column must not
   draw a ring around the whole page, but a keyboard reader who just used the
   skip link gets nothing at all from `outline: none` - no ring, no caret,
   nothing that says the jump worked. The ring is drawn inside the box, so it
   sits on the content edge rather than off the viewport. */
.main:focus { outline: none; }
.main:focus-visible, .int-main:focus-visible { outline: var(--focus); outline-offset: -2px; }

.brand { font: 700 18px/24px var(--font-sans); color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-inverse { color: var(--on-brand); font-size: 15px; }

/* ---- sidebar ---- */
/* min/max instead of height: the column fills the window and never grows
   past it, so on a short window (1280x480, a laptop with the browser
   half-height) the user block with Odjava stays pinned to the bottom edge
   instead of falling out of view below a scrollbar macOS does not draw.
   Only the navigation list scrolls. */
.sidebar { position: sticky; top: 0; min-height: 100vh; max-height: 100vh; background: var(--surface-200); border-right: 1px solid var(--border); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; }
/* The rail stacks the mark over the name, which is the lockup the logo
   itself draws - but drawn, the mark is CENTRED over the name, and block
   layout left-aligned it. An inline-flex column centres it and still hugs
   the name's width, so the pair sits where the logo puts it. */
.sidebar .brand { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 8px var(--space-4); }
.sidebar nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-bottom { margin-top: auto; padding-top: var(--space-3); }
/* The items under the Analitika group need to read as their own list, or
   Rang liste looks like a tenth vertical. */
.nav-more { margin-top: var(--space-3); }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-md); font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.nav-item:hover { text-decoration: none; background: var(--surface-100); color: var(--ink); }
.nav-item[aria-current] { background: var(--surface-100); color: var(--brand); font-weight: 600; }
.nav-badge { font: 600 10px/14px var(--font-sans); background: var(--surface-100); color: var(--ink-muted); padding: 2px 6px; border-radius: var(--radius-sm); margin-left: 2px; }
.nav-item[aria-current] .nav-badge { background: var(--surface-200); }
.nav-locked .nav-badge { background: var(--brand-soft); color: var(--brand); }
/* A locked item looked exactly like an open one when it carries no badge
   (Rang liste): the padlock is the signal, the title only a tooltip. */
.nav-locked::after { content: "\1F512"; font-size: 10px; line-height: 1; margin-left: auto; opacity: 0.7; }
.nav-group { font: var(--text-label); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-3) 16px 6px; }

/* ---- user block ---- */
.userblock { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--border); margin-top: var(--space-2); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: 700 12px/1 var(--font-sans); flex: 0 0 auto; }
.userblock-text { min-width: 0; display: flex; flex-direction: column; }
.userblock-name { font: 600 13px/18px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 11px/14px made Odjava a 36x13 target on every screen the shell renders.
   The links get their own line box and 6 px above and below, which is 25 px
   without moving anything around them. */
.userblock-links { font: var(--text-caption); color: var(--ink-muted); }
.userblock-links a { display: inline-block; padding: 6px 0; }

/* ---- top bar (hidden on wide screens) ---- */
.topbar { display: none; }
@media (max-width: 1199px) {
  /* A jump to #main or to #pracenje would otherwise land under the sticky
     top bar: the first 56 px of the target sat behind it. */
  html { scroll-padding-top: calc(var(--topbar-h) + var(--space-2)); }
  .page-app .app { display: block; }
  .sidebar { display: none; }
  .topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--topbar-h); padding: 0 var(--space-3); background: var(--surface-200); border-bottom: 1px solid var(--border); }
  .topbar .brand { font-size: 16px; }
  .menu { position: static; }
  .menu > summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--surface-100); }
  .menu-panel { position: absolute; left: 0; right: 0; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow: auto; background: var(--surface-200); border-bottom: 1px solid var(--border); box-shadow: 0 12px 30px var(--shadow); padding: var(--space-3); }
  .menu-panel nav { display: flex; flex-direction: column; }
  .menu-panel .nav-bottom { margin-top: var(--space-2); }
  .main { padding: var(--space-4); }
}
@media (max-width: 719px) {
  .main { padding: var(--space-3); }
}

/* ---- page header pattern ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.page-head h1 { min-width: 0; }
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.page-sub { color: var(--ink-muted); margin-bottom: var(--space-4); }
.page-meta { font: var(--text-body-small); color: var(--ink-muted); }
/* 13px/18px made this a 105x18 target: under the 24 px WCAG 2.2 SC 2.5.8
   asks, and it is a standalone control, not a link inside a sentence.
   inline-flex with a 24 px floor grows the hit area only - the 3 px
   taken off each margin keeps the words on the exact pixel they were. */
.back-link { display: inline-flex; align-items: center; min-height: 24px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); margin: -3px 0 calc(var(--space-3) - 3px); }
@media (max-width: 719px) {
  .page-actions { width: 100%; }
  .page-actions .btn-primary { flex: 1 1 100%; }
}

/* ---- public layout ---- */
.page-public { display: flex; flex-direction: column; min-height: 100vh; }
.pub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 72px; padding: 0 48px; background: var(--surface-200); border-bottom: 1px solid var(--border); }
.pub-head .brand { font-size: 20px; }
.pub-nav { display: flex; align-items: center; gap: var(--space-5); }
.pub-nav a { display: inline-flex; align-items: center; min-height: 24px; font: 500 15px/22px var(--font-sans); color: var(--ink); }
.pub-nav a.btn { color: var(--on-brand); }
.pub-main { flex: 1 1 auto; width: 100%; }
.pub-foot { padding: var(--space-4) 48px; font: var(--text-caption); color: var(--ink-muted); border-top: 1px solid var(--border); }
.page-login .pub-main, .page-public:not(.page-landing) .pub-main { max-width: 1000px; margin: 0 auto; padding: var(--space-5) var(--space-4); }
.auth-card { max-width: 420px; margin: 6vh auto 0; }
.auth-card h1 { margin-bottom: 6px; }
.auth-help { margin-top: var(--space-3); }
.addon { max-width: 720px; margin: 0 auto; }
.addon h2 { margin: var(--space-4) 0 var(--space-2); }
/* "ejn.gov.ba/ReportAnnouncement/Search" is one 36-character token and pushed
   the page 7 px sideways at 320 px. */
.addon p, .addon li { margin-bottom: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.addon .btn { margin: 10px 0 4px; }
.error-page { max-width: 640px; }
.error-page h1 { margin-bottom: var(--space-2); }
.error-links { margin-top: var(--space-3); }
@media (max-width: 719px) {
  .pub-head { padding: 0 var(--space-3); height: 60px; }
  .pub-nav { gap: var(--space-3); }
  .pub-foot { padding: var(--space-3); }
  .page-public:not(.page-landing) .pub-main { padding: var(--space-3); }
}

/* ---- internal layout ---- */
.int-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--topbar-h); padding: 0 var(--space-5); background: var(--ink); color: var(--on-brand); }
.int-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.int-nav { display: flex; gap: var(--space-3); }
/* 13px/18px made every link on this bar an 18 px target. The bar is 56 px
   tall and centres its items, so a 24 px floor moves nothing. */
.int-nav a { display: inline-flex; align-items: center; min-height: 24px; font: var(--text-body-small); color: var(--disabled-ink); white-space: nowrap; }
.int-nav a:hover { color: var(--on-brand); }
/* The one surface where the product's ring does not work. --focus is
   2px solid --brand and outline-offset: 2px paints it on the bar's own
   --ink: the two measured 1,36:1 apart, against the 3:1 WCAG 1.4.11 asks, so
   the first four to five tab stops of every staff screen had no visible
   focus at all. --on-brand on --ink is 14,9:1. The skip link overlays this
   bar too and its --brand pill is just as lost on it, so it takes the same
   ring - on every other page it keeps the product's. */
.int-bar :focus-visible,
.page-internal .skip-link:focus-visible { outline-color: var(--on-brand); }
.int-main { padding: 28px 40px; }
@media (max-width: 719px) {
  /* Three links and the brand do not fit one phone row once "Zahtjevi" carries
     its counter, and they may not push the page sideways: the bar wraps into
     two rows and grows instead. */
  .int-bar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
  .int-nav { flex-wrap: wrap; row-gap: var(--space-1); }
  .int-brand .badge { display: none; }
  .int-main { padding: var(--space-3); }
}