/*
 * AtsCloud canonical design tokens and MudBlazor bridge.
 * See /DESIGN.md before changing visual values.
 */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Material Symbols Outlined";
    src: url("../fonts/material-symbols-outlined.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
}

:root {
    color-scheme: light;

    /* Surfaces and ink */
    --ats-bg: #fafaf8;
    --ats-surface: #ffffff;
    --ats-surface-2: #f4f3ef;
    --ats-line: #e7e6e1;
    --ats-line-strong: #d6d5cf;
    --ats-ink: #18171a;
    --ats-ink-2: #4a4953;
    --ats-ink-3: #82818a;
    --ats-ink-4: #b3b1b8;

    /* Interaction */
    --ats-accent: #0077bd;
    --ats-accent-ink: #005d94;
    --ats-accent-soft: #e8f4fb;
    --ats-on-accent: #ffffff;
    --ats-focus: color-mix(in srgb, var(--ats-accent) 32%, transparent);

    /* Semantic state */
    --ats-good: #389560;
    --ats-good-soft: #e9f6ee;
    --ats-warn: #df911a;
    --ats-warn-soft: #fff4df;
    --ats-bad: #cf4040;
    --ats-bad-soft: #fcebea;

    /* Data-series identity */
    --ats-series-1: #0077bd;
    --ats-series-2: #1b9388;
    --ats-series-3: #ac6734;
    --ats-series-4: #9155a6;
    --ats-series-5: #526783;

    /* 4 px grid */
    --ats-sp-1: 2px;
    --ats-sp-2: 4px;
    --ats-sp-3: 8px;
    --ats-sp-4: 12px;
    --ats-sp-5: 16px;
    --ats-sp-6: 24px;
    --ats-sp-7: 32px;
    --ats-sp-8: 48px;
    --ats-sp-9: 64px;

    --ats-r-sm: 4px;
    --ats-r-md: 8px;
    --ats-r-lg: 12px;
    --ats-r-pill: 999px;

    --ats-font-ui: "IBM Plex Sans", sans-serif;
    --ats-font-data: "JetBrains Mono", monospace;
    --ats-t-micro: 10px;
    --ats-t-label: 12px;
    --ats-t-sm: 13px;
    --ats-t-body: 14px;
    --ats-t-title: 16px;
    --ats-t-value: 20px;
    --ats-t-hero: 28px;
    --ats-t-wordmark: clamp(38px, 11vw, 56px);

    --ats-dur-micro: 120ms;
    --ats-dur-short: 200ms;
    --ats-dur-med: 320ms;
    --ats-ease-enter: cubic-bezier(0.2, 0, 0, 1);
    --ats-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Compatibility aliases for the existing ATS Dash components. */
    --bg: var(--ats-bg);
    --surface: var(--ats-surface);
    --surface-2: var(--ats-surface-2);
    --line: var(--ats-line);
    --line-strong: var(--ats-line-strong);
    --ink: var(--ats-ink);
    --ink-2: var(--ats-ink-2);
    --ink-3: var(--ats-ink-3);
    --ink-4: var(--ats-ink-4);
    --accent: var(--ats-accent);
    --accent-soft: var(--ats-accent-soft);
    --accent-ink: var(--ats-accent-ink);
    --good: var(--ats-good);
    --good-soft: var(--ats-good-soft);
    --warn: var(--ats-warn);
    --warn-soft: var(--ats-warn-soft);
    --bad: var(--ats-bad);
    --bad-soft: var(--ats-bad-soft);
    --r-sm: var(--ats-r-sm);
    --r-md: var(--ats-r-md);
    --r-lg: var(--ats-r-lg);
    --shadow-sm: none;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --ats-bg: #0e0e10;
    --ats-surface: #161618;
    --ats-surface-2: #1d1d20;
    --ats-line: #26262a;
    --ats-line-strong: #34343a;
    --ats-ink: #f3f2f0;
    --ats-ink-2: #c8c7c4;
    --ats-ink-3: #8a8a8e;
    --ats-ink-4: #5a5a60;

    --ats-accent: #56acf0;
    --ats-accent-ink: #8fcaff;
    --ats-accent-soft: #172f43;
    --ats-on-accent: #0e0e10;
    --ats-focus: color-mix(in srgb, var(--ats-accent) 38%, transparent);

    --ats-good: #68b986;
    --ats-good-soft: #183526;
    --ats-warn: #f3ae58;
    --ats-warn-soft: #3a2913;
    --ats-bad: #ed756e;
    --ats-bad-soft: #3a1d1d;

    --ats-series-1: #56acf0;
    --ats-series-2: #4eb9ad;
    --ats-series-3: #d38b59;
    --ats-series-4: #b47cc5;
    --ats-series-5: #7c8ca2;
}

