/* =========================================================
   Unified PM CSS (Dashboard + Vehicles + Projects)
   ---------------------------------------------------------
   Notes:
   - ضبطت sticky toolbar باستخدام: --app-header-height (default: 56px)
   - حافظت على أسماء الكلاسات كما هي في الصفحات الثلاث
   - أضفت aliases لمتغيرات الداشبورد لِـ --pm-*
   ========================================================= */

/* -------------------- Root Variables -------------------- */
:root {
    /* System frame */
    --app-header-height: 66px; /* عدّلها لو هيدر السيستم أعلى/أقل */
    --pm-toolbar-height: 64px;
    /* PM Theme */
    --pm-primary: #01c853;
    --pm-primary-hover: #00b84a;
    --pm-primary-light: #dcfce7;
    --pm-primary-dark: #166534;
    --pm-background: #ffffff;
    --pm-surface: #f8fafc;
    --pm-border: #e2e8f0;
    --pm-text: #1e293b;
    --pm-text-muted: #64748b;
    --pm-text-light: #94a3b8;
    --pm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --pm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --pm-radius: 16px;
    --pm-radius-sm: 8px;
    --pm-spacing: 8px;
    --pm-transition: 200ms ease;
    /* Status Colors (Projects) */
    --pm-status-planned-bg: #e0f2fe;
    --pm-status-planned-text: #0369a1;
    --pm-status-active-bg: #dcfce7;
    --pm-status-active-text: #166534;
    --pm-status-hold-bg: #fef3c7;
    --pm-status-hold-text: #b45309;
    --pm-status-completed-bg: #ede9fe;
    --pm-status-completed-text: #6d28d9;
    --pm-status-archived-bg: #f3f4f6;
    --pm-status-archived-text: #6b7280;
    /* Dashboard aliases mapped to PM theme */
    --color-primary: var(--pm-primary);
    --color-bg: var(--pm-surface);
    --color-surface: var(--pm-background);
    --color-surface-alt: #f1f5f9;
    --color-text: var(--pm-text);
    --color-muted: var(--pm-text-muted);
    --color-border: var(--pm-border);
    --chip-info: #3b82f6;
    --chip-warning: #f59e0b;
    --chip-critical: #ef4444;
    --chip-onTime: #10b981;
    --chip-late: #ef4444;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-s: 12px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --pm-toolbar-padding-x: 10px; /* يمين وشمال */
}

/* -------------------- Base & Reset -------------------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--pm-text);
    background-color: var(--pm-surface);
}

/* -------------------- Shared Layout -------------------- */
.pm-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    padding-block: calc(var(--pm-spacing) * 3);
}

/* -------------------- Toolbar (Projects & Vehicles) -------------------- */
.pm-toolbar {
    position: sticky;
    top: var(--app-header-height);
    z-index: 2000; /* فوق الهيدر بتاع السيستم */
    background: var(--pm-background);
    border-bottom: 1px solid var(--pm-border);
    padding-block: calc(var(--pm-spacing) * 2);
    padding-inline: var(--pm-toolbar-padding-x);
    margin-block-end: calc(var(--pm-spacing) * 3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--pm-spacing) * 2);
    border: 1px solid var(--pm-border); /* علشان تبان كـ container */
    border-radius: calc(var(--pm-radius) * 1.5); /* ← تخلي الحواف مستديرة */
    box-shadow: var(--pm-shadow-sm);
}

.pm-toolbar-left h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 calc(var(--pm-spacing)/2);
}

.pm-toolbar-left p {
    font-size: 0.875rem;
    color: var(--pm-text-muted);
    margin: 0;
}

.pm-toolbar-right {
    display: flex;
    gap: calc(var(--pm-spacing) * 2);
    flex-wrap: wrap;
}

/* Projects toolbar block variants */
.pm-toolbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--pm-spacing)*2);
}

.pm-toolbar-title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--pm-text);
}

.pm-toolbar-title p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--pm-text-muted);
}

.pm-toolbar-actions {
    display: flex;
    gap: calc(var(--pm-spacing)*2);
}

/* -------------------- Cards -------------------- */
.pm-card {
    background: var(--pm-background);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow);
    margin-bottom: calc(var(--pm-spacing) * 3);
}

.pm-card-header {
    padding: calc(var(--pm-spacing) * 3);
    border-bottom: 1px solid var(--pm-border);
}

