/* ==========================================================================
   Tresch Automation Monitoring Platform — Apex Blazor Inspired Design System
   Brand Colors: Tresch Navy (#234f6e), Tresch Teal (#1a7896), Apex Emerald (#10b981)
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --radius: 0.625rem;
    --radius-lg: 0.75rem;
    --background: #f8fafc;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --topbar-bg: rgba(255, 255, 255, 0.9);
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --border: #e2e8f0;
    --border-subtle: #f1f5f9;
    --border-hover: #cbd5e1;

    /* Tresch & Apex Accents */
    --tresch-navy: #234f6e;
    --tresch-teal: #1a7896;
    --brand-heading: #234f6e;
    --primary: #1a7896;
    --primary-hover: #15627b;
    --primary-foreground: #ffffff;

    --emerald: #10b981;
    --emerald-bg: #ecfdf5;
    --emerald-text: #047857;
    --emerald-border: #a7f3d0;

    --amber: #f59e0b;
    --amber-bg: #fffbeb;
    --amber-text: #b45309;
    --amber-border: #fde68a;

    --rose: #ef4444;
    --rose-bg: #fef2f2;
    --rose-text: #b91c1c;
    --rose-border: #fecaca;

    --sky: #0284c7;
    --sky-bg: #f0f9ff;
    --sky-text: #0369a1;
    --sky-border: #bae6fd;

    --navy-badge-bg: rgba(35, 79, 110, 0.1);
    --navy-badge-text: #234f6e;
    --navy-badge-border: rgba(35, 79, 110, 0.25);

    --slate-bg: #f1f5f9;
    --slate-text: #334155;
    --slate-border: #cbd5e1;

    /* Grid Tokens */
    --grid-header-bg: #f8fafc;
    --grid-header-fg: #475569;
    --grid-row-hover: #f1f5f9;

    /* Sidebar Tokens (Apex Dark Sidebar) */
    --sidebar-bg: #0b111e;
    --sidebar-surface: #131c2e;
    --sidebar-border: #1e293b;
    --sidebar-fg: #94a3b8;
    --sidebar-fg-active: #ffffff;
    --sidebar-accent: #10b981;

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --background: #0b1120;
    --foreground: #f1f5f9;
    --card: #131c2e;
    --card-foreground: #f1f5f9;
    --topbar-bg: rgba(15, 23, 42, 0.88);
    --muted: #1e293b;
    --muted-foreground: #94a3b8;
    --border: #1e293b;
    --border-subtle: #1e293b;
    --border-hover: #334155;

    --tresch-navy: #234f6e;
    --tresch-teal: #38bdf8;
    --brand-heading: #38bdf8;
    --primary: #1a7896;
    --primary-hover: #228fb2;
    --primary-foreground: #ffffff;

    --emerald: #10b981;
    --emerald-bg: rgba(16, 185, 129, 0.14);
    --emerald-text: #34d399;
    --emerald-border: rgba(16, 185, 129, 0.35);

    --amber: #f59e0b;
    --amber-bg: rgba(245, 158, 11, 0.15);
    --amber-text: #fbbf24;
    --amber-border: rgba(245, 158, 11, 0.35);

    --rose: #ef4444;
    --rose-bg: rgba(239, 68, 68, 0.15);
    --rose-text: #f87171;
    --rose-border: rgba(239, 68, 68, 0.35);

    --sky: #38bdf8;
    --sky-bg: rgba(14, 165, 233, 0.15);
    --sky-text: #38bdf8;
    --sky-border: rgba(14, 165, 233, 0.35);

    --navy-badge-bg: rgba(56, 189, 248, 0.14);
    --navy-badge-text: #7dd3fc;
    --navy-badge-border: rgba(56, 189, 248, 0.32);

    --slate-bg: #1e293b;
    --slate-text: #cbd5e1;
    --slate-border: #334155;

    /* Grid Tokens */
    --grid-header-bg: #0f172a;
    --grid-header-fg: #94a3b8;
    --grid-row-hover: #1e293b;
}

html, body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.925rem;
    line-height: 1.5;
}

code, pre, .font-monospace {
    font-family: var(--font-mono);
}

a {
    color: var(--tresch-teal);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--tresch-navy);
}

/* ==========================================================================
   Page Header & Typography
   ========================================================================== */
.apex-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.apex-page-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--foreground);
    margin: 0;
}

.apex-page-subtitle {
    font-size: 0.84rem;
    color: var(--muted-foreground);
    margin-top: 0.2rem;
}

/* ==========================================================================
   Apex KPI Stat Cards
   ========================================================================== */
.apex-kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.apex-kpi-card:hover {
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.14);
    border-color: var(--border-hover, #cbd5e1);
}

.apex-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.apex-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
}

.apex-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apex-kpi-icon.teal {
    background-color: rgba(26, 120, 150, 0.16);
    color: var(--tresch-teal);
}

.apex-kpi-icon.navy {
    background-color: var(--navy-badge-bg);
    color: var(--navy-badge-text);
}

.apex-kpi-icon.emerald {
    background-color: rgba(16, 185, 129, 0.16);
    color: var(--emerald-text);
}

