/**
 * PRV Design System v1.0
 * Unified design language for the entire ERP
 * Primary brand: #3b6da5
 *
 * Architecture:
 *   1. CSS Custom Properties (Design Tokens)
 *   2. Reset & Base
 *   3. Typography
 *   4. Layout
 *   5. Buttons
 *   6. Forms
 *   7. Tables
 *   8. Cards
 *   9. Badges & Pills
 *  10. Modals
 *  11. Alerts & Toasts
 *  12. Tabs
 *  13. Pagination
 *  14. Filters & Toolbars
 *  15. Page Headers
 *  16. Stat Cards
 *  17. Empty States
 *  18. Loaders & Skeletons
 *  19. Action Menus
 *  20. Responsive
 *  21. Motion & Transitions
 *  22. Utilities
 *  23. Print
 */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (CSS Custom Properties)
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Primary ── */
    --prv-primary:          #3b6da5;
    --prv-primary-hover:    #2d5580;
    --prv-primary-active:   #0a3060;
    --prv-primary-soft:     #e8f0fb;
    --prv-primary-softer:   #f3f8ff;
    --prv-primary-10:       rgba(59,109,165, 0.10);
    --prv-primary-20:       rgba(59,109,165, 0.20);

    /* ── Semantic ── */
    --prv-success:          #16a34a;
    --prv-success-soft:     #edf4fb;
    --prv-success-border:   #bbf7d0;
    --prv-warning:          #d97706;
    --prv-warning-soft:     #fffbeb;
    --prv-warning-border:   #fde68a;
    --prv-danger:           #dc2626;
    --prv-danger-soft:      #fef2f2;
    --prv-danger-border:    #fecaca;
    --prv-info:             #0284c7;
    --prv-info-soft:        #f0f9ff;
    --prv-info-border:      #bae6fd;

    /* ── Neutrals ── */
    --prv-gray-50:          #f8fafc;
    --prv-gray-100:         #f1f5f9;
    --prv-gray-200:         #e2e8f0;
    --prv-gray-300:         #cbd5e1;
    --prv-gray-400:         #94a3b8;
    --prv-gray-500:         #64748b;
    --prv-gray-600:         #475569;
    --prv-gray-700:         #334155;
    --prv-gray-800:         #1e293b;
    --prv-gray-900:         #0f172a;

    /* ── Text ── */
    --prv-text-primary:     #1e293b;
    --prv-text-secondary:   #475569;
    --prv-text-muted:       #94a3b8;
    --prv-text-inverse:     #ffffff;

    /* ── Surfaces ── */
    --prv-surface:          #ffffff;
    --prv-surface-raised:   #ffffff;
    --prv-surface-overlay:  rgba(15, 23, 42, 0.5);
    --prv-bg-page:          #f1f5f9;
    --prv-bg-page-alt:      #f8fafc;

    /* ── Borders ── */
    --prv-border:           #e2e8f0;
    --prv-border-light:     #f1f5f9;
    --prv-border-focus:     var(--prv-primary);

    /* ── Spacing Scale (4px base) ── */
    --prv-sp-1:   4px;
    --prv-sp-2:   8px;
    --prv-sp-3:  12px;
    --prv-sp-4:  16px;
    --prv-sp-5:  20px;
    --prv-sp-6:  24px;
    --prv-sp-8:  32px;
    --prv-sp-10: 40px;
    --prv-sp-12: 48px;
    --prv-sp-16: 64px;

    /* ── Border Radius ── */
    --prv-radius-sm:   4px;
    --prv-radius:      8px;
    --prv-radius-md:  10px;
    --prv-radius-lg:  12px;
    --prv-radius-xl:  16px;
    --prv-radius-2xl: 24px;
    --prv-radius-full: 9999px;

    /* ── Shadows / Elevation ── */
    --prv-shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --prv-shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --prv-shadow:      0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --prv-shadow-md:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --prv-shadow-lg:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --prv-shadow-xl:   0 25px 50px -12px rgba(0,0,0,0.15);
    --prv-shadow-focus: 0 0 0 3px var(--prv-primary-10);
    --prv-shadow-danger-focus: 0 0 0 3px rgba(220, 38, 38, 0.15);

    /* ── Typography ── */
    --prv-font:         -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --prv-font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --prv-text-xs:   0.75rem;    /* 12px */
    --prv-text-sm:   0.8125rem;  /* 13px */
    --prv-text-base: 0.875rem;   /* 14px — ERP default */
    --prv-text-md:   0.9375rem;  /* 15px */
    --prv-text-lg:   1rem;       /* 16px */
    --prv-text-xl:   1.125rem;   /* 18px */
    --prv-text-2xl:  1.25rem;    /* 20px */
    --prv-text-3xl:  1.5rem;     /* 24px */
    --prv-text-4xl:  1.875rem;   /* 30px */

    --prv-leading-tight:  1.3;
    --prv-leading-normal: 1.5;
    --prv-leading-relaxed: 1.625;

    /* ── Z-Index Scale ── */
    --prv-z-dropdown:  100;
    --prv-z-sticky:    200;
    --prv-z-header:    300;
    --prv-z-sidebar:   400;
    --prv-z-overlay:   500;
    --prv-z-modal:     600;
    --prv-z-toast:     700;

    /* ── Transition ── */
    --prv-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --prv-transition:        200ms cubic-bezier(0.4, 0, 0.2, 1);
    --prv-transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout ── */
    --prv-sidebar-width:     224px;
    --prv-sidebar-mini:      70px;
    --prv-header-height:     56px;
    --prv-content-padding:   24px;
    --prv-content-max-width: 1600px;
}

