/* ============= Fonts ============= */
@font-face {
  font-family: "MotracFont";
  src: url("/fonts/motrac-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MotracFont";
  src: url("/fonts/motrac-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: "MotracFont", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f3f4f6; color: #111827; font-size: 19px;
}

/* ===== Header ===== */
.header { width: 100%; }
.header-topbar {
  background: #edeff2; padding: 8px 32px;
  display: flex; align-items: center; justify-content: flex-end;
}
.top-menu { position: relative; }
.details-toggle {
  background: transparent; border: none; color: #111827;
  font-size: 14px; font-weight: 500; cursor: pointer; padding: 6px 10px;
}
.details-toggle span { font-size: 11px; margin-left: 4px; }
.details-panel {
  position: absolute; right: 0; top: 100%; margin-top: 4px;
  width: 400px; max-height: 60vh; overflow: hidden auto;
  background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(15,23,42,.15);
  padding: 10px; font-size: 12px; color:#111827; display: none; z-index: 100;
}
.details-panel.open { display: flex; flex-direction: column; gap: 6px; }
.side-meta { font-size: 12px; color:#6b7280; }
.side-actions { display:flex; gap:6px; margin:4px 0; }
.side-actions button{
  padding:6px 11px; border-radius:4px; border:1px solid #d1d5db;
  background:#f9fafb; color:#111827; font-size:12px; cursor:pointer;
}
.log-title{ font-size:12px; font-weight:700; color:#6b7280; }
#log{
  white-space:pre-wrap; background:#f9fafb; color:#111827; padding:6px;
  border-radius:4px; font-family:monospace; flex:1; overflow-y:auto;
  font-size:11px; max-height:32vh; border:1px solid #e5e7eb;
}

.header-main{
  background:#fff; padding:16px 32px 12px;
  display:flex; align-items:stretch; justify-content:space-between; gap:32px;
  box-shadow:0 2px 4px rgba(15,23,42,.06);
}
.logo-block{ display:flex; flex-direction:column; gap:8px; flex:1; }
.logo-img{ width:350px; height:auto; }
.opening-hours{ font-size:14px; color:#111827; }

.time-block{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  min-width:220px; padding:10px 18px; background:#ba1124; border-radius:2px; color:#fff; max-height:97px;
}
#clockTime{
  font-size:60px; font-weight:700; line-height:.9; color:#fff; font-variant-numeric:tabular-nums;
}
#clockDate{ font-size:24px; color:#f9fafb; }

/* ===== Connection ===== */
.connection-status-floating{
  position:fixed; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:#111827; background:rgba(255,255,255,.98);
  padding:8px 14px; border-radius:999px; box-shadow:0 2px 6px rgba(15,23,42,.18); z-index:80;
}
.connection-icon{ width:10px; height:10px; border-radius:999px; background-color:#ba1124; }

/* ===== Wallboard ===== */
.page-content{ padding:18px 32px 26px; }
#board{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width:1400px){ #board{ grid-template-columns:repeat(4, 1fr);} }

.group-card{
  background:#fff; border-radius:10px; padding:12px 14px;
  box-shadow:0 2px 5px rgba(15,23,42,.1); display:flex; flex-direction:column; gap:10px;
}
.group-header{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.group-name{ font-weight:700; font-size:29px; color:#111827; }
.group-id{ font-size:13px; color:#e5e7eb; }
.group-meta{ font-size:22px; color:#6b7280; }

.agents-list{ display:flex; flex-direction:column; gap:10px; }
.agent-card{
  padding:12px 14px; border-radius:5px; font-size:22px; display:flex; flex-direction:column; gap:6px;
  box-sizing:border-box; transition: box-shadow .15s ease, background-color .15s ease;
}
.agent-card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.agent-status-label{ font-weight:500; font-size:21px; }
.agent-card-bottom{ display:flex; justify-content:space-between; font-size:17px; }
.agent-ext{ font-weight:700; }
.agent-last{ color:#374151; }

.pill-online  { background-color:#bbf7d0; }
.pill-busy    { background-color:#fecaca; }
.pill-away    { background-color:#fed7aa; }
.pill-offline { background-color:#e5e7eb; }
.pill-unknown { background-color:#4b5563; color:#fff; }

/* ===== API Overlay ===== */
.api-overlay{
  position:fixed; inset:0; background:#f3f4f6; display:none; align-items:center; justify-content:center; z-index:200;
}
.api-box{
  background:#fff; padding:26px 30px 22px; border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.25);
  display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:900px;
}
.overlay-logo{ width:350px; height:auto; object-fit:contain; margin-bottom:6px; }
.api-title{ font-size:24px; font-weight:700; }
.api-subtitle{ font-size:15px; color:#6b7280; }
.api-input-row{ width:100%; display:flex; gap:10px; }
#apiKeyInput{
  flex:1; padding:12px 14px; border-radius:4px; border:1px solid #d1d5db; font-size:15px;
}
#apiSubmitBtn{
  padding:12px 18px; border:none; border-radius:2px; background:#ba1124; color:#fff; font-size:15px; font-weight:600; cursor:pointer;
}
.api-error{ color:#ba1124; font-size:12px; }