/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--type-body);
    background: var(--bg-canvas);
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
}

/* ── Left nav ── */
.left-nav {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--bg-divider);
    background: var(--bg-surface);
    padding: var(--space-lg) 0;
    transition: width 0.22s ease, min-width 0.22s ease, padding 0.22s ease,
                border-color 0.22s ease;
}

.left-nav.nav-collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    border-right-color: transparent;
    overflow: hidden;
}

.nav-group {
    padding: 0 var(--space-sm) var(--space-md);
}

.nav-group-label {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: var(--space-sm) var(--space-md);
    display: block;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.1s;
    margin: 2px 0;
    user-select: none;
}

.nav-item:hover { background: var(--bg-elevated); }

.nav-item.active-brand  { border-left-color: var(--state-brand);  background: var(--state-brand-bg); }
.nav-item.active-danger { border-left-color: var(--state-danger); background: var(--state-danger-bg); }
.nav-item.active-warn   { border-left-color: var(--state-warn);   background: var(--state-warn-bg); }
.nav-item.active-neutral{ border-left-color: var(--text-muted);   background: var(--bg-elevated); }

.nav-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.nav-item.active-brand  .nav-item-icon { color: var(--state-brand-light); }
.nav-item.active-danger .nav-item-icon { color: var(--state-danger-light); }
.nav-item.active-warn   .nav-item-icon { color: var(--state-warn-light); }
.nav-item.active-neutral .nav-item-icon { color: var(--text-primary); }

.nav-item-text { flex: 1; }
.nav-item-label {
    font-size: var(--type-body);
    color: var(--text-body);
    display: block;
    line-height: 1.3;
}
.nav-item.active-brand  .nav-item-label { color: var(--state-brand-light); }
.nav-item.active-danger .nav-item-label { color: var(--state-danger-light); }
.nav-item.active-warn   .nav-item-label { color: var(--state-warn-light); }
.nav-item.active-neutral .nav-item-label { color: var(--text-primary); }

.nav-item-sub {
    font-size: 11px;
    color: var(--text-subtle);
    display: block;
    line-height: 1.3;
}

.nav-item-count {
    font-size: var(--type-eyebrow);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    min-width: 24px;
    text-align: right;
}
.nav-item.active-brand   .nav-item-count { color: var(--state-brand-light); }
.nav-item.active-danger  .nav-item-count { color: var(--state-danger-light); }
.nav-item.active-warn    .nav-item-count { color: var(--state-warn-light); }
.nav-item.active-neutral .nav-item-count { color: var(--text-primary); }

/* ── Main area ── */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-canvas);
}

/* ── KPI bar ── */
.kpi-bar {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--bg-divider);
    background: var(--bg-surface);
}

.kpi-card {
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border-left: 3px solid;
}

.kpi-card.kpi-clickable {
    cursor: pointer;
    transition: filter 0.12s, transform 0.12s;
    user-select: none;
}
.kpi-card.kpi-clickable:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.kpi-card.kpi-clickable:active { filter: brightness(0.95); transform: translateY(0); }
.kpi-card.kpi-active           { outline: 2px solid currentColor; outline-offset: 2px; }

.kpi-bar-5 { grid-template-columns: repeat(5, 1fr); }

.kpi-card.kpi-brand   { border-left-color: var(--state-brand);  background: var(--state-brand-bg); }
.kpi-card.kpi-ok      { border-left-color: var(--state-ok);     background: var(--state-ok-bg); }
.kpi-card.kpi-warn    { border-left-color: var(--state-warn);   background: var(--state-warn-bg); }
.kpi-card.kpi-danger  { border-left-color: var(--state-danger); background: var(--state-danger-bg); }
.kpi-card.kpi-fuel    { border-left-color: #8B5CF6;             background: rgba(139,92,246,0.08); }

.kpi-eye {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-subtle);
    display: block;
    margin-bottom: var(--space-xs);
}

.kpi-value {
    font-size: 28px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    line-height: 1;
    display: block;
    margin-bottom: var(--space-xs);
}

.kpi-card.kpi-brand  .kpi-value { color: var(--state-brand-light); }
.kpi-card.kpi-ok     .kpi-value { color: var(--state-ok-light); }
.kpi-card.kpi-warn   .kpi-value { color: var(--state-warn-light); }
.kpi-card.kpi-danger .kpi-value { color: var(--state-danger-light); }
.kpi-card.kpi-fuel   .kpi-value { color: #C4B5FD; }

.kpi-sub {
    font-size: 11px;
    color: var(--text-subtle);
    display: block;
}

/* ── Nav toggle & home buttons ── */
.nav-toggle-btn,
.home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    flex-shrink: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.nav-toggle-btn:hover,
.home-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--bg-divider);
    color: var(--text-body);
}

/* ── Section header ── */
.section-hdr {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 12px 24px;
    border-bottom: 1px solid var(--bg-divider);
    background: var(--bg-surface);
}

.sec-eye {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.sec-title {
    font-size: var(--type-body-lg);
    color: var(--text-primary);
}

.result-count {
    margin-left: auto;
    font-size: var(--type-eyebrow);
    letter-spacing: 0.1em;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

/* ── Search input ── */
.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 8px;
    color: var(--text-subtle);
    pointer-events: none;
}

.search-input {
    height: 32px;
    background: var(--bg-canvas);
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: var(--type-body);
    padding: 0 var(--space-md) 0 30px;
    outline: none;
    transition: border-color 0.15s;
    width: 240px;
}

.search-input:focus { border-color: var(--accent-empapp); }
.search-input::placeholder { color: var(--text-subtle); }

/* ── Table wrap ── */
.table-wrap {
    flex: 1;
    overflow: auto;
}

/* ── Employee table ── */
.emp-table {
    width: 100%;
    border-collapse: collapse;
}

.emp-table th {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.12em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 16px;
    border-bottom: 2px solid var(--bg-divider);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    white-space: nowrap;
    text-align: left;
}

.emp-table th.sort-active { color: var(--accent-empapp); }

.emp-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bg-divider);
    vertical-align: middle;
}

.emp-table tr.row-alert  { border-left: 3px solid var(--state-danger); }
.emp-table tr.row-warn   { border-left: 3px solid var(--state-warn); }
.emp-table tr:hover td   { background: var(--bg-elevated); cursor: pointer; }
.emp-table tr.row-selected td { background: var(--state-brand-bg); }

.emp-name {
    font-size: var(--type-body);
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    line-height: 1.3;
    white-space: nowrap;
}

.emp-sub {
    font-size: 11px;
    color: var(--text-subtle);
    font-family: var(--font-mono);
    display: block;
    line-height: 1.3;
}

.emp-meta {
    font-family: var(--font-sans);
    color: var(--text-muted);
    margin-top: 1px;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Days pill ── */
.days-pill {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    display: inline-block;
}

.days-pill.d1  { background: rgba(251,191,36,.15);  color: var(--state-warn-light); }
.days-pill.d7  { background: rgba(220,38,38,.12);   color: var(--state-danger-light); }
.days-pill.d30 { background: var(--state-danger);   color: #fff; }

/* ── Status badge ── */
.badge {
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.badge-dot-el {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-ok      { background: var(--state-ok-bg);     border-color: var(--state-ok);     color: var(--state-ok-light); }
.badge-ok      .badge-dot-el { background: var(--state-ok-light); }
.badge-warn    { background: var(--state-warn-bg);   border-color: var(--state-warn);   color: var(--state-warn-light); }
.badge-warn    .badge-dot-el { background: var(--state-warn-light); }
.badge-danger  { background: var(--state-danger-bg); border-color: var(--state-danger); color: var(--state-danger-light); }
.badge-danger  .badge-dot-el { background: var(--state-danger-light); }
.badge-brand   { background: var(--state-brand-bg);  border-color: var(--state-brand);  color: var(--state-brand-light); }
.badge-brand   .badge-dot-el { background: var(--state-brand-light); }
.badge-neutral { background: var(--bg-elevated);     border-color: var(--bg-divider);   color: var(--text-muted); }
.badge-neutral .badge-dot-el { background: var(--text-muted); }
.badge-danger-solid { background: var(--state-danger); border-color: var(--state-danger); color: #fff; }
.badge-danger-solid .badge-dot-el { background: #fff; }

/* ── Drawer ── */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.drawer-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

.drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 380px;
    background: var(--bg-surface);
    border-left: 1px solid var(--bg-divider);
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
}

.drawer.open { transform: translateX(0); }

.drawer-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 28px;
    height: 28px;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}
.drawer-close:hover { background: var(--bg-divider); color: var(--text-primary); }

.drawer-section {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--bg-divider);
}

.drawer-section:last-child {
    flex: 1;
    border-bottom: none;
}

.drawer-section.alert-section {
    background: var(--state-danger-bg);
    border-bottom: 3px solid var(--state-danger);
}

.drawer-section.info-section {
    background: var(--state-brand-bg);
    border-bottom: 3px solid var(--accent-empapp);
}

.drawer-eye {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--space-sm);
}

.drawer-section.alert-section .drawer-eye { color: var(--state-danger-light); }
.drawer-section.info-section  .drawer-eye { color: var(--state-brand-light); }

.drawer-data-row {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
    align-items: baseline;
}

.drawer-data-label {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.1em;
    color: var(--text-subtle);
    text-transform: uppercase;
    width: 100px;
    flex-shrink: 0;
}

.drawer-data-val {
    font-size: var(--type-body);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.drawer-data-val.mono { font-family: var(--font-mono); }

.drawer-hero {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.hero-name {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    line-height: 1.2;
    margin-bottom: var(--space-xs);
}

.hero-sub {
    font-size: 12px;
    color: var(--text-subtle);
    font-family: var(--font-mono);
    display: block;
    margin-bottom: 2px;
}

.hero-empnum {
    display: block;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm);
}

.drawer-section-title {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-subtle);
    display: block;
    margin-bottom: var(--space-md);
}

.drawer-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-empapp);
    background: var(--state-brand-bg);
    color: var(--state-brand-light);
    font-size: var(--type-body);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.1s;
    margin-top: var(--space-sm);
}

/* ── Fuel card nav active state ── */
.nav-item.active-fuel { border-left-color: #8B5CF6; background: rgba(139,92,246,0.08); }
.nav-item.active-fuel .nav-item-icon  { color: #C4B5FD; }
.nav-item.active-fuel .nav-item-label { color: #C4B5FD; }
.nav-item.active-fuel .nav-item-count { color: #C4B5FD; }

/* ── Credential filter chips ── */
.cred-filters {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.cred-chip {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--bg-divider);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    white-space: nowrap;
}
.cred-chip:hover { background: var(--bg-elevated); color: var(--text-body); }

.cred-chip-active {
    border-color: currentColor !important;
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

.cred-chip-efs.cred-chip-active   { color: #93C5FD !important; border-color: #93C5FD !important; }
.cred-chip-local.cred-chip-active { color: var(--state-ok-light) !important; border-color: var(--state-ok-light) !important; }
.cred-chip-pulpo.cred-chip-active { color: var(--state-warn-light) !important; border-color: var(--state-warn-light) !important; }

/* ── Credential count badges ── */
.cred-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cred-efs   { background: rgba(147,197,253,0.12); color: #93C5FD; }
.cred-local { background: var(--state-ok-bg);     color: var(--state-ok-light); }
.cred-pulpo { background: var(--state-warn-bg);   color: var(--state-warn-light); }

.cred-zero {
    color: var(--text-subtle);
    font-size: var(--type-body);
}

.drawer-action-btn:hover  { background: var(--state-brand-bg); filter: brightness(1.15); }
.drawer-action-btn.active { background: var(--accent-empapp); color: #fff; border-color: var(--accent-empapp); }

.drawer-msg-box {
    margin-top: var(--space-sm);
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.drawer-msg-text {
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    background: var(--bg-elevated);
    font-family: var(--font-sans);
    border-bottom: 1px solid var(--bg-divider);
}

.drawer-msg-copy {
    display: block;
    width: 100%;
    padding: 7px 12px;
    font-size: var(--type-body);
    font-family: var(--font-sans);
    background: var(--bg-surface);
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, color 0.1s;
}

.drawer-msg-copy:hover  { background: var(--state-brand-bg); color: var(--state-brand-light); }
.drawer-msg-copy.copied { background: var(--state-ok-bg);    color: var(--state-ok); }

.drawer-install-fields { display: flex; flex-direction: column; gap: 4px; }

.drawer-msg-input {
    flex: 1;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font-mono);
    background: var(--bg-elevated);
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}
.drawer-msg-input:focus        { border-color: var(--accent-empapp); }
.drawer-msg-input.input-warn   { border-color: var(--state-danger); background: var(--state-danger-bg); }
.drawer-msg-input.input-confirmed { border-color: var(--state-ok); background: var(--state-ok-bg); }

.drawer-msg-copy.disabled { opacity: 0.45; cursor: not-allowed; }

.drawer-field-warn {
    display: block;
    font-size: 11px;
    color: var(--state-danger);
    margin-top: 4px;
    font-family: var(--font-sans);
}

/* ── Contacted checkbox column ── */
.contacted-col-hdr {
    width: 40px;
    text-align: center;
    color: var(--text-muted);
    padding: 0 8px;
}

.contacted-col {
    width: 40px;
    text-align: center;
    padding: 0 8px;
    cursor: pointer;
}

.contacted-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-divider);
    background: var(--bg-surface);
    color: transparent;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.contacted-check.checked {
    border-color: var(--state-ok);
    background: var(--state-ok-bg);
    color: var(--state-ok);
}

.contacted-col:hover .contacted-check:not(.checked) {
    border-color: var(--state-ok);
    background: var(--state-ok-bg);
    opacity: 0.5;
}

.row-contacted td:first-child .emp-name {
    color: var(--text-muted);
}

/* ── KPI Detail Panel ── */
.kdp-wrap {
    flex: 1 1 auto;
    min-height: 0;
    border-bottom: 1px solid var(--bg-divider);
    background: var(--bg-surface);
    overflow: auto;
}

.kdp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px 0;
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 2;
}

.kdp-title {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.15em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.kdp-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}
.kdp-close:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--bg-divider); }

.kdp-charts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: 12px 24px 16px;
    overflow-x: auto;
}

.kdp-card {
    background: var(--bg-elevated);
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    min-width: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.kdp-card-tall .kdp-canvas-wrap { height: 280px; }

.kdp-card-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
}

.kdp-card-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--apple-label2);
    letter-spacing: -0.1px;
    margin-top: -4px;
}

.kdp-canvas-wrap {
    position: relative;
    height: 180px;
    width: 100%;
}

.kdp-drill-area {
    border-top: 1px solid var(--bg-divider);
    padding: 14px 24px 18px;
    background: var(--bg-surface);
}

/* ── Venn diagram ─────────────────────────────────────────── */
.venn-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 200px;
}
.venn-svg {
    flex: 1 1 auto;
    width: 100%;
    max-width: 360px;
    height: 220px;
    overflow: visible;
}
.venn-set {
    font: 600 11px Inter, sans-serif;
    fill: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-anchor: middle;
}
.venn-num {
    font: 700 14px Inter, sans-serif;
    fill: var(--text-primary);
    text-anchor: middle;
    dominant-baseline: middle;
    cursor: pointer;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.35);
    stroke-width: 3px;
    stroke-linejoin: round;
}
:root[data-theme="light"] .venn-num {
    stroke: rgba(255,255,255,0.75);
}
.venn-num:hover { fill: var(--brand-400, #60A5FA); }

.venn-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 110px;
    font: 500 12px Inter, sans-serif;
    color: var(--text-body);
}
.venn-legend li { display: flex; align-items: center; gap: 8px; }
.venn-legend b { margin-left: auto; color: var(--text-primary); font-weight: 600; }
.venn-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.venn-legend .venn-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--bg-divider);
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    transition: color 0.12s;
}
.venn-legend .venn-total:hover { color: var(--accent-empapp, var(--state-brand-light, #60A5FA)); }
.venn-legend .venn-total b     { font-weight: 700; }
.venn-dot.venn-dot-total {
    background: linear-gradient(135deg, #93C5FD 0 33%, #34D399 33% 66%, #FBBF24 66% 100%);
}

.kdp-drill {
    overflow-x: visible;
}

/* ── Sortable headers & filter row ────────────────────────── */
.th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.1s, background 0.1s;
}
.th-sortable:hover { color: var(--text-primary); background: var(--bg-elevated); }
.th-sortable .th-arrow {
    margin-left: 6px;
    font-size: 10px;
    color: var(--accent-empapp, var(--text-primary));
}
.th-sortable.th-sorted .th-label { color: var(--text-primary); }

.th-filter-row th {
    padding: 4px 8px 8px !important;
    background: var(--bg-surface);
    position: sticky;
    top: 38px;
    z-index: 1;
    cursor: default;
    border-bottom: 1px solid var(--bg-divider);
}
.th-filter-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    background-color: var(--bg-canvas);
    background-image: 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='%2364748B' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.12s, background-color 0.12s;
}
.th-filter-wrap:focus-within   { border-color: var(--accent-empapp, var(--text-primary)); }
.th-filter-wrap.th-filter-active {
    border-color: var(--state-brand-light, #60A5FA);
    background-color: var(--state-brand-bg, var(--bg-elevated));
    background-image: none;
}

.th-filter {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 4px 22px 4px 10px;
    font: 400 11px Inter, sans-serif;
    color: var(--text-body);
    background: transparent;
    border: 0;
    outline: none;
    text-overflow: ellipsis;
    text-align: left;
}
.th-filter::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.th-filter-wrap.th-filter-active .th-filter {
    color: var(--text-primary);
    padding: 4px 26px 4px 10px;
}

.th-filter-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--bg-divider);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.th-filter-clear:hover { background: var(--state-danger, #F87171); color: #fff; }

/* Narrow numeric columns: center the input content, tighten padding */
.emp-table th[style*="text-align:center"] .th-filter,
.emp-table th[style*="text-align:center"] .th-filter-wrap {
    text-align: center;
}
.emp-table th[style*="text-align:center"] .th-filter {
    padding: 4px 18px 4px 8px;
}
.emp-table th[style*="text-align:center"] .th-filter-wrap.th-filter-active .th-filter {
    padding: 4px 22px 4px 8px;
}

/* ── Drill table pager ────────────────────────────────────── */
.kdp-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 10px 4px 4px;
    border-top: 1px solid var(--bg-divider);
    margin-top: 8px;
    font: 500 12px Inter, sans-serif;
    color: var(--text-muted);
}
.kdp-pager-info {
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.kdp-pager-clear {
    padding: 3px 10px;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-body);
    font: 500 11px Inter, sans-serif;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.kdp-pager-clear:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.kdp-pager-ctrls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kdp-pager-page {
    padding: 0 8px;
    color: var(--text-body);
    font-weight: 500;
}
.kdp-pager-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-body);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.kdp-pager-btn:hover:not(:disabled) {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.kdp-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.kdp-drill-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-subtle);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.kdp-drill-clear {
    font-size: 11px;
    font-family: var(--font-sans);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bg-divider);
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: var(--space-sm);
    transition: background 0.1s, color 0.1s;
}
.kdp-drill-clear:hover { background: var(--state-brand-bg); color: var(--state-brand-light); border-color: var(--accent-empapp); }

/* ════════════════════════════════════════════════════════════
   APPLE SKIN OVERRIDES
   Layered on top to keep the base intact; pure CSS, no JS gates.
   ════════════════════════════════════════════════════════════ */

/* ── Global typography polish ───────────────────────────── */
html, body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.1px;
}
button, input, select, textarea {
    font-family: var(--font-sans);
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.2px; font-weight: 500; }
.mono, [class*="mono"] { font-feature-settings: "tnum"; }

/* ── Header / brand row ─────────────────────────────────── */
.screen-header {
    background: var(--apple-surface);
    border-bottom: 0.5px solid var(--apple-separator);
}
.sig-emp, .sig-app {
    font-weight: 500;
    letter-spacing: -0.2px;
}
.sig-app { color: var(--apple-blue); }
.tagline { color: var(--apple-label2); letter-spacing: -0.1px; }

.hdr-icon-btn,
.nav-toggle-btn,
.home-btn,
.theme-toggle,
.upload-label,
.kdp-close {
    border-radius: var(--radius-pill) !important;
    border: 0.5px solid var(--apple-separator) !important;
    background: var(--apple-surface) !important;
    color: var(--apple-label) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hdr-icon-btn:hover,
.nav-toggle-btn:hover,
.home-btn:hover,
.theme-toggle:hover,
.upload-label:hover,
.kdp-close:hover {
    background: var(--apple-bg) !important;
    color: var(--apple-blue) !important;
    border-color: var(--apple-blue) !important;
}
.upload-label {
    padding: 6px 14px !important;
    gap: 6px;
    font-size: var(--type-body);
}
.upload-label.success { color: var(--apple-green) !important; border-color: var(--apple-green) !important; }
.upload-label.error   { color: var(--apple-red)   !important; border-color: var(--apple-red)   !important; }

/* ── Left nav (Apple pill items) ────────────────────────── */
.left-nav {
    background: var(--apple-surface);
    border-right: 0.5px solid var(--apple-separator);
    padding: 12px 8px;
}
.nav-group { padding: 0 0 12px; }
.nav-group-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--apple-label3);
    padding: 8px 12px 4px;
}
.nav-item {
    border-radius: var(--radius-pill);
    padding: 8px 12px;
    margin: 2px 0;
    color: var(--apple-label);
    transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--apple-separator); }