/* ═══════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--prv-font);
    font-size: var(--prv-text-base);
    line-height: var(--prv-leading-normal);
    color: var(--prv-text-primary);
    background-color: var(--prv-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    overflow-x: hidden;
}

html,
body,
html body,
#content,
body #content,
.modal-body,
.dropdown-menu,
.table-responsive,
[style*="overflow-y: auto"],
[style*="overflow-y:auto"],
[style*="overflow: auto"],
[style*="overflow:auto"] {
    scrollbar-width: auto !important;
    scrollbar-color: #86a8ce #e6eef7 !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
html body::-webkit-scrollbar,
#content::-webkit-scrollbar,
body #content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
[style*="overflow-y: auto"]::-webkit-scrollbar,
[style*="overflow-y:auto"]::-webkit-scrollbar,
[style*="overflow: auto"]::-webkit-scrollbar,
[style*="overflow:auto"]::-webkit-scrollbar {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
html body::-webkit-scrollbar-track,
#content::-webkit-scrollbar-track,
body #content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
[style*="overflow-y: auto"]::-webkit-scrollbar-track,
[style*="overflow-y:auto"]::-webkit-scrollbar-track,
[style*="overflow: auto"]::-webkit-scrollbar-track,
[style*="overflow:auto"]::-webkit-scrollbar-track {
    background: #e6eef7 !important;
    border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html body::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb,
body #content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb,
[style*="overflow-y:auto"]::-webkit-scrollbar-thumb,
[style*="overflow: auto"]::-webkit-scrollbar-thumb,
[style*="overflow:auto"]::-webkit-scrollbar-thumb {
    background: #86a8ce !important;
    border: 2px solid #e6eef7 !important;
    border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
html body::-webkit-scrollbar-thumb:hover,
#content::-webkit-scrollbar-thumb:hover,
body #content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover,
[style*="overflow-y:auto"]::-webkit-scrollbar-thumb:hover,
[style*="overflow: auto"]::-webkit-scrollbar-thumb:hover,
[style*="overflow:auto"]::-webkit-scrollbar-thumb:hover {
    background: #5b89bb !important;
}

a { color: var(--prv-primary); text-decoration: none; }
a:hover { color: var(--prv-primary-hover); text-decoration: underline; }

::selection {
    background: var(--prv-primary);
    color: #ffffff;
}

::-moz-selection {
    background: var(--prv-primary);
    color: #ffffff;
}

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

/* ═══════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--prv-leading-tight);
    color: var(--prv-text-primary);
    margin-top: 0;
}

.prv-h1 { font-size: var(--prv-text-4xl); font-weight: 800; }
.prv-h2 { font-size: var(--prv-text-3xl); }
.prv-h3 { font-size: var(--prv-text-2xl); }
.prv-h4 { font-size: var(--prv-text-xl); }
.prv-h5 { font-size: var(--prv-text-lg); }
.prv-h6 { font-size: var(--prv-text-md); font-weight: 600; }

.prv-text-muted  { color: var(--prv-text-muted); }
.prv-text-small  { font-size: var(--prv-text-sm); }
.prv-text-xs     { font-size: var(--prv-text-xs); }
.prv-text-mono   { font-family: var(--prv-font-mono); }
.prv-label {
    font-size: var(--prv-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--prv-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   4. LAYOUT — #content wrapper
   ═══════════════════════════════════════════════════════════════════ */
