/* ── Onaris Design Tokens ───────────────────────────────── */
:root {
  --font-base: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --accent:      #FF6360;
  --accent-dark: color-mix(in srgb, #FF6360, black 5%);
  --accent-15:   color-mix(in srgb, #FF6360 15%, transparent);

  --leading:     #172836;
  --leading-70:  color-mix(in srgb, #172836 70%, transparent);
  --leading-50:  color-mix(in srgb, #172836 50%, transparent);
  --leading-20:  color-mix(in srgb, #172836 20%, transparent);

  --bg:          #f4f2ef;
  --bg-dark:     color-mix(in srgb, #f4f2ef, black 20%);
  --bg-clear:    color-mix(in srgb, #f4f2ef, white 40%);
  --surface:     #ffffff;

  --text-primary:   #090b0e;
  --text-secondary: #8B8B8B;
  --text-on-btn:    #ffffff;

  --border:       color-mix(in srgb, #f4f2ef, black 10%);
  --border-focus: color-mix(in srgb, #172836 25%, transparent);

  --success-bg:     #dcfce7;
  --success-border: #bbf7d0;
  --success-text:   #166534;
  --danger-bg:      #fee2e2;
  --danger-border:  #fecaca;
  --danger-text:    #b91c1c;

  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 99px;
  --gutter:      24px;

  --shadow-panel:  0 6px 14px rgba(15, 23, 42, .08);
  --shadow-footer: 0 -10px 24px rgba(0, 0, 0, .06);
  --control-h:     35px;
  --input-disabled: color-mix(in srgb, #ffffff, black 10%);
  --accent-light:  color-mix(in srgb, #FF6360, white 20%);
  --accent-50:     color-mix(in srgb, #FF6360 50%, transparent);

  /* App-specific aliases */
  --text:  var(--text-primary);
  --muted: var(--text-secondary);

  /* Health level colors */
  --unreachable: #6d28d9;
  --crit:        #b91c1c;
  --stuck:       #c2410c;
  --error:       #b91c1c;
  --warn:        #92400e;
  --ok:          #166534;
}

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

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
  user-select: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  animation: glow 2.5s ease-in-out infinite;
  transition: background .3s;
}
.brand-dot.loading { background: var(--warn); animation: pulse .6s ease-in-out infinite alternate; }
.brand-dot.error   { background: var(--crit); animation: none; }

@keyframes glow  { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes pulse { from { opacity:.4; } to { opacity:1; } }

.counters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.count-badge strong { font-weight: 700; }

.count-unreachable { background: color-mix(in srgb, #6d28d9 10%, white); color: #4c1d95; }
.count-crit        { background: var(--danger-bg); color: var(--danger-text); }
.count-stuck       { background: color-mix(in srgb, #c2410c 10%, white); color: #7c2d12; }
.count-error       { background: var(--danger-bg); color: var(--danger-text); }
.count-warn        { background: #fef3c7; color: #78350f; }
.count-ok          { background: var(--success-bg); color: var(--success-text); }

.topbar-meta {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Tabs nav ─────────────────────────────────────────────── */
.tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 0.5px solid var(--border);
  padding: 0 var(--gutter);
  background: var(--surface);
  flex-shrink: 0;
}

.tab {
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

/* ── Fleet table ──────────────────────────────────────────── */
main { padding: 16px var(--gutter) 40px; }

.table-wrapper {
  overflow-x: auto;
  background: var(--surface);
  border-radius: var(--radius);
}

.fleet {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.fleet thead th {
  padding: 6px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 48px;
  background: var(--surface);
  z-index: 5;
  white-space: nowrap;
}
.fleet thead th.r { text-align: right; }

.fleet tbody tr {
  transition: background 120ms ease;
  cursor: default;
}
.fleet tbody tr:hover { background: var(--bg); }

/* Level row tints */
.row-unreachable       { background: color-mix(in srgb, #6d28d9 5%, transparent); }
.row-unreachable:hover { background: color-mix(in srgb, #6d28d9 8%, transparent) !important; }
.row-crit              { background: color-mix(in srgb, #b91c1c 5%, transparent); }
.row-crit:hover        { background: color-mix(in srgb, #b91c1c 8%, transparent) !important; }
.row-stuck             { background: color-mix(in srgb, #c2410c 4%, transparent); }
.row-stuck:hover       { background: color-mix(in srgb, #c2410c 7%, transparent) !important; }
.row-error             { background: color-mix(in srgb, #b91c1c 4%, transparent); }
.row-error:hover       { background: color-mix(in srgb, #b91c1c 7%, transparent) !important; }

.fleet tbody td {
  padding: 12px 10px;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.fleet tbody td.r {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* Client name */
.client-name {
  font-family: "SFMono-Regular", "Cascadia Code", "Fira Mono", monospace;
  font-size: 12px;
  font-weight: 500;
}

/* Task cell */
.task-cell { color: var(--leading-70); font-size: 12px; max-width: 200px; }
.task-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* Status badges */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.badge-unreachable { background: color-mix(in srgb, #6d28d9 12%, white); color: #4c1d95; }
.badge-crit        { background: var(--danger-bg); color: #991b1b; }
.badge-stuck       { background: color-mix(in srgb, #c2410c 12%, white); color: #7c2d12; }
.badge-error       { background: var(--danger-bg); color: var(--danger-text); }
.badge-warn        { background: #fef3c7; color: #78350f; }
.badge-ok          { background: var(--success-bg); color: var(--success-text); }

/* Comportamiento */
.behav {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}
.behav-critico    { background: var(--danger-bg); color: var(--danger-text); }
.behav-disparador { background: color-mix(in srgb, #b91c1c 8%, white); color: #9f1239; }
.behav-semi       { background: color-mix(in srgb, #c2410c 8%, white); color: #7c2d12; }
.behav-nocritico  { background: #fef3c7; color: #78350f; }

/* Misc */
.muted { color: var(--text-secondary); }

.info-row td {
  text-align: center;
  padding: 48px;
  color: var(--text-secondary);
  font-style: italic;
}

.client-link { color: inherit; text-decoration: none; }
.client-link:hover .client-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Client detail container ─────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px var(--gutter) 48px;
}

.back-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  flex-shrink: 0;
  transition: color 120ms ease;
}
.back-link:hover { color: var(--text-primary); }

.brand-sep {
  color: var(--border);
  font-size: 20px;
  flex-shrink: 0;
}

.brand-client {
  font-family: "SFMono-Regular", "Cascadia Code", "Fira Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
  color: var(--text-primary);
}

/* Health panel */
.health-panel {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-panel);
}

.health-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.badge-xl {
  display: inline-block;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
}
.badge-xl.badge-ok          { background: var(--success-bg); color: var(--success-text); }
.badge-xl.badge-warn        { background: #fef3c7; color: #78350f; }
.badge-xl.badge-error       { background: var(--danger-bg); color: var(--danger-text); }
.badge-xl.badge-crit        { background: var(--danger-bg); color: #991b1b; }
.badge-xl.badge-stuck       { background: color-mix(in srgb, #c2410c 12%, white); color: #7c2d12; }
.badge-xl.badge-unreachable { background: color-mix(in srgb, #6d28d9 12%, white); color: #4c1d95; }

.health-reason {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Metric cards */
.metrics-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.metric-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 140px;
}

.metric-card-warn { border-color: color-mix(in srgb, #c2410c 30%, transparent); }

.metric-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.metric-row {
  font-size: 13px;
  padding: 2px 0;
}
.metric-row strong { font-weight: 600; }
.metric-row.metric-error strong { color: var(--crit); }
.ok-text  { color: var(--ok); font-weight: 600; }
.err-text { color: var(--crit); font-weight: 600; }
.mono { font-family: "SFMono-Regular", "Cascadia Code", monospace; font-size: 11px; }

/* Sections */
.section { margin-bottom: 28px; }

.section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
}

/* 24h Timeline */
.timeline-wrap { overflow: hidden; }

.timeline {
  display: flex;
  height: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--border);
  gap: 1px;
}

.tl-slot { flex: 1; min-width: 1px; cursor: default; }
.tl-empty       { background: var(--border); opacity: .9; }
.tl-ok          { background: #22c55e; opacity: .7; }
.tl-warn        { background: #f59e0b; opacity: .85; }
.tl-error       { background: #ef4444; opacity: .8; }
.tl-crit        { background: #dc2626; opacity: .9; }
.tl-stuck       { background: #f97316; opacity: .85; }
.tl-unreachable { background: #7c3aed; opacity: .75; }

.timeline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Error frequency dot-track */
.dottrack-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.dottrack-table th,
.dottrack-table td {
  padding: 4px 8px;
  text-align: center;
  border-bottom: 0.5px solid var(--border);
}

.dottrack-table th {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.dottrack-table td:first-child { text-align: left; }
.dt-task {
  font-family: "SFMono-Regular", "Cascadia Code", monospace;
  font-size: 11px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  cursor: default;
}
.dot-empty { background: var(--border); color: transparent; }
.dot-warn  { background: #fef3c7; color: #78350f; }
.dot-crit  { background: var(--danger-bg); color: var(--danger-text); }

/* Transitions table */
.transitions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.transitions-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 0.5px solid var(--border);
}

.transitions-table td {
  padding: 7px 10px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}

.trigger-cell {
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── Dashboard KPI row ───────────────────────────────────── */
.kpi-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.kpi-card {
  flex: 1;
  min-width: 100px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-panel);
}

.kpi-value {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.kpi-progress    { color: var(--ok); }
.kpi-errors      { color: var(--crit); }
.kpi-stuck       { color: var(--stuck); }
.kpi-error       { color: var(--error); }
.kpi-unreachable { color: var(--unreachable); }
.kpi-warn        { color: var(--warn); }

/* ── Two-column panels (errores | atascados+advertencias) ─── */
.panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: start;
}

.panels-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 700px) { .panels-row { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
}

.panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
  flex: 1;
}

.panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.panel-link {
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
}
.panel-link:hover { color: var(--text-primary); }

.panel-body {
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.empty-msg {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 13px;
}

/* ── Stuck items ─────────────────────────────────────────── */
.stuck-item {
  display: flex;
  gap: 10px;
  padding: 7px 6px;
  border-radius: var(--radius);
  transition: background 120ms ease;
  align-items: flex-start;
}
.stuck-item:hover { background: var(--bg); }

.stuck-name {
  font-family: "SFMono-Regular", "Cascadia Code", "Fira Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  min-width: 110px;
  padding-top: 1px;
}
.stuck-name:hover { text-decoration: underline; text-underline-offset: 3px; }

.stuck-tasks { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.stuck-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.stuck-time {
  font-variant-numeric: tabular-nums;
  color: var(--stuck);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Warning items ───────────────────────────────────────── */
.warn-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 6px;
  border-radius: var(--radius);
  font-size: 12px;
  transition: background 120ms ease;
  flex-wrap: wrap;
  min-height: 32px;
}
.warn-item:hover { background: var(--bg); }

.warn-name {
  font-family: "SFMono-Regular", "Cascadia Code", "Fira Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  min-width: 100px;
}
.warn-name:hover { text-decoration: underline; text-underline-offset: 3px; }

.warn-reason {
  color: var(--text-secondary);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warn-more {
  padding: 6px 6px 2px;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
}

/* ── Status indicators ───────────────────────────────────── */
.active-indicator    { color: var(--crit); font-size: 10px; margin-left: 3px; }
.recovered-indicator { color: var(--ok);   font-size: 10px; margin-left: 3px; }

/* ── Section hint ────────────────────────────────────────── */
.section-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* ── Fleet search ────────────────────────────────────────── */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.search-icon {
  position: absolute;
  left: 8px;
  color: var(--text-secondary);
  font-size: 15px;
  pointer-events: none;
  line-height: 1;
}

.search-input {
  background: var(--bg);
  border: 0.5px solid var(--leading-20);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  padding: 5px 28px 5px 26px;
  width: 200px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, width 200ms ease;
  font-family: inherit;
}
.search-input:focus {
  border-color: var(--leading);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 35%, transparent);
  width: 260px;
}
.search-input::placeholder { color: var(--text-secondary); }

.search-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  transition: color 120ms ease;
}
.search-clear:hover { color: var(--text-primary); }

/* ── Clickable KPI cards ─────────────────────────────────── */
.kpi-card-click {
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.kpi-card-click:hover {
  border-color: var(--leading-20);
  background: var(--bg);
}
.kpi-card-link {
  text-decoration: none;
  display: block;
  transition: border-color 120ms ease, background 120ms ease;
}
.kpi-card-link:hover {
  border-color: var(--leading-20);
  background: var(--bg);
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 180ms ease;
}
.modal-overlay.modal-visible { opacity: 1; }

.modal-box {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(560px, 92vw);
  max-height: 72vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  transform: translateY(6px);
  transition: transform 180ms ease;
}
.modal-overlay.modal-visible .modal-box { transform: translateY(0); }

.modal-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--border);
  gap: 10px;
  flex-shrink: 0;
}

.modal-title {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.modal-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--bg);
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius);
  transition: color 120ms ease, background 120ms ease;
}
.modal-close:hover { color: var(--text-primary); background: var(--bg); }

.modal-body {
  overflow-y: auto;
  padding: 6px;
  flex: 1;
}

/* Modal client rows */
.modal-client-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius);
  font-size: 13px;
  transition: background 120ms ease;
}
.modal-client-row:hover { background: var(--bg); }

.modal-client-name {
  font-family: "SFMono-Regular", "Cascadia Code", "Fira Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  min-width: 140px;
  white-space: nowrap;
}
.modal-client-name:hover { text-decoration: underline; text-underline-offset: 3px; }

.modal-stat  { font-size: 12px; white-space: nowrap; }
.modal-since { font-size: 11px; margin-left: auto; flex-shrink: 0; color: var(--text-secondary); }

/* Modal stuck items */
.modal-stuck-item {
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 2px;
}
.modal-stuck-item:last-child { border-bottom: none; }

.modal-stuck-task {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 1px 0;
}
.modal-stuck-task .stuck-time { margin-left: auto; }

/* ── Filters bar ─────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 8px;
  padding: 10px var(--gutter);
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
}

.ui-input,
.ui-select {
  font-size: 13px;
  font-family: inherit;
  padding: 6px 12px;
  height: 35px;
  border-radius: var(--radius);
  border: 0.5px solid var(--leading-20);
  background: var(--surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ui-input:hover,
.ui-select:hover { border-color: var(--leading-50); }

.ui-input:focus,
.ui-select:focus {
  border-color: var(--leading);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 35%, transparent);
}

.ui-input::placeholder { color: var(--text-secondary); }

.ui-search {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B8B8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  background-size: 16px 16px;
  min-width: 200px;
}

.ui-select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23172836' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) 50%;
  background-size: 17px 17px;
  cursor: pointer;
}

/* ── Sortable columns ────────────────────────────────────── */
.col-sort {
  cursor: pointer;
  user-select: none;
}
.col-sort:hover { color: var(--text-primary); }
.col-sort.sort-active { color: var(--accent); }
.sort-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.5;
}
.col-sort.sort-active .sort-icon { opacity: 1; }

/* Link button */
.link-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
}
.link-btn:hover { color: var(--text-primary); }