/* app.css - Base professional styling (Dark-first)
   =====================================================================
   Design tokens
*/
:root {
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
  --ease: 160ms cubic-bezier(.4,.0,.2,1);

  /* Color scale dark */
  --c-bg: #0d1117; --c-bg-alt: #161b22; --c-panel: #1e2630; --c-panel-alt: #243041; --c-border: #303c4a;
  --c-text: #e6edf3; --c-text-soft: #b1bac4; --c-text-faint: #8b949e;
  --c-primary: #4f46e5; --c-primary-alt: #6366f1; --c-primary-dim: #312e81;
  --c-accent: #10b981; --c-accent-alt: #059669;
  --c-danger: #dc2626; --c-danger-alt: #b91c1c;
  --c-warn: #f59e0b; --c-warn-alt: #b45309;
  --c-info: #0ea5e9; --c-info-alt: #0369a1;
  --c-focus: rgba(99,102,241,.4);
  --shadow-1: 0 4px 12px rgba(0,0,0,.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,.4);
}

html, body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 15px; -webkit-font-smoothing: antialiased; }

/* Utilities */
.flex { display:flex; }
.grid { display:grid; }
.center { display:grid; place-items:center; }
.wrap { flex-wrap:wrap; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom:0; } .mb-2 { margin-bottom:var(--space-2); } .mb-3 { margin-bottom:var(--space-3); } .mb-4 { margin-bottom:var(--space-4); }
.py-2 { padding-top:var(--space-2); padding-bottom:var(--space-2); }
.px-3 { padding-left:var(--space-3); padding-right:var(--space-3); }
.hidden { display:none !important; }
.text-soft { color: var(--c-text-soft); }
.text-faint { color: var(--c-text-faint); }
.w-full { width:100%; }
.max-w { max-width:1280px; margin-inline:auto; }

/* Layout */
.topbar { position:sticky; top:0; z-index:60; background:rgba(13,17,23,.8); backdrop-filter:blur(8px); border-bottom:1px solid var(--c-border); padding: var(--space-3) var(--space-4); }
.topbar .brand { font-weight:600; letter-spacing:.4px; }
.topbar nav { display:flex; gap: var(--space-2); }
.nav-link { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--c-text-faint); text-decoration:none; font-weight:500; transition: var(--ease); }
.nav-link:hover { color: var(--c-text); background: var(--c-panel); }
.nav-link.active { background: var(--c-primary-dim); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-primary); }

.main { display:grid; grid-template-columns: 260px 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-4); }
@media (max-width: 980px){ .main { grid-template-columns: 1fr; } }
.sidebar { display:flex; flex-direction:column; gap: var(--space-3); }

/* Panels */
.panel { background: var(--c-panel); border:1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-1); }
.panel.alt { background: var(--c-panel-alt); }
.panel h3 { margin:0 0 var(--space-3); font-size:1.05rem; font-weight:600; }
.separator { height:1px; background: var(--c-border); margin: var(--space-3) 0; }

/* Buttons */
.btn { border:0; cursor:pointer; font-weight:600; padding:10px 16px; border-radius: var(--radius-sm); background: var(--c-primary); color:#fff; display:inline-flex; align-items:center; gap:6px; transition: var(--ease); font-size:.9rem; }
.btn:hover { background: var(--c-primary-alt); }
.btn.outline { background:transparent; box-shadow: inset 0 0 0 1px var(--c-border); color: var(--c-text); }
.btn.outline:hover { box-shadow: inset 0 0 0 1px var(--c-primary); color: var(--c-text); }
.btn.danger { background: var(--c-danger); }
.btn.danger:hover { background: var(--c-danger-alt); }
.btn.success { background: var(--c-accent); }
.btn.success:hover { background: var(--c-accent-alt); }
.btn.small { padding:6px 10px; font-size:.75rem; }

/* Form */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom: var(--space-3); }
.field label { font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color: var(--c-text-faint); font-weight:600; }
.field input, .field select { background: var(--c-panel-alt); border:1px solid var(--c-border); border-radius: var(--radius-sm); padding:10px 12px; color: var(--c-text); font-size:.85rem; font-family:var(--font-sans); }
.field input:focus, .field select:focus { outline:none; border-color: var(--c-primary); box-shadow:0 0 0 3px var(--c-focus); }