#content {
    margin-left: var(--prv-sidebar-width);
    margin-top: var(--prv-header-height);
    padding: var(--prv-content-padding);
    min-height: calc(100vh - var(--prv-header-height));
    transition: margin-left var(--prv-transition-slow);
}

#sidebar.mini ~ #content,
#sidebar.mini + .top-header + #content {
    margin-left: var(--prv-sidebar-mini);
}

.prv-container {
    max-width: var(--prv-content-max-width);
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.prv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--prv-sp-2);
    padding: 9px 18px;
    font-family: var(--prv-font);
    font-size: var(--prv-text-sm);
    font-weight: 600;
    line-height: 1.4;
    border: 1.5px solid transparent;
    border-radius: var(--prv-radius);
    cursor: pointer;
    transition: all var(--prv-transition);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.prv-btn:focus-visible {
    box-shadow: var(--prv-shadow-focus);
}
.prv-btn:disabled, .prv-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.prv-btn i { font-size: 1em; flex-shrink: 0; }

/* Primary */
.prv-btn-primary {
    background: var(--prv-primary);
    color: var(--prv-text-inverse);
    border-color: var(--prv-primary);
}
.prv-btn-primary:hover {
    background: var(--prv-primary-hover);
    border-color: var(--prv-primary-hover);
    color: var(--prv-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--prv-shadow-sm);
}
.prv-btn-primary:active {
    background: var(--prv-primary-active);
    transform: translateY(0);
}

/* Secondary */
.prv-btn-secondary {
    background: var(--prv-surface);
    color: var(--prv-text-secondary);
    border-color: var(--prv-border);
}
.prv-btn-secondary:hover {
    background: var(--prv-gray-50);
    border-color: var(--prv-gray-300);
    color: var(--prv-text-primary);
}

/* Outline */
.prv-btn-outline {
    background: transparent;
    color: var(--prv-primary);
    border-color: var(--prv-primary);
}
.prv-btn-outline:hover {
    background: var(--prv-primary-soft);
    color: var(--prv-primary-hover);
}

/* Danger */
.prv-btn-danger {
    background: var(--prv-danger);
    color: var(--prv-text-inverse);
    border-color: var(--prv-danger);
}
.prv-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: var(--prv-text-inverse);
}
.prv-btn-danger:focus-visible {
    box-shadow: var(--prv-shadow-danger-focus);
}

/* Success */
.prv-btn-success {
    background: var(--prv-success);
    color: var(--prv-text-inverse);
    border-color: var(--prv-success);
}
.prv-btn-success:hover {
    background: #15803d;
    border-color: #15803d;
    color: var(--prv-text-inverse);
}

/* Ghost (no border, no bg) */
.prv-btn-ghost {
    background: transparent;
    color: var(--prv-text-secondary);
    border-color: transparent;
}
.prv-btn-ghost:hover {
    background: var(--prv-gray-100);
    color: var(--prv-text-primary);
}

/* Sizes */
.prv-btn-xs  { padding: 4px 10px; font-size: var(--prv-text-xs); gap: 4px; border-radius: var(--prv-radius-sm); }
.prv-btn-sm  { padding: 6px 14px; font-size: var(--prv-text-xs); }
.prv-btn-lg  { padding: 12px 24px; font-size: var(--prv-text-md); }