.pm-card-content {
    padding: calc(var(--pm-spacing) * 3);
}

/* -------------------- Buttons -------------------- */
.pm-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pm-spacing));
    padding: calc(var(--pm-spacing) * 1.5) calc(var(--pm-spacing) * 3);
    border-radius: calc(var(--pm-radius) / 2);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--pm-transition);
    white-space: nowrap;
    background: transparent;
    color: var(--pm-text);
}

    .pm-btn:focus-visible {
        outline: 2px solid var(--pm-primary);
        outline-offset: 2px;
    }

.pm-btn-primary {
    background: var(--pm-primary);
    color: #fff;
}

    .pm-btn-primary:hover {
        background: var(--pm-primary-hover);
        transform: translateY(-1px);
    }

.pm-btn-ghost {
    background: transparent;
    color: #374151;
    border-color: var(--pm-border);
}

    .pm-btn-ghost:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

.pm-btn:disabled, .pm-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* -------------------- Filters -------------------- */
.pm-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--pm-spacing) * 2);
    margin-block-end: calc(var(--pm-spacing) * 2);
}

.pm-filter-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pm-spacing));
}

.pm-filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.pm-select, .pm-input {
    padding: calc(var(--pm-spacing) * 1.5);
    border: 1px solid var(--pm-border);
    border-radius: calc(var(--pm-radius) / 2);
    font-size: 0.875rem;
    background: var(--pm-background);
    color: var(--pm-text);
    min-width: 120px;
}

    .pm-select:focus, .pm-input:focus {
        outline: none;
        border-color: var(--pm-primary);
        box-shadow: 0 0 0 3px rgb(1 200 83 / 0.1);
    }

.pm-date-range {
    display: flex;
    gap: calc(var(--pm-spacing));
    align-items: center;
}

.pm-reset-link {
    color: var(--pm-primary);
    font-size: 0.875rem;
    text-decoration: none;
}

    .pm-reset-link:hover {
        text-decoration: underline;
    }

/* Chips (filters) */
.pm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pm-spacing));
}

.pm-chip {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--pm-spacing) / 2) calc(var(--pm-spacing) * 1.5);
    background: #f3f4f6;
    color: #374151;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--pm-transition);
    border: 1px solid transparent;
}

    .pm-chip:hover {
        background: #e5e7eb;
    }

    .pm-chip.active, .pm-chip.is-active {
        background: var(--pm-primary-light);
        color: var(--pm-primary);
    }

/* -------------------- KPIs (Vehicles summary) -------------------- */
.pm-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: calc(var(--pm-spacing)*2);
    margin-block-end: calc(var(--pm-spacing)*3);
}

.pm-kpi {
    background: var(--pm-background);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: calc(var(--pm-spacing) * 3);
    text-align: center;
    box-shadow: var(--pm-shadow);
}

.pm-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-block-end: calc(var(--pm-spacing)/2);
}

.pm-kpi-label {
    font-size: 0.875rem;
    color: var(--pm-text-muted);
}

.pm-capacity {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: calc(var(--pm-spacing) * 2);
    padding: calc(var(--pm-spacing) * 2);
    background: var(--pm-primary-light);
    border-radius: var(--pm-radius);
}

.pm-capacity-label {
    font-weight: 500;
    color: var(--pm-text);
    white-space: nowrap;
}

/* -------------------- Status Chips -------------------- */
/* Projects */
.pm-status-chip {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--pm-spacing) * 0.5) calc(var(--pm-spacing) * 1.5);
    border-radius: calc(var(--pm-radius-sm) * 2);
    font-size: 12px;
    font-weight: 500;
}

.pm-status-planned {
    background: var(--pm-status-planned-bg);
    color: var(--pm-status-planned-text);
}

.pm-status-active {
    background: var(--pm-status-active-bg);
    color: var(--pm-status-active-text);
}

.pm-status-hold {
    background: var(--pm-status-hold-bg);
    color: var(--pm-status-hold-text);
}

.pm-status-completed {
    background: var(--pm-status-completed-bg);
    color: var(--pm-status-completed-text);
}

.pm-status-archived {
    background: var(--pm-status-archived-bg);
    color: var(--pm-status-archived-text);
}

/* Vehicles */
.pm-chip-status {
    padding: calc(var(--pm-spacing) / 2) calc(var(--pm-spacing) * 1.5);
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
}

