/* =====================================================================
   YakConstruction / NoteVault — amber→safety-orange GRADIENT accent with a
   complementary slate-grey, on the shared yw-theme.css system.
   ---------------------------------------------------------------------
   Load order: yakware-style.css → yw-theme.css → THIS. yw-theme.css carries
   the design-language re-skin + neutral light/dark token blocks; this file
   sets the amber→orange accent + a charcoal-slate hero/footer anchor (the
   "complementary grey"), plus the two in-app components construction uses
   that aren't in yw-theme (yw-empty, yw-chip). Light-first.
   ===================================================================== */

/* charcoal-slate anchors (the complementary grey) — dark in both themes,
   amber-tinted hairline. Footer link-hover is bright amber. */
:root {
    --hero-panel-bg:     linear-gradient(165deg, #313842 0%, #20262f 48%, #161a20 100%);
    --hero-panel-border: rgba(245,158,11,0.20);
    --footer-bg:    #181c22;
    --footer-fg:    #c7ccd4;
    --footer-muted: #8a929e;
    --footer-head:  #767d89;
    --footer-brand: #f1f4f7;
    --footer-accent: #fbbf24;   /* bright amber on the charcoal footer */
    /* code block also follows the charcoal anchor */
    --code-bg: #14181f;
}

/* —— accents: LIGHT —— */
html.yw-light {
    --accent:          #d97706;   /* amber-600 — solid rails/borders/ink */
    --accent-strong:   #b45309;
    --accent-soft:     #fbbf24;
    --accent-contrast: #1b1304;   /* dark ink on the amber→orange fill */
    --accent-tint:     rgba(217,119,6,0.12);
    --accent-ink:      #b45309;   /* amber AS TEXT on white */
    --accent-gradient:       linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --accent-gradient-hover: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
}
/* —— accents: DARK —— */
html.yw-dark {
    --accent:          #f59e0b;
    --accent-strong:   #fbbf24;
    --accent-soft:     #d97706;
    --accent-contrast: #1b1304;
    --accent-tint:     rgba(245,158,11,0.16);
    --accent-ink:      #fbbf24;   /* amber AS TEXT on dark */
    --accent-gradient:       linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --accent-gradient-hover: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
}

/* =====================================================================
   In-app components ported from yw-app.css (construction uses only these),
   re-pointed at the yw-theme tokens so they follow the theme + amber accent.
   ===================================================================== */
.yw-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
    border: 1.5px dashed var(--surface-border);
    border-radius: 14px;
    background: var(--surface-2);
}
.yw-empty__icon { font-size: 2rem; opacity: .55; margin-bottom: .5rem; color: var(--accent-ink); }
.yw-empty__title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }

.yw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border: 1px solid var(--surface-border);
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Header / toolbar right-edge overflow guard ───────────────────────────────
   Most pages lay out a title/filter area + a right-aligned action-button column
   as a Bootstrap-3 `.row` with `col-sm-*` + `.col-sm-* .text-right`. Two things
   made those bleed past the right edge — which the app content stack clips via
   `.Wt-stack.contents { overflow-x: hidden }`, so it reads as "cut off" with no
   scrollbar:
     1) `.row`'s -15px negative margins are not always absorbed by the immediate
        container (e.g. a `.container-fluid.p-0` wrapper), so the row bleeds
        ~15px past the content edge; and
     2) several action buttons crammed into a rigid 25%/33% column overflow it.
   Turn any such row into a wrap-friendly flexbox: zero the row's negative
   margins, let the columns size to their content, and let the action group take
   the width it needs and wrap onto its own line instead of spilling off-screen.
   Scoped to `.contents` (Wt dialogs render outside it). `:has()` is supported in
   all current browsers. This one rule covers every module/list/dashboard
   toolbar in the app. */
.contents .row:has(> .text-right) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    row-gap: .5rem;
    margin-left: 0;
    margin-right: 0;
}
.contents .row:has(> .text-right) > [class*="col-"] {
    float: none;
    width: auto;
    max-width: 100%;
    flex: 1 1 auto;
    padding-left: 0;
    padding-right: 0;
}
.contents .row:has(> .text-right) > .text-right {
    flex: 0 1 auto;
    margin-left: auto;            /* keep the action group right-aligned…        */
    display: flex;
    flex-wrap: wrap;              /* …and let its buttons wrap when cramped       */
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}