/* Icon-only */
.prv-btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: var(--prv-radius);
}
.prv-btn-icon.prv-btn-sm { width: 30px; height: 30px; }
.prv-btn-icon.prv-btn-xs { width: 26px; height: 26px; }

/* Button Group */
.prv-btn-group {
    display: inline-flex;
}
.prv-btn-group .prv-btn {
    border-radius: 0;
}
.prv-btn-group .prv-btn:first-child { border-radius: var(--prv-radius) 0 0 var(--prv-radius); }
.prv-btn-group .prv-btn:last-child  { border-radius: 0 var(--prv-radius) var(--prv-radius) 0; }
.prv-btn-group .prv-btn + .prv-btn  { margin-left: -1.5px; }

/* Loading State */
.prv-btn-loading {
    color: transparent !important;
    pointer-events: none;
}
.prv-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: prv-spin 0.6s linear infinite;
}
.prv-btn-secondary.prv-btn-loading::after,
.prv-btn-outline.prv-btn-loading::after,
.prv-btn-ghost.prv-btn-loading::after {
    border-color: rgba(0,0,0,0.15);
    border-top-color: var(--prv-primary);
}

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

/* ═══════════════════════════════════════════════════════════════════
   6. FORMS
   ═══════════════════════════════════════════════════════════════════ */
.prv-form-group {
    margin-bottom: var(--prv-sp-5);
}

.prv-form-label {
    display: block;
    font-size: var(--prv-text-sm);
    font-weight: 600;
    color: var(--prv-text-primary);
    margin-bottom: var(--prv-sp-1);
}

.prv-form-required::after {
    content: ' *';
    color: var(--prv-danger);
}

.prv-form-help {
    font-size: var(--prv-text-xs);
    color: var(--prv-text-muted);
    margin-top: var(--prv-sp-1);
}

.prv-input,
.prv-select,
.prv-textarea {
    width: 100%;
    padding: 9px 14px;
    font-family: var(--prv-font);
    font-size: var(--prv-text-base);
    color: var(--prv-text-primary);
    background: var(--prv-surface);
    border: 1.5px solid var(--prv-border);
    border-radius: var(--prv-radius);
    transition: border-color var(--prv-transition-fast), box-shadow var(--prv-transition-fast);
    appearance: none;
}
.prv-input:hover,
.prv-select:hover,
.prv-textarea:hover {
    border-color: var(--prv-gray-300);
}
.prv-input:focus,
.prv-select:focus,
.prv-textarea:focus {
    border-color: var(--prv-primary);
    box-shadow: var(--prv-shadow-focus);
    outline: none;
}
.prv-input::placeholder {
    color: var(--prv-gray-400);
}

/* Validation States */
.prv-input.is-invalid,
.prv-select.is-invalid { border-color: var(--prv-danger); }
.prv-input.is-invalid:focus,
.prv-select.is-invalid:focus { box-shadow: var(--prv-shadow-danger-focus); }
.prv-form-error {
    font-size: var(--prv-text-xs);
    color: var(--prv-danger);
    margin-top: var(--prv-sp-1);
}

.prv-input.is-valid,
.prv-select.is-valid { border-color: var(--prv-success); }

/* Input Sizes */
.prv-input-sm { padding: 6px 10px; font-size: var(--prv-text-sm); }
.prv-input-lg { padding: 12px 16px; font-size: var(--prv-text-md); }

/* Checkbox & Radio */
.prv-check {
    display: flex;
    align-items: center;
    gap: var(--prv-sp-2);
    cursor: pointer;
    font-size: var(--prv-text-sm);
}
.prv-check input[type="checkbox"],
.prv-check input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--prv-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* Switch */
.prv-switch {
    position: relative;
    width: 40px; height: 22px;
    display: inline-block;
}
.prv-switch input { opacity: 0; width: 0; height: 0; }
.prv-switch-slider {
    position: absolute; inset: 0;
    background: var(--prv-gray-300);
    border-radius: var(--prv-radius-full);
    transition: var(--prv-transition);
    cursor: pointer;
}
.prv-switch-slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--prv-transition);
}
.prv-switch input:checked + .prv-switch-slider {
    background: var(--prv-primary);
}
.prv-switch input:checked + .prv-switch-slider::before {
    transform: translateX(18px);
}