.pm-chip-active {
    background: #dcfce7;
    color: #166534;
}

.pm-chip-inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.pm-chip-installation {
    background: #dbeafe;
    color: #1d4ed8;
}

.pm-chip-repair {
    background: #fef3c7;
    color: #d97706;
}

.pm-chip-archived {
    background: #f3e8ff;
    color: #7c3aed;
}

.pm-team-chip {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--pm-spacing)/2) calc(var(--pm-spacing)*1.5);
    background: var(--pm-primary-light);
    color: var(--pm-primary-dark);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

/* -------------------- Progress -------------------- */
.pm-progress {
    width: 100%;
    height: 6px;
    background: var(--pm-border);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.pm-progress-bar {
    height: 100%;
    background: var(--pm-primary);
    border-radius: 3px;
    transition: width var(--pm-transition);
    position: relative;
    overflow: hidden;
}

.pm-progress:hover .pm-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: pm-progress-shine 1s ease-in-out;
}

@keyframes pm-progress-shine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.pm-progress-mini {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.pm-progress-mini-bar {
    height: 100%;
    background: var(--pm-primary);
    border-radius: 2px;
    transition: width var(--pm-transition);
}

/* -------------------- Table -------------------- */
.pm-table-container {
    overflow-x: auto;
}

.pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .pm-table th {
        background: #f9fafb;
        padding: calc(var(--pm-spacing) * 2);
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid var(--pm-border);
        position: sticky;
        top: calc(var(--app-header-height) + var(--pm-toolbar-height));
        z-index: 1500; /* فوق محتوى الصفوف وتحت التولبار */
    }

    .pm-table td {
        padding: calc(var(--pm-spacing) * 2);
        border-bottom: 1px solid var(--pm-border);
        vertical-align: middle;
    }

    .pm-table tr:hover {
        background: #f9fafb;
    }

    .pm-table tr:nth-child(even) {
        background: rgba(248, 250, 252, 0.5);
    }

        .pm-table tr:nth-child(even):hover {
            background: #f9fafb;
        }

[dir="rtl"] .pm-table th {
    text-align: right;
}

/* Vehicles table bits */
.pm-vehicle-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pm-spacing)/2);
}

.pm-vehicle-name {
    font-weight: 500;
    color: #111827;
}

.pm-vehicle-meta {
    font-size: 0.75rem;
    color: #6b7280;
}

.pm-region-team {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pm-spacing)/4);
}

    .pm-region-team span {
        font-size: 0.75rem;
    }

.pm-progress-cell {
    min-width: 120px;
}

/* Projects table bits */
.pm-project-name {
    font-weight: 600;
    color: var(--pm-text);
    margin-bottom: 2px;
}

.pm-project-meta {
    font-size: 12px;
    color: var(--pm-text-muted);
}

/* -------------------- Empty State -------------------- */
.pm-empty {
    text-align: center;
    padding: calc(var(--pm-spacing) * 8) calc(var(--pm-spacing) * 3);
    color: var(--pm-text-muted);
}

.pm-empty-icon {
    font-size: 48px;
    margin-bottom: calc(var(--pm-spacing) * 2);
    margin-top: 35px;
    opacity: 0.5;
}

.pm-empty h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-block-end: calc(var(--pm-spacing));
}

.pm-empty p {
    margin-block-end: calc(var(--pm-spacing) * 3);
}

/* -------------------- Pagination (fixed value) -------------------- */
.pm-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--pm-spacing) * 3);
    padding: calc(var(--pm-spacing) * 3);
    border-top: 1px solid var(--pm-border);
    flex-wrap: wrap;
}

.pm-pagination-info {
    font-size: 0.875rem;
    color: var(--pm-text-muted);
}

.pm-pagination-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--pm-spacing) * 2);
}

/* -------------------- Modal -------------------- */
.pm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: calc(var(--pm-spacing) * 3);
}

    .pm-modal.is-hidden {
        display: none;
    }

.pm-modal-content {
    background: var(--pm-background);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.pm-modal-header {
    padding: calc(var(--pm-spacing) * 3);
    border-bottom: 1px solid var(--pm-border);
}

.pm-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--pm-text);
}

.pm-modal-body {
    padding: calc(var(--pm-spacing) * 3);
}