.nav-item-icon { color: var(--apple-label2); }
.nav-item-label { font-weight: 400; letter-spacing: -0.1px; }
.nav-item-sub   { color: var(--apple-label3); font-size: 11px; }
.nav-item-count {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--apple-label2);
    letter-spacing: -0.2px;
}
.nav-item.active-brand,
.nav-item.active-danger,
.nav-item.active-warn,
.nav-item.active-neutral,
.nav-item.active-fuel {
    background: var(--apple-blue-bg);
    color: var(--apple-blue);
}
.nav-item.active-brand   .nav-item-icon,
.nav-item.active-brand   .nav-item-count   { color: var(--apple-blue); }
.nav-item.active-danger  { background: var(--apple-red-bg);    color: var(--apple-red); }
.nav-item.active-danger  .nav-item-icon,
.nav-item.active-danger  .nav-item-count   { color: var(--apple-red); }
.nav-item.active-warn    { background: var(--apple-amber-bg);  color: var(--apple-amber); }
.nav-item.active-warn    .nav-item-icon,
.nav-item.active-warn    .nav-item-count   { color: var(--apple-amber); }
.nav-item.active-neutral { background: var(--apple-separator); color: var(--apple-label); }
.nav-item.active-fuel    { background: var(--apple-purple-bg); color: var(--apple-purple); }
.nav-item.active-fuel    .nav-item-icon,
.nav-item.active-fuel    .nav-item-count   { color: var(--apple-purple); }