/* Form Sections */
.prv-form-section {
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius-lg);
    overflow: hidden;
    margin-bottom: var(--prv-sp-6);
}
.prv-form-section-header {
    padding: var(--prv-sp-4) var(--prv-sp-6);
    background: var(--prv-gray-50);
    border-bottom: 1px solid var(--prv-border);
    font-weight: 700;
    font-size: var(--prv-text-md);
    display: flex;
    align-items: center;
    gap: var(--prv-sp-2);
}
.prv-form-section-body {
    padding: var(--prv-sp-6);
}

/* Sticky Form Actions */
.prv-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--prv-sp-3);
    padding: var(--prv-sp-4) var(--prv-sp-6);
    background: var(--prv-surface);
    border-top: 1px solid var(--prv-border);
    position: sticky;
    bottom: 0;
    z-index: var(--prv-z-sticky);
}

/* ═══════════════════════════════════════════════════════════════════
   7. TABLES
   ═══════════════════════════════════════════════════════════════════ */
.prv-table-wrap {
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius-lg);
    overflow: hidden;
}

.prv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--prv-text-sm);
}

.prv-table thead th {
    padding: var(--prv-sp-3) var(--prv-sp-4);
    background: var(--prv-gray-50);
    border-bottom: 2px solid var(--prv-border);
    font-size: var(--prv-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--prv-text-muted);
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.prv-table tbody td {
    padding: var(--prv-sp-3) var(--prv-sp-4);
    border-bottom: 1px solid var(--prv-border-light);
    vertical-align: middle;
    color: var(--prv-text-primary);
}

.prv-table tbody tr:last-child td {
    border-bottom: none;
}

.prv-table tbody tr:hover {
    background: var(--prv-primary-softer);
}

.prv-table tbody tr.selected {
    background: var(--prv-primary-soft);
}

/* Sortable Column */
.prv-table th[data-sort] {
    cursor: pointer;
    user-select: none;
}
.prv-table th[data-sort]:hover {
    color: var(--prv-primary);
}

/* Responsive Table */
.prv-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table Action Buttons */
.prv-table-actions {
    display: flex;
    gap: var(--prv-sp-1);
}

/* ═══════════════════════════════════════════════════════════════════
   8. CARDS
   ═══════════════════════════════════════════════════════════════════ */
.prv-card {
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--prv-transition);
}
.prv-card:hover {
    box-shadow: var(--prv-shadow-sm);
}
.prv-card-header {
    padding: var(--prv-sp-4) var(--prv-sp-5);
    border-bottom: 1px solid var(--prv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prv-sp-3);
    font-weight: 700;
    font-size: var(--prv-text-md);
}
.prv-card-body {
    padding: var(--prv-sp-5);
}
.prv-card-footer {
    padding: var(--prv-sp-3) var(--prv-sp-5);
    border-top: 1px solid var(--prv-border);
    background: var(--prv-gray-50);
}

/* ═══════════════════════════════════════════════════════════════════
   9. BADGES & PILLS
   ═══════════════════════════════════════════════════════════════════ */
.prv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--prv-text-xs);
    font-weight: 600;
    border-radius: var(--prv-radius-full);
    white-space: nowrap;
    line-height: 1.5;
}
.prv-badge-primary  { background: var(--prv-primary-soft); color: var(--prv-primary); }
.prv-badge-success  { background: var(--prv-success-soft); color: var(--prv-success); }
.prv-badge-warning  { background: var(--prv-warning-soft); color: var(--prv-warning); }
.prv-badge-danger   { background: var(--prv-danger-soft);  color: var(--prv-danger);  }
.prv-badge-info     { background: var(--prv-info-soft);    color: var(--prv-info);    }
.prv-badge-neutral  { background: var(--prv-gray-100);     color: var(--prv-gray-600);}

.prv-badge-dot::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   10. MODALS
   ═══════════════════════════════════════════════════════════════════ */