/* Badges */
.badges { display:flex; gap: var(--space-2); flex-wrap:wrap; }
.badge { padding:4px 8px; font-size:.65rem; letter-spacing:.3px; font-weight:600; border-radius: var(--radius-xs); display:inline-flex; align-items:center; gap:4px; text-transform:uppercase; }
.badge.manual { background: var(--c-warn); color:#1e1e1e; }
.badge.auto { background: var(--c-text-faint); color:#111; }
.badge.normal { background: var(--c-primary); color:#fff; }
.badge.late { background: var(--c-danger); color:#fff; }
.badge.comp { background: var(--c-primary-alt); color:#fff; }

/* Status cards */
.status-grid { display:grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.status-card { background: var(--c-panel-alt); padding: var(--space-3); border:1px solid var(--c-border); border-radius: var(--radius-sm); position:relative; }
.status-card .label { font-size:.65rem; text-transform:uppercase; font-weight:600; color: var(--c-text-faint); margin-bottom:4px; }
.status-card .value { font-size:1.4rem; font-weight:700; }
.status-card.late { border-color: var(--c-danger); }
.status-card.manual { border-color: var(--c-warn); }
.status-card.comp { border-color: var(--c-primary); }

/* Break timeline */
.timeline { display:flex; flex-direction:column; gap: var(--space-2); }
.timeline-item { background: var(--c-panel-alt); padding: var(--space-3); border-radius: var(--radius-sm); border:1px solid var(--c-border); display:flex; justify-content:space-between; align-items:center; }
.timeline-item.active { border-color: var(--c-warn); box-shadow: 0 0 0 1px var(--c-warn-alt), 0 0 0 4px rgba(245,158,11,.25); }
.timeline-item .meta { font-size:.75rem; color: var(--c-text-faint); }

/* Table */
.table { width:100%; border-collapse:collapse; font-size:.8rem; }
.table th { text-align:left; font-weight:600; font-size:.7rem; padding:10px 12px; background: var(--c-panel-alt); color: var(--c-text-faint); letter-spacing:.5px; }
.table td { padding:10px 12px; border-bottom:1px solid var(--c-border); }
.table tbody tr:nth-child(even){ background: var(--c-panel-alt); }
.table tbody tr:hover { background: var(--c-panel); }

/* Notifications */
.notice-stack { display:flex; flex-direction:column; gap: var(--space-2); margin-top: var(--space-3); }
.notice { padding:10px 14px; border-radius: var(--radius-sm); font-size:.75rem; font-weight:500; display:flex; gap: var(--space-3); align-items:center; border:1px solid var(--c-border); }
.notice.success { background: rgba(16,185,129,.12); color: var(--c-accent); }
.notice.error { background: rgba(220,38,38,.12); color: var(--c-danger); }
.notice.warn { background: rgba(245,158,11,.12); color: var(--c-warn); }

/* Logs list */
.log-list { display:flex; flex-direction:column; gap: var(--space-2); font-size:.7rem; }
.log-entry { padding:8px 10px; background: var(--c-panel-alt); border:1px solid var(--c-border); border-radius: var(--radius-xs); display:flex; justify-content:space-between; }
.log-entry .left { display:flex; flex-direction:column; }
.log-entry .time { font-size:.65rem; color: var(--c-text-faint); }

/* Incidents */
.incidents { display:flex; flex-direction:column; gap: var(--space-2); }
.incident { padding:10px 12px; background: rgba(220,38,38,.12); border:1px solid var(--c-danger-alt); border-radius: var(--radius-sm); font-size:.7rem; }
.incident.warn { background: rgba(245,158,11,.12); border-color: var(--c-warn-alt); }
.incident .title { font-weight:600; margin-bottom:2px; }
.incident .desc { color: var(--c-text-faint); }

/* Footer */
.footer { margin-top: var(--space-5); padding: var(--space-4) 0; font-size:.65rem; color: var(--c-text-faint); text-align:center; }

/* Focus ring utility */
.focus-ring:focus { outline:none; box-shadow:0 0 0 3px var(--c-focus); }

/* Fade-in */
.fade-in { animation: fade-in .35s ease; }
@keyframes fade-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }