/* KATA tecnológico refinado — shared visual language for every KPS module. */
:root {
  --kata-bg: #d4e2ea;
  --kata-panel: #fcfdfe;
  --kata-card-tint: #edf3f7;
  --kata-border: #b6c9d5;
  --kata-ink: #15394d;
  --kata-text: var(--kata-ink);
  --kata-muted: #4f6878;
  --kata-card-shadow: 0 5px 16px #163a5014;
  --kata-shadow: var(--kata-card-shadow);
  --kata-topbar: #10354a;
  --kata-sidebar: #153e54;
  --kata-accent: #007f8b;
  --blue: var(--kata-ink);
  --ink: var(--kata-ink);
  --teal: var(--kata-accent);
  --line: var(--kata-border);
  --muted: var(--kata-muted);
  --red: #b52b4d;
  --shadow: var(--kata-card-shadow);
  color: var(--kata-ink);
  background: var(--kata-bg);
  color-scheme: light;
}

body, body .shell, body .workspace { background: var(--kata-bg); }
body { color: var(--kata-ink); }
body .workspace { transition: margin-left .18s ease; }
body h1, body h2, body h3 { color: inherit; }
body h1 { letter-spacing: -.6px; }
body a { color: #076d80; }
body .muted, body .field, body .eyebrow { color: var(--kata-muted); }
body .page-head > div > p { color: var(--kata-muted); }
body .module-page-head h1, body .module-operation-name { color: var(--kata-ink); }
body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #008c9a;
  outline-offset: 3px;
}