html,
body {
    min-height: 100%;
    background: var(--ats-bg);
    color: var(--ats-ink);
    font-family: var(--ats-font-ui);
    font-size: var(--ats-t-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea,
.mud-typography,
.mud-input,
.mud-button-root,
.mud-table,
.rz-component {
    font-family: var(--ats-font-ui) !important;
}

code,
pre,
kbd,
samp,
.mono,
.ats-data,
.mud-table-cell[data-numeric="true"] {
    font-family: var(--ats-font-data) !important;
    font-variant-numeric: tabular-nums lining-nums;
}

body {
    font-variant-numeric: tabular-nums lining-nums;
}

::selection {
    background: var(--ats-accent-soft);
    color: var(--ats-ink);
}

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

/* Application shell */
.ats-appbar {
    background: color-mix(in srgb, var(--ats-bg) 94%, transparent) !important;
    color: var(--ats-ink) !important;
    border-bottom: 1px solid var(--ats-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

.ats-wordmark {
    color: var(--ats-ink);
    font-family: var(--ats-font-data) !important;
    font-size: var(--ats-t-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ats-wordmark-dim {
    color: var(--ats-ink-3);
    font-weight: 400;
}

.ats-drawer {
    background: var(--ats-surface) !important;
    border-right: 1px solid var(--ats-line) !important;
    box-shadow: none !important;
}

.ats-nav-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    padding: var(--ats-sp-5) var(--ats-sp-6);
    border-bottom: 1px solid var(--ats-line);
}

.ats-nav-brand-link {
    display: inline-flex;
    align-items: center;
    border-radius: var(--ats-r-sm);
}

.ats-nav-brand-logo {
    display: block;
    width: 132px;
    height: auto;
    filter: invert(1);
    transition: opacity var(--ats-dur-micro) var(--ats-ease-enter);
}

:root[data-theme="dark"] .ats-nav-brand-logo {
    filter: none;
}

.ats-nav-brand-link:hover .ats-nav-brand-logo {
    opacity: 0.76;
}

.ats-main {
    min-height: 100vh;
    background: var(--ats-bg);
}

.ats-auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--ats-sp-6);
    background: var(--ats-bg);
}

.ats-auth-main {
    min-height: 100vh;
    padding: 0 !important;
    background: var(--ats-bg);
}

.ats-auth-theme-toggle {
    position: fixed;
    z-index: 2;
    top: var(--ats-sp-4);
    right: var(--ats-sp-4);
    color: var(--ats-ink-2);
}

.ats-auth-shell {
    width: 100%;
    margin: 0;
}

.ats-auth-card {
    max-width: 440px;
    margin-inline: auto;
    border: 1px solid var(--ats-line-strong) !important;
    border-radius: var(--ats-r-lg) !important;
}

.ats-auth-wordmark {
    margin-bottom: var(--ats-sp-7);
    color: var(--ats-ink);
    font-family: var(--ats-font-data);
    font-size: var(--ats-t-wordmark);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.ats-auth-wordmark span {
    color: var(--ats-ink-3);
    font-weight: 400;
}

.ats-auth-field {
    margin-top: var(--ats-sp-5);
}

.ats-auth-field-label {
    margin-bottom: var(--ats-sp-2);
    color: var(--ats-ink-2);
    font-size: var(--ats-t-sm) !important;
    font-weight: 500;
}

.ats-auth-card input:-webkit-autofill,
.ats-auth-card input:-webkit-autofill:hover,
.ats-auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ats-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ats-surface) inset;
    caret-color: var(--ats-ink);
    transition: background-color 9999s ease-out;
}

.mud-nav-link {
    min-height: 38px;
    margin: 2px 8px;
    border-radius: var(--ats-r-sm) !important;
    color: var(--ats-ink-2) !important;
    font-size: var(--ats-t-sm);
    transition: color var(--ats-dur-micro) var(--ats-ease-enter),
                background-color var(--ats-dur-micro) var(--ats-ease-enter);
}

.mud-nav-link:hover {
    background: var(--ats-surface-2) !important;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--ats-accent-soft) !important;
    color: var(--ats-accent-ink) !important;
    font-weight: 600;
}

/* MudBlazor visual contract */
.mud-paper,
.mud-card {
    background-color: var(--ats-surface);
}

/*
 * MudPaper is also used as a layout primitive throughout the application.
 * A border is therefore opt-in via Outlined="true"; applying one to every
 * paper creates doubled frames wherever papers are nested.
 */
.mud-paper.mud-paper-outlined {
    border-color: var(--ats-line);
}

/*
 * Semantic application panel. Add this class only to a surface that is meant
 * to read as a card; ordinary MudPaper layout wrappers stay borderless.
 */
.ats-panel {
    background-color: var(--ats-surface) !important;
    border: 1px solid var(--ats-line) !important;
    border-radius: var(--ats-r-md) !important;
}

.ats-panel > .ats-metric-row + .ats-metric-row {
    border-top: 1px solid var(--ats-line);
}

.mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-snackbar) {
    box-shadow: none !important;
}

