/* 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-muted);
    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-muted);
    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);
    /* collapse-on-scroll support */
    overflow: hidden;
    max-height: 200px;
    transition: max-height 0.25s ease, padding-top 0.2s ease,
                padding-bottom 0.2s ease, opacity 0.2s ease,
                border-color 0.2s ease;
}
.main-area.kpi-scrolled .kpi-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-bottom-color: transparent;
}

.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-muted);
    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: var(--apple-purple); }

.kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    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;
    top: 50%;
    left: 50%;
    width: 1240px;
    max-width: 96vw;
    height: min(700px, 82vh);
    background: var(--bg-surface);
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-lg);
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
}

.drawer.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: all; }

.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;
    z-index: 2;
}
.drawer-close:hover { background: var(--bg-divider); color: var(--text-primary); }

.drawer-tabs {
    display: flex;
    gap: 2px;
    padding: 0 var(--space-lg);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-divider);
    flex-shrink: 0;
}

.drawer-tab-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.drawer-tab {
    padding: var(--space-md) var(--space-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}
.drawer-tab:hover  { color: var(--text-body); }
.drawer-tab.active { color: var(--accent-empapp); border-bottom-color: var(--accent-empapp); }

.drawer-tx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.drawer-tx-table th {
    text-align: left;
    padding: var(--space-sm);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--bg-divider);
}
.drawer-tx-table td {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--bg-divider);
    color: var(--text-body);
}
.drawer-tx-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.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-muted);
    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: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.comment-saved {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--state-ok-light);
    background: var(--state-ok-bg);
    border: 1px solid var(--state-ok);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    margin-left: auto;
}

.comment-error {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--state-danger-light);
    background: var(--state-danger-bg);
    border: 1px solid var(--state-danger);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    margin-left: auto;
}

.drawer-comment {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    font-size: var(--type-body);
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--text-body);
    background: var(--bg-elevated);
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.drawer-comment:focus { border-color: var(--accent-empapp); }
.drawer-comment::placeholder { color: var(--text-subtle); }

.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);
    text-decoration: none;
    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: var(--apple-purple); }
.nav-item.active-fuel .nav-item-label { color: var(--apple-purple); }
.nav-item.active-fuel .nav-item-count { color: var(--apple-purple); }

/* ── 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: var(--state-brand-light) !important; border-color: var(--state-brand-light) !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: var(--state-brand-light); }
.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;
}

.wa-grid-col { width: 96px; text-align: center; padding: 4px 8px; }
.wa-grid-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #25D36620; color: #25D366;
    text-decoration: none; transition: background .15s;
}
.wa-grid-icon:hover { background: #25D36640; }
.wa-grid-date {
    font-size: 10px; color: var(--text-muted);
    margin-top: 2px; white-space: nowrap;
}

.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; }

/* ── Catalog summary KPI cards (WhatsApp / Samsara) ───────── */
.wac-summary {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    padding: 12px 16px; margin: 0 0 4px 0;
}
.wac-sum-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 18px; border-radius: var(--radius-md);
    background: var(--apple-surface); border: 0.5px solid var(--apple-separator);
    min-width: 100px; cursor: pointer; transition: border-color .15s, background .15s;
}
.wac-sum-item:hover { border-color: var(--apple-blue); }
.wac-sum-active { border-color: var(--apple-blue); background: var(--apple-blue-bg); }
.wac-sum-num {
    font-size: 22px; font-weight: 700; line-height: 1;
    color: var(--apple-label);
}
.wac-sum-lbl {
    font-size: 11px; color: var(--text-subtle); margin-top: 3px; white-space: nowrap;
}
.wac-sum-ok   .wac-sum-num { color: var(--state-ok); }
.wac-sum-grp  .wac-sum-num { color: var(--apple-blue); }
.wac-sum-miss .wac-sum-num { color: var(--state-warn); }

/* ── Multi-check column filters (Excel-style) ─────────────── */
.th-mcheck {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}
.th-mcheck-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    background: var(--bg-canvas);
    color: var(--text-muted);
    font: 400 11px Inter, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}