/* Dark chrome keeps navigation distinct from the light work surfaces. */
body .topbar {
  color: #edf5f9;
  background: var(--kata-topbar);
  border-bottom-color: #0b2c40;
  box-shadow: 0 2px 8px #102f4017;
}
body .topbar .breadcrumb, body .topbar .connection,
body .topbar .operation-picker { color: #dce9f0; }
body .topbar .btn, body .topbar .operation-picker select {
  color: #eff7fb;
  background: #214a60;
  border-color: #4c7185;
}
body .topbar .btn:hover:not(:disabled),
body .topbar .operation-picker select:hover { background: #2a596e; }
body .topbar select option { color: var(--kata-ink); background: var(--kata-panel); }
body .topbar .connection.offline { color: #ffb5c6; }
body .topbar .connection i { background: #40c5ab; }
body .topbar .connection.offline i { background: #f3819c; }
body .topbar .header-logo, body .sidebar-brand img {
  filter: brightness(0) invert(1);
}
body .topbar .header-more-panel {
  color: var(--kata-ink);
  background: var(--kata-panel);
  border-color: var(--kata-border);
  box-shadow: 0 10px 28px #102f4033;
}
body .topbar .header-more-panel .btn,
body .topbar .header-more-panel .operation-picker select {
  color: var(--kata-ink);
  background: var(--kata-panel);
  border-color: var(--kata-border);
}
body .topbar .header-more-panel .btn:hover:not(:disabled) { background: #edf4f7; }
body .topbar .header-more-panel .operation-picker,
body .topbar .header-more-panel .connection { color: var(--kata-muted); }
body .topbar .testing-badge { background: #fff1ce; border-color: #e7c373; color: #80510a; }
body .environment { background: #c5d7e2; color: #35576b; }
body .sidebar { color: #edf5f9; background: var(--kata-sidebar); box-shadow: 8px 0 24px #102f4026; }
body .sidebar-brand { background: var(--kata-topbar); border-bottom: 1px solid #365a70; }
body .sidebar-brand > a, body .sidebar-brand > .btn { color: #edf5f9; }
body .sidebar-brand > .btn { background: transparent; border-color: transparent; }
body .sidebar-brand > .btn:hover { background: #294e62; }
body .sidebar-brand span { color: #bfd1dc; }
body .sidebar-context { color: #bdced9; }
body .nav-label { color: #a9c1ce; }
body .sidebar .nav-link { color: #e0ecf2; background: transparent; border: 1px solid transparent; }
body .sidebar .nav-link:hover { background: #234f66; color: #fff; }
body .sidebar .nav-link.active {
  color: #fff;
  background: #087e8b;
  border-color: #36a2ad;
  box-shadow: 0 2px 7px #082f4021;
}
body .sidebar footer { background: #103449; border-top: 1px solid #365a70; }
body .sidebar footer > span { color: #bfd1dc; }
body .sidebar footer .btn { color: #edf5f9; background: #214a60; border-color: #4c7185; }
body .menu-overlay { background: #102e4359; }
@media (min-width: 1280px) {
  body .sidebar { width: 260px; }
  body .sidebar-brand { min-height: 110px; padding: 28px 15px 18px; }
  body .sidebar-brand img { width: 146px; }
  body .sidebar-brand span { font-size: 9px; }
  body .sidebar-body { padding: 8px 10px 16px; }
  body .sidebar-context { font-size: 10px; }
  body .sidebar .nav-link { padding: 10px 11px; gap: 10px; font-size: 12px; }
  body .sidebar footer { padding: 12px 15px; gap: 2px 7px; }
}
body.layout-focus-active .sidebar { display: none; }
body.layout-focus-active .workspace { margin-left: 0; }

/* Panels and statistics use opaque surfaces, including over media. */
body .panel, body .operation-card, body .work-panel, body .work-context,
body .filters, body .process-session-tools, body .overview-controls,
body .route-line, body .module-document, body .online-instructions {
  color: var(--kata-ink);
  background: var(--kata-panel);
  border-color: var(--kata-border);
  box-shadow: var(--kata-card-shadow);
}
body .panel, body .work-panel, body .work-context, body .filters,
body .module-document { border-radius: 11px; }
body .identity { color: var(--kata-ink); background: var(--kata-panel); border-color: var(--kata-border); }
body .identity p, body .kpis span, body .bar-time > span,
body .bar-time small { color: var(--kata-muted); }
body .operation-card:hover { border-color: #6c9db1; }
body .module-stats > div {
  color: var(--kata-ink);
  background: var(--kata-panel);
  border: 1px solid var(--kata-border);
  border-top: 3px solid #79a5b8;
  border-radius: 10px;
  box-shadow: var(--kata-card-shadow);
}
body .module-stats span { color: var(--kata-muted); font-weight: 550; }
body .module-stats strong { color: var(--kata-ink); font-variant-numeric: tabular-nums; }
body .current-step { background: #e6f1f4; color: var(--kata-ink); }
body .station-url { background: #e7f0f5; border-color: var(--kata-border); }
body .module-document .quality-point { color: #14697c; }
body .module-document .safety-point { color: #8d601a; }
body .steps li { background: #f0f5f8; border-color: #c7d7e0; }
body .steps li > span { background: #dde9f0; }
body .steps li.current { background: #e0f0ef; border-left-color: var(--kata-accent); }
body .steps li.current > span { color: #fff; background: var(--kata-accent); }

/* Shared controls; production commands keep their established state colors. */
body .btn { color: var(--kata-ink); background: var(--kata-panel); border-color: var(--kata-border); border-radius: 7px; }
body .btn:where(:not(.start):not(.done):not(.help):not(.end):not(.primary):not(.active):not(.danger):not(.required):not(.waived):not(.calendar-event):not(.audit-appointment)):hover:not(:disabled) {
  background: #eaf2f6;
  border-color: #7ba1b4;
}
body .btn.primary { color: #fff; background: var(--kata-accent); border-color: var(--kata-accent); }
body .btn.primary:hover:not(:disabled) { background: #006e79; border-color: #006e79; }
body .btn.active, body .tabs .btn.active,
body .chart-periods .btn.active { color: #fff; background: var(--kata-ink); border-color: var(--kata-ink); }
body .btn.active:hover:not(:disabled) { color: #fff; background: #24576d; }
body .btn.danger { color: #a82546; background: #fff0f3; border-color: #d7a6b4; }
body .controls .start { color: #fff; background: var(--kata-accent); border-color: var(--kata-accent); }
body .controls .done { color: #fff; background: var(--kata-ink); border-color: var(--kata-ink); }
body .controls .help, body .process-session-tools .help,
body .operation-summary-actions .help, body .operation-summary-status .help {
  color: #fff; background: var(--red); border-color: var(--red);
}
body .controls .end { color: #506c7c; background: #eaf0f4; border-color: #bfced8; }
body .chart-periods .btn { color: #385a6c; background: #e7f0f5; }
body .module b { color: #006d7a; background: #e0f0f2; }
body .module.required, body .gate.required { color: #a32848; background: #fff0f4; border-color: #c44b66; }
body .gate.waived, body .module.waived { color: #80510a; background: #fff6df; border-color: #d6b875; }

body input, body select, body textarea {
  color: var(--kata-ink);
  background: var(--kata-panel);
  border-color: #acc3d1;
  accent-color: var(--kata-accent);
}
body .field input, body .field select, body .field textarea { color: var(--kata-ink); }
body input::placeholder, body textarea::placeholder { color: #688190; opacity: 1; }
body input:disabled, body select:disabled, body textarea:disabled { background: #eaf0f4; color: #617b89; }
body fieldset { color: var(--kata-ink); background: var(--kata-panel); border-color: #b9ceda; }
body legend { color: #244e65; }
body .check { color: var(--kata-ink); }

/* Tables, calendars, and detailed module screens share the same hierarchy. */
body table { color: var(--kata-ink); }
body th { color: #3a596c; background: #e6eef4; border-bottom: 1px solid #b6c9d5; font-weight: 650; }
body td { border-bottom-color: #d4e0e8; }
body .table-wrap { border-radius: 7px; }
body tbody tr:nth-child(even) { background: #f4f8fb; }
body tbody tr:hover { background: #edf5f8; }
body details table { background: #f0f5f8; }
body caption { color: var(--kata-ink); }
body details > summary { color: #275970; }
body .calendar-table td, body .audit-day { background: var(--kata-panel); border-color: #bfd0db; }
body .calendar-table .outside, body .audit-day.empty-day { background: #e8eff4; color: #718591; }
body .audit-calendar { border-color: #bfd0db; }
body .audit-weekday { color: #36596d; background: #e6eef4; border-color: #bfd0db; }
body .calendar-day { color: #355b71; }
body .calendar-event.btn, body .audit-appointment { color: #174b5d; background: #e4f1f3; border-color: #a6cdd4; }
body .audit-appointment.audit-nok { color: #895a16; background: #fff2de; border-color: #ddc28d; }
body .cmms .cm-calendar .cm-today { background: #e8f4f5; box-shadow: inset 0 0 0 2px #178692; }
body .cmms .cm-calendar .cm-today > .calendar-day { color: #087783; }
body .cmms .cm-event-corrective { color: #8e2b47; background: #fff0f3; border-color: #bc4760; }
body .cmms .cm-event-preventive { color: #23645f; background: #e5f4f3; border-color: #238b83; }
body .cmms .cm-event-predictive { color: #5e4b83; background: #f0edfa; border-color: #8570ad; }
body .cmms .cm-forecast { background: var(--kata-panel); }
body .chart .chart-svg text { fill: #466474; }
body .chart-note, body .chart-legend { color: var(--kata-muted); }

/* Dialogs stay clear and responsive without filtering the underlying video. */
body dialog, body dialog.help-classification {
  color: var(--kata-ink);
  background: var(--kata-panel);
  border-color: #9fb9ca;
  box-shadow: 0 18px 60px #102e4340;
}
body dialog::backdrop, body dialog.help-classification::backdrop {
  background: #102e436b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body .dialog-head, body .dialog-foot { border-color: #c8d7e1; }
body .dialog-head h2 { color: var(--kata-ink); }
body .verification-item { background: var(--kata-panel); border-color: #b9ceda; }
body .help-fault-choices .btn { background: #f0f6f9; border-color: #b7cdd9; }
body .help-fault-choices small { color: var(--kata-muted); }
body .online-top { color: #fff; background: var(--kata-topbar); }
body .online-top h2, body .online-top h3, body .online-top strong { color: #fff; }
body .online-top p, body .online-top .kpis span { color: #d1e4ed; }
body .online-instructions { box-shadow: none; }
body .online-media { background: #092b3e; }

body .notice:not(.warning):not(.danger) { color: #24576b; background: #e5f1f4; border-color: var(--kata-accent); }
body .badge:not(.warning):not(.danger) { color: #096574; background: #dfedf1; }
body .form-error { color: #9c2041; background: #ffe9f0; }
body .testing-feedback { background: #e9f1f5; }
body .auth-page { background: linear-gradient(135deg, #c9dce7, #e1eaf0); }
body .auth-card { color: var(--kata-ink); background: var(--kata-panel); border-color: #abc2d0; box-shadow: 0 12px 36px #163a501f; }
body #toast { color: #fff; background: var(--kata-topbar); border: 1px solid #557e93; box-shadow: 0 8px 24px #102e4333; }
body #toast.error { background: #a72847; border-color: #cd657d; }

@media (prefers-reduced-motion: reduce) {
  body .workspace, body .sidebar { transition: none; }
}