/* ============================================================
   vm_pilot_persons.css — Pilot: Personer-lista (Ubiquiti-stil)
   ============================================================
   Skapad 2026-05-29 (tema-grund + pilot, vmds-rebuild).

   Scope:  ENDAST .vm-pers-list (sidan /admin/access/persons).
   Mål:    visa stilen i båda mörkt + ljust läge utan att röra
           globala kort/tabell/sidebar. Generaliseras EFTER
           pilot-godkänning.

   Ubiquiti-inspirerat (inte exakt-kopia):
   - Skiktade ytor + djup (subtila skuggor, inte hård border)
   - Tätare layout (mindre kort-padding, full bredd)
   - Lättare typografi (h-vikter 500, mer luftig leading)
   - Tabular-nums för Nr-kolumn (redan på plats)

   Tokens: var(--vm-*) globalt — light-mode biter automatiskt
   via [data-theme="light"]-overrides i vm_tokens.css.
   ============================================================ */

/* ── Wrapper: full bredd, lite tightare gap mellan sektioner ── */
.vm-pers-list {
    --pl-row-h: 40px;           /* mindre än default 44px */
    --pl-card-pad: 16px;        /* mindre än vm-card-padding 24px */
    --pl-section-gap: 12px;     /* mindre än vm-section-gap 24px */
    display: flex;
    flex-direction: column;
    gap: var(--pl-section-gap);
    /* Hela bredden — riva max-width om någon ärvts från page-shell */
    width: 100%;
    max-width: none;
}

/* ── Stat-kort + filterbar: mindre padding, mjuk skugga + ljus border ── */
.vm-pers-list .vm-section-card,
.vm-pers-list .vm-section-card-tight {
    padding: var(--pl-card-pad);
    background: var(--vm-bg-surface);
    border: 1px solid var(--vm-border-subtle);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-sm);
}

/* ── Stat-rutor: lättare vikt + mindre värdesiffror ── */
.vm-pers-list .vm-stat {
    padding: 8px 14px;
}
.vm-pers-list .vm-stat-value {
    font-size: 20px;       /* från 24px */
    font-weight: 500;      /* från 600 */
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.vm-pers-list .vm-stat-label {
    font-size: var(--vm-text-xs);
    font-weight: 500;      /* från 600 */
    letter-spacing: 0.04em;
    color: var(--vm-text-muted);
    text-transform: uppercase;
}

/* ── Sökfält + knappar: kompaktare ── */
.vm-pers-list .vm-input-sm {
    height: 32px;
    font-size: var(--vm-text-sm);
}
.vm-pers-list .vm-btn-sm {
    height: 32px;
    padding: 0 14px;
    font-size: var(--vm-text-sm);
    font-weight: 500;       /* från 600 */
}

/* ── Filter-ikoner: mindre, mer luftiga ── */
.vm-pers-list .vm-filter-icon {
    padding: 6px 12px;
    font-size: var(--vm-text-xs);
    font-weight: 500;
}

/* ── Tabell-container: full bredd, mjuk skugga ── */
.vm-pers-list .vm-table-container {
    background: var(--vm-bg-surface);
    border: 1px solid var(--vm-border-subtle);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-sm);
    overflow: hidden;
}

