/* ═══════════════════════════════════════════════════════════════
   Candidates Intake — frontend/css/candidates-intake.css

   Self-contained styles for the Tamara unified candidates view.
   Kept independent of main.css/components.css so it can't drift
   visually with kanban changes; uses the same color tokens for
   consistency (deep navy + ISF blue accent).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ci-bg:           #e7ecf5;
  --ci-surface:      #ffffff;
  --ci-border:       #d6dce8;
  --ci-text:         #1a2438;
  --ci-text-muted:   #6b7689;
  --ci-accent:       #1283EF;   /* ISF blue-bright */
  --ci-accent-soft:  #e4f0ff;
  --ci-shadow:       0 1px 3px rgba(16, 26, 60, .09), 0 10px 26px rgba(16, 26, 60, .11);
  --ci-radius:       10px;

  /* ISF blue identity palette — used by the donut, legend and accents */
  --isf-blue-deep:   #06175C;
  --isf-blue:        #092284;
  --isf-blue-mid:    #1283EF;
  --isf-blue-soft:   #2292FD;
  --isf-blue-pale:   #8FC8FF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ci-bg);
  color: var(--ci-text);
  font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────── */

.ci-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px;
  background: var(--isf-blue-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 2px 16px rgba(6, 23, 92, .35);
  position: relative;
  z-index: 2;
}

/* ISF logo + title lock-up on the left of the header. */
.ci-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ci-logo {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

.ci-title h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-family: "Libre Franklin", inherit;
  line-height: 1.15;
  color: #ffffff;
}

.ci-subtitle {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .005em;
  max-width: 54ch;
}

.ci-right {
  display: flex; align-items: center; gap: 18px;
}

.ci-count {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--ci-accent-soft);
  color: var(--ci-accent);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
}

.ci-count-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ci-accent);
  animation: ci-pulse 1.8s ease-in-out infinite;
}

@keyframes ci-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.15); }
}

.ci-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .08s ease;
}

.ci-back:hover {
  border-color: rgba(255, 255, 255, .5);
  color: #ffffff;
  background: rgba(255, 255, 255, .14);
}
.ci-back:active { transform: translateY(1px); }

/* ── Main / toolbar ─────────────────────────────────────────── */

.ci-main {
  padding: 24px 36px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Top filters row ────────────────────────────────────────── */

.ci-filters {
  display: flex; align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.ci-filter {
  display: inline-flex; flex-direction: column;
  gap: 4px;
}

.ci-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ci-text-muted);
  font-weight: 600;
}

.ci-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 30px 8px 12px;
  background: var(--ci-surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236b7689' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 10px center;
  border: 1px solid var(--ci-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ci-text);
  cursor: pointer;
  min-width: 170px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ci-select:focus {
  outline: none;
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 3px var(--ci-accent-soft);
}

.ci-current-date {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ci-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 26, 60, .04);
  font-variant-numeric: tabular-nums;
}
.ci-current-date::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--isf-blue-mid);
  flex-shrink: 0;
}

/* ── CANDIDATE SOURCES card (donut + legend) ───────────────── */

.ci-section-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ci-text-muted);
}

.ci-sources-card {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow);
  padding: 22px 26px;
  margin-bottom: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ci-sources-card:hover {
  border-color: var(--isf-blue-mid);
  box-shadow: 0 2px 6px rgba(9,34,132,.10), 0 8px 22px rgba(9,34,132,.10);
}

.ci-sources-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.ci-donut-wrap {
  position: relative;
  width: 220px; height: 220px;
}

.ci-donut-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  display: block;
  filter: drop-shadow(0 3px 8px rgba(9, 34, 132, .14));
}

/* Slice segments (rendered by JS with class .ci-donut-seg). Hovering a
   slice thickens it for a clear, interactive feel. The grey base track
   is a plain <circle> with no class, so it never reacts. */
.ci-donut-seg {
  transition: stroke-width .18s ease, opacity .18s ease;
  cursor: pointer;
}
.ci-donut-svg:hover .ci-donut-seg { opacity: .5; }
.ci-donut-seg:hover {
  opacity: 1;
  stroke-width: 38;
}