.mud-card,
.mud-paper {
    border-radius: var(--ats-r-md);
}

.mud-elevation-1,
.mud-elevation-2,
.mud-elevation-3,
.mud-elevation-4,
.mud-elevation-6,
.mud-elevation-8,
.mud-elevation-12,
.mud-elevation-16,
.mud-elevation-24 {
    box-shadow: none !important;
}

.mud-dialog {
    border: 1px solid var(--ats-line-strong);
    border-radius: var(--ats-r-lg) !important;
    box-shadow: 0 24px 72px rgb(0 0 0 / 22%) !important;
}

.mud-popover {
    border: 1px solid var(--ats-line);
    border-radius: var(--ats-r-md) !important;
    box-shadow: 0 12px 36px rgb(0 0 0 / 16%) !important;
}

.mud-button-root {
    border-radius: var(--ats-r-sm) !important;
    box-shadow: none !important;
    font-size: var(--ats-t-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color var(--ats-dur-micro) var(--ats-ease-enter),
                border-color var(--ats-dur-micro) var(--ats-ease-enter),
                color var(--ats-dur-micro) var(--ats-ease-enter);
}

.mud-button-filled-primary {
    color: var(--ats-on-accent) !important;
}

.mud-input-outlined-border,
.mud-input-slot {
    border-radius: var(--ats-r-sm) !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label {
    color: var(--ats-ink-3);
    font-size: var(--ats-t-sm);
}

.mud-table-container {
    border: 1px solid var(--ats-line);
    border-radius: var(--ats-r-md);
}

/* An outlined paper already owns the table's outside frame. */
.mud-paper-outlined .mud-table-container {
    border: 0;
    border-radius: inherit;
}

.mud-table-head .mud-table-cell {
    background: var(--ats-surface-2);
    color: var(--ats-ink-3);
    font-family: var(--ats-font-data) !important;
    font-size: var(--ats-t-micro);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mud-table-cell {
    border-bottom-color: var(--ats-line) !important;
    font-size: var(--ats-t-sm);
}

.mud-chip {
    border-radius: var(--ats-r-pill) !important;
    font-size: var(--ats-t-micro);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--ats-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mud-typography-h4 {
    font-size: var(--ats-t-hero);
}

.mud-typography-h5 {
    font-size: var(--ats-t-value);
}

.mud-typography-h6 {
    font-size: var(--ats-t-title);
}

.mud-alert {
    border-radius: var(--ats-r-md);
    box-shadow: none;
}

.material-symbols-outlined {
    display: inline-block;
    direction: ltr;
    font-family: "Material Symbols Outlined" !important;
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* Keep legacy industrial pages inside the same visual language. */
.industrial-dashboard {
    background: var(--ats-bg) !important;
    color: var(--ats-ink) !important;
    font-family: var(--ats-font-ui) !important;
}

.industrial-dashboard :is(h1, h2, h3, h4, .hero-metric-value, .device-card-title h2, .report-card-title) {
    font-family: var(--ats-font-ui) !important;
    font-weight: 600 !important;
}

.industrial-dashboard .dashboard-header {
    padding: var(--ats-sp-6) 0 var(--ats-sp-4);
    margin-bottom: var(--ats-sp-5);
    border-bottom: 1px solid var(--ats-line);
}

.industrial-dashboard .dashboard-header h1 {
    margin-bottom: var(--ats-sp-2);
    color: var(--ats-ink);
    font-size: var(--ats-t-hero) !important;
    letter-spacing: -0.02em;
}

.industrial-dashboard .dashboard-header .subtitle {
    color: var(--ats-ink-3);
    font-size: var(--ats-t-sm);
    font-weight: 400;
}

.industrial-dashboard :is(.hero-metric-value, .pressure-value, .analog-value) {
    font-size: var(--ats-t-hero) !important;
    line-height: 1.1;
}

.industrial-dashboard :is(.device-card, .report-card, .chart-container, .telemetry-field, .env-metric-card) {
    background: var(--ats-surface) !important;
    border: 1px solid var(--ats-line) !important;
    border-radius: var(--ats-r-md) !important;
    box-shadow: none !important;
}

.industrial-dashboard :is(.device-card, .report-card) {
    padding: var(--ats-sp-5) !important;
}

.industrial-dashboard :is(.telemetry-grid, .report-summary-grid, .analog-info-grid) {
    gap: var(--ats-sp-3);
}

.industrial-dashboard :is(.telemetry-field, .report-summary-item, .analog-info-item) {
    padding: var(--ats-sp-4);
    border-radius: var(--ats-r-sm) !important;
}

.industrial-dashboard :is(.status-badge, .live-badge, .report-chip) {
    border-radius: var(--ats-r-pill);
    box-shadow: none !important;
    backdrop-filter: none;
}

.industrial-dashboard :is(.device-card, .report-card)::before {
    display: none !important;
}

.industrial-dashboard :is(.device-card, .report-card):hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--ats-line-strong) !important;
}

.industrial-dashboard :is(.hero-metric-value, .telemetry-field-value, .env-metric-value, .report-value) {
    font-family: var(--ats-font-data) !important;
    font-variant-numeric: tabular-nums lining-nums;
}

.industrial-dashboard :is(.status-badge .pulse, .rotating-icon, .bento-equal, .report-layout, .loading-container) {
    animation: none !important;
}

.industrial-dashboard .rotating-icon {
    border-color: var(--ats-line-strong) !important;
}

.industrial-dashboard :is(.pressure-highlight, .analog-range-bar .fill) {
    background: var(--ats-accent-soft) !important;
}

.industrial-dashboard .analog-range-bar .fill {
    background: var(--ats-accent) !important;
}

.btn-outline:hover {
    transform: none !important;
}

/* ApexCharts shares the same typographic and surface tokens in every page. */
.apexcharts-canvas,
.apexcharts-text,
.apexcharts-tooltip,
.apexcharts-legend-text {
    font-family: var(--ats-font-data) !important;
}

.apexcharts-text,
.apexcharts-legend-text {
    fill: var(--ats-ink-3) !important;
    color: var(--ats-ink-3) !important;
}

.apexcharts-gridline {
    stroke: var(--ats-line) !important;
}

.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--ats-surface) !important;
    border-color: var(--ats-line-strong) !important;
    color: var(--ats-ink) !important;
    box-shadow: none !important;
}

.apexcharts-tooltip-title {
    background: var(--ats-surface-2) !important;
    border-bottom-color: var(--ats-line) !important;
}

.btn-gradient {
    background: var(--ats-accent) !important;
    color: var(--ats-on-accent) !important;
    border: 1px solid var(--ats-accent) !important;
    border-radius: var(--ats-r-sm) !important;
    box-shadow: none !important;
}

.btn-gradient:hover,
.btn-gradient:active {
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(0.94);
}

@media (max-width: 600px) {
    .ats-main {
        padding: 8px !important;
        padding-top: 64px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}