:root {
  --navy-950: #06162b;
  --navy-900: #0a203d;
  --navy-800: #12365f;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --cyan: #0891b2;
  --teal: #0f766e;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --purple: #7c3aed;
  --bg: #f3f6fb;
  --text: #172033;
  --muted: #667085;
  --border: #e4e9f1;
  --card: #ffffff;
  --shadow: 0 8px 28px rgba(15, 23, 42, .065);
  --sidebar-width: 268px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.app-body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; overflow-x: hidden; }
a { color: var(--blue); }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); min-width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, #12345b 100%);
  color: #fff; display: flex; flex-direction: column; z-index: 1030;
  box-shadow: 8px 0 30px rgba(15, 23, 42, .16); overflow: hidden;
}
.brand-wrap { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #06b6d4); display: grid; place-items: center; font-size: 23px; box-shadow: 0 8px 20px rgba(6,182,212,.22); }
.brand-copy { min-width: 0; }
.brand-title { font-weight: 800; font-size: 18px; white-space: nowrap; }
.brand-subtitle { font-size: 11px; color: #a8bdd5; letter-spacing: .045em; white-space: nowrap; }
.sidebar-close { margin-left: auto; border: 0; color: #fff; background: transparent; font-size: 18px; }

.sidebar-nav { flex: 1; min-height: 0; padding: 13px 12px 18px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 999px; }
.sidebar-nav .nav-link { display: flex; align-items: center; min-width: 0; gap: 11px; color: #cad7e7; border-radius: 10px; padding: 9px 12px; margin: 2px 0; font-size: 13px; font-weight: 600; text-decoration: none; transition: .15s ease; }
.sidebar-nav .nav-link i { width: 20px; min-width: 20px; font-size: 16px; text-align: center; }
.sidebar-nav .nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { color: #fff; background: rgba(96,165,250,.17); }
.sidebar-nav .nav-link.active { box-shadow: inset 3px 0 #60a5fa; background: rgba(37,99,235,.27); }
.sidebar-nav .nav-link-primary { padding: 11px 12px; font-size: 14px; margin-bottom: 8px; }

.nav-group { border-top: 1px solid rgba(255,255,255,.07); padding-top: 7px; margin-top: 7px; }
.nav-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; cursor: pointer; padding: 9px 10px 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .075em; user-select: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nav-group summary > span i { color: #7dd3fc; font-size: 15px; }
.group-chevron { font-size: 11px; color: #8fa9c5; transition: transform .18s ease; }
.nav-group[open] .group-chevron { transform: rotate(180deg); }
.nav-group-links { padding-left: 5px; }

.sidebar-user { flex: none; padding: 13px 15px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.09); }
.avatar { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; display: grid; place-items: center; font-weight: 800; }
.avatar-lg { width: 52px; height: 52px; min-width: 52px; font-size: 20px; }
.user-name { font-size: 13px; font-weight: 750; }
.user-role { font-size: 10px; color: #9fb6d1; letter-spacing: .05em; }
.sidebar-backdrop { display: none; }

.main-panel { margin-left: var(--sidebar-width); min-width: 0; width: calc(100% - var(--sidebar-width)); }
.topbar { height: 82px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 26px; position: sticky; top: 0; z-index: 1010; backdrop-filter: blur(8px); }
.topbar-title { min-width: 0; }
.page-title { font-size: 22px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; background: #ecfdf3; color: #027a48; border: 1px solid #abefc6; padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 4px rgba(18,183,106,.12); }
.content-area { padding: 24px 26px 44px; max-width: 1900px; margin: 0 auto; min-width: 0; }

.panel-card, .kpi-card, .progress-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.panel-card { padding: 21px; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 13px; }
.kpi-card { min-width: 0; padding: 16px; display: flex; align-items: center; gap: 12px; }
.kpi-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; }
.kpi-icon.blue { background:#eff6ff; color:#2563eb; }
.kpi-icon.green { background:#ecfdf3; color:#039855; }
.kpi-icon.amber { background:#fffaeb; color:#dc6803; }
.kpi-icon.red { background:#fef3f2; color:#d92d20; }
.kpi-icon.purple { background:#f4f3ff; color:#6938ef; }
.kpi-icon.teal { background:#ecfeff; color:#0e7490; }
.kpi-label { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.kpi-value { font-size: 24px; font-weight: 820; line-height: 1.12; }
.kpi-note { font-size: 10.5px; color: #98a2b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 16px; }
.panel-header h3, .section-title { font-size: 16px; font-weight: 800; margin: 0; }
.panel-header p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.chart-wrap { height: 285px; position: relative; }
.chart-wrap.compact { height: 250px; }
.chart-wrap.mini { height: 145px; }
.workflow-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 6px 0 4px; }
.workflow-summary > div { background:#f8fafc; border:1px solid var(--border); border-radius:12px; padding:9px; text-align:center; }
.workflow-summary strong { display:block; font-size:18px; }
.workflow-summary small { display:block; color:var(--muted); font-size:10px; }
.workflow-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.workflow-dot.checked { background:#0ea5e9; }.workflow-dot.reviewed { background:#8b5cf6; }.workflow-dot.closed { background:#16a34a; }

.modern-table { font-size: 12.5px; --bs-table-bg: transparent; }
.modern-table thead th { background:#f8fafc; color:#475467; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); padding:12px 13px; white-space:nowrap; }
.modern-table tbody td { padding:12px 13px; border-color:#edf1f6; vertical-align:middle; }
.modern-table tbody tr:hover { background:#fafcff; }
.table-title, .result-summary { max-width: 330px; }
.category-health-table { max-height: 390px; }

.status-badge, .method-pill, .severity-badge, .workflow-badge, .maintenance-pill, .criticality, .category-chip { display:inline-flex; align-items:center; justify-content:center; max-width:100%; padding:5px 9px; border-radius:999px; font-size:9.5px; font-weight:800; letter-spacing:.025em; white-space:nowrap; }
.status-large { padding:8px 12px; font-size:11px; }
.status-pass, .status-active, .status-resolved, .status-closed { background:#dcfae6; color:#067647; }
.status-warning, .status-pending, .status-open { background:#fef0c7; color:#b54708; }
.status-fail, .status-overdue, .status-disabled { background:#fee4e2; color:#b42318; }
.status-na { background:#f2f4f7; color:#475467; }
.status-in_progress { background:#e0f2fe; color:#0369a1; }
.method-automated { background:#dbeafe; color:#1d4ed8; }.method-hybrid { background:#ede9fe; color:#6d28d9; }.method-manual { background:#f1f5f9; color:#475569; }
.workflow-pending { background:#f2f4f7; color:#475467; }.workflow-checked { background:#e0f2fe; color:#0369a1; }.workflow-reviewed { background:#ede9fe; color:#6d28d9; }.workflow-closed { background:#dcfae6; color:#067647; }
.maintenance-required { background:#fef0c7; color:#b54708; }.maintenance-planned { background:#dbeafe; color:#1d4ed8; }.maintenance-in_progress { background:#ede9fe; color:#6d28d9; }.maintenance-completed { background:#dcfae6; color:#067647; }.maintenance-deferred { background:#fee4e2; color:#b42318; }.maintenance-not_required { background:#f2f4f7; color:#475467; }
.category-chip { background:#eef4ff; color:#3448a4; border:1px solid #d9e3ff; }
.criticality-critical { background:#7f1d1d; color:#fff; }.criticality-high { background:#fee4e2; color:#b42318; }.criticality-medium { background:#fef0c7; color:#b54708; }.criticality-low { background:#e0f2fe; color:#0369a1; }
.severity-low { background:#e0f2fe; color:#0369a1; }.severity-medium { background:#fef0c7; color:#b54708; }.severity-high { background:#fee4e2; color:#b42318; }.severity-critical { background:#7f1d1d; color:#fff; }

.exception-list { display:flex; flex-direction:column; }
.exception-item { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--border); color:inherit; text-decoration:none; }
.exception-item:last-child { border:0; }.exception-item:hover { color:#1d4ed8; }
.dashboard-exceptions { max-height: 390px; overflow-y:auto; }
.severity-dot { width:9px; height:9px; border-radius:50%; margin-top:7px; flex:none; }
.severity-dot.severity-low { background:#0ea5e9; }.severity-dot.severity-medium { background:#f59e0b; }.severity-dot.severity-high { background:#ef4444; }.severity-dot.severity-critical { background:#7f1d1d; box-shadow:0 0 0 4px #fee2e2; }
.empty-state { text-align:center; color:#98a2b3; padding:34px!important; }

.progress-card { padding:17px 19px; height:100%; }
.progress-bar { background:linear-gradient(90deg,#2563eb,#06b6d4); }
.eyebrow { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:#2563eb; font-weight:800; margin-bottom:5px; }
.detail-list dt { font-size:10.5px; color:#667085; text-transform:uppercase; letter-spacing:.04em; margin-top:14px; }
.detail-list dd { margin:4px 0 0; white-space:pre-wrap; }
.settings-grid { display:grid; grid-template-columns:170px 1fr; gap:11px 18px; }.settings-grid dt { color:#667085; font-weight:600; }.settings-grid dd { margin:0; }
.report-hero { display:flex; gap:18px; align-items:center; }.report-icon { width:70px; height:70px; min-width:70px; border-radius:18px; background:#ecfdf3; color:#039855; display:grid; place-items:center; font-size:35px; }.feature-list { list-style:none; padding:0; margin:0; }.feature-list li { padding:9px 0; border-bottom:1px solid var(--border); }.feature-list i { color:#12b76a; margin-right:8px; }

.health-meter { width:105px; height:7px; background:#e8edf4; border-radius:999px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:7px; }
.health-meter.lg { width:100%; height:8px; margin:0; }.health-meter-bar { height:100%; background:linear-gradient(90deg,#0ea5e9,#16a34a); border-radius:inherit; }
.hero-strip { border-radius:18px; padding:24px 26px; color:#fff; background:linear-gradient(125deg,#0a203d,#164b7b 68%,#0e7490); display:flex; align-items:center; justify-content:space-between; gap:20px; box-shadow:var(--shadow); }.hero-strip h2 { font-size:24px; font-weight:800; margin:0 0 6px; }.hero-strip p { margin:0; color:#d7e7f6; max-width:880px; }
.infrastructure-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.infra-card { color:inherit; text-decoration:none; background:#fff; border:1px solid var(--border); border-radius:15px; padding:17px; box-shadow:var(--shadow); transition:.16s ease; min-width:0; }.infra-card:hover { transform:translateY(-2px); border-color:#b8cdfc; color:inherit; }.infra-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }.infra-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#eef4ff; color:#2563eb; font-size:18px; }.infra-card h3 { font-size:15px; font-weight:800; margin:14px 0 3px; }.infra-card p { font-size:11px; color:var(--muted); min-height:33px; margin-bottom:12px; }.infra-metrics { display:flex; justify-content:space-between; gap:7px; margin-top:11px; color:var(--muted); font-size:10px; }.infra-metrics strong { color:var(--text); }

.maintenance-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.maintenance-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:19px; box-shadow:var(--shadow); min-width:0; }.maintenance-card h3 { font-size:15px; font-weight:800; margin:3px 0 0; }.maintenance-card h3 a { text-decoration:none; color:var(--text); }.maintenance-card h3 a:hover { color:var(--blue); }.maintenance-card p { color:var(--muted); font-size:12px; min-height:38px; margin:14px 0; }.maintenance-meta { display:flex; flex-wrap:wrap; gap:8px 12px; font-size:10.5px; color:var(--muted); margin-top:13px; }.maintenance-meta i { margin-right:4px; }
.maintenance-box { border:1px solid #dbe6f5; background:#f8fbff; border-radius:13px; padding:16px; }.maintenance-box .is-disabled { opacity:.45; pointer-events:none; }

.workflow-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.workflow-step { border:1px solid var(--border); border-radius:13px; padding:13px; display:flex; gap:10px; align-items:flex-start; opacity:.5; background:#fafbfc; }.workflow-step.active { opacity:1; border-color:#bdd0ff; background:#f5f8ff; }.workflow-step > span { width:26px; height:26px; min-width:26px; border-radius:50%; display:grid; place-items:center; background:#dfe6ef; color:#667085; font-size:11px; font-weight:800; }.workflow-step.active > span { background:#2563eb; color:#fff; }.workflow-step strong { display:block; font-size:11px; }.workflow-step small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }

.filter-grid { display:grid; grid-template-columns:1.4fr repeat(4,minmax(135px,.8fr)) auto; gap:12px; align-items:end; width:100%; }.controls-filter { grid-template-columns:1.35fr repeat(4,minmax(120px,.7fr)) auto; }.filter-actions { display:flex; gap:7px; align-items:center; }
.user-card h4 { font-size:17px; font-weight:800; }

.auth-page { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; background:#fff; }.auth-page-simple { grid-template-columns:1fr; background:linear-gradient(135deg,#eaf2ff,#f7f9fc); }.auth-visual { background:linear-gradient(rgba(3,20,43,.76),rgba(3,20,43,.88)),url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1600&q=80') center/cover; align-items:center; padding:8vw; color:#fff; }.auth-overlay { max-width:670px; }.auth-brand { font-weight:750; font-size:20px; margin-bottom:55px; }.auth-brand i { color:#60a5fa; }.auth-overlay h1 { font-size:45px; line-height:1.15; font-weight:780; margin-bottom:20px; }.auth-overlay p { font-size:18px; color:#c8d6e8; max-width:600px; margin-bottom:35px; }.auth-feature { padding:8px 0; color:#d7e3f2; }.auth-feature i { color:#38bdf8; margin-right:9px; }.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding:30px; }.auth-card { width:100%; max-width:460px; background:#fff; padding:36px; border-radius:20px; }.auth-page-simple .auth-card { box-shadow:0 20px 70px rgba(15,23,42,.12); }.auth-logo { width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,#2563eb,#0891b2); color:#fff; display:grid; place-items:center; font-size:27px; margin-bottom:22px; }.auth-card h2 { font-weight:780; }

.form-control, .form-select, .input-group-text { border-color:#d8dee8; font-size:13px; }.form-label { font-size:11.5px; font-weight:700; color:#475467; margin-bottom:5px; }.form-control:focus, .form-select:focus { border-color:#84adff; box-shadow:0 0 0 .2rem rgba(37,99,235,.12); }.btn { font-size:12.5px; font-weight:650; }.btn-primary { background:#2563eb; border-color:#2563eb; }.btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; }.font-monospace { font-size:12px; }.run-row td { min-height:72px; }

@media (max-width: 1500px) {
  .dashboard-kpis { grid-template-columns:repeat(3,1fr); }
  .infrastructure-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 1199px) {
  :root { --sidebar-width: 248px; }
  .content-area { padding:21px; }
  .dashboard-kpis { grid-template-columns:repeat(3,1fr); }
  .maintenance-board { grid-template-columns:repeat(2,1fr); }
  .filter-grid, .controls-filter { grid-template-columns:repeat(3,1fr); }
  .filter-actions { grid-column:auto; }
}
@media (max-width: 991px) {
  .sidebar { transform:translateX(-100%); transition:.22s ease; }
  .sidebar.show { transform:translateX(0); }
  .sidebar-backdrop { position:fixed; inset:0; background:rgba(2,10,23,.48); z-index:1025; }
  .sidebar-backdrop.show { display:block; }
  .main-panel { margin-left:0; width:100%; }
  .content-area { padding:18px; }
  .topbar { padding:0 17px; }
  .auth-page { grid-template-columns:1fr; }.auth-overlay h1 { font-size:36px; }
  .infrastructure-grid { grid-template-columns:repeat(2,1fr); }
  .workflow-timeline { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767px) {
  .dashboard-kpis { grid-template-columns:repeat(2,1fr); }
  .maintenance-board, .infrastructure-grid { grid-template-columns:1fr; }
  .filter-grid, .controls-filter { grid-template-columns:1fr 1fr; }
  .hero-strip { align-items:flex-start; flex-direction:column; }.hero-strip h2 { font-size:21px; }
}
@media (max-width: 575px) {
  .content-area { padding:13px; }.topbar { height:74px; }.page-title { font-size:18px; }.page-date { display:none; }.live-pill { display:none; }.panel-card { padding:16px; }
  .dashboard-kpis { grid-template-columns:1fr; }.filter-grid, .controls-filter { grid-template-columns:1fr; }.filter-actions { width:100%; }.filter-actions .btn { flex:1; }
  .workflow-timeline { grid-template-columns:1fr; }.settings-grid { grid-template-columns:1fr; gap:3px; }.settings-grid dd { margin-bottom:12px; }
}