.th-mcheck-btn:hover { border-color: var(--text-subtle); }
.th-mcheck-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.th-mcheck-caret { font-size: 8px; opacity: .7; flex-shrink: 0; }
.th-mcheck-active .th-mcheck-btn {
    border-color: var(--state-brand-light, #60A5FA);
    background: var(--state-brand-bg, var(--bg-elevated));
    color: var(--text-primary);
    padding-right: 26px;
}
.th-mcheck-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
.th-mcheck-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 210px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}
th:last-child .th-mcheck-pop,
th:nth-last-child(2) .th-mcheck-pop { left: auto; right: 0; }
.th-mcheck-search {
    margin: 8px 8px 6px;
    padding: 5px 8px;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-sm);
    background: var(--bg-canvas);
    color: var(--text-body);
    font: 400 11px Inter, sans-serif;
    outline: none;
}
.th-mcheck-search:focus { border-color: var(--state-brand-light, #60A5FA); }
.th-mcheck-actions {
    display: flex;
    gap: 6px;
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--bg-divider);
}
.th-mcheck-actions button {
    flex: 1;
    padding: 3px 6px;
    border: 1px solid var(--bg-divider);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: 500 10px Inter, sans-serif;
    cursor: pointer;
}
.th-mcheck-actions button:hover { color: var(--text-primary); border-color: var(--text-subtle); }
.th-mcheck-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0;
}
.th-mcheck-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font: 400 11px Inter, sans-serif;
    color: var(--text-body);
    cursor: pointer;
    white-space: nowrap;
}
.th-mcheck-item:hover { background: var(--bg-elevated); }
.th-mcheck-item input[type="checkbox"] {
    accent-color: var(--state-brand-light, #60A5FA);
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.th-mcheck-opt { overflow: hidden; text-overflow: ellipsis; }
.th-mcheck-empty { padding: 8px 10px; font-size: 11px; color: var(--text-subtle); }

/* 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-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-label);
    padding: 4px 12px 12px;
    letter-spacing: -0.01em;
    border-bottom: 0.5px solid var(--apple-separator);
    margin-bottom: 8px;
}
.nav-group { padding: 0 0 4px; }
.nav-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--apple-label2);
    padding: 7px 12px 7px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.nav-group-label:hover { background: var(--apple-separator); color: var(--apple-label); }
.nav-group-label.nav-group-open { color: var(--apple-label); }
.nav-group-chevron {
    flex-shrink: 0;
    transition: transform 0.22s ease;
    color: var(--apple-label3);
}
.nav-group-open .nav-group-chevron { transform: rotate(90deg); }
.nav-group-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 0;
}
.nav-group-items.nav-items-open {
    max-height: 300px;
    opacity: 1;
}
.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-mcheck-btn {
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-surface);
    height: 26px;
}
.th-mcheck-active .th-mcheck-btn {
    background: var(--apple-blue-bg);
    border-color: var(--apple-blue);
    color: var(--apple-blue);
}
.th-mcheck-pop {
    background: var(--apple-surface);
    border: 0.5px solid var(--apple-separator);
    border-radius: var(--radius-md);
}
.th-mcheck-search {
    border: 0.5px solid var(--apple-separator);
    background: var(--apple-bg);
}
.th-mcheck-item input[type="checkbox"] { accent-color: var(--apple-blue); }
.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: 0.5px solid var(--apple-separator);
    border-radius: 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);
    }

    /* ── Main area: single scroll container on mobile ── */
    .main-area {
        overflow-y: auto;
        overflow-x: hidden;
    }
    /* KPI bar: show ALL 5 cards, 2-col grid, no collapse animation */
    .kpi-bar, .kpi-bar-5 {
        padding: 12px 14px;
        gap: 8px;
        grid-template-columns: repeat(2, 1fr);
        max-height: none !important;
        overflow: visible;
    }
    .kpi-card               { padding: 12px 10px; }
    .kpi-card .kpi-value    { font-size: 22px; }
    /* 5th card: span both columns so it doesn't float alone */
    .kpi-card:nth-child(5)  { grid-column: 1 / -1; }

    /* KDP wrap: natural flow (main-area scrolls everything) */
    .kdp-wrap {
        flex: none;
        overflow: visible;
        min-height: 0;
        padding-bottom: 72px; /* clear bottom tab bar */
    }

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

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

    .table-wrap       { margin: 10px 12px 80px; overflow-x: auto; }
    .emp-table        { font-size: 12px; }
    .emp-table th, .emp-table td { padding: 7px 9px; }

    .kdp-drill-area   { padding: 10px 12px 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 below-header for bottom tab bar */
    .below-header     { 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;
    }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — module pages global mobile fixes
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Allow body to scroll vertically on module pages */
    .below-header { overflow-y: auto; }

    /* Table horizontal scroll wrapper always enforced */
    .table-scroll-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* FuelProvisioning / Gasolineras main containers */
    .fp-page,
    .gs-page { padding-left: 10px !important; padding-right: 10px !important; }

    /* fp-other-section inputs wrap on mobile */
    .fp-other-section input.fp-input { min-width: 0; width: 100%; }

    /* Route builder map stacks below form on mobile */
    .frb-split { grid-template-columns: 1fr !important; }
    .frb-map   { position: static !important; }

    /* Generic main content scroll */
    main { overflow-x: hidden; overflow-y: auto; }

    /* Dashboard tables reduce font on mobile */
    .emp-table th, .emp-table td { white-space: nowrap; }
    .table-scroll-body { max-width: 100vw; }
}