/* ============================================================
   Stripe-Style Theme for EHSSaaS (MudBlazor)
   ============================================================ */

/* ----------------------------------------------------------
   Global Font – Inter (loaded via Google Fonts in _Host.cshtml)
   ---------------------------------------------------------- */
html, body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--eb-bg) !important;
    color: var(--eb-text-primary) !important;
}

/* Apply Inter to all MudBlazor component text */
.mud-typography,
.mud-button-label,
.mud-input,
.mud-input-label,
.mud-select-input,
.mud-nav-link,
.mud-table-cell,
.mud-dialog-title,
.mud-dialog-content,
.mud-chip-content,
.mud-alert-message {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ----------------------------------------------------------
   CSS Custom Properties – Enterprise Deep Blue Design Tokens
   ---------------------------------------------------------- */
:root {
    /* ── Primary – Deep Navy ─────────────────────────────── */
    --eb-primary:          #002F5D;
    --eb-primary-dark:     #001F3F;
    --eb-primary-light:    #1A4F82;
    --eb-primary-glow:     rgba(0, 47, 93, 0.18);

    /* ── Accent – Bright Blue ────────────────────────────── */
    --eb-accent:           #1565C0;
    --eb-accent-light:     #42A5F5;

    /* ── Surfaces ────────────────────────────────────────── */
    --eb-bg:               #F8F9FA;   /* page off-white       */
    --eb-surface:          #FFFFFF;   /* cards / dialogs      */
    --eb-sidebar:          #F0F4F8;   /* drawer background    */

    /* ── Text ────────────────────────────────────────────── */
    --eb-text-primary:     #1A2B4A;
    --eb-text-muted:       #5A6A85;

    /* ── Border / divider ────────────────────────────────── */
    --eb-divider:          #E2E8F0;

    /* ── Status ──────────────────────────────────────────── */
    --eb-success:          #2E7D32;
    --eb-warning:          #F59E0B;
    --eb-error:            #D32F2F;
    --eb-info:             #0288D1;

    /* ── Enterprise chart palette (clear, professional) ─── */
    --chart-color-1: #1565C0;   /* deep blue       */
    --chart-color-2: #0288D1;   /* sky blue        */
    --chart-color-3: #26A69A;   /* teal            */
    --chart-color-4: #F59E0B;   /* amber           */
    --chart-color-5: #EF5350;   /* coral red       */
    --chart-color-6: #7E57C2;   /* soft purple     */
}

/* ============================================================
   1. MudTextField – Enterprise Deep Blue Focus Border + Glow
   ============================================================ */

/* Outlined variant ----------------------------------------- */
.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-input-outlined.mud-input-outlined-border:focus-within {
    border-color: var(--eb-primary) !important;
    box-shadow: 0 0 0 3px var(--eb-primary-glow) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Underline / filled variant ------------------------------- */
.mud-input:focus-within::after,
.mud-input.mud-input-underline:focus-within::after {
    border-bottom-color: var(--eb-primary) !important;
    box-shadow: 0 1px 0 0 var(--eb-primary-glow) !important;
    transition: border-bottom-color 0.18s ease, box-shadow 0.18s ease;
}

/* Label colour on focus ------------------------------------ */
.mud-input-control:focus-within .mud-input-label-inputcontrol,
.mud-input-control:focus-within .mud-input-label {
    color: var(--eb-primary) !important;
    transition: color 0.18s ease;
}

/* Outlined border transition (pre-focus) ------------------- */
.mud-input-outlined .mud-input-outlined-border {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* ============================================================
   2. MudDataGrid – Comfortable Row Density + Bold Header
   ============================================================ */

/* Row height – comfortable spacing */
.mud-table-row td.mud-table-cell,
.mud-table-row th.mud-table-cell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Header: smaller font size, bold, subtle uppercase style */
.mud-table thead .mud-table-cell,
.mud-table-head .mud-table-cell,
.mud-data-grid thead th,
.mud-data-grid .mud-table-head .mud-table-cell {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280; /* Stripe-like muted header colour */
    border-bottom: 1.5px solid #e5e7eb !important;
}

/* Zebra / hover row highlight */
.mud-table-row:hover td.mud-table-cell {
    background-color: #EBF2FA !important; /* very light deep-blue tint */
    transition: background-color 0.12s ease;
}

/* ============================================================
   3. MudNavMenu – Icon & Text Spacing (Stripe Sidebar Style)
   ============================================================ */

/* NavLink item layout */
.mud-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--eb-text-primary) !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Icon within NavLink */
.mud-nav-link .mud-nav-link-icon,
.mud-nav-link .mud-icon-root {
    font-size: 1.15rem !important;
    flex-shrink: 0;
    color: var(--eb-text-muted);
    transition: color 0.15s ease;
}

/* Active / hover state */
.mud-nav-link:hover,
.mud-nav-link.active {
    background-color: #E3EBF6 !important;   /* soft deep-blue tint */
    color: var(--eb-primary) !important;
}

.mud-nav-link:hover .mud-icon-root,
.mud-nav-link.active .mud-icon-root {
    color: var(--eb-primary) !important;
}

/* Group header / section button inside NavMenu */
.mud-nav-menu .mud-button-root {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    width: calc(100% - 12px) !important;
    justify-content: flex-start !important;
    color: var(--eb-text-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.mud-nav-menu .mud-button-root:hover {
    background-color: #E3EBF6 !important;
    color: var(--eb-primary) !important;
}

/* Divider inside nav – make it lighter */
.mud-nav-menu .mud-divider {
    border-color: var(--eb-divider) !important;
    margin: 4px 14px !important;
}

/* ============================================================
   4. MudChart – Enterprise Palette + No Grid-Line Line Chart
      C# 코드에서는 StripeTheme.EnterprisePalette 사용
   ============================================================ */

/* Inject pastel colour variables into SVG chart segments/lines */
.mud-chart svg .mud-chart-serie:nth-child(1) path,
.mud-chart svg .mud-chart-serie:nth-child(1) polyline,
.mud-chart svg .mud-chart-serie:nth-child(1) line {
    stroke: var(--chart-color-1) !important;
}
.mud-chart svg .mud-chart-serie:nth-child(2) path,
.mud-chart svg .mud-chart-serie:nth-child(2) polyline,
.mud-chart svg .mud-chart-serie:nth-child(2) line {
    stroke: var(--chart-color-2) !important;
}
.mud-chart svg .mud-chart-serie:nth-child(3) path,
.mud-chart svg .mud-chart-serie:nth-child(3) polyline,
.mud-chart svg .mud-chart-serie:nth-child(3) line {
    stroke: var(--chart-color-3) !important;
}
.mud-chart svg .mud-chart-serie:nth-child(4) path,
.mud-chart svg .mud-chart-serie:nth-child(4) polyline,
.mud-chart svg .mud-chart-serie:nth-child(4) line {
    stroke: var(--chart-color-4) !important;
}
.mud-chart svg .mud-chart-serie:nth-child(5) path,
.mud-chart svg .mud-chart-serie:nth-child(5) polyline,
.mud-chart svg .mud-chart-serie:nth-child(5) line {
    stroke: var(--chart-color-5) !important;
}
.mud-chart svg .mud-chart-serie:nth-child(6) path,
.mud-chart svg .mud-chart-serie:nth-child(6) polyline,
.mud-chart svg .mud-chart-serie:nth-child(6) line {
    stroke: var(--chart-color-6) !important;
}

/* Dot fill colours to match series */
.mud-chart svg .mud-chart-serie:nth-child(1) circle { fill: var(--chart-color-1) !important; }
.mud-chart svg .mud-chart-serie:nth-child(2) circle { fill: var(--chart-color-2) !important; }
.mud-chart svg .mud-chart-serie:nth-child(3) circle { fill: var(--chart-color-3) !important; }
.mud-chart svg .mud-chart-serie:nth-child(4) circle { fill: var(--chart-color-4) !important; }
.mud-chart svg .mud-chart-serie:nth-child(5) circle { fill: var(--chart-color-5) !important; }
.mud-chart svg .mud-chart-serie:nth-child(6) circle { fill: var(--chart-color-6) !important; }

/* Hide horizontal & vertical grid lines inside the chart */
.mud-chart svg .mud-charts-grid,
.mud-chart svg .mud-charts-gridline,
.mud-chart svg line.mud-charts-gridline,
.mud-chart svg .mud-charts-xaxis-gridlines line,
.mud-chart svg .mud-charts-yaxis-gridlines line {
    display: none !important;
    stroke: none !important;
}

/* Smoother, slightly thicker line */
.mud-chart svg .mud-chart-serie polyline,
.mud-chart svg .mud-chart-serie path.mud-charts-line {
    stroke-width: 2.5px !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    fill: none !important;
}

/* Light axis line only (no grid clutter) */
.mud-chart svg .mud-charts-xaxis line,
.mud-chart svg .mud-charts-yaxis line {
    stroke: #e5e7eb !important;
    stroke-width: 1px !important;
}

/* Axis labels */
.mud-chart svg text {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 11px !important;
    fill: #9CA3AF !important;
}

/* Legend dots – also recolour */
.mud-chart .mud-chart-legend .mud-chart-legend-item:nth-child(1) .mud-chart-legend-marker { background-color: var(--chart-color-1) !important; }
.mud-chart .mud-chart-legend .mud-chart-legend-item:nth-child(2) .mud-chart-legend-marker { background-color: var(--chart-color-2) !important; }
.mud-chart .mud-chart-legend .mud-chart-legend-item:nth-child(3) .mud-chart-legend-marker { background-color: var(--chart-color-3) !important; }
.mud-chart .mud-chart-legend .mud-chart-legend-item:nth-child(4) .mud-chart-legend-marker { background-color: var(--chart-color-4) !important; }
.mud-chart .mud-chart-legend .mud-chart-legend-item:nth-child(5) .mud-chart-legend-marker { background-color: var(--chart-color-5) !important; }
.mud-chart .mud-chart-legend .mud-chart-legend-item:nth-child(6) .mud-chart-legend-marker { background-color: var(--chart-color-6) !important; }