.pm-modal-footer {
    padding: calc(var(--pm-spacing) * 3);
    border-top: 1px solid var(--pm-border);
    display: flex;
    gap: calc(var(--pm-spacing) * 2);
    justify-content: flex-end;
}

/* -------------------- Forms -------------------- */
.pm-form-group {
    margin-bottom: calc(var(--pm-spacing) * 3);
}

.pm-form-label {
    display: block;
    margin-bottom: calc(var(--pm-spacing));
    font-size: 14px;
    font-weight: 500;
    color: var(--pm-text);
}

.pm-form-input {
    width: 100%;
    padding: calc(var(--pm-spacing) * 1.5) calc(var(--pm-spacing) * 2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    font-size: 14px;
    background: var(--pm-background);
    color: var(--pm-text);
}

    .pm-form-input:focus-visible {
        outline: 2px solid var(--pm-primary);
        outline-offset: 2px;
        border-color: var(--pm-primary);
    }

.pm-form-help {
    margin-top: calc(var(--pm-spacing) * 0.5);
    font-size: 12px;
    color: var(--pm-text-muted);
}

.pm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--pm-spacing) * 2);
}

/* -------------------- Checkbox -------------------- */
.pm-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--pm-primary);
}

    .pm-checkbox:focus-visible {
        outline: 2px solid var(--pm-primary);
        outline-offset: 2px;
    }

/* -------------------- RTL helpers -------------------- */
[dir="rtl"] .pm-text-left {
    text-align: right;
}

[dir="rtl"] .pm-text-right {
    text-align: left;
}

[dir="rtl"] .pm-ml-2 {
    margin-inline-start: 0;
    margin-inline-end: calc(var(--pm-spacing) * 2);
}

[dir="rtl"] .pm-mr-2 {
    margin-inline-end: 0;
    margin-inline-start: calc(var(--pm-spacing) * 2);
}

[dir="rtl"] .pm-pl-3 {
    padding-inline-start: 0;
    padding-inline-end: calc(var(--pm-spacing) * 3);
}

[dir="rtl"] .pm-pr-3 {
    padding-inline-end: 0;
    padding-inline-start: calc(var(--pm-spacing) * 3);
}

[dir="rtl"] .pm-table th, [dir="rtl"] .pm-table td {
    text-align: right;
}

[dir="rtl"] .pm-filters {
    flex-direction: row-reverse;
}

[dir="rtl"] .pm-pagination-controls {
    margin-left: 0;
    margin-right: auto;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
    .pm-content {
        padding: 0 16px;
    }

    .pm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-toolbar-right {
        justify-content: center;
    }

    .pm-filters {
        grid-template-columns: 1fr;
    }

    .pm-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .pm-capacity {
        grid-column: 1 / -1;
        flex-direction: column;
        text-align: center;
    }

    .pm-form-row {
        grid-template-columns: 1fr;
    }

    .pm-pagination {
        flex-direction: column;
        gap: calc(var(--pm-spacing) * 2);
    }
}

/* =========================================================
   Dashboard-only styles (kept as-is, using aliases above)
   ========================================================= */

.dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-l);
    padding: var(--space-l);
    background-color: var(--color-bg);
    min-height: 100vh;
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-l);
    transition: all 200ms ease;
    animation: cardEntrance 250ms ease-out;
}

    .card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-l);
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--color-border);
}

.card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.card__body {
    flex: 1;
}

/* Panels */
.panel-progress {
    grid-column: span 8;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
    margin-bottom: var(--space-xl);
}

.kpi {
    background: var(--color-surface-alt);
    padding: var(--space-l);
    border-radius: var(--radius-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .kpi::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--color-primary);
        transform: scaleX(0);
        transition: transform 200ms ease;
    }

    .kpi:hover::before {
        transform: scaleX(1);
    }

.kpi__value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1;
}

.kpi__label {
    font-size: .875rem;
    color: var(--color-muted);
    margin: var(--space-xs) 0 0 0;
}

.kpi__delta {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    margin-top: var(--space-xs);
}

.kpi__delta--positive {
    color: var(--chip-onTime);
}

.kpi__delta--negative {
    color: var(--chip-critical);
}

.kpi__delta::before {
    content: '↗';
    margin-right: var(--space-xxs);
}

.kpi__delta--negative::before {
    content: '↘';
}

