/* ============================================================
   Logbook — chrome (light only)
   ------------------------------------------------------------
   Structural companion to logbook-base.css, ported from the cayman chrome it
   replaces: the brand band across the top, the weight of the header, how a
   page announces itself. Removing this <link> in App.razor leaves the plain
   re-coloured theme behind.

   Scoped to the authenticated shell (.rz-layout / .rz-header / .rz-sidebar).
   The account pages use LoginLayout.razor.css and are deliberately left alone.
   ============================================================ */

/* ── The brand band ───────────────────────────────────────────
   Four pixels across the top: teal for the sea, ink for the ledger, amber for
   the signal. The one overt brand gesture — everything else is carried
   quietly by the palette. */
.rz-header {
    border-top: 4px solid transparent;
    border-image: linear-gradient(
        to right,
        var(--lb-teal)  0%,   var(--lb-teal)  55%,
        var(--lb-ink)   55%,  var(--lb-ink)   80%,
        var(--lb-amber) 80%,  var(--lb-amber) 100%
    ) 1;
    border-bottom: 1px solid var(--rz-border-color);
    box-shadow: 0 1px 2px rgba(14, 23, 48, 0.06);
}

/* ── Sidebar ──────────────────────────────────────────────────
   Ink comes from --rz-base-800 in the theme file; the amber hairline against
   the body echoes the band and the active-item indicator. */
.rz-sidebar {
    border-right: 1px solid var(--lb-ink-deep);
    box-shadow: inset -3px 0 0 -2px var(--lb-amber);
}

.rz-navigation-item-link {
    letter-spacing: 0.01em;
}

.rz-navigation-item-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ── Page headings ────────────────────────────────────────────
   A short teal rule under the page title — the same accent the public site's
   wordmark carries. */
.rz-body .rz-text-h4 {
    position: relative;
    padding-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.rz-body .rz-text-h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--lb-teal);
    border-radius: 2px;
}

/* ── Cards and panels ─────────────────────────────────────────
   Flat, bordered, minimal shadow. Records should look filed, not floating. */
.rz-body .rz-card {
    border: 1px solid var(--rz-border-color);
    box-shadow: 0 1px 2px rgba(14, 23, 48, 0.05);
}

/* ── Data grid ────────────────────────────────────────────────
   The register is the heart of the product: a teal-washed header with a
   strong rule beneath it, and a teal tint — not grey — for the selected row. */
.rz-body .rz-data-grid .rz-grid-table thead th {
    background-color: var(--lb-teal-wash);
    border-bottom: 2px solid var(--lb-teal);
    color: var(--lb-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rz-body .rz-data-grid tbody tr.rz-data-row:hover > td {
    background-color: var(--lb-teal-wash);
}

.rz-body .rz-data-grid tbody tr.rz-state-highlight > td {
    background-color: var(--lb-teal-tint);
    color: var(--lb-ink);
}

/* ── Buttons ────────────────────────────────────────────────── */
.rz-body .rz-button.rz-button-md:not(.rz-button-icon-only) {
    padding-inline: 18px;
}

.rz-body .rz-button.rz-button-sm:not(.rz-button-icon-only) {
    padding-inline: 14px;
}

.rz-body .rz-button .rz-button-box {
    gap: 0.4rem;
}

/* Amber focus ring — unmistakable keyboard focus against teal/ink controls. */
.rz-body .rz-button.rz-primary:focus-visible,
.rz-body .rz-button.rz-secondary:focus-visible {
    outline: 3px solid var(--lb-amber-bright);
    outline-offset: 2px;
}

/* ── Footer ───────────────────────────────────────────────────
   Thin teal rule above the footer, closing the frame the band opens. */
.rz-footer {
    border-top: 1px solid var(--rz-border-color);
    box-shadow: inset 0 3px 0 -2px var(--lb-teal);
}