/* ── Design tokens (KoalaCCRM brand) ─────────────── */
:root {
    --brand-50:#EDF4EF; --brand-100:#DCEADF;
    --brand-600:#316A47; --brand-700:#265337; --brand-800:#1B3E29;
    --text:#141816; --muted:#4D5651; --soft:#6E7771;
    --border:#E4E8E6; --border-strong:#CED4D0;
    --bg:#F8FAF9; --surface:#FFFFFF; --surface-2:#F3F6F4;
    --success:#2B8A4F; --success-50:#E6F3EB;
    --warning:#B8862B; --warning-50:#F8EFD9;
    --error:#C4453A; --error-50:#FBE8E6; --error-100:#F4D2CE;
    --info:#3A6FB0; --info-50:#E4ECF6;
    --hil:#8A4BC4; --hil-50:#F1E9F9;
    --shadow-xs: 0 1px 2px rgba(20,24,22,.04);
    --shadow-sm: 0 1px 3px rgba(20,24,22,.06), 0 1px 2px rgba(20,24,22,.04);
    --shadow-md: 0 4px 12px rgba(20,24,22,.08), 0 2px 4px rgba(20,24,22,.04);
    --shadow-lg: 0 12px 32px rgba(20,24,22,.12), 0 4px 8px rgba(20,24,22,.06);
}

@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.inter { font-family: "Inter", sans-serif; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Tab navigation ─────────────────────────────── */
.tab-active {
    border-bottom: 2px solid rgb(38, 83, 55);
    color: rgb(38, 83, 55);
    background-color: #F9FAFB;
}
.tab-inactive {
    border-bottom: 2px solid transparent;
    color: #6B7280;
}
.tab-inactive:hover {
    color: #374151;
    background-color: #F9FAFB;
}

/* ── Pagination ──────────────────────────────────── */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    background: white;
    cursor: pointer;
    transition: background-color 0.15s;
}
.pagination-btn:hover:not([disabled]):not(.active) { background-color: #F3F4F6; }
.pagination-btn.active   { background-color: rgb(38, 83, 55); color: white; border-color: rgb(38, 83, 55); }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* === Extract mode segmented buttons === */
.kb-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.kb-seg-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kb-seg-btn:hover {
    border-color: #93c5fd;
    background: #f9fafb;
}

.kb-seg-btn.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e40af;
    box-shadow: 0 0 0 1px #2563eb inset;
}

.kb-seg-title {
    font-size: 14px;
    font-weight: 600;
}

.kb-seg-hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
}

.kb-seg-btn.active .kb-seg-hint {
    color: #3b82f6;
}