/* --------------------------
   1) FONT-FACES (TTF for now)
   -------------------------- */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Solari';
  src: url('../fonts/Solari.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Flight';
  src: url('../fonts/Flight.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* --------------------------
   2) TOKENS
   -------------------------- */
:root {
  --color-bg: #f6f7fb;
  --color-panel: #ffffff;
  --color-brand: #30363b;      /* slate grey */
  --color-accent: #fffc04;     /* yellow */
  --color-accent-2: #506a85;   /* steel blue */
  --color-text: #1f2937;
  --color-muted: #6b7280;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 8px 20px rgba(0,0,0,.06);
  --sidebar-width: 170px;
  --topbar-height: 56px;
}

/* --------------------------
   3) BASE
   -------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

body.app {
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }

.btn {
  display: inline-block;
  font: inherit;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--color-text);
  color: #fff;
}
.btn-primary:hover { filter: brightness(0.92); }
.btn-ghost {
  background: transparent;
  color: var(--color-accent);
}


/* --------------------------
   4) LAYOUT
   -------------------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  background: var(--color-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 10;
}

/* Brand block (logo + name) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.brand-mark {                 /* if you're not using an <img>, this gives you a tidy square */
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--color-accent-2), var(--color-brand));
}
.brand-logo {                 /* if you switched to an <img class="brand-logo"> */
  display: block;
  height: 32px;
  width: auto;
}
.brand-name {
  font-family: 'Figtree', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: #fffc04;
}

/* Right-hand side of topbar */
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.whoami { color: rgba(255,255,255,.85); font-size: .95rem; }
.nav-toggle {
  display: none;             /* shown on mobile */
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100% - var(--topbar-height));
  background: var(--color-brand);
  color: #fff;
  overflow-y: auto;
  padding: 1rem .75rem;
  transition: transform 0.3s ease;
}
.nav { list-style: none; margin: 0; padding: 0; }
.nav-section {
  margin: .75rem .5rem .25rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
}
.nav-link {
  display: block;
  padding: 0.6rem .75rem;
  border-radius: 10px;
  color: #fff;
}
.nav-link:hover,
.nav-link.is-active {
  background: rgba(255,255,255,0.15);
}

/* Content */
.content {
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 1rem) 1rem 2rem;
}

/* Responsive: sidebar becomes overlay */
@media (max-width: 768px) {
  .nav-toggle { display: inline-block; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left: 0; padding-top: calc(var(--topbar-height) + 1rem); }
}

/* --------------------------
   5) PAGE SECTIONS
   -------------------------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.page-title {
  margin: 0;
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
}
.filters { display: flex; align-items: center; gap: .5rem; }
.filters input[type="date"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  background: #fff;
}

/* --------------------------
   6) CARDS & KPI GRID
   -------------------------- */
.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--color-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}

.kpi { text-align: center; }
.kpi-value { font-size: 2rem; font-weight: 700; margin: .25rem 0; }
.kpi-sub { color: var(--color-muted); font-size: 0.875rem; }

/* --------------------------
   7) TABLES
   -------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table thead {
  background: var(--color-accent-2);
  color: #fff;
}

.table th,
.table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

.table td:first-child {
  text-align: left;
}
.table tbody tr:hover {
  background: #fafafa;
}

/* --- Callback Table Specific --- */
.table-callbacks {
  table-layout: fixed;         
  width: 100%;
}

.table-callbacks th,
.table-callbacks td {
  word-wrap: break-word;
  white-space: normal;         
  vertical-align: middle;        
}

.table-callbacks td:nth-child(7) {
  width: 250px;
  max-width: 250px;
  overflow-wrap: anywhere;     
  text-align: left;
}
/* Left-align the first and second columns in callbacks table */

.table-callbacks td:nth-child(1),
.table-callbacks td:nth-child(2) {
  text-align: left;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-brand) 
}

/* Callbacks filter - tidy date range UI */
.callbacks-filter { display: grid; gap: .5rem; align-items: center; }
.callbacks-filter .filter-label { font-weight: 600; color: var(--color-text); }

.daterange {
  display: flex; 
  align-items: center; 
  gap: .5rem; 
  flex-wrap: wrap;
  padding-bottom: 1rem;
}
.daterange .date {
  padding: 0.45rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
}
.daterange .sep { color: var(--color-muted); margin: 0 .25rem; }

.quick-ranges { display: flex; flex-wrap: wrap; gap: .4rem; }
.quick-ranges .pill {
  border: 1px solid var(--color-accent-2);
  background: #fff;
  color: var(--color-accent-2);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .9rem;
  cursor: pointer;
}
.quick-ranges .pill:hover { background: rgba(80,106,133,0.06); }
.quick-ranges .pill.ghost {
  border-color: #d1d5db;
  color: var(--color-text);
}

/* keep pills inline between dates and button; wrap nicely on small screens */
.daterange { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.quick-ranges.inline { display:flex; gap:.4rem; flex-wrap:wrap; }



/* --------------------------
   7a BY CLIENT CARDS
   -------------------------- */
/* Row cards (By Client – single client view) */
.row-card { margin-bottom: 1rem; }
.row-card h3 { margin: 0 0 .5rem 0; font-weight: 700; }

/* Grid of mini-stat boxes inside a row card */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}

/* Mini-stat boxes (you already added these — keeping here for clarity)
   Tweak spacing/weight so numbers pop */
.stat-box {
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:10px;
  padding:14px 12px;
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.stat-label { font-size:0.9rem; color:#555; margin-bottom:6px; }
.stat-value { font-size:1.75rem; font-weight:700; color:#111; line-height:1.1; }

/* Optional: subtle “attention” state (e.g., below target) */
.stat-box.warn { border-color:#ef4444; box-shadow:0 1px 2px rgba(245,158,11,.2); }
.stat-box.danger { border-color:#ef4444; box-shadow:0 1px 2px rgba(239,68,68,.2); }

.metrics-note {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0.25rem 0 0.75rem;
}
.metrics-note .highlight {
  color: var(--color-accent-2);
  font-weight: 600;
}

/* --------------------------
   8) CALL STATS
   -------------------------- */
.table td.cell-good { 
  background: rgba(0, 200, 0, 0.12) !important;
}.table td.cell-warn { 
  background: rgba(255, 165, 0, 0.18) !important; 
}
.table td.cell-bad { 
  background: rgba(255, 0, 0, 0.15) !important;
}



/* --------------------------
   9) FOOTER
   -------------------------- */
.footer {
  text-align: center;
  padding: 2px 0;
  background-color: #30363b;
  color: white;
  position: sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 14px;
}

.footer a {
  color: white;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}