/* ==================================================================
   Mina base — resets, typography, body atmosphere, and the pulse atom
   that pages reuse via .mina-pulse / <StatusDot>.
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--mina-bg-deep);
    color: var(--mina-text);
    font-family: var(--mina-font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html { height: 100%; }
body { min-height: 100%; }

a {
    color: var(--mina-accent-2);
    text-decoration: none;
    transition: color var(--mina-fast) var(--mina-ease);
}
a:hover { color: var(--mina-accent); }

button { font-family: inherit; }

/* Mina canvas — the inky-grid backdrop. The grid is intentionally faint:
   you only see it when you stare. Adds atmosphere without distracting
   from data. The radial gradient under the topbar gives a "Mina is
   awake" haze that doesn't move. */
.mina-canvas {
    position: relative;
    background:
        radial-gradient(ellipse 1200px 220px at 50% -40px,
            rgba(124, 58, 237, 0.18),
            transparent 60%),
        var(--mina-bg-deep);
    min-height: 100vh;
}

.mina-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, var(--mina-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mina-grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    pointer-events: none;
    z-index: 0;
}

/* Type utility classes — used directly on elements in pages so the type
   scale stays in one place rather than scattered across .razor.css. */
.t-display { font-size: 42px; line-height: 1.05; letter-spacing: -1px;   font-weight: 600; }
.t-h1      { font-size: 28px; line-height: 1.15; letter-spacing: -0.5px; font-weight: 600; }
.t-h2      { font-size: 20px; line-height: 1.3;                          font-weight: 600; }
.t-h3      { font-size: 16px; line-height: 1.4;                          font-weight: 600; }
.t-body    { font-size: 14px; line-height: 1.5;                          font-weight: 450; }
.t-small   { font-size: 13px; line-height: 1.45;                         font-weight: 450; color: var(--mina-text-2); }
.t-caption {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: var(--mina-font-mono);
    font-weight: 500;
    color: var(--mina-muted);
}
.t-num       { font-family: var(--mina-font-mono); font-weight: 500; font-feature-settings: "tnum" 1, "ss01" 1; }
.t-num-large { font-family: var(--mina-font-mono); font-weight: 500; font-size: 22px; line-height: 1.2;
               font-feature-settings: "tnum" 1, "ss01" 1; }

/* Pulse — the dashboard's signature motion. A 1.4s cyan dot for "this
   is live". Shared via <StatusDot Mode="Live" /> but defined here so
   any element can opt in via class="mina-pulse". */
@keyframes mina-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.45),
                    0 0 0 1px var(--mina-accent);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(0, 229, 255, 0),
                    0 0 0 1px var(--mina-accent);
    }
}

.mina-pulse {
    animation: mina-pulse 1.4s var(--mina-ease) infinite;
}

/* Scrollbars — slim, dark, blend with surfaces. Only applies to
   chromium / webkit engines; Firefox uses scrollbar-color. */
.mina-canvas *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.mina-canvas *::-webkit-scrollbar-thumb {
    background: var(--mina-border);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.mina-canvas *::-webkit-scrollbar-thumb:hover {
    background-color: var(--mina-border-2);
    background-clip: padding-box;
}
.mina-canvas *::-webkit-scrollbar-track { background: transparent; }
.mina-canvas * {
    scrollbar-color: var(--mina-border) transparent;
    scrollbar-width: thin;
}

/* MudBlazor surfaces — quietly retune so MudDataGrid / MudDialog /
   MudSnackbar inherit our palette instead of fighting with their own.
   Specific selectors so we don't break primitives we haven't audited. */
.mud-paper {
    background-color: var(--mina-surface) !important;
    border: 1px solid var(--mina-border);
    color: var(--mina-text) !important;
}
.mud-table {
    background-color: transparent !important;
    color: var(--mina-text) !important;
}
.mud-table-cell, .mud-table-head, .mud-table-row {
    border-color: var(--mina-border) !important;
}
.mud-input-outlined-border {
    border-color: var(--mina-border) !important;
}
.mud-input-control input,
.mud-input-control textarea {
    color: var(--mina-text) !important;
}
.mud-input-label { color: var(--mina-muted) !important; }
.mud-snackbar { background-color: var(--mina-surface-2) !important; color: var(--mina-text) !important; }
.mud-tooltip { background-color: var(--mina-surface-3) !important; color: var(--mina-text) !important; border: 1px solid var(--mina-border); }

/* Page transition — a 120ms crossfade controlled at the layout level by
   keying the wrapper on route. The rule is here so any component can
   participate. */
.mina-page-fade-enter {
    animation: mina-page-fade var(--mina-base) var(--mina-ease);
}
@keyframes mina-page-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Focus — visible cyan ring, never a browser default. */
*:focus-visible {
    outline: 2px solid var(--mina-accent);
    outline-offset: 2px;
    border-radius: var(--mina-radius-xs);
}