/* ===== Components (Pas 4) ===== */

.link { color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.18); }
.link:hover { border-bottom-color: rgba(255,255,255,0.42); }
.muted { color: var(--muted); }

/* Topbar: breadcrumbs + search */
.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.breadcrumbs li + li:before { content: "·"; opacity: .7; margin-right: 8px; }

.topbar-left { display: flex; flex-direction: column; gap: 4px; }
.topbar-heading { display: flex; flex-direction: column; gap: 2px; }
.topbar-title { font-size: 15px; }
.topbar-subtitle { font-size: 12px; color: var(--muted); }

.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-search input {
  width: min(320px, 42vw);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
html[data-bs-theme="light"] .topbar-search input { background: rgba(255,255,255,0.75); }

/* Grids */
.grid { display: grid; gap: var(--space-3); }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid-quick { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Cards */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-3); }
.card-head h2 { margin: 0; }
.card-foot { margin-top: var(--space-3); }
.divider { height: 1px; background: var(--border); margin: var(--space-3) 0; }

.actions { display: inline-flex; gap: 10px; align-items: center; }

/* KPI */
.kpi { position: relative; overflow: hidden; }
.kpi:before {
  content: "";
  position: absolute;
  inset: -60px -80px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
              radial-gradient(circle at 60% 60%, rgba(255,255,255,0.10), transparent 55%),
              linear-gradient(135deg, rgba(59,130,246,0.28), rgba(16,185,129,0.16));
  transform: rotate(18deg);
  pointer-events: none;
}
.kpi-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-label { position: relative; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .15px; }
.kpi-value { position: relative; font-size: 26px; font-weight: 900; margin-top: 8px; }
.kpi-hint { position: relative; color: var(--muted); font-size: 12px; margin-top: 6px; }
.kpi--mini:before { display: none; }
.kpi--mini .kpi-value { font-size: 22px; margin-top: 6px; }

/* Badges / pills */
.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.pill { background: rgba(255,255,255,0.04); color: var(--muted); }

.badge[data-tone="good"], .pill[data-tone="good"] { border-color: rgba(34,197,94,0.35); color: rgba(34,197,94,0.95); }
.badge[data-tone="info"], .pill[data-tone="info"] { border-color: rgba(59,130,246,0.35); color: rgba(59,130,246,0.95); }
.badge[data-tone="warn"], .pill[data-tone="warn"] { border-color: rgba(245,158,11,0.35); color: rgba(245,158,11,0.95); }
.badge[data-tone="bad"],  .pill[data-tone="bad"]  { border-color: rgba(239,68,68,0.35); color: rgba(239,68,68,0.95); }
.badge[data-tone="muted"],.pill[data-tone="muted"]{ border-color: rgba(255,255,255,0.12); color: var(--muted); }

/* Tables helpers */
.th-right, .td-right { text-align: right; }
.table-actions { display: inline-flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.table-actions.right { width: 100%; justify-content: flex-end; }

/* Small button variants */
.btn.xs { padding: 8px 10px; font-size: 12px; border-radius: 10px; }
.btn.danger { border-color: rgba(239,68,68,0.35); color: rgba(239,68,68,0.95); }
.btn.primary { color: #fff; }

/* Lists / rows */
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); }
.row-main { min-width: 0; }
.row-title { font-weight: 800; }
.row-sub { font-size: 12px; margin-top: 4px; }
.row-aside { display: inline-flex; gap: 10px; align-items: center; }

/* Quick links */
.quick { display: block; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); text-decoration: none; color: var(--text); }
.quick:hover { background: rgba(255,255,255,0.05); }
.quick-title { font-weight: 800; }
.quick-sub { font-size: 12px; margin-top: 4px; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 52px 14px 1fr; align-items: center; gap: 10px; }
.timeline .time { font-size: 12px; color: var(--muted); }
.timeline .dot { width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.timeline .txt { font-size: 13px; }

/* Filters */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.filters .f { display: grid; gap: 6px; }
.filters .f span { font-size: 12px; color: var(--muted); }
.filters input, .filters select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
html[data-bs-theme="light"] .filters input,
html[data-bs-theme="light"] .filters select { background: rgba(255,255,255,0.75); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Cells */
.cell-title { font-weight: 800; }
.cell-sub { font-size: 12px; margin-top: 4px; }