/* ═══════════════════════════════════════════════
   Nairobi Traffic Tracker — Front-end Styles
   Design: Bold urban data board aesthetic
   Font: Barlow Condensed (imported via JS)
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --ntt-bg:          #0a0f1a;
  --ntt-surface:     #111827;
  --ntt-border:      #1e2d45;
  --ntt-accent:      #f59e0b;        /* amber */
  --ntt-accent2:     #06b6d4;        /* cyan */
  --ntt-text:        #e2e8f0;
  --ntt-muted:       #64748b;
  --ntt-light:       #facc15;
  --ntt-moderate:    #f97316;
  --ntt-heavy:       #ef4444;
  --ntt-standstill:  #7c3aed;
  --ntt-radius:      8px;
  --ntt-font:        'Barlow Condensed', sans-serif;
  --ntt-mono:        'IBM Plex Mono', monospace;
}

/* ── Wrap ─────────────────────────────────────── */
.ntt-wrap {
  font-family: var(--ntt-font);
  background:  var(--ntt-bg);
  color:        var(--ntt-text);
  border:       1px solid var(--ntt-border);
  border-radius: 12px;
  overflow:     hidden;
  max-width:    860px;
  margin:       0 auto;
  letter-spacing: 0.01em;
}

/* ── Header ───────────────────────────────────── */
.ntt-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         18px 24px 16px;
  background:      linear-gradient(135deg, #0f1e35 0%, #0a0f1a 100%);
  border-bottom:   2px solid var(--ntt-accent);
}

.ntt-header-left {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.ntt-pulse {
  display:       inline-block;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--ntt-heavy);
  box-shadow:    0 0 0 0 rgba(239,68,68,0.7);
  animation:     ntt-pulse 1.6s infinite;
}

@keyframes ntt-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);   }
}

.ntt-title {
  font-size:   1.6rem;
  font-weight: 800;
  margin:      0;
  color:       var(--ntt-text);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ntt-meta {
  text-align:  right;
  font-size:   0.75rem;
  color:       var(--ntt-muted);
  font-family: var(--ntt-mono);
  line-height: 1.5;
}

.ntt-clock {
  display:     block;
  color:       var(--ntt-accent2);
}

/* ── Summary bar ──────────────────────────────── */
.ntt-summary-bar {
  display:               grid;
  grid-template-columns: repeat(3,1fr);
  border-bottom:         1px solid var(--ntt-border);
}

.ntt-stat {
  text-align:  center;
  padding:     14px 8px;
  border-right: 1px solid var(--ntt-border);
}
.ntt-stat:last-child { border-right: none; }

.ntt-stat-num {
  display:     block;
  font-size:   2rem;
  font-weight: 800;
  line-height: 1;
  color:       var(--ntt-accent2);
  font-family: var(--ntt-mono);
}
.ntt-stat--heavy .ntt-stat-num  { color: var(--ntt-heavy); }
.ntt-stat--delay .ntt-stat-num  { color: var(--ntt-accent); }

.ntt-stat-label {
  display:     block;
  font-size:   0.7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       var(--ntt-muted);
  margin-top:  4px;
}

/* ── Filters ──────────────────────────────────── */
.ntt-filters {
  display:     flex;
  gap:         10px;
  padding:     14px 20px;
  background:  var(--ntt-surface);
  border-bottom: 1px solid var(--ntt-border);
  flex-wrap:   wrap;
}

.ntt-select {
  background:  #0d1626;
  border:      1px solid var(--ntt-border);
  color:       var(--ntt-text);
  border-radius: var(--ntt-radius);
  padding:     6px 12px;
  font-family: var(--ntt-font);
  font-size:   0.9rem;
  cursor:      pointer;
  transition:  border-color .2s;
}
.ntt-select:focus, .ntt-select:hover {
  border-color: var(--ntt-accent);
  outline:      none;
}
.ntt-select--full { width: 100%; }

/* ── Buttons ──────────────────────────────────── */
.ntt-btn {
  border:        none;
  border-radius: var(--ntt-radius);
  padding:       8px 16px;
  font-family:   var(--ntt-font);
  font-size:     0.9rem;
  font-weight:   700;
  cursor:        pointer;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition:    background .2s, transform .1s;
}
.ntt-btn:active { transform: scale(.97); }

.ntt-btn--refresh {
  background: transparent;
  border:     1px solid var(--ntt-accent2);
  color:      var(--ntt-accent2);
}
.ntt-btn--refresh:hover { background: rgba(6,182,212,.12); }

.ntt-btn--submit {
  background: var(--ntt-accent);
  color:      #000;
  width:      100%;
  padding:    12px;
  font-size:  1rem;
  margin-top: 8px;
  border-radius: var(--ntt-radius);
}
.ntt-btn--submit:hover { background: #d97706; }

/* ── Traffic list ─────────────────────────────── */
.ntt-list {
  padding: 16px;
  min-height: 120px;
}

.ntt-loading {
  display:     flex;
  align-items: center;
  gap:         12px;
  color:       var(--ntt-muted);
  font-size:   0.9rem;
  padding:     20px;
  justify-content: center;
}

.ntt-spinner {
  width:        24px;
  height:       24px;
  border:       3px solid var(--ntt-border);
  border-top-color: var(--ntt-accent);
  border-radius: 50%;
  animation:    ntt-spin .7s linear infinite;
}
@keyframes ntt-spin { to { transform: rotate(360deg); } }

.ntt-empty {
  text-align:  center;
  padding:     40px 20px;
  color:       var(--ntt-muted);
  font-size:   1rem;
}
.ntt-empty-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }

/* ── Traffic card ─────────────────────────────── */
.ntt-card {
  display:       grid;
  grid-template-columns: auto 1fr auto;
  align-items:   start;
  gap:           0 14px;
  background:    var(--ntt-surface);
  border:        1px solid var(--ntt-border);
  border-left:   4px solid var(--ntt-muted);
  border-radius: var(--ntt-radius);
  padding:       14px 16px;
  margin-bottom: 10px;
  transition:    border-color .2s, background .2s;
  animation:     ntt-fadein .3s ease;
}
@keyframes ntt-fadein {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0);   }
}