.apex-kpi-icon.amber {
    background-color: rgba(245, 158, 11, 0.16);
    color: var(--amber-text);
}

.apex-kpi-icon.rose {
    background-color: rgba(239, 68, 68, 0.16);
    color: var(--rose-text);
}

.apex-kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--foreground);
}

.apex-kpi-footer {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ==========================================================================
   Apex Content Cards & Panels
   ========================================================================== */
.apex-card,
.card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden;
}

.apex-card-header,
.card-header:not(.bg-dark) {
    background: var(--card) !important;
    color: var(--card-foreground);
    border-bottom: 1px solid var(--border) !important;
    padding: 1rem 1.25rem !important;
}

.card-body {
    padding: 1.25rem;
}

/* ==========================================================================
   Apex Segmented Filter Tabs
   ========================================================================== */
.apex-segmented {
    display: inline-flex;
    background-color: var(--muted);
    padding: 0.22rem;
    border-radius: 0.55rem;
    border: 1px solid var(--border);
    gap: 0.15rem;
}

.apex-segmented-btn {
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.32rem 0.75rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.apex-segmented-btn:hover {
    color: var(--foreground);
}

.apex-segmented-btn.active {
    background: var(--card);
    color: var(--brand-heading);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* ==========================================================================
   Apex Modern Soft Badges & Status Dots
   ========================================================================== */
.apex-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.24rem 0.62rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.apex-badge-emerald {
    background-color: var(--emerald-bg);
    color: var(--emerald-text);
    border-color: var(--emerald-border);
}

.apex-badge-rose {
    background-color: var(--rose-bg);
    color: var(--rose-text);
    border-color: var(--rose-border);
}

.apex-badge-amber {
    background-color: var(--amber-bg);
    color: var(--amber-text);
    border-color: var(--amber-border);
}

.apex-badge-sky {
    background-color: var(--sky-bg);
    color: var(--sky-text);
    border-color: var(--sky-border);
}

.apex-badge-navy {
    background-color: var(--navy-badge-bg);
    color: var(--navy-badge-text);
    border-color: var(--navy-badge-border);
}

.apex-badge-slate {
    background-color: var(--slate-bg);
    color: var(--slate-text);
    border-color: var(--slate-border);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background-color: var(--emerald);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.status-dot.offline {
    background-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.status-dot.warning {
    background-color: var(--amber);
}

/* ==========================================================================
   DevExpress Blazor Grid & Button Overrides (Apex Style)
   ========================================================================== */
.dxbl-grid {
    border: 1px solid var(--border) !important;
    border-radius: 0.6rem !important;
    overflow: hidden;
    font-size: 0.86rem !important;
    background-color: var(--card) !important;
    color: var(--card-foreground) !important;
}

.dxbl-grid-header-row {
    background-color: var(--grid-header-bg) !important;
    color: var(--grid-header-fg) !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.dxbl-grid-table > tbody > tr:hover > td {
    background-color: var(--grid-row-hover) !important;
}

[data-bs-theme="dark"] .dxbl-grid-table,
[data-bs-theme="dark"] .dxbl-grid-table > tbody > tr > td,
[data-bs-theme="dark"] .dxbl-grid-header-row > th,
[data-bs-theme="dark"] .dxbl-grid-filter-row > td,
[data-bs-theme="dark"] .dxbl-grid-bottom-panel {
    background-color: var(--card) !important;
    color: var(--card-foreground) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .dxbl-grid-header-row > th {
    background-color: var(--grid-header-bg) !important;
    color: var(--grid-header-fg) !important;
}

[data-bs-theme="dark"] .dxbl-modal-content,
[data-bs-theme="dark"] .dxbl-popup-header,
[data-bs-theme="dark"] .dxbl-popup-body,
[data-bs-theme="dark"] .dxbl-popup-footer {
    background-color: var(--card) !important;
    color: var(--card-foreground) !important;
    border-color: var(--border) !important;
}

[data-bs-theme="dark"] .dxbl-text-edit,
[data-bs-theme="dark"] .dxbl-text-edit-input,
[data-bs-theme="dark"] .dxbl-spin-edit,
[data-bs-theme="dark"] .dxbl-memo-edit {
    background-color: #0f172a !important;
    color: var(--foreground) !important;
    border-color: var(--border-hover) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--muted) !important;
    color: var(--foreground) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--card) !important;
    color: var(--card-foreground) !important;
}

[data-bs-theme="dark"] .text-dark:not(.badge):not(.btn) {
    color: var(--foreground) !important;
}

[data-bs-theme="dark"] .badge.bg-light.text-dark {
    background-color: var(--muted) !important;
    color: var(--foreground) !important;
    border-color: var(--border-hover) !important;
}

.btn-primary,
.dxbl-btn.dxbl-btn-primary {
    background-color: var(--tresch-navy) !important;
    border-color: var(--tresch-navy) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.dxbl-btn.dxbl-btn-primary:hover {
    background-color: #1a7896 !important;
    border-color: #1a7896 !important;
}

.btn-info,
.dxbl-btn.dxbl-btn-info {
    background-color: #1a7896 !important;
    border-color: #1a7896 !important;
    color: #ffffff !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}