:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --ring:#e5e7eb;
  --ring-2:#d1d5db;
  --good-bg:#e7f8f3;
  --good-fg:#0f766e;
  --ok-bg:#eef2ff;
  --ok-fg:#3730a3;
  --warn-bg:#fff7ed;
  --warn-fg:#9a3412;
  --bad-bg:#fef2f2;
  --bad-fg:#b91c1c;
  --chip:#eef2f7;
  --chip-fg:#334155;
  --btn:#111827;
  --btn-bg:#ffffff;
  --btn-ring:#e5e7eb;
  --shadow:0 12px 28px rgba(0,0,0,.06);
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Layout */
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}

/* Cards */
.card{
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:20px;
  margin:16px 0;
  border:1px solid var(--ring);
}

/* Header */
.headerbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.title{font-weight:900;font-size:1.35rem;letter-spacing:.2px}
.muted{color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:12px;border:1px solid var(--btn-ring);
  background:var(--btn-bg);color:var(--btn);text-decoration:none;font-weight:800;
  box-shadow:0 2px 0 rgba(17,24,39,.04); cursor:pointer;
}
.btn:hover{background:#f9fafb}
.btn.ghost{background:transparent}

/* KPIs */
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.kpi{
  min-width:180px;flex:1;background:linear-gradient(180deg,#fafbff,#f6f7fb);
  border:1px solid var(--ring);border-radius:14px;padding:14px
}
.kpi .k{font-size:.85rem;color:var(--muted)}
.kpi .v{font-size:1.6rem;font-weight:900;margin-top:2px}

/* Table-like layout */
.table{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:6px}
.tr{background:var(--card);border:1px solid var(--ring);box-shadow:var(--shadow);border-radius:14px}
.th,.td{padding:14px 16px;font-size:.95rem;vertical-align:top}
.thead{display:grid;grid-template-columns:240px 240px 200px 1fr 290px;gap:10px;margin:10px 0 6px}
.tbody .tr{display:grid;grid-template-columns:240px 240px 200px 1fr 290px;gap:10px}
.th{color:var(--muted);font-weight:800}

/* Badges / chips */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:800}
.b-good{background:var(--good-bg);color:var(--good-fg)}
.b-ok{background:var(--ok-bg);color:var(--ok-fg)}
.b-warn{background:var(--warn-bg);color:var(--warn-fg)}
.b-bad{background:var(--bad-bg);color:var(--bad-fg)}
.b-neutral{background:var(--chip);color:var(--chip-fg)}

.stack{display:flex;flex-direction:column;gap:6px}
.small{font-size:.9rem;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.actionbar{display:flex;flex-wrap:wrap;gap:8px}

/* Expandable details */
.details{display:none;border:1px dashed var(--ring-2);border-radius:14px;padding:10px;margin-top:10px;background:#fbfdff}
.log{padding:10px 0;border-bottom:1px dashed var(--ring)}
.log:last-child{border-bottom:none}
.toggle{cursor:pointer;font-weight:900;text-decoration:underline}

/* Client bits */
.client-name{font-weight:900}
.client-id{color:var(--muted);font-weight:700}

/* Last call formatting */
.lastcall{display:flex;flex-direction:column;gap:6px}
.rowline{display:flex;flex-wrap:wrap;gap:10px}
.table-note{color:var(--bad-fg);font-weight:700}
.divider{height:1px;background:var(--ring);margin:10px 0}

/* Pills used in header labels */
.pill{background:#0f172a;color:#fff;border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:800}
.thead .pill{background:#334155}

/* Hover niceties */
@media (prefers-reduced-motion:no-preference){
  .tr{transition:box-shadow .2s, transform .2s}
  .tr:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
}

/* Responsive: stack rows on narrow screens */
@media (max-width:1080px){
  .thead,.tbody .tr{grid-template-columns:1fr}
  .td,.th{padding:12px}
}

/* ============ Footer (boxed card) ============ */
.app-footer {
  background: transparent;
  padding: 1.25rem 0 2rem;
}

.app-footer__container {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e6e9ec;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
  padding: 16px 18px;
}

.app-footer__brand {
  margin: 0;
  font-weight: 700;
  color: #123b4a;
  font-size: 0.95rem;
}

.app-footer__tagline {
  margin: 4px 0 10px;
  color: #4b5b66;
  font-size: 0.9rem;
  line-height: 1.4;
}

.app-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;         /* row gap, column gap */
  align-items: center;
  font-size: 0.88rem;
  margin: 4px 0 10px;
}

.app-footer__links a {
  color: #0f7185;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-right: 12px;
}

/* Dot separators */
.app-footer__links a:not(:last-child)::after {
  content: "•";
  position: absolute;
  right: 2px;
  color: #a3b1b8;
}

.app-footer__links a:hover { text-decoration: underline; color: #0c5d6c; }

.app-footer__copy {
  margin: 0;
  color: #6a7a84;
  font-size: 0.82rem;
  border-top: 1px solid #eef2f5;
  padding-top: 10px;
}

/* Small screens */
@media (max-width: 640px) {
  .app-footer__container { border-radius: 14px; padding: 14px; }
  .app-footer__links { gap: 6px 10px; }
  .app-footer__tagline { font-size: 0.88rem; }
  .app-footer__copy { font-size: 0.8rem; }
}

/* Default: footer is normal flow (scrolls with page) */
footer.app-footer {
  position: static;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  box-shadow: none;
  padding: 12px 0;
}

/* Only on dashboard pages: keep footer fixed at bottom */
body.dashboard footer.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

/* Extra space so fixed footer doesn't cover content (dashboard only) */
body.dashboard {
  padding-bottom: 120px; /* match your footer height */
}