/* NKL Admin Portal — layout */
*{box-sizing:border-box}
body{font-family:var(--nkl-font); background:var(--nkl-bg); color:var(--nkl-text); font-size:var(--nkl-fs-body)}
a{color:var(--nkl-brand-secondary); text-decoration:none}
a:hover{color:var(--nkl-navy); text-decoration:underline}
[data-bs-theme="dark"] a:hover{color:var(--nkl-brand-accent)}
:focus-visible{outline:none; box-shadow:var(--nkl-focus-ring); border-radius:4px}

.nkl-h1{font-size:var(--nkl-fs-h1); font-weight:700; margin:0}
.nkl-error-code{font-size:44px}
.nkl-h2{font-size:var(--nkl-fs-h2); font-weight:600; margin:0}
.nkl-h3{font-size:var(--nkl-fs-h3); font-weight:600; margin:0}
.nkl-small{font-size:var(--nkl-fs-small)}
.nkl-caption{font-size:var(--nkl-fs-caption); color:var(--nkl-text-muted)}
.nkl-icon{flex-shrink:0}

.nkl-shell{min-height:100vh}

/* sidebar */
.nkl-sidebar{
  width:var(--nkl-sidebar-w); background:var(--nkl-sidebar-bg); color:var(--nkl-text-secondary); flex-shrink:0;
  display:flex; flex-direction:column; padding:14px 10px; border-right:1px solid var(--nkl-border);
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:var(--nkl-z-sidebar);
  transition:width .18s ease;
}
.nkl-shell.nkl-sidebar-collapsed .nkl-sidebar{width:var(--nkl-sidebar-w-collapsed)}
.nkl-shell.nkl-sidebar-collapsed .nkl-brand-text,
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-label,
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-chevron,
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-group-title,
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-sublist{display:none !important}
.nkl-shell.nkl-sidebar-collapsed .nkl-sidebar-head{flex-direction:column; gap:8px; align-items:center}
.nkl-shell.nkl-sidebar-collapsed .nkl-brand{justify-content:center}
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-link,
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-section-btn{justify-content:center; position:relative}

.nkl-sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:4px 4px 16px}
.nkl-brand{display:flex; align-items:center; gap:8px; text-decoration:none}
.nkl-brand-mark{width:34px; height:34px; border-radius:7px; background:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; padding:0}
.nkl-brand-mark img{width:100%; height:100%; object-fit:contain}
.nkl-brand-logo{height:32px; width:170px; overflow:hidden; display:block; flex-shrink:0; transition:width .18s ease}
.nkl-brand-logo img{height:100%; width:auto; max-width:none; display:block}
.nkl-shell.nkl-sidebar-collapsed .nkl-brand-logo{width:32px}
.nkl-brand-text{display:flex; flex-direction:column; line-height:1.15}
.nkl-brand-text strong{color:var(--nkl-text); font-size:13px}
.nkl-brand-text small{font-size:9px; letter-spacing:.06em; color:var(--nkl-text-muted)}

.nkl-nav{display:flex; flex-direction:column; gap:2px; flex-grow:1}
.nkl-nav-group{margin-top:12px}
/* Collapsible group heading — button, but keeps the old label look.
   Only meaningful in the full menu (icon-only sidebar hides it, line ~30). */
.nkl-nav-group-title{
  display:flex; align-items:center; gap:6px; width:100%;
  background:transparent; border:none; cursor:pointer; font:inherit;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--nkl-text-muted); padding:4px 10px; margin:0; border-radius:6px;
}
.nkl-nav-group-title:hover{background:var(--nkl-surface-hover); color:var(--nkl-text-secondary)}
.nkl-nav-group-title-text{flex:1 1 auto; text-align:left}
.nkl-nav-group-title svg{flex-shrink:0; transition:transform .15s ease}
.nkl-nav-group-title[aria-expanded="false"] svg{transform:rotate(-90deg)}
.nkl-nav-group-links{display:flex; flex-direction:column; gap:2px}
.nkl-nav-group.is-collapsed .nkl-nav-group-links{display:none}
.nkl-nav-group-attention{display:none}
.nkl-nav-group.is-collapsed .nkl-nav-group-attention{display:inline-block}
/* icon-only sidebar: per-group collapse is disabled, links stay as icons */
.nkl-shell.nkl-sidebar-collapsed .nkl-nav-group-links{display:flex !important}
.nkl-nav-link, .nkl-nav-section-btn, .nkl-nav-sublink{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px;
  color:var(--nkl-text-secondary); font-size:13px; width:100%; background:transparent; border:none; text-align:left;
}
.nkl-nav-chevron{margin-left:auto; transition:transform .15s}
.nkl-nav-section-btn[aria-expanded="true"] .nkl-nav-chevron{transform:rotate(180deg)}
.nkl-nav-link:hover, .nkl-nav-section-btn:hover, .nkl-nav-sublink:hover{background:var(--nkl-surface-hover); color:var(--nkl-text)}
.nkl-nav-link.active, .nkl-nav-sublink.active{background:var(--nkl-success-bg); color:var(--nkl-brand-success); font-weight:600; border-left:3px solid var(--nkl-brand-success); padding-left:7px}
.nkl-nav-sublist{padding-left:26px; display:flex; flex-direction:column; gap:2px; margin-top:2px}
.nkl-sidebar-foot{border-top:1px solid var(--nkl-border); padding-top:10px; margin-top:10px}

