
/*
Sentinel V5.6 — Light & Simplified Equipment Dashboard
Non-destructive visual override. Existing dashboard structure, API hooks
and JavaScript IDs remain intact.
*/

:root {
    --light-bg: #eef3f7;
    --light-surface: #ffffff;
    --light-surface-soft: #f7fafc;
    --light-border: #dbe5ec;
    --light-border-strong: #c9d8e2;
    --light-text: #173042;
    --light-text-soft: #587286;
    --light-text-faint: #7890a1;
    --light-accent: #167aa5;
    --light-good: #158f68;
    --light-warn: #b87a13;
    --light-critical: #b54b4b;
    --light-shadow: 0 12px 30px rgba(26, 55, 73, 0.08);
}

/* Overall palette */
body {
    background:
        radial-gradient(circle at top right, rgba(93, 175, 214, 0.10), transparent 28rem),
        var(--light-bg) !important;
    color: var(--light-text) !important;
}

.app-shell,
.main-content,
.dashboard-content,
.dashboard-main,
.content-area {
    background: transparent !important;
}

/* Top header */
.topbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--light-border) !important;
    box-shadow: 0 4px 18px rgba(31, 62, 80, 0.05) !important;
}

.topbar h1,
.topbar strong,
.equipment-title h1,
.equipment-title strong {
    color: var(--light-text) !important;
}

.topbar span,
.equipment-meta,
.equipment-meta span,
.eyebrow {
    color: var(--light-text-soft) !important;
}

.online-status {
    background: #f4fbf8 !important;
    border: 1px solid #d8eee5 !important;
}

.online-status strong {
    color: var(--light-good) !important;
}

.online-status span {
    color: #648177 !important;
}

/* Sidebar — lighter and simpler */
.sidebar {
    background: #f8fbfd !important;
    border-right: 1px solid var(--light-border) !important;
    box-shadow: none !important;
}

.sidebar-nav,
.sidebar-section {
    gap: 6px !important;
}

.sidebar-nav a,
.sidebar-nav button,
.nav-item,
.sidebar .tab-button {
    min-height: 44px !important;
    padding: 11px 14px !important;
    color: var(--light-text-soft) !important;
    font-size: 0.86rem !important;
    border-radius: 11px !important;
}

.sidebar-nav a.active,
.sidebar-nav button.active,
.nav-item.active,
.sidebar .tab-button.active {
    color: var(--light-accent) !important;
    background: #eaf5fa !important;
    border-color: #cfe5ef !important;
}

.global-return {
    color: var(--light-accent) !important;
    background: #edf7fb !important;
    border-color: #d4e8f1 !important;
    font-size: 0.80rem !important;
}

/* New intro */
.dashboard-light-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.84);
    border: 1px solid var(--light-border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(31,62,80,.05);
}

.dashboard-light-intro > div {
    display: grid;
    gap: 4px;
}

.dashboard-light-kicker {
    color: var(--light-text-faint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dashboard-light-intro strong {
    color: var(--light-text);
    font-size: 1rem;
    line-height: 1.4;
}

.dashboard-light-badge {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: var(--light-accent);
    background: #edf7fb;
    border: 1px solid #d3e8f1;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

/* Cards */
.card,
.panel,
.metric-card,
.health-card,
.chart-card,
.analysis-card,
.brain-card,
.summary-card,
.info-card,
.dashboard-card,
.detail-card,
section[class*="card"],
article[class*="card"] {
    background: var(--light-surface) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow) !important;
}

/* Typography: never tiny */
.card-label,
.section-label,
.metric-label,
small,
.meta,
.subtitle,
.caption,
.muted,
.text-muted {
    color: var(--light-text-soft) !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
}

.card h2,
.card h3,
.panel h2,
.panel h3,
section h2,
section h3,
article h2,
article h3 {
    color: var(--light-text) !important;
}

p,
li,
td,
th,
button,
select,
input,
label {
    font-size: max(0.82rem, 13px) !important;
}

/* Key values larger */
.metric-value,
.big-value,
.temperature-value,
.health-score-value,
.score-value,
.current-value,
[data-role="primary-value"] {
    color: var(--light-text) !important;
    font-size: clamp(1.7rem, 2.7vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
}

/* Dashboard cards: more breathing room */
.dashboard-grid,
.overview-grid,
.metrics-grid,
.summary-grid,
.brain-grid,
.sensor-grid,
.details-grid {
    gap: 16px !important;
}

.card,
.panel,
.metric-card,
.health-card,
.analysis-card,
.brain-card,
.summary-card,
.info-card,
.dashboard-card {
    padding: 20px !important;
    border-radius: 16px !important;
}

/* Tabs become primary navigation. */
.tabs,
.tab-list,
.section-tabs,
.dashboard-tabs {
    gap: 8px !important;
    padding: 7px !important;
    background: #f4f8fb !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 14px !important;
}

.tabs button,
.tab-list button,
.section-tabs button,
.dashboard-tabs button {
    min-height: 42px !important;
    padding: 10px 16px !important;
    color: var(--light-text-soft) !important;
    background: transparent !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
}

.tabs button.active,
.tab-list button.active,
.section-tabs button.active,
.dashboard-tabs button.active {
    color: var(--light-accent) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(31,62,80,.06) !important;
}

/* Charts */
svg,
canvas {
    background: #fbfdfe !important;
    border-radius: 12px !important;
}

.chart-axis,
.grid-line,
.axis-line {
    stroke: #dce7ed !important;
}

/* Tables */
table {
    background: var(--light-surface) !important;
}

th {
    color: var(--light-text-faint) !important;
    background: #f7fafc !important;
    font-size: 0.72rem !important;
}

td {
    color: var(--light-text) !important;
}

th,
td {
    padding: 12px 10px !important;
    border-color: #e5edf2 !important;
}

/* Form controls */
select,
input,
textarea {
    color: var(--light-text) !important;
    background: #ffffff !important;
    border-color: var(--light-border-strong) !important;
}

/* Status colors preserved but softened */
.status-good,
.health-good,
.badge-good,
.ok,
.healthy {
    color: var(--light-good) !important;
}

.status-warning,
.health-warning,
.badge-warning,
.warning {
    color: var(--light-warn) !important;
}

.status-critical,
.health-critical,
.badge-critical,
.critical,
.alarm {
    color: var(--light-critical) !important;
}

/* Reduce visual noise from very technical secondary elements on overview.
   They remain available in their dedicated tabs. */
body[data-active-tab="overview"] .technical-only,
body[data-active-tab="overview"] .expert-only,
body[data-active-tab="overview"] .raw-data,
body[data-active-tab="overview"] .secondary-technical {
    display: none !important;
}

/* Scrollbar */
* {
    scrollbar-color: #b9cbd7 #edf3f7;
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-light-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-light-badge {
        align-self: flex-start;
    }

    .card,
    .panel,
    .metric-card,
    .health-card,
    .analysis-card,
    .brain-card,
    .summary-card,
    .info-card,
    .dashboard-card {
        padding: 16px !important;
    }
}