.capacity-band {
    background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-primary) 20%, var(--color-primary) 80%, var(--color-surface-alt) 100%);
    height: 8px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-l);
    position: relative;
}

    .capacity-band::before {
        content: 'Min';
        position: absolute;
        left: 0;
        top: -24px;
        font-size: .75rem;
        color: var(--color-muted);
    }

    .capacity-band::after {
        content: 'Max';
        position: absolute;
        right: 0;
        top: -24px;
        font-size: .75rem;
        color: var(--color-muted);
    }

.chart-area {
    height: 200px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: .875rem;
    margin-bottom: var(--space-l);
    border: 2px dashed var(--color-border);
}

.filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-border);
}

/* Inventory */
.panel-inventory {
    grid-column: span 4;
}

.inventory-list {
    max-height: 400px;
    overflow-y: auto;
}

.inventory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-m);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 150ms ease;
}

    .inventory-item:hover {
        background-color: var(--color-surface-alt);
    }

    .inventory-item:last-child {
        border-bottom: none;
    }

.inventory-info h4 {
    margin: 0 0 var(--space-xxs) 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.inventory-info p {
    margin: 0;
    font-size: .75rem;
    color: var(--color-muted);
}

.inventory-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.progress-bar {
    width: 80px;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    transition: width 200ms ease;
}

.progress-fill--warning {
    background: var(--chip-warning);
}

.progress-fill--critical {
    background: var(--chip-critical);
}

.progress-fill--info {
    background: var(--chip-info);
}

/* Shipments */
.panel-shipments {
    grid-column: span 6;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

    .table th {
        text-align: left;
        padding: var(--space-m);
        border-bottom: 2px solid var(--color-border);
        font-size: .875rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .table td {
        padding: var(--space-m);
        border-bottom: 1px solid var(--color-border);
        font-size: .875rem;
        color: var(--color-text);
    }

    .table tr:hover {
        background-color: var(--color-surface-alt);
    }

/* Complaints */
.panel-complaints {
    grid-column: span 6;
}

.complaints-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-m);
}

.complaint-card {
    background: var(--color-surface-alt);
    padding: var(--space-m);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-border);
    transition: all 150ms ease;
}

    .complaint-card:hover {
        transform: translateX(4px);
    }

.complaint-card--at-risk {
    border-left-color: var(--chip-warning);
}

.complaint-card--escalated {
    border-left-color: var(--chip-critical);
}

.complaint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-s);
}

.complaint-id {
    font-weight: 600;
    color: var(--color-text);
    font-size: .875rem;
}

.complaint-sla {
    font-size: .75rem;
    color: var(--color-muted);
}

.complaint-countdown {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin: var(--space-s) 0;
}

/* Dashboard chips */
.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xxs) var(--space-s);
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.chip--info {
    background: rgba(59,130,246,0.1);
    color: var(--chip-info);
}

.chip--warning {
    background: rgba(245,158,11,0.1);
    color: var(--chip-warning);
}

.chip--critical {
    background: rgba(239,68,68,0.1);
    color: var(--chip-critical);
}

.chip--onTime {
    background: rgba(16,185,129,0.1);
    color: var(--chip-onTime);
}

.chip--late {
    background: rgba(239,68,68,0.1);
    color: var(--chip-late);
}

/* Dashboard responsive */
@media (max-width: 1024px) {
    .dashboard {
        grid-template-columns: repeat(8, 1fr);
        gap: var(--space-m);
        padding: var(--space-m);
    }

    .panel-progress {
        grid-column: span 8;
    }

    .panel-inventory {
        grid-column: span 4;
    }

    .panel-shipments {
        grid-column: span 4;
    }

    .panel-complaints {
        grid-column: span 8;
    }
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
        gap: var(--space-s);
        padding: var(--space-s);
    }

    .panel-progress, .panel-inventory, .panel-shipments, .panel-complaints {
        grid-column: span 1;
    }

    .kpi-row {
        grid-template-columns: 1fr;
        gap: var(--space-s);
    }

    .card {
        padding: var(--space-m);
    }

    .complaints-grid {
        grid-template-columns: 1fr;
    }
}

/* Focus helpers (accessibility) */
.card:focus-within,
.inventory-item:focus,
.table tr:focus,
.complaint-card:focus,
.pm-btn:focus-visible,
.pm-select:focus-visible,
.pm-input:focus-visible {
    outline: 2px solid var(--pm-primary);
    outline-offset: 2px;
}