/* ── KPI bar (flat, pill-rounded, no left stripe) ───────── */
.kpi-bar {
    background: var(--apple-bg);
    border-bottom: 0.5px solid var(--apple-separator);
    padding: 20px 28px;
    gap: 10px;
}
.kpi-card {
    background: var(--apple-surface);
    border: 0.5px solid var(--apple-separator);
    border-left: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
}
.kpi-card.kpi-brand,
.kpi-card.kpi-ok,
.kpi-card.kpi-warn,
.kpi-card.kpi-danger,
.kpi-card.kpi-fuel { background: var(--apple-surface); }
.kpi-card .kpi-eye {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11px;
    color: var(--apple-label2);
    font-weight: 400;
}
.kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--apple-label);
}
.kpi-card.kpi-brand  .kpi-value { color: var(--apple-blue); }
.kpi-card.kpi-ok     .kpi-value { color: var(--apple-green); }
.kpi-card.kpi-warn   .kpi-value { color: var(--apple-amber); }
.kpi-card.kpi-danger .kpi-value { color: var(--apple-red); }
.kpi-card.kpi-fuel   .kpi-value { color: var(--apple-purple); }
.kpi-card .kpi-sub {
    color: var(--apple-label2);
    letter-spacing: -0.1px;
}
.kpi-card.kpi-clickable:hover  { filter: none; transform: none; background: var(--apple-bg); }
.kpi-card.kpi-active           { outline: 1.5px solid var(--apple-blue); outline-offset: 2px; }

