/* ============================================================================
   layout.css — app shell. Reads tokens only.
   ============================================================================ */

/* ---- Grid ------------------------------------------------------------------ */
body.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.main-col { min-width: 0; }   /* allows content (tables) to shrink, not overflow */

/* ---- Sidebar ----------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  padding: var(--sp-4) var(--sp-3);
}
/* ONE wordmark, at two sizes. The login screen used to draw its own — 20px, all of it
   ink at weight 600 — so the first thing a user saw and the thing they then looked at
   all day were two different marks (QA round 4). */
.wordmark {
  display: block;
  padding: var(--sp-1) var(--sp-3) var(--sp-4);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark b    { font-weight: 700; color: var(--ink); }    /* "Picole" */
.wordmark span { font-weight: 500; color: var(--muted); }  /* " Manager" */
.wordmark:hover { text-decoration: none; }
.wordmark--lg {
  padding: 0;
  font-size: 20px;             /* wordmark size per 01 §5.4; one-off, documented */
  text-align: center;
  margin-bottom: var(--sp-5);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-ctl);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-item .ico { color: var(--muted); flex: none; }
.nav-item:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
.nav-item:hover .ico { color: var(--body); }
.nav-item.is-active { background: var(--accent-tint); color: var(--accent-strong); }
.nav-item.is-active .ico { color: var(--accent-strong); }
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent-tint-2);
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.nav-section {
  margin: var(--sp-4) var(--sp-3) var(--sp-1);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.sidebar-foot {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-3) 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.sidebar .sidebar-close { display: none; }   /* shown <900px; scoped to beat .btn */

/* ---- Topbar --------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.topbar--tall { height: auto; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.topbar-title-wrap { min-width: 0; }
.page-title {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
.topbar .topbar-menu { display: none; }   /* hamburger, shown <900px; scoped to beat .btn */

/* ---- User menu --------------------------------------------------------------------- */
.usermenu { position: relative; }
.usermenu-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--ctl-h);
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-ctl);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.usermenu-btn:hover { background: var(--sunken); }
.usermenu-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-tint-2);
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usermenu-name { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.usermenu-role { font-size: var(--text-xs); color: var(--muted); }

/* ---- Content ------------------------------------------------------------------------- */
.content {
  max-width: var(--content-max);
  padding: var(--sp-6);
  width: 100%;
}
.content:focus { outline: none; }   /* skip-link target */

/* ---- Mobile drawer (<900px) ------------------------------------------------------------ */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
body.drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 899px) {
  body.app { grid-template-columns: 1fr; }
  /* A closed drawer is translated off-screen and nothing more, so its ten nav items,
     the wordmark and the close button stayed in the tab order — twelve invisible stops
     BEFORE the hamburger that opens it — and stayed exposed to a screen reader while
     the hamburger reported aria-expanded="false" (QA round 5).
     visibility:hidden removes it from both, and the delayed transition on visibility
     lets the slide-out finish first: transform animates, then visibility flips at the
     end. On the way in, visibility becomes visible immediately (0s, no delay). */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  body.drawer-open .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-2) var(--ease), visibility 0s;
  }
  .sidebar .sidebar-close {
    display: inline-flex;
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
  }
  .topbar { height: 56px; padding: 0 var(--sp-4); gap: var(--sp-3); }
  .topbar .topbar-menu { display: inline-flex; }
  /* 390px: the name wraps and crowds the bar — avatar + chevron carry the menu,
     the full name stays in the dropdown header. */
  .topbar .usermenu-btn .usermenu-name { display: none; }
  /* Touch targets in the drawer: 44px, not the desktop 36px (DS §10.3). */
  .nav-item { height: 44px; }
  /* Same rule for the one control the topbar always shows on a phone. */
  .topbar .usermenu-btn { min-height: 44px; }
  .content { padding: var(--sp-4); }
  /* On a phone the title is the whole first line of the page and there is no room to
     the right of it: "Ljubljanske mlekarne d.o.o. — 2026-118" lost its invoice number
     to an ellipsis (QA round 6). Two lines are better than a truncated identity; the
     breadcrumb above still carries the internal number either way. */
  .page-title {
    font-size: 18px;
    white-space: normal;
    overflow: visible;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;          /* two lines, then the ellipsis — never a wall of text */
    overflow: hidden;
  }
}

/* ---- Auth layout (login, installer, logged-out error pages) — 04 §1.6 --------------- */
body.auth {
  display: block;
  min-height: 100vh;
  padding: var(--sp-5) var(--sp-4);
}
.auth-main { width: 100%; max-width: 400px; margin: 22vh auto 0; }
@media (max-width: 599px) { .auth-main { margin-top: 10vh; } }
/* .auth-wordmark folded into .wordmark--lg — see the wordmark block above. */