.ci-donut-pct {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
  font-size: 12px;
  fill: #ffffff;
  pointer-events: none;
}

.ci-donut-label {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}

.ci-donut-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--ci-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ci-donut-caption {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ci-text-muted);
}

.ci-legend {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

.ci-legend-item {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ci-text);
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--ci-border);
  border-radius: 999px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.ci-legend-item:hover {
  border-color: var(--isf-blue-mid);
  box-shadow: 0 2px 8px rgba(9, 34, 132, .12);
  transform: translateY(-1px);
}

.ci-legend-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(9, 34, 132, .08);
}

.ci-legend-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-legend-count {
  flex-shrink: 0;
  color: var(--ci-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Source selection — click a donut slice (or its legend viñeta) to highlight
   the matching source. Persistent (distinct from the transient hover above).
   Declared AFTER the hover rules so it wins on equal specificity. */
.ci-legend-item.ci-selected {
  border-color: var(--isf-blue);
  background: var(--isf-blue-pale);
  box-shadow: 0 0 0 2px rgba(9, 34, 132, .18);
  font-weight: 600;
}
.ci-donut-seg.ci-active { opacity: 1; stroke-width: 38; }
.ci-donut-seg.ci-dim   { opacity: .22; }

/* Percentages live INSIDE donut slices now — hide the legend variant if any
   markup still emits it. The renderLegend() in JS stopped writing this. */
.ci-legend-pct { display: none; }

/* ── KPI row ────────────────────────────────────────────────── */

.ci-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.ci-kpi-card {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow);
  padding: 18px 22px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.ci-kpi-card:hover {
  border-color: var(--isf-blue-mid);
  box-shadow: 0 2px 6px rgba(9,34,132,.10), 0 8px 22px rgba(9,34,132,.10);
  transform: translateY(-2px);
}

.ci-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ci-text-muted);
  margin-bottom: 8px;
}

.ci-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ci-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.ci-kpi-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--ci-text-muted);
  margin-left: 2px;
}

.ci-kpi-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ci-text-muted);
}

/* ── Search bar + count ─────────────────────────────────────── */

.ci-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ci-toolbar-right {
  display: inline-flex; align-items: center; gap: 12px;
}

.ci-search {
  position: relative;
  flex: 1; max-width: 420px;
}

.ci-search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ci-text-muted);
  font-size: 16px;
  pointer-events: none;
}

.ci-search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--ci-border);
  background: var(--ci-surface);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ci-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ci-search input:focus {
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 3px var(--ci-accent-soft);
}

.ci-refresh {
  padding: 9px 18px;
  border: 1px solid var(--ci-border);
  background: var(--ci-surface);
  border-radius: 8px;
  color: var(--ci-text);
  font-size: 13px;
  font-weight: 600;
  font-family: "Libre Franklin", inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
}

.ci-refresh:hover {
  background: #fafbfd;
  border-color: #b8c0d2;
  box-shadow: 0 2px 6px rgba(20, 30, 60, .08);
}
.ci-refresh:active { transform: translateY(1px); box-shadow: none; }

/* Full Sync — heavier action, teal accent to set it apart from Refresh. */
.ci-fullsync {
  padding: 9px 18px;
  border: 1px solid #0ab39c;
  background: linear-gradient(180deg, #0ab39c 0%, #099885 100%);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: "Libre Franklin", inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
  box-shadow: 0 1px 3px rgba(10, 179, 156, .35);
}
.ci-fullsync:hover {
  background: linear-gradient(180deg, #11c4ad 0%, #0aa692 100%);
  box-shadow: 0 3px 10px rgba(10, 179, 156, .42);
}
.ci-fullsync:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(10, 179, 156, .25); }

/* Floating progress banner for Full Sync. */
.ci-sync-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1000;
  background: #1a2438; color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(20,30,60,.24);
}
.ci-sync-banner.is-done { background: #0ab39c; }

/* ── Table ──────────────────────────────────────────────────── */

.ci-table-wrap {
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow);
  overflow: hidden;             /* keeps the rounded corners + pagination row stays put */
}

/* Top horizontal scrollbar — mirrors the table's bottom scroll so the
   horizontal scroll is discoverable from the top too. JS keeps the two
   in sync and sizes the spacer to the table width (candidatesIntake.js). */