/* ── KPI detail panel ───────────────────────────────────── */
.kdp-wrap {
    background: var(--apple-bg);
    border-bottom: 0.5px solid var(--apple-separator);
}
.kdp-bar { background: var(--apple-bg); }
.kdp-title {
    text-transform: none;
    letter-spacing: -0.1px;
    color: var(--apple-label2);
    font-size: 13px;
    font-weight: 500;
}
.kdp-card {
    background: var(--apple-surface);
    border: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-lg);
}
.kdp-card-title {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--apple-label2);
    font-size: 11px;
    font-weight: 500;
}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap {
    margin: 16px 28px;
    border: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-lg);
    background: var(--apple-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.table-scroll-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
.emp-table { font-size: 12px; letter-spacing: -0.1px; }
.emp-table thead th,
.emp-table th {
    background: var(--apple-bg) !important;
    color: var(--apple-label2);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    border-bottom: 0.5px solid var(--apple-separator);
    padding: 10px 14px;
}
/* sticky in the EmployeeTable scroll container */
.table-scroll-body .emp-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}
/* sticky in the KPI detail panel, below the sticky kdp-bar (~38 px) */
.kdp-wrap .emp-table thead {
    position: sticky;
    top: 38px;
    z-index: 1;
}
/* ── Pager bar ───────────────────────────────────────────── */
.pager-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-top: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
}
.pager-btn {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-bg);
    color: var(--apple-label);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    line-height: 1.4;
}
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-btn:not(:disabled):hover { background: var(--apple-fill3); }
.pager-num {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: transparent;
    color: var(--apple-label2);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    line-height: 1.4;
}
.pager-num:hover { background: var(--apple-bg); }
.pager-num.pager-active {
    background: var(--accent-empapp);
    color: #fff;
    border-color: var(--accent-empapp);
}
.pager-spacer { flex: 1; }
.pager-info {
    font-size: 11px;
    color: var(--apple-label2);
    white-space: nowrap;
}
.emp-table tbody tr {
    transition: background 0.15s;
    border-bottom: 0.5px solid var(--apple-separator);
}
.emp-table tbody tr:hover { background: var(--apple-bg); }
.emp-table td { padding: 10px 14px; color: var(--apple-label); }
.emp-table .emp-sub      { color: var(--apple-label2); font-size: 11px; }
.emp-table .emp-meta     { color: var(--apple-label2); }

/* ── Status pills / chips ───────────────────────────────── */
.status-badge,
.cred-chip,
.status-pill {
    border-radius: var(--radius-pill) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    padding: 3px 10px !important;
    border: 0.5px solid transparent;
    text-transform: none !important;
}
.cred-chip          { background: var(--apple-bg) !important; color: var(--apple-label) !important; border-color: var(--apple-separator) !important; }
.cred-chip-efs      { color: var(--apple-blue) !important; }
.cred-chip-local    { color: var(--apple-purple) !important; }
.cred-chip-pulpo    { color: var(--apple-teal) !important; }
.cred-chip-active   { background: var(--apple-blue-bg) !important; border-color: var(--apple-blue) !important; color: var(--apple-blue) !important; }
.cred-chip-efs.cred-chip-active   { background: var(--apple-blue-bg) !important; border-color: var(--apple-blue); }
.cred-chip-local.cred-chip-active { background: var(--apple-purple-bg) !important; border-color: var(--apple-purple); }
.cred-chip-pulpo.cred-chip-active { background: var(--apple-teal-bg) !important; border-color: var(--apple-teal); }

/* StatusBadge component states */
.sb-ok      { background: var(--apple-green-bg)  !important; color: var(--apple-green)  !important; }
.sb-warn    { background: var(--apple-amber-bg)  !important; color: var(--apple-amber)  !important; }
.sb-danger  { background: var(--apple-red-bg)    !important; color: var(--apple-red)    !important; }
.sb-brand   { background: var(--apple-blue-bg)   !important; color: var(--apple-blue)   !important; }
.sb-neutral { background: var(--apple-separator) !important; color: var(--apple-label2) !important; }

