/* css/staff_usage.css — [LAC-203] Personal → Statistik (systemanvändning per säljare). Egna su-klasser, rör inget befintligt. */
.su-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.su-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.su-input{padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:#1f2937}
.su-check{display:flex;align-items:center;gap:6px;font-size:13px;color:#1f2937}
.su-check input{width:auto;margin:0}
.su-muted{font-size:12px;color:#64748b}
.su-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.su-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px}
.su-card strong{display:block;font-size:24px;color:#024550;font-variant-numeric:tabular-nums;line-height:1.1}
.su-card span{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.su-card small{display:block;font-size:12px;color:#475569;margin-top:3px}
.su-classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.su-class{border-radius:12px;padding:12px 14px;cursor:pointer;border:1px solid transparent}
.su-class:hover{border-color:#024550}
.su-class.is-active{outline:2px solid #024550}
.su-class strong{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.su-class span{font-size:12px;font-weight:600}
.su-c-full{background:#dcfce7;color:#166534}
.su-c-falt_utan_kalkyl{background:#fef3c7;color:#92400e}
.su-c-kalkyl_utan_falt{background:#ffedd5;color:#9a3412}
.su-c-kalkyl_utan_affar{background:#fee2e2;color:#991b1b}
.su-c-bara_monday{background:#fecaca;color:#7f1d1d}
.su-c-bara_inloggad{background:#e0e7ff;color:#3730a3}
.su-c-inaktiv{background:#f1f5f9;color:#475569}
.su-table-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px}
.su-table-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.su-table{width:100%;border-collapse:collapse;font-size:13px}
.su-table th{text-align:left;font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid #e5e7eb;cursor:pointer;white-space:nowrap;user-select:none}
.su-table th.num,.su-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.su-table th.sorted::after{content:' ▾';color:#024550}
.su-table th.sorted.asc::after{content:' ▴'}
.su-table td{padding:8px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.su-table tr:hover td{background:#f8fafc}
.su-table td.zero{color:#cbd5e1}
.su-pill{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.su-bar{display:inline-block;width:60px;height:6px;background:#e5e7eb;border-radius:999px;vertical-align:middle;margin-right:6px;overflow:hidden}
.su-bar i{display:block;height:100%;background:#16a34a}