.ci-scroll-top {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c1c8d6 #f5f7fb;
  border-bottom: 1px solid var(--ci-border);
}
.ci-scroll-top::-webkit-scrollbar { height: 10px; }
.ci-scroll-top::-webkit-scrollbar-track {
  background: #f5f7fb;
}
.ci-scroll-top::-webkit-scrollbar-thumb {
  background: #c1c8d6;
  border-radius: 6px;
  border: 2px solid #f5f7fb;
}
.ci-scroll-top::-webkit-scrollbar-thumb:hover { background: #a5adc0; }
.ci-scroll-top-spacer { height: 1px; }

/* Inner scroller: ONLY the table scrolls horizontally, the pagination
   bar at the bottom of .ci-table-wrap stays anchored to the viewport.
   Always-visible scrollbar (Windows/Linux WebKit + Firefox) so users
   discover the horizontal scroll without hovering. */
.ci-table-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c1c8d6 #f5f7fb;
}
.ci-table-scroll::-webkit-scrollbar {
  height: 10px;
}
.ci-table-scroll::-webkit-scrollbar-track {
  background: #f5f7fb;
  border-top: 1px solid var(--ci-border);
}
.ci-table-scroll::-webkit-scrollbar-thumb {
  background: #c1c8d6;
  border-radius: 6px;
  border: 2px solid #f5f7fb;
}
.ci-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #a5adc0;
}

.ci-table {
  width: 100%;
  min-width: 1100px;            /* force columns to keep readable widths and scroll instead of squish */
  border-collapse: collapse;
  font-size: 13.5px;
}

.ci-table thead th {
  text-align: left;
  padding: 12px 16px;
  background: #fafbfd;
  color: var(--ci-text-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ci-border);
}

.ci-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f2f7;
  color: var(--ci-text);
  vertical-align: middle;
}

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

.ci-table tbody tr:hover {
  background: #fafbfd;
}

