/* ============================================================================
   n360-primitives.css — styling for the two "pseudo-components" that pages use
   as bare class-named elements.

   WHY THIS FILE EXISTS
   --------------------
   docs/N360_RAW_HTML_POLICY.md records that Nalam360Enterprise.UI ships no
   inline-text component and no generic box/stack component:

       | Bold / small / muted inline text | N360Text  | does not exist |
       | Generic flex or block container  | N360Box / N360Stack | does not exist |

   Pages were nevertheless written against them, as class-named elements that
   carry the component's parameters as attributes:

       <span class="n360-text" Typo="h4" Color="Secondary">...</span>
       <div class="n360-stack" Row="true" Justify="SpaceBetween" Spacing="2">

   Measured 2026-10-02: 1,503 n360-text sites across 79 pages and 455 n360-stack
   sites across 33 pages — and NEITHER class had a single CSS rule anywhere in
   the UI library or this wwwroot. So every one of those headings rendered at
   body size with no weight, and every stack rendered as plain stacked blocks
   with no direction, alignment or gap. That is the whole typographic hierarchy
   and flex layout of 112 pages, absent.

   This file honours the attributes already present in the markup, so no page
   needs editing. Everything resolves through design tokens, so both the dark
   and high-contrast themes follow automatically.

   The end state in the policy doc is still to add real N360Text / N360Stack
   components and sweep these elements away; this restores the intended
   rendering in the meantime. Attribute values are matched case-insensitively
   (the ` i` flag) because the pages use both "danger" and "Error".
   ============================================================================ */

/* ---------------------------------------------------------------- n360-stack */

.n360-stack {
    display: flex;
    flex-direction: column;  /* a Stack is vertical unless Row="true" */
    min-width: 0;            /* let children shrink instead of overflowing a grid cell */
}

.n360-stack[Row="true" i]            { flex-direction: row; }

.n360-stack[Justify="SpaceBetween" i] { justify-content: space-between; }
.n360-stack[Justify="FlexEnd" i]      { justify-content: flex-end; }
.n360-stack[Justify="FlexStart" i]    { justify-content: flex-start; }
.n360-stack[Justify="Center" i]       { justify-content: center; }
.n360-stack[Justify="SpaceAround" i]  { justify-content: space-around; }

.n360-stack[AlignItems="Center" i]    { align-items: center; }
.n360-stack[AlignItems="Start" i]     { align-items: flex-start; }
.n360-stack[AlignItems="End" i]       { align-items: flex-end; }
.n360-stack[AlignItems="Stretch" i]   { align-items: stretch; }
.n360-stack[AlignItems="Baseline" i]  { align-items: baseline; }

.n360-stack[Spacing="0"] { gap: 0; }
.n360-stack[Spacing="1"] { gap: var(--n360-space-1, 0.25rem); }
.n360-stack[Spacing="2"] { gap: var(--n360-space-2, 0.5rem); }
.n360-stack[Spacing="3"] { gap: var(--n360-space-3, 0.75rem); }
.n360-stack[Spacing="4"] { gap: var(--n360-space-4, 1rem); }
.n360-stack[Spacing="5"] { gap: var(--n360-space-5, 1.25rem); }
.n360-stack[Spacing="6"] { gap: var(--n360-space-6, 1.5rem); }

/* ----------------------------------------------------------------- n360-text */

.n360-text {
    font-family: var(--n360-font-family-sans);
    min-width: 0;
    overflow-wrap: break-word;
}

/* Typographic scale. Headings become block-level so they occupy their own line
   as a heading should; body/caption stay inline so they can sit inside a
   sentence or beside a value. */
.n360-text[Typo="h3" i],
.n360-text[Typo="h4" i],
.n360-text[Typo="h5" i],
.n360-text[Typo="h6" i] {
    display: block;
    margin: 0;
    line-height: 1.3;
    font-weight: var(--n360-font-weight-semibold, 600);
    color: var(--n360-text-primary);
}

.n360-text[Typo="h3" i] { font-size: var(--n360-font-size-3xl, 1.875rem); }
.n360-text[Typo="h4" i] { font-size: var(--n360-font-size-2xl, 1.5rem); }
.n360-text[Typo="h5" i] { font-size: var(--n360-font-size-xl, 1.25rem); }
.n360-text[Typo="h6" i] { font-size: var(--n360-font-size-lg, 1.125rem); }

.n360-text[Typo="subtitle1" i] {
    font-size: var(--n360-font-size-base, 1rem);
    font-weight: var(--n360-font-weight-medium, 500);
    line-height: 1.5;
}

.n360-text[Typo="subtitle2" i] {
    font-size: var(--n360-font-size-sm, 0.875rem);
    font-weight: var(--n360-font-weight-medium, 500);
    line-height: 1.5;
}

.n360-text[Typo="body1" i] {
    font-size: var(--n360-font-size-base, 1rem);
    line-height: 1.5;
}

.n360-text[Typo="body2" i] {
    font-size: var(--n360-font-size-sm, 0.875rem);
    line-height: 1.5;
}

/* caption carries its own muted colour, as MUI's does — an explicit Color=
   below still wins, because these selectors have equal specificity and the
   colour rules are declared after this block. */
.n360-text[Typo="caption" i] {
    font-size: var(--n360-font-size-xs, 0.75rem);
    line-height: 1.4;
    color: var(--n360-text-secondary);
}

/* Colours. "Secondary" is used 110 times, almost all on captions and field
   labels, so it means muted body text (MUI's textSecondary) rather than the
   purple secondary palette. "Surface" sits on percentage readouts drawn over
   gauges and progress bars, where the value has to stay legible, so it maps to
   primary text rather than a muted tone. */
.n360-text[Color="Primary" i]   { color: var(--n360-color-primary-500, #2196f3); }
.n360-text[Color="Secondary" i] { color: var(--n360-text-secondary); }
.n360-text[Color="Success" i]   { color: var(--n360-color-success-500, #4caf50); }
.n360-text[Color="Warning" i]   { color: var(--n360-color-warning-500, #ff9800); }
.n360-text[Color="Info" i]      { color: var(--n360-color-info-500, #03a9f4); }
.n360-text[Color="Danger" i],
.n360-text[Color="Error" i]     { color: var(--n360-color-error-500, #f44336); }
.n360-text[Color="Muted" i]     { color: var(--n360-text-muted); }
.n360-text[Color="Dark" i],
.n360-text[Color="Surface" i]   { color: var(--n360-text-primary); }

.n360-text[Align="Align.Center" i], .n360-text[Align="Center" i] { display: block; text-align: center; }
.n360-text[Align="Align.Right" i],  .n360-text[Align="Right" i]  { display: block; text-align: right; }
.n360-text[Align="Align.Left" i],   .n360-text[Align="Left" i]   { display: block; text-align: left; }