.prv-modal .modal-content {
    border: none;
    border-radius: var(--prv-radius-xl);
    box-shadow: var(--prv-shadow-xl);
    overflow: hidden;
}
.prv-modal .modal-header {
    padding: var(--prv-sp-5) var(--prv-sp-6);
    border-bottom: 1px solid var(--prv-border);
    background: var(--prv-gray-50);
}
.prv-modal .modal-title {
    font-size: var(--prv-text-lg);
    font-weight: 700;
}
.prv-modal .modal-body {
    padding: var(--prv-sp-6);
}
.prv-modal .modal-footer {
    padding: var(--prv-sp-4) var(--prv-sp-6);
    border-top: 1px solid var(--prv-border);
    gap: var(--prv-sp-3);
}

/* ═══════════════════════════════════════════════════════════════════
   11. ALERTS & TOASTS
   ═══════════════════════════════════════════════════════════════════ */
.prv-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--prv-sp-3);
    padding: var(--prv-sp-4) var(--prv-sp-5);
    border-radius: var(--prv-radius-md);
    border: 1px solid transparent;
    font-size: var(--prv-text-sm);
    margin-bottom: var(--prv-sp-4);
}
.prv-alert i { margin-top: 1px; flex-shrink: 0; }
.prv-alert-success { background: var(--prv-success-soft); border-color: var(--prv-success-border); color: #166534; }
.prv-alert-warning { background: var(--prv-warning-soft); border-color: var(--prv-warning-border); color: #2d5580; }
.prv-alert-danger  { background: var(--prv-danger-soft);  border-color: var(--prv-danger-border);  color: #991b1b; }
.prv-alert-info    { background: var(--prv-info-soft);    border-color: var(--prv-info-border);    color: #075985; }

/* Toast */
.prv-toast-container {
    position: fixed;
    top: calc(var(--prv-header-height) + var(--prv-sp-4));
    right: var(--prv-sp-4);
    z-index: var(--prv-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--prv-sp-2);
}
.prv-toast {
    display: flex;
    align-items: center;
    gap: var(--prv-sp-3);
    padding: var(--prv-sp-3) var(--prv-sp-5);
    background: var(--prv-gray-900);
    color: white;
    border-radius: var(--prv-radius-md);
    box-shadow: var(--prv-shadow-lg);
    font-size: var(--prv-text-sm);
    font-weight: 500;
    animation: prv-slide-in 0.3s ease-out;
    max-width: 380px;
}
.prv-toast-success { border-left: 4px solid var(--prv-success); }
.prv-toast-danger  { border-left: 4px solid var(--prv-danger); }
.prv-toast-warning { border-left: 4px solid var(--prv-warning); }

@keyframes prv-slide-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   12. TABS
   ═══════════════════════════════════════════════════════════════════ */
.prv-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--prv-border);
    margin-bottom: var(--prv-sp-5);
    overflow-x: auto;
}
.prv-tab {
    padding: var(--prv-sp-3) var(--prv-sp-5);
    font-size: var(--prv-text-sm);
    font-weight: 600;
    color: var(--prv-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--prv-transition-fast);
    text-decoration: none;
}
.prv-tab:hover {
    color: var(--prv-primary);
    text-decoration: none;
}
.prv-tab.active {
    color: var(--prv-primary);
    border-bottom-color: var(--prv-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   13. PAGINATION
   ═══════════════════════════════════════════════════════════════════ */
.prv-pagination {
    display: flex;
    align-items: center;
    gap: var(--prv-sp-1);
    list-style: none;
    padding: 0;
    margin: 0;
}
.prv-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 var(--prv-sp-3);
    font-size: var(--prv-text-sm);
    font-weight: 600;
    color: var(--prv-text-secondary);
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius);
    text-decoration: none;
    transition: all var(--prv-transition-fast);
}
.prv-page-link:hover {
    background: var(--prv-primary-soft);
    border-color: var(--prv-primary);
    color: var(--prv-primary);
    text-decoration: none;
}
.prv-page-link.active {
    background: var(--prv-primary);
    border-color: var(--prv-primary);
    color: var(--prv-text-inverse);
}
.prv-page-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   14. FILTERS & TOOLBARS
   ═══════════════════════════════════════════════════════════════════ */
.prv-toolbar {
    display: flex;
    align-items: center;
    gap: var(--prv-sp-3);
    padding: var(--prv-sp-4) var(--prv-sp-5);
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius-lg);
    margin-bottom: var(--prv-sp-4);
    flex-wrap: wrap;
}
.prv-toolbar-title {
    font-weight: 700;
    font-size: var(--prv-text-md);
    margin-right: auto;
}
.prv-search-input {
    position: relative;
    flex: 0 1 300px;
}
.prv-search-input input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    font-size: var(--prv-text-sm);
    border: 1.5px solid var(--prv-border);
    border-radius: var(--prv-radius);
    background: var(--prv-gray-50);
    transition: all var(--prv-transition-fast);
}
.prv-search-input input:focus {
    border-color: var(--prv-primary);
    background: var(--prv-surface);
    box-shadow: var(--prv-shadow-focus);
    outline: none;
}
.prv-search-input i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--prv-gray-400);
    font-size: var(--prv-text-sm);
}

