:root {
  --navy: #0A4A72;
  --navy-strong: #063A5C;
  --navy-deep: #041F32;
  --on-navy: #F3F7FC;
  --on-navy-muted: rgba(243, 247, 252, 0.68);
  --ok: #22C55E;
  --warn: #F97316;
  --danger: #EF4444;
  --info: #38BDF8;
  --card-bg: #FFFFFF;
  --card-text: #0F2A3D;
  --card-label: #5B7688;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-strong) 55%, var(--navy-deep) 100%);
  color: var(--on-navy);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(16px, 4vw, 40px) 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand__logo {
  height: clamp(28px, 3.4vw, 40px);
  width: auto;
  display: block;
}
.brand__text {
  font-weight: 400;
  color: var(--on-navy-muted);
}

.clock-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.clock {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
}
.conn {
  font-size: 14px;
  transition: color 0.3s ease;
}
.conn--ok { color: var(--ok); }
.conn--stale { color: var(--danger); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  padding: 12px clamp(16px, 4vw, 40px) 20px;
}

.tile {
  position: relative;
  background: var(--card-bg);
  color: var(--card-text);
  border-radius: 18px;
  padding: clamp(21px, 2vw, 31px) clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 26px);
  box-shadow: 0 12px 30px rgba(4, 31, 50, 0.35);
  overflow: hidden;
}
.tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 18px 18px 0 0;
  background: var(--accent);
}
.tile--visitors { --accent: var(--info); }
.tile--calls-ok { --accent: var(--ok); }
.tile--calls-missed { --accent: var(--danger); }
.tile--bookings { --accent: #8B5CF6; }
.tile--requests { --accent: var(--warn); }
.tile--employees { --accent: #0EA5E9; }
.tile--mail { --accent: #14B8A6; }

.tile h2 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: var(--card-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: live-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.stat-row {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
}
.stat-row--single { justify-content: center; }

.stat {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.stat__value {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease;
}
.stat__value.pulse { transform: scale(1.08); }
.stat__label {
  margin-top: 6px;
  font-size: clamp(12px, 1.1vw, 15px);
  color: var(--card-label);
}

.footer {
  text-align: center;
  padding: 6px 16px 22px;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--on-navy-muted);
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stat-row { gap: 14px; }
}