/**
 * SentinelRMM — Componentes de página (tema claro helpdesk)
 * Shell/layout: public/assets/css/helpdesk-shell.css
 */

:root {
    --bg-body: var(--bg, #f3f6fb);
    --bg-card: var(--surface, #fff);
    --bg-card-hover: var(--surface-2, #f8fafc);
    --bg-topbar: rgba(243, 246, 251, 0.92);

    --border-color: var(--line, #e5e7eb);
    --text-primary: var(--text, #172033);
    --text-secondary: var(--muted, #6b7280);
    --text-muted: #94a3b8;

    --accent: var(--primary-2, #2563eb);
    --accent-hover: var(--primary, #1d4ed8);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: var(--shadow, 0 12px 30px rgba(15, 23, 42, 0.08));

    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Stat cards ─── */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.stat-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--shadow-md);
}

.stat-card-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bg-primary-subtle { background: rgba(37, 99, 235, 0.1); }
.bg-success-subtle { background: rgba(22, 163, 74, 0.1); }
.bg-danger-subtle  { background: rgba(220, 38, 38, 0.1); }
.bg-warning-subtle { background: rgba(217, 119, 6, 0.1); }
.bg-info-subtle    { background: rgba(8, 145, 178, 0.1); }

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.15rem 0 0;
    line-height: 1.2;
    color: var(--brand-navy, #0c1f3f);
}

/* ─── Panel cards ─── */
.panel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.panel-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0;
    flex-wrap: wrap;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--brand-navy, #0c1f3f);
}

.panel-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.15rem 0 0;
}

.panel-card-body {
    padding: 1.25rem;
}

/* ─── Charts ─── */
.chart-container {
    position: relative;
    height: 260px;
    width: 100%;
}

.chart-container-doughnut {
    height: 220px;
    max-width: 220px;
}

.chart-container-bar {
    height: 240px;
}

/* ─── Tables (tema claro — evita texto branco no hover do table-dark legado) ─── */
.dashboard-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: rgba(37, 99, 235, 0.05);
    --bs-table-hover-color: var(--text-primary);
    font-size: 0.85rem;
}

.dashboard-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-2, #f8fafc);
}

.dashboard-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

/* ─── Bootstrap overrides ─── */
.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-bg: var(--bg-card-hover);
    --bs-btn-hover-border-color: var(--border-color);
    --bs-btn-hover-color: var(--text-primary);
}

/* Tema claro: outline-light (branco) fica invisível em cards/tabelas brancas */
.btn-outline-light {
    --bs-btn-color: var(--text-primary, #172033);
    --bs-btn-border-color: var(--border-color, #e5e7eb);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent, #2563eb);
    --bs-btn-hover-border-color: var(--accent, #2563eb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-hover, #1d4ed8);
    --bs-btn-active-border-color: var(--accent-hover, #1d4ed8);
    --bs-btn-disabled-color: var(--text-muted, #94a3b8);
    --bs-btn-disabled-border-color: var(--border-color, #e5e7eb);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.card-header,
.card-footer {
    background: var(--surface-2, #f8fafc);
    border-color: var(--border-color);
}

.table,
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: rgba(15, 23, 42, 0.02);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-active-bg: rgba(37, 99, 235, 0.08);
    --bs-table-active-color: var(--text-primary);
    --bs-table-hover-bg: rgba(37, 99, 235, 0.05);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
}

.table-dark {
    --bs-table-bg: var(--bg-card, #fff);
}

.table-hover > tbody > tr:hover > *,
.table-dark.table-hover > tbody > tr:hover > * {
    color: var(--text-primary);
    --bs-table-color-state: var(--text-primary);
}

.table a:not(.btn),
.table-dark a:not(.btn) {
    color: var(--accent, #2563eb);
}

.table a:not(.btn):hover,
.table-dark a:not(.btn):hover {
    color: var(--accent-hover, #1d4ed8);
}

.table .text-light,
.table-dark .text-light,
.table .text-white,
.table-dark .text-white {
    color: var(--text-primary) !important;
}

/* Abas ativas no tema claro — evita texto branco sobre fundo branco */
.nav-tabs {
    border-bottom-color: var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--text-primary);
    border-color: var(--border-color) var(--border-color) transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active.text-light,
.nav-tabs .nav-link.active.text-white,
.nav-pills .nav-link.active.text-light,
.nav-pills .nav-link.active.text-white {
    color: var(--brand-navy, #0c1f3f) !important;
    background-color: var(--bg-card, #fff);
    border-color: var(--border-color) var(--border-color) var(--bg-card, #fff);
    font-weight: 600;
}

.page-link.active,
.page-item.active .page-link {
    color: #fff !important;
}

.list-group-item.active {
    color: #fff !important;
}

/* ─── UX kit (P2-06) ─── */
.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-weight: 600;
    color: var(--brand-navy, #0c1f3f);
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.ux-panel,
.ux-filter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.ux-filter-card {
    margin-bottom: 1rem;
}

.ux-filter-card .card-body {
    padding: 0.85rem 1rem;
}

.ux-panel-footer,
.panel-card-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.ux-table-wrap .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: rgba(37, 99, 235, 0.05);
    margin-bottom: 0;
}

.ux-table-wrap thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-2, #f8fafc);
}

.ux-table-wrap tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

.ux-empty-state,
.ux-error-state {
    padding: 2.5rem 1.5rem;
}

.ux-empty-state--compact,
.ux-error-state--compact {
    padding: 1.5rem 1rem;
}

.ux-empty-state-icon,
.ux-error-state-icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.ux-error-state-icon {
    color: var(--danger, #dc2626);
}

.ux-empty-state-title,
.ux-error-state-title {
    color: var(--text-primary);
}

.ux-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.ux-loading--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    justify-content: center;
    background: rgba(243, 246, 251, 0.85);
    border-radius: inherit;
}

.ux-loading-spinner,
.ux-btn-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(148, 163, 184, 0.35);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ux-spin 0.7s linear infinite;
}

.ux-region-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.72;
}

.ux-region-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(243, 246, 251, 0.45);
    border-radius: inherit;
    z-index: 1;
}

.ux-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes ux-spin {
    to { transform: rotate(360deg); }
}

.modal-content {
    background: var(--bg-card) !important;
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

/* Legacy dark modals: keep readable text (bg-dark + dark labels was invisible). */
.modal-content.bg-dark,
.modal-content.bg-black {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-content.bg-dark .form-label,
.modal-content.bg-dark .modal-title,
.modal-content.bg-dark .form-check-label,
.modal-content.bg-black .form-label,
.modal-content.bg-black .modal-title,
.modal-content.bg-black .form-check-label {
    color: var(--text-primary) !important;
}

.modal-content.bg-dark .btn-close-white,
.modal-content.bg-black .btn-close-white {
    filter: none;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.ux-swal-popup {
    border: 1px solid var(--border-color) !important;
}

/* Legacy card classes → design tokens */
.card.bg-black.border-secondary,
.card.bg-dark {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* ─── Responsivo ─── */
@media (max-width: 991.98px) {
    .stat-value {
        font-size: 1.35rem;
    }
}

@media (max-width: 575.98px) {
    .page-header {
        margin-bottom: 1rem;
    }
}

/* ─── Client edit (cadastro organizacional) ─── */
.client-edit-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.04)),
        var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.client-edit-hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.client-edit-shell {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.client-edit-shell__body {
    padding: 1.25rem 1.25rem 1.5rem;
}

.client-edit-tabs {
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.client-edit-tabs__list {
    gap: 0.4rem;
    border-bottom: none;
}

.client-edit-tabs__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 7.5rem;
    padding: 0.65rem 0.9rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

.client-edit-tabs__link .client-edit-tabs__label {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}

.client-edit-tabs__link .client-edit-tabs__hint {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.client-edit-tabs__link.active {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    color: var(--brand-navy, #0c1f3f) !important;
}

.client-edit-tabs__link.active .client-edit-tabs__hint {
    color: var(--accent);
}

.client-edit-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.client-edit-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-card-hover), var(--bg-card));
}

.client-edit-panel__body {
    padding: 1.1rem;
}

.client-edit-list .list-group-item {
    background: transparent;
    border-color: var(--border-color);
}

.client-edit-list .list-group-item.d-none {
    display: none !important;
}

.client-edit-callout {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.06);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.client-edit-split {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 1rem;
    align-items: start;
}

.client-edit-units-rail .client-unit-picker .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.55rem;
    margin-bottom: 0.25rem;
    background: transparent;
    color: var(--text-primary);
}

.client-edit-units-rail .client-unit-picker .list-group-item.active {
    background: rgba(37, 99, 235, 0.12);
    color: var(--brand-navy, #0c1f3f);
    font-weight: 600;
}

.client-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 991.98px) {
    .client-edit-split {
        grid-template-columns: 1fr;
    }
}

/* ─── Devices list ─── */
.devices-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(37, 99, 235, 0.05)),
        var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.devices-hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.devices-hero__policy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.devices-policy-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card-hover, #f8fafc);
    border: 1px solid var(--border-color);
}

.devices-policy-chip--online {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.28);
}

.devices-policy-chip--attention {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
}

.devices-policy-chip--offline {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
}

.devices-filters {
    background: var(--bg-card);
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.devices-filters .card-body {
    padding: 1rem 1.15rem;
}

.devices-filters__search .input-group-text {
    background: var(--bg-card-hover, #f8fafc);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.devices-filters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 0.85rem;
    align-items: end;
}

.devices-filters__clear {
    display: flex;
    align-items: flex-end;
}

.devices-list {
    border-radius: 1rem;
    overflow: hidden;
}

.devices-list__header {
    align-items: center;
}

.devices-count-badge {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-navy, #0c1f3f);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.devices-hostname {
    font-weight: 600;
    color: var(--brand-navy, #0c1f3f);
    text-decoration: none;
}

.devices-hostname:hover {
    color: var(--accent, #2563eb);
    text-decoration: underline;
}

.devices-hostname__alias,
.devices-client__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.devices-client {
    font-weight: 500;
}

.devices-type {
    font-size: 0.875rem;
}

.devices-ip {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: transparent;
    padding: 0;
}

.devices-agent-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.devices-agent-pill i {
    font-size: 0.55rem;
}

.devices-agent-pill--online i {
    animation: devices-pulse 1.8s ease-in-out infinite;
}

.devices-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.devices-actions .btn {
    min-width: 2rem;
}

.devices-actions form {
    display: inline-flex;
    margin: 0;
}

@keyframes devices-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (max-width: 1199.98px) {
    .devices-filters__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .devices-filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .devices-filters__grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Inventory overview ─── */
.inventory-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(16, 185, 129, 0.05)),
        var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.inventory-hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.inventory-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inventory-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.inventory-tabs__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 7rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.inventory-tabs__link:hover {
    background: var(--bg-card-hover, #f8fafc);
    color: var(--text-primary);
}

.inventory-tabs__label {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}

.inventory-tabs__hint {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.inventory-tabs__link.active {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--brand-navy, #0c1f3f);
}

.inventory-tabs__link.active .inventory-tabs__hint {
    color: var(--accent);
}

.inventory-filters {
    background: var(--bg-card);
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.inventory-filters .card-body {
    padding: 1rem 1.15rem;
}

.inventory-filters__primary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 0.75rem 0.85rem;
    align-items: end;
}

.inventory-filters__actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 7.5rem;
}

.inventory-filters__toggle {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.inventory-filters__advanced {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.85rem;
    align-items: end;
    border-top: 1px solid var(--border-color);
    margin-top: 0.35rem;
}

.inventory-filters__checks {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
    padding-top: 0.35rem;
}

.inventory-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.inventory-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    min-height: 5.25rem;
}

.inventory-kpi__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.inventory-kpi__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.inventory-kpi__label {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.25;
}

.inventory-kpi__value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-navy, #0c1f3f);
}

.inventory-kpi--monitor .inventory-kpi__icon {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.inventory-kpi--total .inventory-kpi__icon {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.inventory-kpi--unit .inventory-kpi__icon {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.inventory-kpi--alert .inventory-kpi__icon {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.inventory-kpi--muted .inventory-kpi__icon {
    background: var(--bg-card-hover, #f8fafc);
    color: var(--text-muted);
}

.inventory-list {
    border-radius: 1rem;
    overflow: hidden;
}

.inventory-list__header {
    align-items: center;
}

.inventory-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inventory-unit-link {
    font-weight: 600;
    color: var(--brand-navy, #0c1f3f);
    text-decoration: none;
}

.inventory-unit-link:hover {
    color: var(--accent, #2563eb);
    text-decoration: underline;
}

.inventory-unit-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.inventory-count {
    display: inline-flex;
    min-width: 1.75rem;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.inventory-count--cpu {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.12);
}

.inventory-count--monitor {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.14);
}

.inventory-pct {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.inventory-pct__bar {
    flex: 1;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--bg-card-hover, #eef2f7);
    overflow: hidden;
}

.inventory-pct__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
}

.inventory-pct__label {
    font-size: 0.78rem;
    color: var(--text-muted);
    min-width: 3.2rem;
    text-align: right;
}

.inventory-table__total th {
    background: var(--surface-2, #f8fafc);
    border-top: 1px solid var(--border-color);
    font-weight: 700;
}

.inventory-unit-toggle {
    color: var(--brand-navy, #0c1f3f) !important;
}

.inventory-unit-toggle__icon {
    transition: transform 0.15s ease;
}

.inventory-unit-breakdown-row td {
    border-top: 0 !important;
}

.inventory-kpis--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-unit-total__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .inventory-unit-total__grid,
    .inventory-kpis--compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199.98px) {
    .inventory-filters__primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .inventory-filters__actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .inventory-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .inventory-filters__primary,
    .inventory-filters__advanced,
    .inventory-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .inventory-filters__primary,
    .inventory-filters__advanced,
    .inventory-kpis {
        grid-template-columns: 1fr;
    }
}