.prv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--prv-text-xs);
    font-weight: 600;
    background: var(--prv-primary-soft);
    color: var(--prv-primary);
    border-radius: var(--prv-radius-full);
    border: none;
    cursor: pointer;
}
.prv-filter-chip .remove {
    width: 14px; height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--prv-primary-20);
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   15. PAGE HEADERS
   ═══════════════════════════════════════════════════════════════════ */
.prv-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--prv-sp-4);
    margin-bottom: var(--prv-sp-6);
}
.prv-page-title {
    font-size: var(--prv-text-3xl);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
.prv-page-subtitle {
    font-size: var(--prv-text-sm);
    color: var(--prv-text-muted);
    margin-top: var(--prv-sp-1);
}
.prv-page-header-actions {
    display: flex;
    gap: var(--prv-sp-3);
    flex-shrink: 0;
}

/* Hero page header (for dashboards and important pages) */
.prv-hero-header {
    background: linear-gradient(135deg, var(--prv-gray-900) 0%, var(--prv-primary) 55%, #3b6da5 100%);
    padding: var(--prv-sp-8);
    border-radius: var(--prv-radius-2xl);
    color: white;
    margin-bottom: var(--prv-sp-6);
    box-shadow: var(--prv-shadow-lg);
}
.prv-hero-header .prv-page-title { color: white; }
.prv-hero-header .prv-page-subtitle { color: rgba(255,255,255,0.75); }

/* ═══════════════════════════════════════════════════════════════════
   16. STAT CARDS
   ═══════════════════════════════════════════════════════════════════ */
.prv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--prv-sp-4);
    margin-bottom: var(--prv-sp-6);
}
.prv-stat-card {
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius-lg);
    padding: var(--prv-sp-5);
    display: flex;
    align-items: center;
    gap: var(--prv-sp-4);
    transition: all var(--prv-transition);
}
.prv-stat-card:hover {
    box-shadow: var(--prv-shadow-sm);
    transform: translateY(-2px);
}
.prv-stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--prv-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--prv-primary-soft);
    color: var(--prv-primary);
}
.prv-stat-value {
    font-size: var(--prv-text-3xl);
    font-weight: 800;
    line-height: 1;
    color: var(--prv-text-primary);
}
.prv-stat-label {
    font-size: var(--prv-text-xs);
    color: var(--prv-text-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   17. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════ */
.prv-empty {
    text-align: center;
    padding: var(--prv-sp-16) var(--prv-sp-6);
    color: var(--prv-text-muted);
}
.prv-empty i {
    font-size: 3rem;
    color: var(--prv-gray-300);
    margin-bottom: var(--prv-sp-4);
    display: block;
}
.prv-empty h5 {
    color: var(--prv-text-secondary);
    margin-bottom: var(--prv-sp-2);
}

/* ═══════════════════════════════════════════════════════════════════
   18. LOADERS & SKELETONS
   ═══════════════════════════════════════════════════════════════════ */
.prv-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--prv-primary-10);
    border-top-color: var(--prv-primary);
    border-radius: 50%;
    animation: prv-spin 0.7s linear infinite;
    margin: var(--prv-sp-8) auto;
}
.prv-spinner-sm { width: 20px; height: 20px; border-width: 2px; }