/* ── Sortable headers & filter inputs ───────────────────── */
.th-sortable:hover { background: var(--apple-bg); }
.th-sortable .th-arrow { color: var(--apple-blue); }
.th-filter-wrap {
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    height: 26px;
}
.th-filter-wrap:focus-within     { border-color: var(--apple-blue); }
.th-filter-wrap.th-filter-active { background: var(--apple-blue-bg); border-color: var(--apple-blue); }
.th-filter-wrap.th-filter-active .th-filter { color: var(--apple-blue); }
.th-filter { font-size: 11px; }
.th-filter-row th {
    background: var(--apple-bg) !important;
    border-bottom: 0.5px solid var(--apple-separator);
}

/* ── Pager ──────────────────────────────────────────────── */
.kdp-pager {
    border-top: 0.5px solid var(--apple-separator);
}
.kdp-pager-btn {
    width: 25px; height: 25px;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label);
    font-weight: 500;
}
.kdp-pager-btn:hover:not(:disabled) {
    background: var(--apple-blue-bg);
    color: var(--apple-blue);
    border-color: var(--apple-blue);
}
.kdp-pager-clear {
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label);
}
.kdp-pager-clear:hover {
    background: var(--apple-red-bg);
    color: var(--apple-red);
    border-color: var(--apple-red);
}

/* ── Venn legend ────────────────────────────────────────── */
.venn-legend { color: var(--apple-label); }
.venn-legend b { color: var(--apple-label); }
.venn-legend .venn-total {
    border-top: 0.5px solid var(--apple-separator);
    color: var(--apple-label);
}
.venn-legend .venn-total:hover { color: var(--apple-blue); }

/* ── Drawer (employee detail) ───────────────────────────── */
.drawer {
    background: var(--apple-surface);
    border-left: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — mobile (≤ 768px)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .screen-header { height: 48px; padding: 0 12px; }
    .sig-row       { gap: 6px; }
    .sig-emp, .sig-app { font-size: 14px; }
    .tagline       { display: none; }
    .vdiv          { display: none; }
    .upload-label span { display: none; }
    .upload-label { padding: 6px 8px !important; }

    /* Left nav becomes a drawer that overlays the content */
    .left-nav {
        position: fixed;
        top: 48px;
        left: 0;
        bottom: 60px;
        z-index: 90;
        width: 260px;
        box-shadow: 1px 0 0 var(--apple-separator);
        transition: transform 0.22s ease, width 0s;
    }
    .left-nav.nav-collapsed {
        transform: translateX(-100%);
        width: 260px;
        min-width: 260px;
        padding: 12px 8px;
        border-right: 0.5px solid var(--apple-separator);
    }

    /* Content padding */
    .kpi-bar          { padding: 14px 16px; gap: 8px; grid-template-columns: repeat(2, 1fr); }
    .kpi-bar-5        { grid-template-columns: repeat(2, 1fr); }
    .kpi-card:nth-child(n+5) { display: none; } /* hide overflow KPIs */
    .kpi-card { padding: 14px 12px; }
    .kpi-card .kpi-value { font-size: 24px; }

    .kdp-charts       { padding: 12px 16px; gap: 10px; }
    .kdp-card         { min-width: 100%; }
    .kdp-card-tall .kdp-canvas-wrap { height: 220px; }

    .section-hdr      { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
    .section-hdr .search-wrap { order: 5; width: 100%; }
    .section-hdr .search-input { width: 100%; }

    .table-wrap       { margin: 12px 14px 72px; }
    .emp-table        { font-size: 12px; }
    .emp-table th, .emp-table td { padding: 8px 10px; }

    .kdp-drill-area   { padding: 12px 14px 24px; }
    .kdp-pager        { flex-wrap: wrap; gap: 8px; }

    .venn-wrap        { flex-direction: column; align-items: stretch; }
    .venn-legend      { flex-direction: row; flex-wrap: wrap; }
    .venn-legend li   { flex: 1 1 45%; }

    /* Pad bottom of scrollable area to clear tab bar */
    .below-header     { padding-bottom: 60px; }
    .kdp-wrap         { padding-bottom: 0; }
}

/* Tablet KPI grid */
@media (max-width: 1024px) and (min-width: 769px) {
    .kpi-bar    { grid-template-columns: repeat(3, 1fr); }
    .kpi-bar-5  { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD IMPROVEMENTS v2
   ════════════════════════════════════════════════════════════ */

/* ── KPI trend delta ──────────────────────────────────────── */
.kpi-delta {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.delta-good { color: var(--apple-green); }
.delta-bad  { color: var(--apple-red); }

/* ── Company filter select ───────────────────────────────── */
.company-select {
    height: 30px;
    padding: 0 24px 0 10px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: 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='%2364748B' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s;
}
.company-select:focus,
.company-select:hover { border-color: var(--apple-blue); color: var(--apple-blue); }

/* ── Alert gap threshold ─────────────────────────────────── */
.threshold-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-pill);
    padding: 0 10px;
    height: 30px;
    background: var(--apple-surface);
    transition: border-color 0.15s;
}
.threshold-wrap:focus-within { border-color: var(--apple-blue); }
.threshold-label,
.threshold-unit {
    font-size: 11px;
    color: var(--apple-label2);
    white-space: nowrap;
    user-select: none;
}
.threshold-input {
    width: 36px;
    border: none;
    background: transparent;
    color: var(--apple-label);
    font-size: 12px;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
}
.threshold-input::-webkit-inner-spin-button,
.threshold-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Critical-only toggle ────────────────────────────────── */
.critical-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label2);
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.critical-btn:hover    { background: var(--apple-red-bg); color: var(--apple-red); border-color: var(--apple-red); }
.critical-btn.critical-active {
    background: var(--apple-red-bg);
    color: var(--apple-red);
    border-color: var(--apple-red);
}

/* ── Excel export button ─────────────────────────────────── */
.excel-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label);
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.excel-btn:hover:not(:disabled) {
    background: rgba(34,197,94,0.08);
    color: var(--apple-green);
    border-color: var(--apple-green);
}
.excel-btn.done  { color: var(--apple-green); border-color: var(--apple-green); }
.excel-btn.error { color: var(--apple-red);   border-color: var(--apple-red); }
.excel-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Loaded-at timestamp chip ────────────────────────────── */
.loaded-at {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--apple-label3);
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

