/* ============================================================
   nav_compact.css
   Collapsed-navbar state + KPI tile sizing for the
   nav-toggle feature. Loaded from base.html.
   ============================================================ */

/* ── Smooth transitions on the navbar ────────────────────── */
.navbar {
    transition: padding 200ms ease;
}
.navbar-brand img {
    transition: max-height 200ms ease;
}
.navbar-brand span {
    transition: font-size 200ms ease;
}

/* ── Collapsed navbar (html.nav-collapsed) ───────────────── */
/* The first-paint <script> in <head> reads localStorage and
   adds .nav-collapsed to <html> before the navbar renders --
   no flash of expanded nav for users who prefer collapsed. */

html.nav-collapsed .navbar {
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 30px;
}

html.nav-collapsed .navbar-brand img {
    max-height: 24px !important;
}

/* Excludes .sw-brand-tagline (own rule below) - this blanket span
   selector was previously forcing the tagline to the SAME font-size
   as the wordmark in collapsed mode (both landed on 1rem/16px),
   erasing the visual hierarchy between them. The wordmark spans
   (.sw-brand-part1/part2) still get this. */
html.nav-collapsed .navbar-brand span:not(.sw-brand-tagline) {
    font-size: 1rem !important;
}

/* Collapsed-only: tagline stays clearly subordinate to the wordmark
   (8px vs the wordmark's 16px here) - no width-alignment constraint
   in this state (the wordmark itself is much smaller, so the earlier
   "spans the wordmark width" rule the expanded state follows doesn't
   apply). Letter-spacing halved the same as the expanded fix, for
   consistency between the two states. */
html.nav-collapsed .sw-brand-tagline {
    font-size: 8px !important;
    letter-spacing: 0.11em !important;
}

/* Hide the main nav menu (left-side dropdowns) when collapsed.
   Toggle button + logo + version stay visible so the user can
   un-collapse and recognise where they are. */
html.nav-collapsed .navbar-collapse .navbar-nav.me-auto {
    display: none !important;
}

/* On the right side, hide everything EXCEPT the toggle button
   (carries .nav-toggle-item). User name + logout + version
   disappear in collapsed mode. */
html.nav-collapsed .navbar-nav.ms-auto > li:not(.nav-toggle-item) {
    display: none !important;
}

/* ── Compact KPI tiles ───────────────────────────────────── */
/* Used by the _kpi_tile.html macro. Sits inline with a page
   title (right-aligned via flex on the title row), wraps cleanly
   on narrow viewports. Half the height of the previous KPI tiles. */
.kpi-tile-compact {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    border-width: 1px;
}
.kpi-tile-compact.kpi-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.kpi-tile-compact.kpi-active {
    border-width: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.18);
}
.kpi-tile-link {
    display: inline-block;
}

/* ── Version link (release-notes hover state) ────────────── */
.version-link {
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.version-link:hover {
    color: #003366 !important;
    text-decoration: underline;
}

/* ── News headline link (home page) ──────────────────────── */
.news-headline {
    color: #003366;
    transition: color 0.12s ease;
    /* min-width:0 lets the headline shrink/truncate inside the
       flex row instead of pushing the meta off the right edge. */
    min-width: 0;
}
.news-headline:hover {
    color: #008080;
    text-decoration: underline !important;
}
.news-headline:hover .bi-box-arrow-up-right {
    transform: translate(1px, -1px);
    transition: transform 0.12s ease;
}
/* Date + author on the right side of the news row -- whitespace:nowrap
   so the date doesn't break mid-format ("5 May" + "2026" on two lines).
   The flex-wrap on .news-row drops the meta cleanly to its own line on
   narrow viewports. */
.news-meta {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Toggle button ───────────────────────────────────────── */
#navToggleBtn {
    border: none;
    background: transparent;
    color: #008080;
    padding: 4px 8px;
    line-height: 1;
    cursor: pointer;
}
#navToggleBtn:hover {
    color: #003366;
}
#navToggleBtn:focus {
    outline: 2px solid rgba(0, 128, 128, 0.3);
    outline-offset: 2px;
    border-radius: 4px;
}