/* ---- Brand palette (BRAND.md, approved 2026-08-26) ------------------------
   Two blues: darkblue #00008B for headings, #007EDE as the highlight (the
   logo blue). darkred is RETIRED. #007EDE is 4.17:1 on white — fine for the
   mark and large type, UNDER 4.5:1 for small text — so small text, links and
   button fills on light grounds use the ink stop #0063B1 (6.14:1), and dark
   grounds use #4FA8F0 (7.44:1). Every ratio below was computed, not assumed.

   WHITE LABEL (2026-09-03): these five tokens are the ONLY place a colour is
   written. _Layout inlines a `:root` override from the brand row right after
   this file, so a white label recolours the site by changing tokens, not CSS.
   Never write a brand hex below this block — read the token. */
:root {
    --as-heading: #00008B;   /* 15.30:1 on white */
    --as-hi: #007EDE;        /*  4.17:1 on white — large/marks/borders only */
    --as-ink: #0063B1;       /*  6.14:1 on white; white-on-it 6.14:1 */
    --as-ink-hover: #00518F; /*  white-on-it 8.16:1 */
    --as-hi-bright: #4FA8F0; /*  7.44:1 on near-black */
    /* Bootstrap's default link/primary #0d6efd is only 3.68:1 on white —
       FAILS 4.5:1 for the small text it is used on. Re-pointed to the ink. */
    --bs-link-color: var(--as-ink);
    --bs-link-hover-color: var(--as-ink-hover);
    --bs-link-color-rgb: 0, 99, 177;
    --bs-link-hover-color-rgb: 0, 81, 143;
}
.btn-primary {
    --bs-btn-bg: var(--as-ink); --bs-btn-border-color: var(--as-ink);
    --bs-btn-hover-bg: var(--as-ink-hover); --bs-btn-hover-border-color: var(--as-ink-hover);
    --bs-btn-active-bg: var(--as-ink-hover); --bs-btn-active-border-color: var(--as-ink-hover);
    --bs-btn-disabled-bg: var(--as-ink); --bs-btn-disabled-border-color: var(--as-ink);
}
.btn-outline-primary {
    --bs-btn-color: var(--as-ink); --bs-btn-border-color: var(--as-ink);
    --bs-btn-hover-bg: var(--as-ink); --bs-btn-hover-border-color: var(--as-ink);
    --bs-btn-active-bg: var(--as-ink-hover); --bs-btn-active-border-color: var(--as-ink-hover);
}
.text-bg-primary { background-color: var(--as-ink) !important; }

/* ---- Navbar brand: logo, name, attribution ------------------------------- */
.as-brand { color: var(--as-heading); }
.as-brand:hover { color: var(--as-ink); }
.as-brand-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.as-brand-name { font-weight: 600; }
.as-brand-attrib { font-size: .72rem; font-weight: 400; color: var(--bs-secondary-color); align-self: flex-end; padding-bottom: .15rem; }
/* Ported from EAware2025/wwwroot/css/site.css. Minimal — Bootstrap does the
   heavy lifting; this file is for things Bootstrap doesn't ship. */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Custom — the "not wired up" alert variants live as standard Bootstrap
   .alert-warning / .alert-info / .alert-danger from _Layout.cshtml. Add
   AwareSmith-specific touches here as the design evolves. */
.footer {
    background: #fafafa;
    padding: 12px 0;
    font-size: 0.9rem;
}

/* Admin · UserRoles / UserModules left-rail user list.
   The list lives in a narrow .col-lg-2 column, so long emails like
   "developer@awaresmith.local Developer" wrap or clip. Truncate with an
   ellipsis; full string is available via the title attribute on hover.

   The `table-layout: fixed` + `max-width: 0` combination is the canonical
   recipe for ellipsis truncation in a table cell — without it, the column
   auto-sizes to fit the longest text and bursts out of the card. */
.user-list-table {
    table-layout: fixed;
    width: 100%;
}
.user-list-table td {
    max-width: 0;
}
.user-list-link {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Developer area visual distinction — a small badge on the nav so dev pages
   don't get confused with customer-facing ones. */
.dev-badge {
    display: inline-block;
    background: #6b21a8;
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

/* Slide-out sizing standard (Rafe, 2026-08-13): EVERY offcanvas panel on the
   site is 2/3 of the viewport on medium+ screens and full-width on small
   handhelds. Single source of truth — panel.js no longer injects a copy.
   !important beats Bootstrap's fixed --bs-offcanvas-width (400px).
   (The old panel.js rule was 75vw; standardized down to 2/3 per direction.) */
.offcanvas.as-panel { width: 100vw !important; }
@media (min-width: 768px) {
    .offcanvas.as-panel { width: 66.666vw !important; }
}

/* ── Confirm toast (js/awaresmith/confirm-toast.js) ──────────────────────────
   Middle-LEFT, because the drags it confirms end over the folder tree on the
   left. Site-wide rather than page-scoped: the same control belongs anywhere a
   destructive-ish action needs checking, and a second copy would drift. */
.as-confirm-host {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 1080; pointer-events: none;
}
.as-confirm {
    pointer-events: auto;
    margin-left: .75rem; max-width: 24rem;
    background: var(--bs-body-bg, #fff);
    border: 2px solid darkblue; border-left-width: 6px; border-radius: 10px;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .22);
    padding: .75rem .9rem;
    opacity: 0; transform: translateX(-1rem);
    transition: opacity .12s ease, transform .12s ease;
}
.as-confirm.in { opacity: 1; transform: translateX(0); }
.as-confirm.danger { border-color: #dc3545; }
.as-confirm-title { font-weight: 600; color: darkblue; margin-bottom: .35rem; }
.as-confirm.danger .as-confirm-title { color: #B02A37; }   /* 6.50:1 on white */
.as-confirm-line { font-size: .85rem; margin-bottom: .2rem; }
.as-confirm-actions { display: flex; gap: .4rem; margin-top: .6rem; }
.as-confirm input { margin-top: .35rem; }
.as-confirm-error:empty { display: none; }
.as-confirm-error { color: #B02A37; font-size: .8rem; margin-top: .3rem; }   /* 6.50:1 */
/* formToast: several fields need more room than the one-line prompt, but the
   card must still fit a phone — cap at viewport width minus its margins. */
.as-confirm.wide { max-width: min(30rem, calc(100vw - 2rem)); }
.as-confirm.wide textarea, .as-confirm.wide select { margin-top: .35rem; }
.as-confirm-label { display: block; font-size: .8rem; font-weight: 600; margin: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
    .as-confirm { transition: none; }
}

/* ── Panel clause pills as [ISO?] expanders (Rafe, 2026-08-27) ───────────────
   The pill stays a glanceable clause reference; the standard's text arrives on
   click. Same affordance as dom.js helpToggle, in the KO panel template. */
.as-iso-toggle { cursor: pointer; }
.as-iso-toggle .as-iso-mark { color: var(--as-ink); font-weight: 600; }
/* Registry intent paraphrase keeps its paragraph breaks in the help reveal. */
.as-clause-intent { white-space: pre-line; }