/*
    The default theme pack's L2 COMPONENT LAYER — increment 3.13b
    (docs/17-theme-and-ui-replaceability.md § 2/§ 4; decisions D234, D235, D237).

    This is "the remainder of the shared sheet" promoted into the pack: the appearance of the platform's
    components — form controls, tables, panels, badges, alerts, dialogs, empty states, pagination and the
    validation states — AND the four shells' chrome (header, nav, menu, breadcrumbs, footer and the main
    region). Both are THEME-OWNED (L2/L3): the shells keep their structure and their markup, the shared
    shell partial (Views/Shared/_ThemeStyles.cshtml) links this file in ONE place, and every module view
    keeps the platform's own semantic vocabulary (D73) — no page markup changed for this sheet and no
    framework utility class is used.

    BUILT ONLY FROM TOKENS. No colour, radius, spacing, type or duration is written here as a literal:
    every value is a var() reference into the L1 layer (tokens.css), so a theme can retune or remove the
    whole look by editing one file. That includes the MOTION, whose durations and easing come from the L1
    motion tokens and are consumed ONLY here (D237 rule 4).

    MOTION IS DECORATION, NEVER INFORMATION (D237 rule 2, the D10/D124 guarantee). The transitions below
    only fade or shift things that already exist in the server-rendered HTML: the htmx region swap
    (D122 rule 2), the Alpine disclosure (D122 rule 3) and the Alpine row filter (D122 rule 3) all read
    content that is present in the markup, and with JavaScript disabled every one of them is inert while
    the content stays fully visible. The final block collapses every duration to effectively zero under
    prefers-reduced-motion (D237 rule 3, docs/17 invariant 7).

    No @media print rule lives here: the one print sheet stays the single source of print rules (D125),
    and the shared shell stylesheet stays screen-only.
*/

/* --- document base (consumes only L1 tokens) ------------------------------------------------------------ */
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--ink);
    background: var(--bg);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* --- shell chrome (L3) — the header, nav, menu, breadcrumbs, footer and the main region ----------------- */
.shell-header {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.shell-brand {
    font-size: calc(var(--font-size) + 3px);
    font-weight: 600;
    color: var(--ink);
}

.shell-header .env {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.shell-body {
    display: flex;
    align-items: stretch;
}

.shell-nav {
    width: 240px;
    flex: 0 0 240px;
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: var(--space-3) 0;
}

.shell-nav-top {
    width: auto;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--space-1) var(--space-3);
}

.shell-main {
    flex: 1;
    padding: var(--space-5);
    max-width: 1100px;
}

.shell-footer {
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding: var(--space-3) var(--space-5);
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--muted);
}

/* --- menu ------------------------------------------------------------------------------------------------ */
.shell-menu-group-title {
    margin: var(--space-3) var(--space-5) var(--space-1);
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.shell-menu-items,
.shell-menu-subitems {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shell-menu-item a,
.shell-menu-item span {
    display: block;
    padding: var(--space-2) var(--space-5);
    color: var(--ink);
    transition: background-color var(--motion-fast) var(--motion-ease);
}

.shell-menu-item a:hover {
    background: var(--bg);
    text-decoration: none;
}

.shell-menu-subitems .shell-menu-item a {
    padding-left: 36px;
}

.shell-menu-separator {
    border-top: 1px solid var(--line);
    margin: var(--space-2) var(--space-5);
}

/* The public shell renders the menu horizontally, as a top bar rather than a sidebar. */
.shell-nav-top .shell-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.shell-nav-top .shell-menu-group {
    display: inline-block;
}

.shell-nav-top .shell-menu-group-title {
    display: none;
}

.shell-nav-top .shell-menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.shell-nav-top .shell-menu-item a,
.shell-nav-top .shell-menu-item span {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
}

/* --- breadcrumbs ----------------------------------------------------------------------------------------- */
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: var(--font-size-sm);
}

.breadcrumbs li+li::before {
    content: "\203A";
    margin-right: var(--space-2);
    color: var(--muted);
}

/* --- content primitives (the delivered page vocabulary) -------------------------------------------------- */
h2 {
    margin-top: 0;
    font-size: calc(var(--font-size) + 6px);
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.panel h3 {
    margin-top: 0;
}

.danger-zone {
    border-color: var(--danger);
}

.danger-zone h3 {
    color: var(--danger);
}

.muted {
    color: var(--muted);
}

/* --- tables ---------------------------------------------------------------------------------------------- */
table {
    border-collapse: collapse;
    width: 100%;
    background: var(--panel);
    font-size: var(--font-size);
}

th,
td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

th {
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--font-size-sm);
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}

td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- badges ---------------------------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--line);
    background: var(--accent-soft);
    color: var(--accent);
}