.col-num {
  width: 56px;
  color: var(--ci-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.col-name { min-width: 180px; }
.col-name .ci-name { font-weight: 600; }

.col-display-name { min-width: 160px; color: var(--ci-text); }
.col-email   { color: var(--ci-text-muted); }
.col-req     { color: var(--ci-text); }
.col-stage   { color: var(--ci-text); white-space: nowrap; }
.col-status  { color: var(--ci-text); white-space: nowrap; }
.col-start-date { color: var(--ci-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-salary  { color: var(--ci-text); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* ── Deep-link highlight (arriving from Max's "See" link) ────── */
.ci-table tbody tr.ci-row-highlight {
  animation: ci-row-flash 3s ease;
}
@keyframes ci-row-flash {
  0%   { background: #d0f5ee; }
  60%  { background: #e0f7f4; }
  100% { background: transparent; }
}

/* ── Inline editing ─────────────────────────────────────────── */
/* Editable cells show a small pencil icon. The pencil is invisible by
   default and fades in when the row is hovered, so the table stays clean
   but the affordance is discoverable. Clicking anywhere in the cell (value
   or pencil) starts the edit. */
.ci-editable {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 4px;
  transition: background .12s ease;
}

.ci-pencil {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: var(--ci-text-muted);
  opacity: 0;
  transition: opacity .12s ease, fill .12s ease;
  pointer-events: none;        /* clicks pass through to the editable span */
}

/* Reveal the pencil when hovering the row (subtle) or the cell (stronger). */
.ci-table tbody tr:hover .ci-pencil { opacity: .45; }
.ci-editable:hover            { background: var(--ci-accent-soft); }
.ci-editable:hover .ci-pencil { opacity: 1; fill: var(--ci-accent); }

.ci-editing { background: var(--ci-accent-soft); }

.ci-inline-input {
  width: 100%;
  min-width: 90px;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--ci-accent);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ci-text);
  background: #fff;
  outline: none;
}
.ci-inline-input:focus {
  box-shadow: 0 0 0 3px var(--ci-accent-soft);
}

.ci-saving {
  color: var(--ci-accent);
  font-style: italic;
  font-size: 12px;
}

/* ── Stacked per-application cells (candidate with >1 application) ── */
/* Each application's value sits on its own line, separated by a thin
   divider so Tamara can read them as distinct applications. */
.ci-stacked .ci-stack-item + .ci-stack-item {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--ci-border);
}

/* Top-align stacked rows so the multi-line cells line up with the
   single-line applicant columns (name, email, salary). */
.ci-row-multi td { vertical-align: top; }

/* Small count badge next to the candidate name. */
.ci-app-count {
  display: inline-block;
  margin-left: 8px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ci-accent-soft);
  color: var(--ci-accent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

/* Requisition shown by ID + "cerrada" hint (when UKG hides the title
   because the requisition was closed/archived). Subdued italic so Tamara
   can tell at a glance these are not the same as live, named openings. */
.ci-req-closed {
  color: var(--ci-text-muted);
  font-variant-numeric: tabular-nums;
}
.ci-req-closed em {
  font-style: italic;
  color: #b06a00;
}
.col-resume  { white-space: nowrap; width: 110px; }
.col-created { color: var(--ci-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-source  { white-space: nowrap; width: 140px; }

/* Resume cell — "Resume" badge when present, "Sin registro" italic when not. */
.ci-resume {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}
.ci-resume-yes  { background: #e6f6ec; color: #1c7c43; }
.ci-resume-none { background: transparent; color: var(--ci-text-muted); font-style: italic; font-weight: 500; }

/* When the chip is also a SharePoint link — subtle hover affordance so
   Tamara discovers it's clickable without making it scream "BUTTON". */
a.ci-resume.ci-resume-link {
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
a.ci-resume.ci-resume-link:hover {
  background: #cdebd6;
  text-decoration: underline;
}

.ci-source-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eef1f7;
  color: var(--ci-text);
}

/* Per-source accent colors. Falls back to neutral chip when source is unknown. */
.ci-source-chip.src-wire-people    { background: #e6efff; color: #1f5fff; }  /* blue   */
.ci-source-chip.src-amber-email    { background: #e6efff; color: #1f5fff; }
.ci-source-chip.src-intake-delivery{ background: #e6efff; color: #1f5fff; }
.ci-source-chip.src-bbl            { background: #ffe6e6; color: #c0392b; }  /* red    */
.ci-source-chip.src-hr             { background: #e6f6ec; color: #1c7c43; }  /* green  */
.ci-source-chip.src-recruiter-pro  { background: #ede4ff; color: #5b3fcc; }  /* purple */
.ci-source-chip.src-hire-group     { background: #fff0d6; color: #b06a00; }  /* orange */
.ci-source-chip.src-ukg            { background: #f0e8ff; color: #5b3fcc; }
.ci-source-chip.src-max-intelligence { background: #e0f7f4; color: #0a8888; }  /* teal — Max */
.ci-source-chip.src-manual         { background: #eef1f7; color: #475066; }

.ci-empty td {
  text-align: center;
  padding: 40px 16px;
  color: var(--ci-text-muted);
  font-style: italic;
}

/* ── Pagination (under the table) ───────────────────────────── */

.ci-pagination {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--ci-border);
  background: #fafbfd;
  font-size: 13px;
  color: var(--ci-text-muted);
}

.ci-pagination-info { font-variant-numeric: tabular-nums; }

.ci-pagination-controls { display: inline-flex; gap: 6px; }

.ci-page-btn {
  min-width: 34px; height: 32px;
  padding: 0 12px;
  background: var(--ci-surface);
  border: 1px solid var(--ci-border);
  border-radius: 6px;
  color: var(--ci-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
}
.ci-page-btn:hover:not(:disabled) {
  background: #fafbfd;
  border-color: #b8c0d2;
}
.ci-page-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.ci-page-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Responsive (compact view on small screens) ─────────────── */

@media (max-width: 900px) {
  .ci-kpi-row      { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ci-header,
  .ci-main { padding-left: 18px; padding-right: 18px; }

  .ci-toolbar { flex-direction: column; align-items: stretch; }
  .ci-search  { max-width: none; }
  .ci-filters { flex-wrap: wrap; }
  .ci-current-date { margin-left: 0; }

  .col-email { display: none; }
}