html {
  --lumo-primary-color: hsl(194, 88%, 48%);
  --lumo-primary-text-color: hsl(190, 92%, 62%);
  --lumo-primary-contrast-color: #071014;
  --lumo-base-color: #10151b;
  --lumo-body-text-color: #e6edf3;
  --lumo-secondary-text-color: #96a3b0;
  --lumo-tertiary-text-color: #64717f;
  --lumo-contrast-5pct: rgba(255, 255, 255, .05);
  --lumo-contrast-10pct: rgba(255, 255, 255, .09);
  --lumo-contrast-20pct: rgba(255, 255, 255, .16);
  --lumo-border-radius-s: 4px;
  --lumo-border-radius-m: 7px;
  --lumo-border-radius-l: 10px;
  background: #0c1117;
}

body { background: #0c1117; }

.main-layout::part(drawer) {
  background: #111820;
  border-right: 1px solid rgba(255,255,255,.08);
  width: 248px;
}

.main-layout::part(navbar) {
  background: rgba(16, 21, 27, .96);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.main-layout__header { display:flex; align-items:center; gap:12px; width:100%; padding:0 18px; }
.main-layout__page-title { font-size:18px; font-weight:600; margin:0; }
.main-layout__brand { display:flex; align-items:center; gap:12px; padding:22px 18px 18px; }
.main-layout__brand-icon { color:var(--lumo-primary-text-color); width:28px; height:28px; }
.main-layout__brand-text { display:flex; flex-direction:column; }
.main-layout__brand-text span:first-child { font-weight:700; font-size:18px; color:#f3f7fa; }
.main-layout__brand-text span:last-child { font-size:12px; color:var(--lumo-secondary-text-color); }
.main-layout__navigation { display:flex; flex-direction:column; gap:4px; padding:8px 10px; }
.main-layout__nav-link { display:flex; align-items:center; gap:12px; color:#aeb9c4; text-decoration:none; padding:10px 12px; border-radius:6px; font-weight:500; }
.main-layout__nav-link:hover { background:rgba(255,255,255,.05); color:#fff; }
.main-layout__nav-link[highlight] { background:rgba(20,184,220,.13); color:var(--lumo-primary-text-color); box-shadow:inset 3px 0 0 var(--lumo-primary-color); }
.main-layout__drawer-footer { margin-top:auto; padding:18px; display:flex; flex-direction:column; color:var(--lumo-tertiary-text-color); font-size:12px; }

.dashboard-view, .calls-view, .employees-view, .devices-view, .integration-view { background:#0c1117; box-sizing:border-box; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; width:100%; }
.kpi-card, .content-card, .dashboard-card {
  background:#141b23;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:18px;
  box-sizing:border-box;
}
.kpi-card { min-height:110px; }
.kpi-card .kpi-value { font-size:28px; font-weight:700; color:#f5f8fa; }
.kpi-card .kpi-label { color:var(--lumo-secondary-text-color); font-size:13px; }
.section-title { font-size:16px; font-weight:600; margin:0; }
.status-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.status-badge--ok { color:#72e6b1; background:rgba(32,190,120,.12); }
.status-badge--warn { color:#f2c86b; background:rgba(222,159,35,.13); }
.status-badge--error { color:#ff9696; background:rgba(230,70,70,.13); }

vaadin-grid { background:#141b23; border:1px solid rgba(255,255,255,.08); border-radius:8px; overflow:hidden; }
vaadin-grid::part(header-cell) { background:#18212a; color:#aeb9c4; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }

@media (max-width: 900px) { .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns:1fr; }
  .main-layout__header { padding:0 8px; }
  vaadin-grid { font-size:13px; }
}