/* Koppla-inspired light operations UI — navy, mint, white cards */
:root {
  --koppla-navy: #003b4d;
  --koppla-navy-deep: #002b3a;
  --koppla-mint: #70f3d2;
  --koppla-orange: #f5a623;
  --koppla-paper: #f3f6f7;
  --koppla-line: #d7e0e4;
  --bg: #f3f6f7;
  --card: #ffffff;
  --text: #12323c;
  --muted: #5c7178;
  --accent: #003b4d;
  --accent-soft: #70f3d2;
  --etco-red: #e85d04;
  --ok: #0f9f6e;
  --warn: #f5a623;
  --err: #e11d48;
  --brand-panel: #ffffff;
  --sidebar-w: 240px;
  --sidebar-bg: #003b4d;
  --sidebar-active: #70f3d2;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}

body.admin-body {
  background: var(--bg);
}

/* PIN / field login: navy canvas like my.koppla.de */
body:has(#screen-login:not(.hidden)),
body:has(#admin-login:not(.hidden)),
body:has(#field-login:not(.hidden)),
body:has(#sup-login:not(.hidden)),
body:has(#jbn-login:not(.hidden)) {
  background: var(--koppla-navy);
}

.app {
  max-width: 440px;
}

.app-topbar {
  background: #fff;
  color: var(--koppla-navy);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 20, 30, 0.12);
}

.app-topbar-text span {
  color: var(--muted);
}

.card,
.admin-login-card,
.login-card {
  background: #fff;
  color: var(--text);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 30, 40, 0.08);
  border: 1px solid var(--koppla-line);
}

.login-card h2,
.admin-login-card h2,
.admin-login-brand .brand-title {
  color: var(--koppla-navy);
}

.site-label,
.site-label strong,
.brand-title,
.admin-brand-text strong {
  color: var(--koppla-navy);
}

.site-label strong {
  color: var(--koppla-navy);
}

.install-hint,
.brand-sub,
.build-line,
.site-inline {
  color: var(--muted);
}

.login-brand,
.admin-login-brand {
  border-bottom-color: var(--koppla-line);
}

.pin-input,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="time"],
input[type="number"],
textarea,
select,
.loc-name-input {
  background: #fff;
  color: var(--text);
  border: 1px solid #c5d3d8;
  border-radius: 10px;
}

.pin-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--koppla-mint);
  border-color: var(--koppla-navy);
}

.btn-primary {
  background: var(--koppla-navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--koppla-navy-deep);
}

.btn-secondary {
  background: var(--koppla-mint);
  color: var(--koppla-navy);
}

.btn-secondary:hover {
  filter: brightness(0.97);
}

.btn-danger {
  background: #e11d48;
  color: #fff;
}

.status.ok {
  background: #e8fbf4;
  color: #0b7a56;
}

.status.err {
  background: #fde8ee;
  color: #be123c;
}

.scan-list li {
  border-bottom-color: var(--koppla-line);
}

th,
td {
  border-bottom-color: var(--koppla-line);
}

.admin-sidebar {
  background: var(--koppla-navy);
  border-right: 0;
}

.admin-brand {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.admin-brand-text strong,
.admin-brand-text span {
  color: #fff;
}

.admin-brand-text span {
  color: var(--koppla-mint);
}

.admin-nav button {
  color: rgba(255, 255, 255, 0.72);
}

.admin-nav button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.admin-nav button.active {
  background: var(--koppla-mint);
  color: var(--koppla-navy);
}

.admin-clock,
.admin-user-badge {
  color: rgba(255, 255, 255, 0.65);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.admin-main h2 {
  color: var(--koppla-navy);
}

.stat-card,
.summary-card,
.insight-kpi,
.sup-stat-card,
.sup-panel-card,
.sup-filters-card,
.email-slot-row,
.ppm-week-card {
  background: #fff;
  border: 1px solid var(--koppla-line);
  color: var(--text);
  box-shadow: none;
}

.stat-card strong,
.insight-kpi strong,
.sup-stat-card strong {
  color: var(--koppla-navy);
}

.insight-kpi {
  background: #fff;
}

.insight-kpi.accent strong,
.sup-stat-card.accent strong {
  color: #0b8f78;
}

.insight-kpi.ok strong { color: #0f9f6e; }
.insight-kpi.warn strong { color: #c47b00; }
.insight-kpi.danger strong { color: #e11d48; }

.insight-kpi span,
.stat-card span,
.sup-stat-card span {
  color: var(--muted);
}

.summary-card ul {
  color: var(--text);
}

.emp-pin {
  background: #eef6f8;
  color: var(--koppla-navy);
}

.badge-ok {
  background: #e8fbf4;
  color: #0b7a56;
}

.badge-off {
  background: #fde8ee;
  color: #be123c;
}

.ppm-week-card {
  background: #fff;
}

.ppm-week-card-head,
.sup-panel-card h3,
.sup-page-head {
  background: #f8fbfb;
  border-bottom-color: var(--koppla-line);
  color: var(--koppla-navy);
}

.ppm-week-badge {
  color: var(--koppla-navy);
  background: #e7fff8;
  border-color: var(--koppla-mint);
}

.admin-login-wrap {
  margin: 3.5rem auto;
}

.admin-login-card {
  padding: 1.5rem 1.35rem 1.4rem;
}

#screen-login.card {
  margin-top: 0.25rem;
}

.welcome-card {
  border-color: var(--koppla-line);
}

#reader,
.scanner-wrap #reader {
  background: #0e2a33;
}

.report-table th {
  color: var(--muted);
}

.report-table tbody tr:hover {
  background: #eefaf6;
}

.ppm-empty,
.ppm-loading,
.ppm-day-card,
.ppm-asset-row,
.ppm-task,
.ppm-board,
.defect-card,
.defect-card-body,
.insight-defect-list li {
  background: #fff;
  border-color: var(--koppla-line);
  color: var(--text);
}

.ppm-week-card,
.ppm-week-card-head {
  background: #fff !important;
  border-color: var(--koppla-line) !important;
}

.ppm-badge.total {
  background: #eef6f8;
  color: var(--koppla-navy);
}