/* =============================================================================
   Percorso design system
   Fonts: Syne (display/UI) + DM Mono (data/numbers)
   Loaded via Google Fonts in each HTML file.
   ============================================================================= */

:root {
  --paper:  #f5f0eb;
  --ink:    #1a1a1a;
  --muted:  #6b6560;
  --accent: #c45c26;
  --border: #ddd8d2;
  --mono:   'DM Mono', monospace;
  --sans:   'Syne', sans-serif;

  --nav-h:     52px;
  --sidebar-w: 200px;
}

/* =============================================================================
   Reset
   ============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
}

/* Prevent flash of unstyled Alpine content */
[x-cloak] { display: none !important; }

/* =============================================================================
   SPA shell — top nav
   ============================================================================= */

.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  z-index: 100;
}

.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.conn-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.2s;
}

.conn-dot.loading    { background: var(--border); }
.conn-dot.connected  { background: #639922; }
.conn-dot.error      { background: #e24b4a; }

/* =============================================================================
   SPA shell — sidebar
   ============================================================================= */

.sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--border);
  padding: 0.75rem 0;
  z-index: 90;
}

.nav-btn {
  display: block;
  width: 100%;
  padding: 0.5625rem 1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.nav-btn:hover {
  background: rgba(196, 92, 38, 0.04);
  color: var(--ink);
}

.nav-btn.active {
  border-left-color: var(--accent);
  color: var(--accent);
  background: rgba(196, 92, 38, 0.06);
  font-weight: 700;
}

/* =============================================================================
   SPA shell — main content area
   ============================================================================= */

.content {
  position: fixed;
  top: var(--nav-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 1.5rem;
}

/* =============================================================================
   Cards
   ============================================================================= */

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
}

.card-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* =============================================================================
   Dashboard layout grids
   ============================================================================= */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* =============================================================================
   Metric cards
   ============================================================================= */

.metric-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.375rem;
}

.metric-value {
  font-family: var(--mono);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ink);
}

.metric-value.is-exception {
  color: #e24b4a;
}

.metric-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.3125rem;
}

/* =============================================================================
   Status breakdown
   ============================================================================= */

.status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.status-row:last-child {
  border-bottom: none;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-name {
  flex: 1;
  text-transform: capitalize;
}

.status-count {
  font-family: var(--mono);
  font-size: 0.875rem;
}

.status-pct {
  font-size: 0.8125rem;
  color: var(--muted);
  width: 3.75rem;
  text-align: right;
}

/* =============================================================================
   Carrier table
   ============================================================================= */

.carrier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.carrier-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.carrier-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}

.carrier-table td.carrier-name {
  font-family: var(--sans);
}

.carrier-table tr:last-child td {
  border-bottom: none;
}

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 3px;
}

.badge.ok   { background: rgba(99, 153, 34, 0.12); color: #639922; }
.badge.warn { background: rgba(226, 75, 74, 0.12);  color: #e24b4a; }

/* =============================================================================
   Delivery rate bars
   ============================================================================= */

.rate-bars-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.rate-bar + .rate-bar {
  margin-top: 0.625rem;
}

.rate-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.rate-bar-pct {
  font-family: var(--mono);
  color: var(--muted);
}

.rate-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.rate-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.rate-bar-fill.good { background: #378add; }
.rate-bar-fill.poor { background: #e24b4a; }

/* =============================================================================
   Weekly chart
   ============================================================================= */

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.chart-legend {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.3125rem;
}

.chart-wrap {
  position: relative;
  height: 220px;
}

/* =============================================================================
   Skeleton loader
   ============================================================================= */

.skeleton {
  background: linear-gradient(90deg, #ece7e0 25%, #e4dfd8 50%, #ece7e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-metric {
  height: 88px;
}

.skeleton-card {
  height: 260px;
}

.skeleton-chart {
  height: 290px;
}

/* =============================================================================
   Error state
   ============================================================================= */

.error-card {
  border-color: #e24b4a;
}

.error-card .card-title {
  color: #e24b4a;
}

.error-msg {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* =============================================================================
   Stub views
   ============================================================================= */

.stub-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 0.5rem;
  text-align: center;
}

.stub-icon {
  font-size: 2.5rem;
  color: var(--border);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stub-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.stub-desc {
  font-size: 0.875rem;
  color: var(--muted);
}