.prv-skeleton {
    background: linear-gradient(90deg, var(--prv-gray-100) 25%, var(--prv-gray-200) 50%, var(--prv-gray-100) 75%);
    background-size: 200% 100%;
    animation: prv-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--prv-radius);
    height: 14px;
}
.prv-skeleton-lg { height: 24px; }
.prv-skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }

@keyframes prv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Page-level loading overlay */
.prv-page-loading {
    position: fixed;
    top: var(--prv-header-height);
    left: var(--prv-sidebar-width);
    right: 0;
    height: 3px;
    z-index: var(--prv-z-overlay);
    overflow: hidden;
}
.prv-page-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--prv-primary);
    animation: prv-loading-bar 1s ease-in-out infinite;
}

@keyframes prv-loading-bar {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   19. ACTION MENUS / DROPDOWN
   ═══════════════════════════════════════════════════════════════════ */
.prv-dropdown-menu {
    min-width: 180px;
    padding: var(--prv-sp-1) 0;
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--prv-radius-md);
    box-shadow: var(--prv-shadow-lg);
}
.prv-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--prv-sp-2);
    padding: var(--prv-sp-2) var(--prv-sp-4);
    font-size: var(--prv-text-sm);
    color: var(--prv-text-secondary);
    text-decoration: none;
    transition: all var(--prv-transition-fast);
}
.prv-dropdown-item:hover {
    background: var(--prv-primary-soft);
    color: var(--prv-primary);
    text-decoration: none;
}
.prv-dropdown-item.danger:hover {
    background: var(--prv-danger-soft);
    color: var(--prv-danger);
}
.prv-dropdown-divider {
    height: 0;
    border-top: 1px solid var(--prv-border);
    margin: var(--prv-sp-1) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   20. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root {
        --prv-content-padding: 16px;
    }
    .prv-hero-header { padding: var(--prv-sp-6); }
    .prv-page-title { font-size: var(--prv-text-2xl); }
}

@media (max-width: 768px) {
    :root {
        --prv-sidebar-width: 0px;
        --prv-content-padding: 12px;
    }
    
    #content {
        margin-left: 0;
    }
    
    .prv-page-header {
        flex-direction: column;
        gap: var(--prv-sp-3);
    }
    .prv-page-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .prv-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .prv-search-input { flex: 1 1 100%; }
    
    .prv-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--prv-sp-3);
    }
    
    .prv-hero-header {
        padding: var(--prv-sp-5);
        border-radius: var(--prv-radius-lg);
    }
    
    .prv-form-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
}

@media (max-width: 480px) {
    .prv-stats-grid {
        grid-template-columns: 1fr;
    }
    .prv-btn-lg { padding: 10px 18px; font-size: var(--prv-text-base); }
}

/* ═══════════════════════════════════════════════════════════════════
   21. MOTION & TRANSITIONS
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.prv-fade-in {
    animation: prv-fade-in 0.3s ease-out;
}
@keyframes prv-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Content swap transition */
#content.prv-transitioning {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
#content.prv-loaded {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   22. UTILITIES
   ═══════════════════════════════════════════════════════════════════ */
.prv-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prv-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.prv-divider {
    height: 0;
    border: none;
    border-top: 1px solid var(--prv-border);
    margin: var(--prv-sp-5) 0;
}
.prv-gap-2 { gap: var(--prv-sp-2); }
.prv-gap-3 { gap: var(--prv-sp-3); }
.prv-gap-4 { gap: var(--prv-sp-4); }

/* ═══════════════════════════════════════════════════════════════════
   23. PRINT
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    #sidebar, .top-header, .prv-toolbar, .prv-form-actions,
    .prv-page-header-actions, .prv-toast-container,
    .prv-page-loading { display: none !important; }
    
    #content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .prv-card, .prv-table-wrap {
        border: 1px solid #ddd;
        box-shadow: none;
        break-inside: avoid;
    }
}