.badge.ok {
    color: var(--ok);
    border-color: var(--ok);
    background: var(--ok-bg);
}

.badge.off {
    color: var(--muted);
    background: var(--bg);
}

.badge.bad {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--err-bg);
}

.badge.override {
    color: var(--accent);
    border-color: var(--accent);
}

/* --- alerts (flash) — .ok, .err and the delivered-but-previously-unstyled .warn -------------------------- */
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    border: 1px solid var(--line);
    border-left-width: 4px;
    background: var(--panel);
}

.flash.ok {
    background: var(--ok-bg);
    border-color: var(--ok);
}

.flash.err {
    background: var(--err-bg);
    border-color: var(--danger);
}

.flash.warn {
    background: var(--warn-bg);
    border-color: var(--warn);
    color: var(--warn-ink);
}

/* --- forms: labels, inputs, selects, textareas, checkboxes and radios ----------------------------------- */
label {
    display: block;
    font-weight: 600;
    margin: var(--space-3) 0 var(--space-1);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    width: 100%;
    max-width: 360px;
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

textarea {
    max-width: 640px;
}

select {
    cursor: pointer;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    max-width: none;
    margin: 0 var(--space-1) 0 0;
    accent-color: var(--accent);
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    display: inline-block;
    margin: 0;
    font-weight: 400;
}

form.inline {
    display: inline;
}

/* --- buttons --------------------------------------------------------------------------------------------- */
button,
input[type="submit"] {
    font: inherit;
    font-weight: 600;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

button:hover,
input[type="submit"]:hover {
    background: var(--bg);
}

button.primary,
input[type="submit"].primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

button.primary:hover,
input[type="submit"].primary:hover {
    background: var(--accent);
    filter: brightness(0.95);
}

button.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--accent-ink);
}

button.danger:hover {
    filter: brightness(0.95);
}

/* --- definition lists and session lists ------------------------------------------------------------------ */
dl.meta {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

dl.meta dt {
    color: var(--muted);
}

dl.meta dd {
    margin: 0;
}

ul.sessions {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.sessions li.session {
    border-top: 1px solid var(--line);
    padding: var(--space-3) 0;
}

/* --- dialogs --------------------------------------------------------------------------------------------- */
dialog {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow);
    padding: var(--space-4);
    max-width: 560px;
}

dialog::backdrop {
    background: rgb(17 24 39 / 40%);
}

/* --- empty states ---------------------------------------------------------------------------------------- */
[data-empty],
.empty-state {
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: var(--space-5);
    color: var(--muted);
    text-align: center;
}

/* --- pagination ------------------------------------------------------------------------------------------ */
nav.pagination,
.pagination {
    margin: var(--space-4) 0;
}

.pagination ol,
.pagination ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.pagination [aria-current="page"] {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- form validation states ------------------------------------------------------------------------------ */
.validation-summary,
.validation-summary-errors {
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: var(--err-bg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.validation-summary:empty,
.validation-summary-valid {
    display: none;
}

.field-error,
.field-validation-error {
    display: block;
    color: var(--danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--err-bg);
}

/* --- the sanctioned dynamics baseline (D122 rules 2 and 3): motion as decoration only ------------------- */
/* D122 rule 2 — an animated htmx region swap over a bounded, server-rendered fragment. htmx adds these
   classes to the element it swaps; the content is the server-rendered fragment, so with JavaScript
   disabled the same region is already on the page and only the fade is absent. */
.htmx-swapping {
    opacity: 0;
    transition: opacity var(--motion-fast) var(--motion-ease);
}

.htmx-added {
    opacity: 0;
}

.htmx-settling {
    opacity: 1;
    transition: opacity var(--motion-base) var(--motion-ease);
}

/* D122 rule 3 — Alpine-owned local motion for a drawer/disclosure/accordion. Alpine applies these classes
   during the transition; the transition itself consumes the L1 motion tokens, so a theme retunes it (or
   removes it by emptying the tokens) from one file. */
.motion-fade {
    transition: opacity var(--motion-base) var(--motion-ease);
}

.motion-fade-start {
    opacity: 0;
}

.motion-fade-end {
    opacity: 1;
}

/* D237 rule 3 / docs/17 invariant 7 — reduced motion collapses every duration to effectively zero. This is
   the ONE place the collapse is written, next to the transitions it governs, and it covers the CSS-driven
   motion AND Alpine's own inline transition styles (a stylesheet !important beats a normal inline value). */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}