/* ==========================================================================
   Base + app shell   —  spec: docs/features/62-ui-ux-design-system.md §3
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button { font-family: inherit; }

/* Focus — visible on every interactive element (§7.4) */
:focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: content-box; }

/* --------------------------------------------------------------------------
   App shell — the app floats as a rounded card on the page ground
   -------------------------------------------------------------------------- */

.app-shell {
    display: flex;
    height: 100vh;
    padding: var(--space-6);
    gap: 0;
}

.app-shell__frame {
    display: flex;
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-shell);
    overflow: hidden;
}

.app-shell__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
}

.app-shell__content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Utilities — deliberately few; components own their styling
   -------------------------------------------------------------------------- */

.u-text-secondary { color: var(--text-secondary); }
.u-text-tertiary { color: var(--text-tertiary); }
.u-meta {
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
}
/* overflow and text-overflow do not apply to non-replaced INLINE boxes, and 13 of the 14 call
   sites are a span or an anchor — so the nowrap applied and the ellipsis never did, leaving a long
   unbroken line to widen its column instead of truncating. Blockifying the inline cases is what
   makes the declared intent true. The one div call site is already a block box and is left alone.
   Inside a table cell this still needs the table to have a resolved column width; see .grid. */
span.u-truncate,
a.u-truncate {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}

.u-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.u-row { display: flex; align-items: center; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-spacer { flex: 1; }

/* Screen-reader only */
.u-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Empty cell marker (§6 rule 7) */
.u-empty::after {
    content: "--";
    color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   Responsive (§7.5)
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .app-shell { padding: var(--space-4); }
}

@media (max-width: 1023px) {
    .app-shell { padding: 0; }
    .app-shell__frame { border-radius: 0; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Blazor framework UI
   -------------------------------------------------------------------------- */

#blazor-error-ui {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    display: none;
    padding: var(--space-3) var(--space-4);
    background: var(--tag-warning-bg);
    border-top: 1px solid var(--tag-warning-fg);
    color: var(--tag-warning-fg);
    font-size: var(--t-body-size);
    box-shadow: var(--shadow-lg);
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-size: 18px;
    line-height: 1;
}