/* ── Tabell: tätare rader, lättare vikter ── */
.vm-pers-list .vm-table {
    width: 100%;
}
.vm-pers-list .vm-table thead th {
    height: 36px;
    padding: 0 12px;
    font-size: var(--vm-text-xs);
    font-weight: 600;        /* behåll 600 för th — kontrast mot 500 body */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vm-text-muted);
    background: var(--vm-bg-surface-2);
    border-bottom: 1px solid var(--vm-border-subtle);
}
.vm-pers-list .vm-table tbody td {
    height: var(--pl-row-h);
    padding: 0 12px;
    font-size: var(--vm-text-sm);
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid var(--vm-border-subtle);
    color: var(--vm-text-primary);
}
.vm-pers-list .vm-table tbody tr.pl-row {
    transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vm-pers-list .vm-table tbody tr.pl-row:hover {
    background: var(--vm-bg-hover);
    cursor: pointer;
}
.vm-pers-list .vm-table tbody tr.pl-row:last-child td {
    border-bottom: none;
}

/* ── Tabular-nums för Nr-kolumn (data-key=nr) ── */
.vm-pers-list .vm-table tbody td:has(span[style*="tabular-nums"]) {
    font-variant-numeric: tabular-nums;
}

/* ── Filter-rad (under headers): mindre padding ── */
.vm-pers-list .vm-table-filter-row th {
    height: 32px;
    padding: 4px 8px;
    background: var(--vm-bg-surface);
}
.vm-pers-list .vm-table-filter-row .vm-input-sm {
    height: 26px;
    font-size: var(--vm-text-xs);
    padding: 0 8px;
}

/* ── Pills: tightare ── */
.vm-pers-list .vm-pill {
    padding: 2px 8px;
    font-size: var(--vm-text-xs);
    font-weight: 500;
}
.vm-pers-list .vm-pill-sm {
    padding: 1px 6px;
    font-size: var(--vm-text-xs);
}

/* ── Status-row tonad bakgrund: subtilt, inte hård ── */
.vm-pers-list .vm-table tbody tr.vm-table-row-blocked {
    background: rgba(232, 74, 74, 0.04);
}
.vm-pers-list .vm-table tbody tr.vm-table-row-warn {
    background: rgba(255, 192, 77, 0.04);
}
.vm-pers-list .vm-table tbody tr.vm-table-row-inactive {
    background: rgba(157, 111, 214, 0.04);
}
.vm-pers-list .vm-table tbody tr.vm-table-row-blocked:hover,
.vm-pers-list .vm-table tbody tr.vm-table-row-warn:hover,
.vm-pers-list .vm-table tbody tr.vm-table-row-inactive:hover {
    background: var(--vm-bg-hover);
}

/* ── Page-header (om Subnav är synlig): tightare gap ── */
.vm-pers-list ~ .vm-subnav,
body[data-path^="/admin/access/persons"] .vm-subnav {
    margin-bottom: var(--pl-section-gap);
}

/* ── DEL 2 (2026-06-10): adaptiv kolumn-döljning + ↔-scroll ──────────────────
   Samma hybrid-mekanik som driftpanelen fick i 1.6.0. Prio 1 (Status/Förnamn/
   Efternamn/Åtgärd) visas ALLTID. .pl-fit2 döljer prio 3, .pl-fit1 döljer prio
   2+3. Spiller även prio 1 → .pl-scroll + ↔-hint i tabellens nederkant.
   Döljningen är presentation-only — användarens kolumnval (localStorage) rörs ej. */
.vm-pers-list .pl-table-wrap { position: relative; }
.vm-pers-list .vm-table-container-scroll.pl-fit2 .pl-p3 { display: none; }
.vm-pers-list .vm-table-container-scroll.pl-fit1 .pl-p2,
.vm-pers-list .vm-table-container-scroll.pl-fit1 .pl-p3 { display: none; }
/* "N dölda"-badge på Kolumner-knappen */
.vm-pers-list .pl-hidden-badge {
    display: inline-flex; align-items: center; margin-left: 6px;
    padding: 1px 7px; border-radius: 999px;
    background: var(--vm-brand-primary); color: #fff;
    font-size: var(--vm-text-xs); font-weight: 700; letter-spacing: .02em;
}
.vm-pers-list .pl-hidden-badge[hidden] { display: none; }
/* ↔ horisontell-scroll-hint (endast när prio 1 inte får plats) */
.vm-pers-list .pl-scroll-hint {
    position: absolute; right: 12px; bottom: 9px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--vm-bg-elevated); color: var(--vm-text-secondary);
    border: 1px solid var(--vm-border-default);
    font-size: var(--vm-text-xs); font-weight: 600; pointer-events: none;
    box-shadow: 0 2px 8px rgba(15, 25, 50, .18);
}
.vm-pers-list .pl-scroll-hint[hidden] { display: none; }
.vm-pers-list .pl-scroll-hint .ar { font-size: 13px; font-weight: 800; }