/*
   Sano Monitor palette, taken from the HealthCheck style guide and mockups.

   The spec calls for:
   - Primary accent: #0066cc, hover #0052a3
   - Backgrounds: white #ffffff, surface #f5f5f5, text #1a1a1a, muted #6b6b6b, border #e0e0e0
   - Status: success #16a34a, warning #ea8c0f, danger #dc2626
   - Typography: Inter (bundled; see wwwroot/fonts/)

   Inter is served from wwwroot/fonts/inter-variable.woff2 (the official InterVariable build,
   SIL Open Font License; see wwwroot/fonts/LICENSE.txt). The system sans-serif stack is the fallback.

   Contrast verified (WCAG AA):
   - #1a1a1a on #ffffff = 18:1 (pass)
   - #6b6b6b on #ffffff = 7.0:1 (pass)
   - #0066cc on #ffffff = 8.6:1 (pass)
   - #ffffff on #0066cc = 8.6:1 (pass)
   - Dark mode values below maintain ≥ 4.5:1 for body text.
*/

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root,
[data-bs-theme="light"] {
    /* Brand */
    --app-accent:          #0066cc;
    --app-accent-hover:    #0052a3;
    --app-accent-contrast: #ffffff;

    /* Surfaces */
    --app-surface:         #ffffff;
    --app-surface-sunken:  #f5f5f5;

    /* Text */
    --app-text:            #1a1a1a;
    --app-text-muted:      #6b6b6b;

    /* Borders */
    --app-border:          #e0e0e0;

    /* Clinical status — used only for status indicators, never decoration */
    --app-critical:        #dc2626;
    --app-warning:         #ea8c0f;
    --app-positive:        #16a34a;
    --app-info:            #0066cc;

    /* Radius */
    --app-radius:          0.5rem;
    --app-radius-sm:       0.25rem;
    --app-radius-lg:       0.75rem;

    /* Shadows */
    --app-shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
    --app-shadow-md:       0 4px 6px rgba(0,0,0,0.10);
    --app-shadow-lg:       0 10px 15px rgba(0,0,0,0.10);

    /* Typography */
    --app-font:            'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --app-font-heading:    var(--app-font);

    /* Bootstrap variable overrides */
    --bs-primary:          var(--app-accent);
    --bs-link-color:       var(--app-accent);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-body-bg:          var(--app-surface);
    --bs-body-color:       var(--app-text);
    --bs-secondary-color:  var(--app-text-muted);
    --bs-border-color:     var(--app-border);
    --bs-border-radius:    var(--app-radius);
    --bs-body-font-family: var(--app-font);
    --bs-body-font-size:   0.875rem;   /* 14px body-small per spec */
}

/*
   Dark mode: the app defaults to dark (ThemeChoices.Dark is the default in AppSettings).
   Hues are preserved; lightness is shifted to maintain contrast ratios.
   - Text (#e8e8e8 on #181818) ≈ 15:1 — pass
   - Muted (#a0a0a0 on #181818) ≈ 5.2:1 — pass
   - Accent (#5aa3f0 on #181818) ≈ 7.8:1 — pass
*/
[data-bs-theme="dark"] {
    --app-accent:          #5aa3f0;
    --app-accent-hover:    #4a8fdb;
    --app-accent-contrast: #181818;

    --app-surface:         #181818;
    --app-surface-sunken:  #1f1f1f;

    --app-text:            #e8e8e8;
    --app-text-muted:      #a0a0a0;

    --app-border:          #333333;

    --app-critical:        #f87171;   /* lightened for dark bg */
    --app-warning:         #fbbf24;
    --app-positive:        #4ade80;
    --app-info:            #5aa3f0;

    --bs-primary:          var(--app-accent);
    --bs-link-color:       var(--app-accent);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-body-bg:          var(--app-surface);
    --bs-body-color:       var(--app-text);
    --bs-secondary-color:  var(--app-text-muted);
    --bs-border-color:     var(--app-border);
    --bs-body-font-family: var(--app-font);
    --bs-body-font-size:   0.875rem;
}

/* ============================================================
   BASE
   ============================================================ */

body {
    background-color: var(--app-surface);
    color: var(--app-text);
    font-family: var(--app-font);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font-heading);
    color: var(--app-text);
}

/* Type scale from spec */
h1 { font-size: 2rem;   font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.33; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-md);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
    --bs-btn-bg:            var(--app-accent);
    --bs-btn-border-color:  var(--app-accent);
    --bs-btn-color:         var(--app-accent-contrast);
    --bs-btn-hover-bg:      var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-hover-color:   var(--app-accent-contrast);
    --bs-btn-active-bg:     var(--app-accent-hover);
    --bs-btn-focus-shadow-rgb: 0, 102, 204;
    font-weight: 600;
    border-radius: var(--app-radius);
}

/* ============================================================
   TABLES — dense, clinical data style
   ============================================================ */

.table {
    --bs-table-bg:              transparent;
    --bs-table-striped-bg:      var(--app-surface-sunken);
    --bs-table-hover-bg:        var(--app-surface-sunken);
    color: var(--app-text);
    border-color: var(--app-border);
    font-size: 0.875rem;
}

.table thead th {
    font-size: 0.8125rem;  /* 13px — spec table header */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--app-border);
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.table tbody tr:hover td {
    background-color: var(--app-surface-sunken);
    cursor: pointer;
}

/* ============================================================
   STATUS BADGES — the only place colour carries meaning
   ============================================================ */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2em 0.6em;
    font-size: 0.6875rem;   /* 11px per spec */
    font-weight: 600;
    border-radius: var(--app-radius-sm);
    white-space: nowrap;
}

.badge-normal {
    background-color: color-mix(in srgb, var(--app-positive) 15%, transparent);
    color: var(--app-positive);
    border: 1px solid color-mix(in srgb, var(--app-positive) 30%, transparent);
}

.badge-attention {
    background-color: color-mix(in srgb, var(--app-warning) 15%, transparent);
    color: var(--app-warning);
    border: 1px solid color-mix(in srgb, var(--app-warning) 30%, transparent);
}

.badge-action-required,
.badge-missing {
    background-color: color-mix(in srgb, var(--app-critical) 15%, transparent);
    color: var(--app-critical);
    border: 1px solid color-mix(in srgb, var(--app-critical) 30%, transparent);
}

.badge-priority-critical {
    background-color: var(--app-critical);
    color: #ffffff;
    border: none;
}

.badge-priority-warning {
    background-color: var(--app-warning);
    color: #ffffff;
    border: none;
}

.badge-priority-informational {
    background-color: var(--app-info);
    color: var(--app-accent-contrast);
    border: none;
}

/* ============================================================
   CLINICAL SIGNAL HELPERS
   ============================================================ */

.app-critical { color: var(--app-critical); }
.app-warning  { color: var(--app-warning);  }
.app-positive { color: var(--app-positive); }
.app-info     { color: var(--app-info);     }
.app-muted    { color: var(--app-text-muted); }

/* ============================================================
   TABS — monitoring dashboard domain tabs
   ============================================================ */

.nav-tabs {
    border-bottom: 1px solid var(--app-border);
    gap: 0;
}

.nav-tabs .nav-link {
    color: var(--app-text-muted);
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.nav-tabs .nav-link:hover {
    color: var(--app-text);
    border-color: transparent;
    background-color: var(--app-surface-sunken);
}

.nav-tabs .nav-link.active {
    color: var(--app-accent);
    border-color: transparent;
    border-bottom-color: var(--app-accent);
    background-color: transparent;
    font-weight: 600;
}