/* ── Batch contacted chip + clear ───────────────────────── */
.batch-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--apple-green-bg);
    color: var(--apple-green);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
}
.batch-clear {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: transparent;
    color: var(--apple-label2);
    font-size: 11px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.batch-clear:hover { background: var(--apple-red-bg); color: var(--apple-red); border-color: var(--apple-red); }

/* ── Home view search bar ────────────────────────────────── */
.home-search-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px 0;
}
.home-search-input {
    width: 320px !important;
}
.home-search-clear {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label2);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.home-search-clear:hover { background: var(--apple-red-bg); color: var(--apple-red); border-color: var(--apple-red); }

/* ── Home search results panel ───────────────────────────── */
.home-search-results {
    flex-shrink: 0;
    margin: 10px 28px 0;
    border: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-lg);
    background: var(--apple-surface);
    overflow: hidden;
    max-width: 600px;
}
.hsr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--apple-separator);
    cursor: pointer;
    transition: background 0.12s;
}
.hsr-row:last-of-type { border-bottom: none; }
.hsr-row:hover { background: var(--apple-bg); }
.hsr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsr-name { font-size: 13px; font-weight: 500; color: var(--apple-label); white-space: nowrap; }
.hsr-sub  { font-size: 11px; color: var(--apple-label2); font-family: var(--font-mono); }
.hsr-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 0.5px solid transparent;
}
.hsr-badge-app   { background: var(--apple-blue-bg);  color: var(--apple-blue);  border-color: var(--apple-blue); }
.hsr-badge-noapp { background: var(--apple-separator); color: var(--apple-label2); }
.hsr-footer {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-top: 0.5px solid var(--apple-separator);
    background: var(--apple-bg);
}
.hsr-goto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    color: var(--apple-label2);
    font-size: 11px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hsr-goto:hover { background: var(--apple-blue-bg); color: var(--apple-blue); border-color: var(--apple-blue); }
.hsr-empty {
    padding: 20px 16px;
    font-size: 13px;
    color: var(--apple-label2);
    text-align: center;
}

/* ── Drawer tel/mailto links ─────────────────────────────── */
.drawer-link {
    color: var(--apple-blue);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.drawer-link:hover { text-decoration: underline; }

/* ── Responsive additions ────────────────────────────────── */
@media (max-width: 768px) {
    .home-search-bar { padding: 10px 14px 0; }
    .home-search-input { width: 100% !important; }
    .home-search-results { margin: 8px 14px 0; }
    .threshold-wrap { display: none; }
    .critical-btn   { display: none; }
    .loaded-at      { display: none; }
    .company-select { max-width: 120px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   ════════════════════════════════════════════════════════ */
.bottom-tabs { display: none; }

@media (max-width: 768px) {
    .bottom-tabs {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: var(--apple-surface);
        border-top: 0.5px solid var(--apple-separator);
        z-index: 95;
        padding: 6px 6px env(safe-area-inset-bottom, 6px);
    }
    .bottom-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        background: transparent;
        color: var(--apple-label2);
        font: 500 11px var(--font-sans);
        cursor: pointer;
        border-radius: var(--radius-md);
        padding: 4px 0;
        position: relative;
        transition: color 0.15s, background 0.15s;
    }
    .bottom-tab.active { color: var(--apple-blue); }
    .bottom-tab:active { background: var(--apple-bg); }
    .bottom-tab svg    { width: 22px; height: 22px; }
    .bottom-tab-badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 22px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: var(--radius-pill);
        background: var(--apple-red);
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}