/* Icon-only sidebar: menu name next to the hovered/focused icon (owner
   2026-10-30). Rendered by sidebar.js as ONE element in <body> with
   position:fixed - a ::after inside the sidebar was clipped by its
   overflow-y:auto and showed only a thin vertical bar at the edge. */
.nkl-nav-tooltip{
  position:fixed; left:0; top:0; z-index:1080; pointer-events:none;
  background:var(--nkl-navy-dark); color:#fff; padding:6px 10px; border-radius:6px;
  font-size:12px; font-weight:500; line-height:1.3; white-space:nowrap;
  box-shadow:var(--nkl-shadow-md); opacity:0; transform:translate(-4px,-50%); transition:opacity .12s ease, transform .12s ease;
}
.nkl-nav-tooltip.is-visible{opacity:1; transform:translate(0,-50%)}
.nkl-nav-tooltip::before{
  content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%);
  border-width:5px 5px 5px 0; border-style:solid; border-color:transparent var(--nkl-navy-dark) transparent transparent;
}
[data-bs-theme="dark"] .nkl-nav-tooltip{outline:1px solid rgba(255,255,255,.14)}
@media (prefers-reduced-motion: reduce){ .nkl-nav-tooltip{transition:none} }

/* main/topbar */
/* P11-DASH-004 (2026-08-20, retest 2 - final): the real, single
   authenticated-shell root cause. `.nkl-main` is a flex item of
   `.nkl-shell` (row direction) - at <=991.98px the sidebar leaves normal
   flow (position:fixed, off-canvas), so `.nkl-main` becomes the sole
   flex item, flex-grow:1. A flex item's automatic minimum WIDTH
   defaults to its content's min-content size, not 0 - so ANY single
   unbreakable descendant deep inside `.nkl-main` (here: the topbar
   breadcrumb below, deliberately white-space:nowrap) holds the ENTIRE
   `.nkl-main` box open at that descendant's width, which is why
   `.nkl-main`/`.nkl-topbar`/`.nkl-content` were all measured at the
   identical 428.21875px regardless of viewport - not three separate
   bugs, one shared flex floor. The previous card-row-scoped min-width:0
   fixes were real and still needed (they let card content reflow once
   the shell can actually shrink) but could never fix this, since none
   of them touched `.nkl-main` itself or the topbar. Scoped to
   `.nkl-main`/`.nkl-breadcrumb` only - Login uses a wholly separate
   `_auth_base.html` shell with no `.nkl-main`/`.nkl-topbar`/
   `.nkl-breadcrumb` anywhere (confirmed by direct grep - zero matches). */
.nkl-main{background:var(--nkl-bg); min-width:0}
.nkl-topbar{height:var(--nkl-topbar-h); background:var(--nkl-surface); border-bottom:1px solid var(--nkl-border); padding:0 18px; position:sticky; top:0; z-index:var(--nkl-z-topbar)}
.nkl-breadcrumb{font-size:13px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.nkl-search{position:relative; width:320px; max-width:380px; flex-shrink:0}
.nkl-theme-icon-sun{display:none}
[data-bs-theme="dark"] .nkl-theme-icon-moon{display:none}
[data-bs-theme="dark"] .nkl-theme-icon-sun{display:inline-flex}
.nkl-search .nkl-icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--nkl-text-muted)}
.nkl-search .form-control{padding-left:32px; background:var(--nkl-bg); border-color:var(--nkl-border); font-size:13px}
.nkl-env-badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.02em}
.nkl-env-badge-production{background:var(--nkl-success-bg); color:var(--nkl-success)}
.nkl-env-badge-staging{background:var(--nkl-warning-bg); color:var(--nkl-warning)}
.nkl-env-badge-development{background:var(--nkl-info-bg); color:var(--nkl-info)}
.nkl-icon-btn{background:transparent; border:none; padding:0; color:var(--nkl-text-muted); width:32px; height:32px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center}
.nkl-icon-btn:hover{background:var(--nkl-bg)}
.nkl-sidebar .nkl-icon-btn{color:var(--nkl-text-muted)}
.nkl-sidebar .nkl-icon-btn:hover{background:var(--nkl-surface-hover)}
.nkl-user{background:transparent; border:none; padding:0}
.nkl-avatar{width:30px; height:30px; border-radius:50%; background:var(--nkl-navy); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center}

.nkl-content{padding:22px}
.nkl-page{max-width:var(--nkl-content-max-w); margin:0 auto}

/* global banners */
.nkl-banner{padding:8px 18px; font-size:13px; font-weight:600; text-align:center}
.nkl-banner-production{background:var(--nkl-navy); color:#fff}
.nkl-banner-readonly{background:var(--nkl-warning); color:#1B2233}
.nkl-banner-maintenance{background:var(--nkl-neutral); color:#fff}
.nkl-banner-incident{background:var(--nkl-critical); color:#fff}

/* mobile offcanvas sidebar */
@media (max-width: 991.98px){
  .nkl-sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--nkl-shadow-md)}
  .nkl-shell.nkl-sidebar-open .nkl-sidebar{transform:translateX(0)}
  .nkl-sidebar-scrim{display:none; position:fixed; inset:0; background:rgba(10,14,22,.45); z-index:calc(var(--nkl-z-sidebar) - 1)}
  .nkl-shell.nkl-sidebar-open .nkl-sidebar-scrim{display:block}
}