.ntt-card:hover { background: #141f32; }

.ntt-card.light      { border-left-color: var(--ntt-light);     }
.ntt-card.moderate   { border-left-color: var(--ntt-moderate);  }
.ntt-card.heavy      { border-left-color: var(--ntt-heavy);     }
.ntt-card.standstill {
  border-left-color: var(--ntt-standstill);
  background: #130a1e;
}

/* Severity badge */
.ntt-badge {
  grid-row:      span 2;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           4px;
  min-width:     52px;
}
.ntt-badge-icon  { font-size: 1.6rem; line-height:1; }
.ntt-badge-label {
  font-size:   0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.light      .ntt-badge-label { color: var(--ntt-light);     }
.moderate   .ntt-badge-label { color: var(--ntt-moderate);  }
.heavy      .ntt-badge-label { color: var(--ntt-heavy);     }
.standstill .ntt-badge-label { color: var(--ntt-standstill);}

/* Card body */
.ntt-card-body {}
.ntt-road-name {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--ntt-text);
  line-height: 1.2;
}
.ntt-road-meta {
  font-size:  0.78rem;
  color:      var(--ntt-muted);
  margin-top: 2px;
}
.ntt-road-desc {
  font-size:   0.82rem;
  color:       #94a3b8;
  margin-top:  6px;
  font-family: var(--ntt-mono);
}

/* Delay pill */
.ntt-delay {
  text-align:  right;
  white-space: nowrap;
}
.ntt-delay-num {
  display:     block;
  font-size:   1.8rem;
  font-weight: 800;
  font-family: var(--ntt-mono);
  color:       var(--ntt-accent);
  line-height: 1;
}
.standstill .ntt-delay-num { color: var(--ntt-standstill); }
.heavy      .ntt-delay-num { color: var(--ntt-heavy);      }
.ntt-delay-label {
  font-size:   0.65rem;
  color:       var(--ntt-muted);
  text-transform: uppercase;
}
.ntt-time-ago {
  display:   block;
  font-size: 0.65rem;
  color:     var(--ntt-muted);
  margin-top:4px;
  font-family: var(--ntt-mono);
}

/* ── Report form section ──────────────────────── */
.ntt-report-section {
  border-top: 1px solid var(--ntt-border);
  padding:    16px;
}

.ntt-toggle-form {
  background:    transparent;
  border:        1px dashed #374151;
  border-radius: var(--ntt-radius);
  color:         var(--ntt-muted);
  padding:       10px 18px;
  width:         100%;
  font-family:   var(--ntt-font);
  font-size:     0.95rem;
  cursor:        pointer;
  transition:    all .2s;
  text-align:    center;
}
.ntt-toggle-form:hover {
  border-color:  var(--ntt-accent);
  color:         var(--ntt-accent);
}

.ntt-hidden { display: none !important; }

.ntt-form-wrap {
  background:    var(--ntt-surface);
  border:        1px solid var(--ntt-border);
  border-radius: var(--ntt-radius);
  padding:       20px;
  margin-top:    12px;
  animation:     ntt-fadein .2s ease;
}
.ntt-form-title {
  font-size:   1.2rem;
  font-weight: 800;
  margin:      0 0 4px;
  text-transform: uppercase;
}
.ntt-form-note {
  font-size:  0.82rem;
  color:      var(--ntt-muted);
  margin:     0 0 14px;
}

.ntt-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.ntt-field { display: flex; flex-direction: column; gap: 5px; }
.ntt-field--full { grid-column: span 2; }
.ntt-field label {
  font-size:   0.75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:       var(--ntt-muted);
  font-weight: 600;
}
.ntt-field small { font-weight:400; text-transform:none; }

.ntt-input, .ntt-textarea {
  background:    #0d1626;
  border:        1px solid var(--ntt-border);
  color:         var(--ntt-text);
  border-radius: var(--ntt-radius);
  padding:       8px 12px;
  font-family:   var(--ntt-font);
  font-size:     0.9rem;
  transition:    border-color .2s;
}
.ntt-input:focus, .ntt-textarea:focus {
  border-color: var(--ntt-accent);
  outline:      none;
}
.ntt-textarea { resize: vertical; }

.ntt-form-msg {
  margin-top: 10px;
  font-size:  0.85rem;
  min-height: 20px;
  font-family: var(--ntt-mono);
}
.ntt-form-msg.success { color: #34d399; }
.ntt-form-msg.error   { color: var(--ntt-heavy); }

/* ── Footer note ──────────────────────────────── */
.ntt-footer-note {
  text-align: center;
  font-size:  0.72rem;
  color:      var(--ntt-muted);
  padding:    10px;
  border-top: 1px solid var(--ntt-border);
  font-family: var(--ntt-mono);
  margin:     0;
}

/* ── Widget styles ────────────────────────────── */
.ntt-widget-list {
  list-style: none;
  margin:     0;
  padding:    0;
}
.ntt-widget-item {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         7px 0;
  border-bottom:   1px solid #e5e7eb;
  font-size:       0.88rem;
}
.ntt-widget-item:last-child { border-bottom: none; }
.ntt-widget-icon  { flex-shrink: 0; }
.ntt-widget-road  { flex: 1; font-weight: 600; }
.ntt-widget-delay { font-weight: 700; color: #dc2626; font-variant-numeric: tabular-nums; }
.ntt-widget-clear { color: #16a34a; font-size:.88rem; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 600px) {
  .ntt-summary-bar { grid-template-columns: repeat(3,1fr); }
  .ntt-stat-num    { font-size: 1.5rem; }
  .ntt-card        { grid-template-columns: auto 1fr; }
  .ntt-delay       { grid-column: 2; text-align: left; }
  .ntt-form-grid   { grid-template-columns: 1fr; }
  .ntt-field--full { grid-column: span 1; }
  .ntt-title       { font-size: 1.2rem; }
}