:root {
    --pl-primary: #1a56db;
    --pl-primary-dark: #1141c0;
    --pl-secondary: #0e9f6e;
    --pl-danger: #e02424;
    --pl-warning: #ff8800;
    --pl-bg: #f4f6fb;
    --pl-card-bg: #ffffff;
    --pl-border: #e2e8f0;
    --pl-text: #1e293b;
    --pl-text-muted: #64748b;
    --pl-selected-row: #dbeafe;
    --pl-radius: 12px;
    --pl-radius-sm: 8px;
    --pl-shadow: 0 4px 24px rgba(0,0,0,.07);
    --pl-shadow-hover: 0 8px 32px rgba(26,86,219,.12);
    --pl-transition: all .22s cubic-bezier(.4,0,.2,1);
}

[v-cloak] {
    display: none !important;
}

#app {
    zoom: 0.88;
}


/* ---------- Master Info Layout ---------- */
.pl-master-header-card {
    border-radius: var(--pl-radius);
    padding: 0px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: var(--pl-transition);
}

    .pl-master-header-card:hover {
        border-color: var(--pl-primary);
        box-shadow: 0 6px 16px rgba(26,86,219,0.06);
    }

.pl-master-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: flex-end;
}

.pl-field-highlight {
    font-weight: 700;
    color: var(--pl-primary);
    font-size: 1.1rem !important;
    text-align: center;
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
}

/* ---------- Page wrapper ---------- */
.pl-page-wrapper {
    padding: 10px 10px;
    background: var(--pl-bg);
    min-height: 100vh;
    direction: rtl;
}

button:focus {
    background-color: #1b929f85;
}

/* ---------- Page header ---------- */
.pl-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.pl-page-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pl-primary), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(26,86,219,.3);
}

    .pl-page-icon i {
        color: #fff;
        font-size: 24px;
    }

.pl-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pl-text);
    margin: 0;
    line-height: 1.2;
}

.pl-page-subtitle {
    font-size: .82rem;
    color: var(--pl-text-muted);
    margin: 2px 0 0;
}

/* ---------- Toolbar ---------- */
.pl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius) var(--pl-radius) 0 0;
    border-bottom: 2px solid var(--pl-border);
}

 

/* ---------- Premium Button Overrides (V5) ---------- */


.pl-btn-key {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    margin: 0 4px !important;
    min-width: 22px !important;
    height: 18px !important;
    line-height: 1 !important;
}

.pl-btn-new .pl-btn-key, .pl-btn-save .pl-btn-key {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}




/* ---------- Upload & Attachments System ---------- */
.pl-upload-area {
    padding: 5px;
    background: #fafafa;
    border-radius: 0 0 15px 15px;
    min-height: 300px;
}

.pl-upload-card {
    background: #fff;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

    .pl-upload-card:hover {
        border-color: var(--pl-primary);
        background: rgba(59, 130, 246, 0.02);
    }

.pl-upload-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

    .pl-upload-icon-circle.primary {
        background: rgba(59, 130, 246, 0.05);
        color: #3b82f6;
    }

    .pl-upload-icon-circle.success {
        background: #f0fdf4;
        color: #10b981;
        border: 4px solid #fff;
        box-shadow: 0 0 0 1px #bbf7d0;
    }

.pl-upload-input-wrapper {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    background: #f8fafc;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

    .pl-upload-input-wrapper input[type="file"] {
        flex: 1;
        padding: 4px 8px;
        font-size: 13px;
        cursor: pointer;
        border: none;
        background: transparent;
    }

.pl-success-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
}

.pl-file-name-badge {
    margin: 0 0 30px;
    color: #64748b;
    font-family: monospace;
    background: #f1f5f9;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    font-size: 13px;
}

@keyframes plFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

.pl-animated-fade {
    animation: plFadeInUp 0.4s ease forwards;
}


.pl-btn i {
    font-size: 18px;
}

.pl-btn-new {
    background: var(--pl-secondary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14,159,110,.25);
}

    .pl-btn-new:hover:not([disabled]) {
        background: #047857;
        transform: translateY(-2px);
    }

.pl-btn-save {
    background: var(--pl-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26,86,219,.25);
}

    .pl-btn-save:hover:not([disabled]) {
        background: var(--pl-primary-dark);
        transform: translateY(-2px);
    }


.pl-btn-print {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(100, 116, 139, 0.3) !important;
}

    .pl-btn-print:hover:not([disabled]) {
        background: linear-gradient(135deg, #475569, #334155) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(100, 116, 139, 0.4) !important;
    }


.pl-btn-restore {
    background: #fffbeb !important;
    color: #d97706 !important;
    border-color: #fef3c7 !important;
}

    .pl-btn-restore:hover:not([disabled]) {
        background: #fef3c7 !important;
        color: #b45309 !important;
        border-color: #fde68a !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
    }

/* Table Premium Action Buttons */
.pl-btn-action {
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

    .pl-btn-action::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
    }

    .pl-btn-action:hover:not([disabled]) {
        transform: translateY(-2px);
    }

    .pl-btn-action:active:not([disabled]) {
        transform: translateY(0);
    }

.pl-btn-action-primary {
    background: linear-gradient(135deg, #1a56db, #3b82f6);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(26, 86, 219, 0.2);
}

    .pl-btn-action-primary:hover:not([disabled]) {
        background: linear-gradient(135deg, #1e40af, #2563eb);
        box-shadow: 0 6px 14px rgba(26, 86, 219, 0.35);
    }

.pl-btn-action-success {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

    .pl-btn-action-success:hover:not([disabled]) {
        background: linear-gradient(135deg, #047857, #059669);
        box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
    }

.pl-btn-action-view {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #334155 !important;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .pl-btn-action-view:hover:not([disabled]) {
        background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        border-color: #94a3b8;
        color: #0f172a !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }

.pl-btn-action-purple {
    background: linear-gradient(135deg, #fdf4ff, #fae8ff);
    color: #9333ea !important;
    border: 1px solid #f3e8ff;
    box-shadow: 0 2px 4px rgba(147, 51, 234, 0.05);
}

    .pl-btn-action-purple:hover:not([disabled]) {
        background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
        color: #7e22ce !important;
        border-color: #d8b4fe;
        box-shadow: 0 4px 10px rgba(147, 51, 234, 0.15);
    }

.pl-btn-action-secondary {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c !important;
    border: 1px solid #ffedd5;
    box-shadow: 0 2px 4px rgba(194, 65, 12, 0.05);
}

    .pl-btn-action-secondary:hover:not([disabled]) {
        background: linear-gradient(135deg, #ffedd5, #fed7aa);
        color: #9a3412 !important;
        border-color: #fdba74;
        box-shadow: 0 4px 10px rgba(194, 65, 12, 0.15);
    }

.pl-btn-action i {
    font-size: 16px;
    margin: 0;
}

.pl-btn-cancel-offer {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1.5px solid #fecdd3 !important;
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.05) !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

    .pl-btn-cancel-offer:hover:not([disabled]) {
        background: #ffe4e6 !important;
        border-color: #fb7185 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(225, 29, 72, 0.1) !important;
    }

    .pl-btn-cancel-offer i {
        font-size: 18px !important;
        margin: 0 !important;
    }

.pl-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

.pl-btn-key {
    display: inline-block;
    background: rgba(255,255,255,.22);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
}

/* ---------- Main card ---------- */
.pl-card {
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    /* NO overflow:hidden — would clip v-select dropdowns */
    margin-bottom: 22px;
}


.pl-tab-content {
    border-radius: 0 0 var(--pl-radius) var(--pl-radius);
}

/* ---------- Premium Modern Switch System ---------- */
.pl-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    padding: 6px 10px;
    border-radius: 10px;
    margin: 2px 0;
}

    .pl-switch:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    .pl-switch input {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

.pl-switch-toggle {
    position: relative;
    width: 46px;
    height: 24px;
    background-color: #cbd5e1;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

    .pl-switch-toggle::after {
        content: '✕';
        position: absolute;
        top: 3px;
        right: 3px;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        color: #94a3b8; /* Grey color for the X symbol */
    }

.pl-switch input:checked ~ .pl-switch-toggle {
    background-color: #22c55e;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05), 0 0 10px rgba(34, 197, 94, 0.2);
}

    .pl-switch input:checked ~ .pl-switch-toggle::after {
        content: '✓';
        color: #22c55e; /* Green color for the check symbol */
        transform: translateX(-22px);
    }

.pl-switch-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
    line-height: normal;
}

/* Primary Variant */
.pl-switch-primary input:checked ~ .pl-switch-toggle {
    background-color: var(--pl-primary);
}


/* Modern Radio Style - Specialized System */
.pl-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
    user-select: none;
    padding: 6px 14px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .pl-radio:hover {
        background: rgba(26, 86, 219, 0.05);
    }

    .pl-radio input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

.pl-radio-box {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    position: relative;
}

.pl-radio input[type="radio"]:checked ~ .pl-radio-box {
    border-color: var(--pl-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.1);
}

.pl-radio-box::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--pl-primary);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pl-radio input[type="radio"]:checked ~ .pl-radio-box::after {
    transform: scale(1);
}

.pl-radio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pl-text);
}

/* Modern Checkbox Style */
.pl-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    user-select: none;
    padding: 4px 8px;
    border-radius: var(--pl-radius-sm);
    transition: background 0.2s ease;
}

    .pl-checkbox:hover {
        background: #f1f5f9;
    }

    .pl-checkbox input {
        position: absolute !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

.pl-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .pl-checkbox-box::after {
        content: 'check';
        font-family: 'Material Icons';
        font-size: 16px;
        color: #fff;
        display: none;
    }

.pl-checkbox input:checked ~ .pl-checkbox-box {
    background: var(--pl-primary);
    border-color: var(--pl-primary);
}

    .pl-checkbox input:checked ~ .pl-checkbox-box::after {
        display: block;
    }

.pl-checkbox-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pl-text);
}


/* ---------- Tab nav (Premium Segmented Design) ---------- */
.pl-tab-nav {
    display: flex;
    gap: 6px;
    background: #f1f5f9; /* Soft Slate Track */
    padding: 6px;
    border-radius: 14px;
    margin: 15px 20px;
    min-width: 250px;
    border: none;
    overflow: visible;
}

.pl-tab-item {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    padding: 10px 24px;
    border: none;
    background: transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
}

    .pl-tab-item i {
        font-size: 18px;
        opacity: 0.7;
    }

    .pl-tab-item:hover {
        color: var(--pl-primary);
        background: rgba(255, 255, 255, 0.5);
    }

    /* Floating Pill Effect for Active Tab */
    .pl-tab-item.active,
    .pl-tab-item.pl-active {
        background: #ffffff !important;
        color: var(--pl-primary) !important;
        box-shadow: 0 4px 12px rgba(26, 86, 219, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transform: translateY(0);
    }

        .pl-tab-item.active i,
        .pl-tab-item.pl-active i {
            opacity: 1 !important;
            color: var(--pl-primary);
            transform: scale(1.1);
        }

/* ---------- Tab panels ---------- */
.pl-tab-content {
    padding: 5px 20px 25px;
}

.pl-tab-panel.pl-active {
    display: block;
}

/* ---------- Form fields ---------- */
.pl-section-title {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pl-primary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pl-border);
}

.pl-fields-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: flex-end;
}

/* Grid Spans */
.pl-col-1 {
    grid-column: span 1;
}

.pl-col-2 {
    grid-column: span 2;
}

.pl-col-3 {
    grid-column: span 3;
}

.pl-col-4 {
    grid-column: span 4;
}

.pl-col-5 {
    grid-column: span 5;
}

.pl-col-6 {
    grid-column: span 6;
}

.pl-col-7 {
    grid-column: span 7;
}

.pl-col-8 {
    grid-column: span 8;
}

.pl-col-9 {
    grid-column: span 9;
}

.pl-col-10 {
    grid-column: span 10;
}

.pl-col-11 {
    grid-column: span 11;
}

.pl-col-12 {
    grid-column: span 12;
}

@media (max-width: 992px) {
    .pl-col-2, .pl-col-3, .pl-col-4 {
        grid-column: span 6;
    }
}

@media (max-width: 600px) {
    .pl-fields-grid > div {
        grid-column: span 12 !important;
    }
}

.pl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl-field-label {
    font-size: .76rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 2px;
}

.pl-field-input {
    width: 100%;
    padding: 0 14px;
    height: 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: .95rem;
    color: #2d3748;
    background: #f8fafc;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    outline: none;
    text-align: right;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .pl-field-input:focus {
        border-color: #1a56db;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,86,219,.1);
    }

    .pl-field-input:disabled {
        background: #e9ecef;
        color: var(--pl-text-muted);
        cursor: not-allowed;
    }

/* Date picker and Textarea matching branchs.css */
.mx-datepicker {
    width: 100% !important;
}
/*.mx-input-wrapper {
     padding: 0 8px !important;
}*/
.mx-input {
    margin: 0 !important;
    min-height: 40px !important;
    border: 1.5px solid #adc1dbe3 !important;
    border-radius: 10px !important;
    background-color: #f8fafc !important;
    min-height: 40px !important;
    color: #2d3748 !important;
    font-size: .95rem !important;
    padding: 0 8px !important;
    transition: all .22s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
}

    .mx-input:focus {
        border-color: #1a56db !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 3px rgba(26,86,219,.1) !important;
    }

textarea {
    width: 100%;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    background-color: #f8fafc !important;
    color: #2d3748 !important;
    font-size: .95rem !important;
    transition: all .22s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    outline: none;
    min-height: 80px;
}

    textarea:focus {
        border-color: #1a56db !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 3px rgba(26,86,219,.1) !important;
    }

/* stat cards */
.pl-stat-cards {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.pl-stat-card {
    flex: 1;
    min-width: 140px;
    padding: 16px 18px;
    border-radius: var(--pl-radius-sm);
    border: 1.5px solid var(--pl-border);
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--pl-transition);
}

    .pl-stat-card:hover {
        border-color: var(--pl-primary);
        background: #eff6ff;
        box-shadow: var(--pl-shadow-hover);
    }

.pl-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.pl-stat-icon-blue {
    background: linear-gradient(135deg,#1a56db,#6366f1);
}

.pl-stat-icon-green {
    background: linear-gradient(135deg,#0e9f6e,#059669);
}

.pl-stat-icon-orange {
    background: linear-gradient(135deg,#ff8800,#f59e0b);
}

.pl-stat-label {
    font-size: .74rem;
    color: var(--pl-text-muted);
    margin: 0;
}

.pl-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pl-text);
    margin: 0;
    line-height: 1.1;
}

/* ---------- Data tables ---------- */
.pl-table-wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    margin-top: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    min-height: 400px;
    overflow: auto;
    /* Removed overflow:visible/hidden to let sub-wrapper handle scroll */
}
/* Sub-wrapper for horizontal scroll on small screens */
.pl-table-responsive {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    min-height: 400px; /* Empty space below table if no records */
}

.pl-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    min-width: 800px;
    font-size: .87rem;
    border: 1.5px solid #cbd5e1 !important; /* Darker border */
    border-radius: var(--pl-radius) !important;
    overflow: hidden !important;
}

    .pl-table thead tr {
        background: linear-gradient(135deg, var(--pl-primary), #6366f1);
    }

    .pl-table thead th {
        padding: 8px 8px !important;
        color: #334155 !important;
        font-weight: 800 !important;
        font-size: .82rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        background: #f1f5f9 !important; /* Slightly darker gray for header */
        border-bottom: 1.5px solid #cbd5e1 !important;
        border-right: 1px solid #cbd5e1 !important; /* Right border for RTL */
    }

        .pl-table thead th:last-child {
            border-right: none !important;
        }

    .pl-table tbody tr {
        border-bottom: 1px solid var(--pl-border);
        transition: var(--pl-transition);
        cursor: pointer;
    }

/* Modern Small Modal Override */
.pl-modal-small-container {
    width: 95% !important;
    max-width: 720px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 768px) {
    .pl-modal-small-container {
        width: 98% !important;
        margin: 10px auto !important;
        max-width: none !important;
    }
}

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

.pl-table tbody tr:hover {
    background: #eff6ff;
}

.pl-table tbody tr.pl-row-selected,
.pl-table tbody tr.selectedRow {
    background: linear-gradient(90deg, #f0f7ff, #e0f2fe) !important;
    box-shadow: inset -4px 0 0 0 var(--pl-primary), 0 4px 12px rgba(26, 86, 219, 0.1) !important;
    transform: scale(1.001);
    position: relative;
    z-index: 1;
}

    .pl-table tbody tr.pl-row-selected td,
    .pl-table tbody tr.selectedRow td {
        background: transparent !important;
    }

.pl-table tbody tr.alertitem,
.pl-table tbody tr.alertitem:hover,
.pl-table tbody tr.alertitem:focus {
    background: linear-gradient(90deg, #fff1f2, #ffe4e6) !important;
    box-shadow: inset -4px 0 0 0 #ef4444, 0 4px 12px rgba(239, 68, 68, 0.12) !important;
    transform: scale(1.001);
    position: relative;
    z-index: 1;
}

    /* عند التحديد + تحذير */
    .pl-table tbody tr.alertitem.pl-row-selected,
    .pl-table tbody tr.alertitem.selectedRow {
        background: linear-gradient(90deg, #ffe4e6, #fecdd3) !important;
        box-shadow: inset -4px 0 0 0 #dc2626, 0 6px 14px rgba(239, 68, 68, 0.18) !important;
    }

.pl-table tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .pl-table tbody tr:hover {
        background: #eff6ff !important;
        box-shadow: 0 4px 12px rgba(26, 86, 219, 0.05) !important;
        transform: translateY(-1px);
        position: relative;
        z-index: 10;
    }

        .pl-table tbody tr:hover td {
            background: transparent !important;
        }

    .pl-table tbody tr.alertitem,
    .pl-table tbody tr.alertitem:hover,
    .pl-table tbody tr.alertitem * {
        background: linear-gradient(90deg, #fff1f2, #ffe4e6) !important;
    }

.pl-table tbody td {
    padding: 5px 5px !important;
    color: var(--pl-text) !important;
    vertical-align: middle !important;
    overflow: visible !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important; /* Cell borders confirmed */
    background: #fff !important;
    text-align: center !important;
}

    .pl-table tbody td:last-child {
        border-right: none !important;
    }

.pl-table tbody tr:last-child td {
    border-bottom: none !important;
}

.pl-table tbody tr.pl-row-input td {
    background: #f8fafc;
}

.pl-table-input {
    width: 100%;
    padding: 5px 10px;
    border: 1.5px solid var(--pl-border);
    border-radius: 6px;
    font-size: .87rem;
    color: var(--pl-text);
    background: #fff;
    outline: none;
    text-align: right;
    transition: var(--pl-transition);
}

    .pl-table-input:focus {
        border-color: var(--pl-primary);
        box-shadow: 0 0 0 3px rgba(26,86,219,.1);
    }

.pl-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--pl-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .74rem;
    font-weight: 700;
}

.pl-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fee2e2;
    color: var(--pl-danger);
    border: none;
    cursor: pointer;
    transition: var(--pl-transition);
}

    .pl-delete-btn:hover {
        background: var(--pl-danger);
        color: #fff;
    }

    .pl-delete-btn i {
        font-size: 16px;
    }

/* v-select inside table — force dropdown above everything */
/* v-select styling to match branchs.css */
.vs__dropdown-toggle {
    border: 1.5px solid #adc1dbe3 !important;
    border-radius: 10px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    background-color: #f8fafc !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease;
}

.vs--open .vs__dropdown-toggle {
    border-color: #1a56db !important;
    box-shadow: 0 0 0 3px rgba(26,86,219,.1) !important;
    background-color: #fff !important;
}

.vs__dropdown-menu {
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    padding: 5px 0 !important;
    background: #fff !important;
    z-index: 2147483647 !important; /* يضمن الظهور فوق المودال */
}

/* Ensure table-specific v-select preserves some compactness if needed, but matches style */
.pl-table .vs__dropdown-toggle {
    min-height: 40px !important;
}
/* Also fix any v-select inside the tab panels */
.pl-tab-panel .vs__dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

/* ---------- Empty state ---------- */
.pl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--pl-text-muted);
}

    .pl-empty i {
        font-size: 40px;
        opacity: .3;
    }

    .pl-empty p {
        font-size: .9rem;
        margin: 0;
    }

/* ---------- List card ---------- */
.pl-list-card {
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    overflow: hidden;
}

.pl-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 2px solid var(--pl-border);
    background: #f8fafc;
    flex-wrap: wrap;
    gap: 10px;
}

.pl-list-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

    .pl-list-title i {
        color: var(--pl-primary);
    }

.pl-list-count {
    background: var(--pl-primary);
    color: #fff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 10px;
}

/* ---------- No-data banner ---------- */
.pl-no-data {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #eff6ff, #e0f2fe);
    border-radius: var(--pl-radius-sm);
    margin: 16px;
    color: var(--pl-primary);
    font-size: .9rem;
    font-weight: 600;
}

    .pl-no-data i {
        font-size: 22px;
    }

/* ---------- Line Cards Grid ---------- */
.pl-line-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px;
}

.pl-line-card {
    position: relative;
    background: #fff;
    border-radius: var(--pl-radius);
    border: 1.5px solid var(--pl-border);
    overflow: hidden;
    cursor: pointer;
    transition: var(--pl-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .pl-line-card:hover {
        border-color: var(--pl-primary);
        box-shadow: var(--pl-shadow-hover);
        transform: translateY(-2px);
    }

.pl-line-card-active {
    border-color: var(--pl-primary) !important;
    box-shadow: 0 0 0 3px rgba(26,86,219,.15), var(--pl-shadow-hover) !important;
}

.pl-lc-strip {
    height: 4px;
    background: linear-gradient(90deg, var(--pl-primary), #6366f1);
}

.pl-line-card-active .pl-lc-strip {
    background: linear-gradient(90deg, #0e9f6e, #059669);
}

.pl-lc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.pl-lc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pl-primary), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pl-lc-avatar i {
        color: #fff;
        font-size: 20px;
    }

.pl-line-card-active .pl-lc-avatar {
    background: linear-gradient(135deg, #0e9f6e, #059669);
}

.pl-lc-titles {
    flex: 1;
    min-width: 0;
}

.pl-lc-name {
    font-size: .93rem;
    font-weight: 700;
    color: var(--pl-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-lc-code {
    font-size: .74rem;
    color: var(--pl-text-muted);
    font-weight: 500;
}

.pl-lc-id {
    font-size: .75rem;
    color: var(--pl-text-muted);
    background: #f1f5f9;
    border-radius: 6px;
    padding: 3px 8px;
    font-weight: 600;
    flex-shrink: 0;
}

.pl-lc-divider {
    height: 1px;
    background: var(--pl-border);
    margin: 0 16px;
}

.pl-lc-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px 10px;
    gap: 2px;
}

.pl-lc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0; /* Allow shrinking without overflow */
    padding: 2px;
}

    .pl-lc-stat:hover {
        background: #f8fafc;
    }

    .pl-lc-stat > i {
        font-size: 16px;
        color: var(--pl-primary);
    }

    .pl-lc-stat > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

.pl-lcs-val {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pl-text);
    line-height: 1.1;
}

.pl-lcs-lbl {
    font-size: .6rem;
    color: var(--pl-text-muted);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.85;
}

.pl-lc-selected-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    background: linear-gradient(90deg, #0e9f6e, #059669);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

    .pl-lc-selected-bar i {
        font-size: 14px;
    }
/* Loading skeleton */
.pl-cards-loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px;
}

.pl-skeleton-card {
    height: 140px;
    border-radius: var(--pl-radius);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: pl-shimmer 1.4s infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .pl-fields-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pl-stat-cards {
        flex-direction: column;
    }

    .pl-toolbar {
        justify-content: center;
    }

    /* Fix horizontal overflow in modals */
    .modal-container {
        width: 98% !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
    }

    .modal-body-scroll {
        max-width: 100% !important;
        overflow-x: auto !important;
        max-height: 130vh !important
    }
    .modal-body {
        max-height: 90% !important;
        overflow-x: auto !important;
    }
    .pl-table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
.modal-body {
    max-height: 90% !important;
    overflow-x: hidden !important;
}
@media (max-width: 480px) {
    .pl-fields-grid {
        grid-template-columns: 1fr;
    }

    .pl-tab-item {
        padding: 12px 14px;
        font-size: .82rem;
    }
}

/* ===== plpc — Modern Paging Controls (isolated, circular design) ===== */

/* Outer wrapper */
.plpc-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* ---- Position indicator pill (keep as-is) ---- */
.plpc-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: .78rem !important;
    color: #1e40af !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

.plpc-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #1a56db !important;
    flex-shrink: 0 !important;
    animation: plpc-pulse 1.8s ease-in-out infinite !important;
}

@keyframes plpc-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.6);
    }
}

.plpc-lbl {
    color: #64748b !important;
    font-size: .73rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.plpc-val {
    font-weight: 800 !important;
    color: #1a56db !important;
    margin: 0 !important;
}

.plpc-sep {
    color: #cbd5e1 !important;
    margin: 0 2px !important;
}

.plpc-tot {
    font-weight: 600 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* ---- Nav row (circular buttons) ---- */
.plpc-nav-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
}

/* Each circular button */
.plpc-circle-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid #dde3ed !important;
    background: #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
    flex-shrink: 0 !important;
}

    .plpc-circle-btn i {
        font-size: 18px !important;
        line-height: 1 !important;
        font-family: 'Material Icons' !important;
    }

    .plpc-circle-btn:hover:not([disabled]) {
        background: #eff6ff !important;
        border-color: #1a56db !important;
        color: #1a56db !important;
        transform: scale(1.1) !important;
    }

    .plpc-circle-btn:active:not([disabled]) {
        background: #dbeafe !important;
        transform: scale(.96) !important;
    }

    .plpc-circle-btn[disabled] {
        opacity: .28 !important;
        cursor: not-allowed !important;
    }

/* ---------- Premium Buefy Table & Pagination (Legacy Support) ---------- */
.b-table .table {
    width: 100%;
    margin-bottom: 0;
    background-color: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

/* Premium Table Container */
.pl-premium-table-container {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

/* Base Premium Table Styles */
.pl-premium-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

    .pl-premium-table thead th {
        padding: 10px 8px !important;
        color: #334155 !important;
        text-align: center !important;
        white-space: nowrap !important;
        background: #f1f5f9 !important; /* Slightly darker gray for header */
        border-bottom: 1px solid #51b2b9 !important;
        border-right: 1px solid #51b2b9 !important; /* Right border for RTL */

        letter-spacing: 0.05em;
        white-space: normal !important; /* Allow wrapping by default */
        vertical-align: middle !important;
    }

/* Common header content wrapper */
.pl-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Utility for small columns */
.pl-col-small {
    width: 1% !important; /* Collapses to content minimum */
    white-space: nowrap !important;
}

.pl-premium-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
}

    /* Soft Zebra Striping (Alternating Rows) */
    .pl-premium-table tbody tr:nth-of-type(even) {
        background-color: #f7fafc;
    }

    .pl-premium-table tbody tr:hover {
        background-color: #f0f7ff !important;
        z-index: 1;
    }

    /* Active / Viewing Row State - Enhanced Visibility */
    .pl-premium-table tbody tr.pl-row-active,
    .pl-table tbody tr.pl-row-active {
        background-color: #dbeafe !important;
        border-right: 4px solid var(--pl-primary) !important;
        position: relative;
        box-shadow: inset 4px 0 0 0 var(--pl-primary), 0 4px 12px rgba(26, 86, 219, 0.1) !important;
    }

        .pl-premium-table tbody tr.pl-row-active td,
        .pl-table tbody tr.pl-row-active td {
            background-color: #dbeafe !important;
            color: #1e3a8a !important; /* Darker blue text for active row */
            font-weight: 600;
        }

        .pl-premium-table tbody tr.pl-row-active .pl-row-num,
        .pl-table tbody tr.pl-row-active .pl-row-num {
            background: var(--pl-primary) !important;
            color: #fff !important;
            transform: scale(1.15);
            box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
        }

.pl-premium-table tbody td {
    padding: 14px 12px !important;
    vertical-align: middle !important;
    text-align: center !important;
    color: #1e293b;
    font-size: 0.92rem;
}

/* Footer Pagination Bar */
.pl-table-footer-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 15px;
}

.pl-footer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-footer-pill {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 15px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

    .pl-footer-pill .val {
        color: var(--pl-primary);
        font-weight: 800;
    }

/* Premium Pagination Buttons */
.pl-pagination-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pl-page-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

    .pl-page-btn:hover:not([disabled]) {
        border-color: var(--pl-primary);
        color: var(--pl-primary);
        background: #f0f7ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
    }

    .pl-page-btn i {
        font-size: 20px;
    }

    .pl-page-btn[disabled] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.pl-page-current {
    min-width: 40px;
    padding: 0 10px;
    height: 36px;
    border-radius: 12px;
    background: var(--pl-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

/* Badge styles for table */
.pl-row-num {
    background: #f1f5f9;
    color: #64748b;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.75rem;
}
/* Dedicated Unit Tag Style */
.pl-unit-tag {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px 10px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}
/* Quantity Status Coloring */
.pl-qty-status-badge {
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    transition: color 0.2s ease;
}

.pl-qty-positive {
    color: #10b981 !important; /* Emerald Green */
}

.pl-qty-negative {
    color: #ef4444 !important; /* Vivid Red */
}

.pl-qty-neutral {
    color: #64748b !important; /* Slate Blue */
}

.pl-row-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
}

    .pl-row-icon-btn:hover {
        background: #ffffff !important;
        color: var(--pl-primary) !important;
        border-color: var(--pl-primary) !important;
        transform: translateY(-2px) rotate(5deg) !important;
        box-shadow: 0 4px 12px rgba(26, 86, 219, 0.15) !important;
    }



/* Current position bubble (highlighted) */
.plpc-current-bubble {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 0 6px !important;
    background: linear-gradient(135deg, #1a56db, #6366f1) !important;
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 10px rgba(26,86,219,.35) !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}


/* ---------- Modal Specific / Tabs ---------- */
.pl-tabs {
    display: flex;
    background: #f8fafc;
    border-bottom: 2px solid var(--pl-border);
    padding: 0 10px;
}

.pl-tab {
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pl-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--pl-transition);
}

    .pl-tab:hover {
        color: var(--pl-primary);
    }

    .pl-tab.active {
        color: var(--pl-primary);
        border-bottom-color: var(--pl-primary);
    }

/* Compact v-select for tables */
.pl-v-select-compact .vs__dropdown-toggle {
    min-height: 40px !important;
    padding: 0 !important;
}

.pl-v-select-compact .vs__selected {
    margin: 0 !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
}

.pl-v-select-compact .vs__actions {
    padding: 0 4px !important;
}

.pl-v-select-compact .vs__search {
    font-size: 11px !important;
    margin: 0 !important;
}


/* Merged into the .vs__dropdown-menu rule above — removed duplicate */

/* Specific fix when inside a modal to ensure it's on top */
.modal-mask {
    z-index: 9998 !important;
}

.modal-wrapper {
    z-index: 9999 !important;
}

/* Ensure the table cell doesn't clip children if using standard methods */
.pl-table td {
    overflow: visible !important;
    position: relative;
}

/* Modal Improvements: Fixed Footer and Body Scroll */
.modal-container {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border-radius: var(--pl-radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
}

.modal-header {
    flex-shrink: 0;
    padding: 20px !important;
    background: #fff;
    border-bottom: 1px solid var(--pl-border);
}

.modal-footer {
    flex-shrink: 0;
    padding: 15px 20px !important;
    background: #f8fafc;
    border-top: 1px solid var(--pl-border);
}



@media (max-width: 600px) {
    .plpc-indicator {
        display: none !important;
    }
}

body, #app {
    font-family: 'Tajawal', sans-serif !important;
    background-color: #f8f9fa;
}

.selectedSearchRow {
    background-color: #d8e7f3;
}

textarea {
    direction: rtl;
    text-align: right;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    min-height: 80px;
    background: #f8fafc;
}

    textarea:focus {
        border-color: #1a56db !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 3px rgba(26,86,219,.1) !important;
    }

.custom-input-field input[type="text"],
.custom-input-field input[type="number"],
.custom-input-field input[type="email"],
.custom-input-field input[type="password"],
.custom-input-field input[type="time"] {
    border: 1.5px solid #adc1dbe3 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 40px !important;
    box-sizing: border-box;
    background-color: #f8fafc !important;
    box-shadow: none !important;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    font-size: 14px;
    outline: none;
}

.custom-input-field input:focus {
    border-color: #1a56db !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(26,86,219,.1) !important;
}

.custom-input-field > label {
    color: #9e9e9e;
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 1rem;
    cursor: text;
    transition: transform .2s ease-out, color .2s ease-out;
    transform-origin: 100% 0;
    text-align: initial;
    transform: translateY(14px);
    pointer-events: none;
}

    .custom-input-field > label.active,
    .custom-input-field > label.active-label,
    .custom-input-field > input:focus ~ label,
    .custom-input-field > input:not(:placeholder-shown) ~ label,
    .custom-input-field > input:valid ~ label {
        font-weight: 600;
        color: #4a5568 !important;
        transform: translateY(-26px) scale(0.85);
        background-color: transparent !important;
    }

.vs__dropdown-toggle {
    border: 1px solid #adc1dbe3 !important;
    border-radius: 10px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    background-color: #fcfcfc !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease;
}

.vs--open .vs__dropdown-toggle {
    border-color: #008c82 !important;
    box-shadow: 0 4px 8px rgba(0, 140, 130, 0.1) !important;
    background-color: #fff !important;
}

.vs__dropdown-menu {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 5px 0;
    font-family: 'Tajawal', sans-serif;
    text-align: right;
}

.custom-input-field {
    position: relative;
    margin-bottom: 0.8rem !important;
    margin-top: 0.8rem !important;
}

/* Tabs Styling */
.tabs {
    background-color: transparent;
    height: 54px;
    border-bottom: 2px solid #e2e8f0;
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;
    white-space: nowrap;
}

    .tabs .tab {
        line-height: 54px;
        height: 54px;
        text-transform: none;
        margin: 0;
        width: auto !important;
        flex-grow: 0 !important;
        min-width: auto !important;
    }

        .tabs .tab a {
            color: #718096 !important;
            font-weight: 600;
            font-size: 16px;
            padding: 0 20px;
            border-radius: 10px 10px 0 0;
            transition: all 0.3s ease;
            display: block;
        }

            .tabs .tab a:hover {
                color: #008c82 !important;
                background-color: #f8fafc;
            }

        .tabs .tab.disabled-tab a {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
        }

        .tabs .tab a.active {
            color: #008c82 !important;
            background-color: #fff;
            border-bottom: 3px solid #008c82;
            box-shadow: 0 -3px 6px rgba(0,0,0,0.02);
        }

    .tabs .indicator {
        display: none !important;
    }

/* Buttons Toolbar */
.action-toolbar {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    border: 1px solid #edf2f7;
}

    .action-toolbar .btn {
        border-radius: 8px !important;
        height: 44px;
        line-height: 1;
        font-size: 14.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        padding: 0 22px;
        text-transform: none;
        box-shadow: none;
        transition: all .22s cubic-bezier(.4,0,.2,1);
        color: #fff !important;
        justify-content: center;
        border: none;
        cursor: pointer;
    }

        .action-toolbar .btn i {
            margin-left: 8px;
            margin-right: -4px;
            font-size: 20px;
        }

        .action-toolbar .btn:hover:not(:disabled) {
            transform: translateY(-2px);
        }

.btn-new {
    background: #0e9f6e !important;
    box-shadow: 0 4px 12px rgba(14,159,110,.25) !important;
}

    .btn-new:hover:not(:disabled) {
        background: #047857 !important;
    }

.btn-save {
    background: #1a56db !important;
    box-shadow: 0 4px 12px rgba(26,86,219,.25) !important;
}

    .btn-save:hover:not(:disabled) {
        background: #1141c0 !important;
    }

.btn-delete {
    background: #ffffff !important;
    color: #e02424 !important;
    border: 1px solid #fecaca !important;
    box-shadow: none !important;
}

    .btn-delete:hover:not(:disabled) {
        background: #fef2f2 !important;
        border-color: #f87171 !important;
    }

.btn-refresh {
    background: #64748b !important;
    box-shadow: 0 4px 12px rgba(100,116,139,.2) !important;
}

    .btn-refresh:hover:not(:disabled) {
        background: #475569 !important;
    }

.btn:disabled {
    background: #cbd5e0 !important;
    box-shadow: none !important;
    color: #718096 !important;
    transform: none !important;
    cursor: not-allowed;
}

/* Checkbox styling */
.field .b-checkbox {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #4a5568;
    font-weight: 500;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

    .field .b-checkbox:hover {
        background: #f8fafc;
    }

/* Table Design */
.b-table .table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    font-size: 14px;
}

    .b-table .table th {
        background-color: #f1f5f9 !important;
        color: #1e293b !important;
        font-weight: 700;
        padding: 12px 10px !important;
        border: 1px solid #e2e8f0 !important;
        border-bottom: 2px solid #cbd5e1 !important;
    }

        .b-table .table th .th-wrap, .b-table .table th .icon {
            color: #ffffff !important;
        }

    .b-table .table td {
        vertical-align: middle;
        padding: 10px !important;
        border: 1px solid #edf2f7 !important;
        color: #4a5568;
    }

    .b-table .table tr:hover td {
        background-color: #fdfdfd;
    }

    .b-table .table tr.is-selected td {
        background-color: #e6f6f5 !important;
        color: #008c82 !important;
        font-weight: 600;
    }

/* Pagination & Search Controls */
.btn-search {
    background-color: #008c82 !important;
    border-radius: 8px !important;
}

/* Settings Group Cards */
.settings-group {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

    .settings-group:hover {
        box-shadow: 0 8px 15px rgba(0,0,0,0.05);
        border-color: #cbd5e1;
    }

.settings-group-title {
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 16px;
}

    .settings-group-title i {
        margin-left: 10px;
        color: #008c82;
        font-size: 24px;
    }

/* File Upload Buttons */
.btn-file-select {
    background-color: #f1f5f9 !important;
    color: #4a5568 !important;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: none !important;
    height: 34px;
    line-height: 32px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn-file-select:hover {
        background-color: #e2e8f0 !important;
        color: #1e293b !important;
    }

.btn-file-upload {
    background-color: #008c82 !important;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 34px;
    line-height: 34px;
    padding: 0 15px;
    font-size: 12px;
    color: #fff !important;
    display: none;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

    .btn-file-upload:hover {
        box-shadow: 0 4px 6px rgba(0, 140, 130, 0.2);
        transform: translateY(-1px);
    }

.btn-search i {
    margin-left: 8px;
    font-size: 20px;
}

.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 140, 130, 0.3) !important;
}

.paging-wrapper {
    background: #fff;
    padding: 5px 15px;
    border-radius: 8px;
    border: 1px solid #edf2f7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .paging-wrapper a, .paging-wrapper button, .paging-wrapper .page-item {
        border-radius: 6px !important;
        background-color: #f8fafc !important;
        border: 1px solid #e2e8f0;
        color: #4a5568 !important;
        padding: 6px 14px;
        margin: 0 4px;
        transition: all 0.2s;
        font-weight: 500;
        font-size: 13px;
        box-shadow: none !important;
    }

        .paging-wrapper a:hover, .paging-wrapper button:hover {
            background-color: #e2e8f0 !important;
            border-color: #cbd5e1;
        }

    .paging-wrapper .active a, .paging-wrapper .active button {
        background-color: #008c82 !important;
        color: #fff !important;
        border-color: #008c82;
        box-shadow: 0 2px 4px rgba(0, 140, 130, 0.2) !important;
    }

.light-blue {
    background: linear-gradient(70deg, #008c82 40%, #016e83 100%) !important;
}

.pl-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    height: 35px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    font-size: 0.70rem !important;
    font-weight: 500 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    white-space: nowrap !important;
    background: #fff !important;
    color: #475569 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
}

    .pl-btn:hover:not([disabled]) {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 15px rgba(0,0,0,0.08) !important;
        border-color: rgba(0,0,0,0.1) !important;
    }

    .pl-btn:active:not([disabled]) {
        transform: translateY(0) !important;
    }

    .pl-btn i {
        font-size: 20px !important;
    }


.pl-btn-new {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25) !important;
}

    .pl-btn-new:hover:not([disabled]) {
        background: linear-gradient(135deg, #0891b2, #0e7490) !important;
        transform: translateY(-2px);
    }

    .pl-btn-new:active:not([disabled]) {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(6, 182, 212, 0.2) !important;
    }

    .pl-btn-new[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none !important;
    }

.pl-btn-balance {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
}

    .pl-btn-balance:hover:not([disabled]) {
        background: linear-gradient(135deg, #16a34a, #15803d) !important;
    }

.pl-btn-entry {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
}

    .pl-btn-entry:hover:not([disabled]) {
        background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    }

.pl-btn-delivery {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
}

    .pl-btn-delivery:hover:not([disabled]) {
        background: linear-gradient(135deg, #d97706, #b45309) !important;
    }

.pl-btn-save {
    background: linear-gradient(135deg, #10b981, #059669) !important; /* أخضر Gradient */
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
    transition: all 0.2s ease-in-out;
}

    .pl-btn-save:hover:not([disabled]) {
        background: linear-gradient(135deg, #059669, #047857) !important; /* Hover أغمق */
        transform: translateY(-2px) scale(1.05);
    }

    .pl-btn-save:active:not([disabled]) {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2) !important;
    }

    .pl-btn-save[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none !important;
    }

.pl-btn-send {
    background: #10b981 !important; /* أخضر (نجاح/إرسال) */
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(16,185,129,.25) !important;
}

    .pl-btn-send:hover:not([disabled]) {
        background: #059669 !important; /* درجة أغمق */
        transform: translateY(-2px) !important;
    }



.pl-btn-delete {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #ffffff !important;
}

.pl-btn-secondary {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.pl-btn-discount {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

    .pl-btn-discount:hover:not([disabled]) {
        background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    }

.pl-btn-print {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    color: #ffffff !important;
}

.pl-btn-excel {
    background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
    color: #ffffff !important;
}

.pl-btn-restore {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: #ffffff !important;
}

.pl-btn-share {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

    .pl-btn-share:hover:not([disabled]) {
        background: linear-gradient(135deg, #059669, #047857) !important;
    }
/* Unique Styles for Specialized Buttons */
.pl-btn-more-unique {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2) !important;
}

    .pl-btn-more-unique:hover:not([disabled]) {
        background: linear-gradient(135deg, #6d28d9, #4338ca) !important;
        box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3) !important;
    }

.pl-btn-machines {
    background: linear-gradient(135deg, #6366f1, #4338ca) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
}

    .pl-btn-machines:hover:not([disabled]) {
        background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
    }

.pl-btn-expenses {
    background: linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
}

    .pl-btn-expenses:hover:not([disabled]) {
        background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
    }

.pl-btn-refresh {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}

    .pl-btn-refresh:hover:not([disabled]) {
        background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35) !important;
    }

.pl-btn-employees {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border: none !important;
}

    .pl-btn-employees:hover:not([disabled]) {
        background: linear-gradient(135deg, #0ea5e9, #0214c7) !important;
    }

/* Production Operations Specialized Buttons */
.pl-btn-search {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}

    .pl-btn-search:hover:not([disabled]) {
        background: linear-gradient(135deg, #0284c7, #0369a1) !important;
        box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4) !important;
    }

.pl-btn-stages {
    background: linear-gradient(135deg, #818cf8, #6366f1) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

    .pl-btn-stages:hover:not([disabled]) {
        background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4) !important;
    }

.pl-btn-update {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

    .pl-btn-update:hover:not([disabled]) {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4) !important;
    }

/* Search Field Enhancement */
.pl-field-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.pl-field-search-input {
    width: 100%;
    padding: 0 40px 0 14px !important; /* Extra padding for icon on the right */
    height: 40px;
    border: 1.5px solid #adc1dbe3 !important;
    border-radius: 10px;
    font-size: .95rem;
    color: #2d3748;
    background: #ffffff !important;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    outline: none;
    text-align: right;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

    .pl-field-search-input:focus {
        border-color: var(--pl-primary) !important;
        box-shadow: 0 0 0 3px rgba(26,86,219,.1), 0 4px 12px rgba(0,0,0,0.08) !important;
        transform: translateY(-1px);
    }

.pl-field-search-wrapper i {
    position: absolute;
    right: 12px;
    color: var(--pl-primary);
    font-size: 20px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.pl-field-search-input:focus + i {
    transform: scale(1.1);
    color: var(--pl-primary-dark);
}

/* Custom Completion Range (Slider) */
.pl-completion-range {
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    background: #e2e8f0 !important;
    border-radius: 5px !important;
    outline: none !important;
    margin: 10px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

    .pl-completion-range::-webkit-slider-runnable-track {
        width: 100% !important;
        height: 6px !important;
        cursor: pointer !important;
        background: #e2e8f0 !important;
        border-radius: 5px !important;
    }

    .pl-completion-range::-webkit-slider-thumb {
        height: 18px !important;
        width: 18px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        margin-top: -6px !important; /* Center it on the track */
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
        border: 2px solid var(--pl-primary) !important;
        transition: all 0.2s ease !important;
    }

    .pl-completion-range:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 5px rgba(26,86,219,0.15), 0 2px 6px rgba(0,0,0,0.2) !important;
    }

    .pl-completion-range::-webkit-slider-thumb:hover {
        transform: scale(1.15) !important;
        background: #f8fafc !important;
    }

/* Dynamic track color based on value is not possible in pure CSS for <input type=range> easily without JS, 
   but we can style the thumb and basic track nicely. */

.pl-btn-import-prev {
    background: linear-gradient(135deg, #0ea5e9, #0369a1) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
    height: 34px !important;
    padding: 0 15px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

    .pl-btn-import-prev:hover:not([disabled]) {
        background: linear-gradient(135deg, #0284c7, #075985) !important;
        box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4) !important;
        transform: translateY(-2px) !important;
    }

.pl-btn-import-special {
    background: linear-gradient(135deg, #2dd4bf, #0d9488) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
    height: 34px !important;
    padding: 0 15px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

    .pl-btn-import-special:hover:not([disabled]) {
        background: linear-gradient(135deg, #0d9488, #0f766e) !important;
        box-shadow: 0 6px 15px rgba(13, 148, 136, 0.4) !important;
        transform: translateY(-2px) !important;
    }

/* Table Action Buttons - Professional & Expressive */
.pl-row-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

    .pl-row-btn i {
        font-size: 18px !important;
        margin: 0 !important;
    }

.pl-btn-payment {
    background: #ecfdf5 !important; /* أخضر فاتح */
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}

    .pl-btn-payment:hover:not([disabled]) {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3) !important;
        transform: translateY(-2px) scale(1.05);
    }

/* Formula/Construction Button - Deep Indigo/Violet */
.pl-btn-formula {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border-color: #ddd6fe !important;
}

    .pl-btn-formula:hover:not([disabled]) {
        background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3) !important;
        transform: translateY(-2px) scale(1.05);
    }

/* Specialized Button for Accounting Entry - High Reusability */
.pl-btn-acc-entry {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border: 1px solid #ddd6fe !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
}

    .pl-btn-acc-entry:hover:not([disabled]) {
        background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 6px 15px rgba(124, 58, 237, 0.25) !important;
        transform: translateY(-2px) !important;
    }

    .pl-btn-acc-entry:active:not([disabled]) {
        transform: translateY(0) !important;
    }

    .pl-btn-acc-entry i {
        font-size: 20px !important;
        margin-left: 8px !important;
        transition: transform 0.3s ease !important;
    }

    .pl-btn-acc-entry:hover i {
        transform: rotate(-10deg) scale(1.1) !important;
    }

/* Row Trash/Delete Button */
.pl-btn-row-delete {
    background: #fff1f2 !important;
    color: #ef4444 !important;
    border-color: #fecdd3 !important;
}

    .pl-btn-row-delete:hover:not([disabled]) {
        background: linear-gradient(135deg, #ef4444, #dc2626) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3) !important;
        transform: translateY(-2px) scale(1.05);
    }

    .pl-btn-row-delete[disabled] {
        opacity: 0.4;
        cursor: not-allowed !important;
        background: #f1f5f9 !important;
        color: #94a3b8 !important;
        border-color: #e2e8f0 !important;
    }

.pl-btn-key {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: inherit !important;
    margin-right: 8px !important;
    min-width: 24px !important;
    height: 20px !important;
}

/* Modal Styling — Definitively Responsive & Professional */
.modal-mask {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.modal-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 96%;
    max-width: 1200px;
    max-height: 94vh;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
    position: relative;
}

@media (max-width: 768px) {
    .modal-wrapper {
        padding: 0 !important;
    }

    .modal-container {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
}

.modal-header {
    background: #fff;
    padding: 16px 20px;
    border-bottom: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Important for alignment */
    gap: 15px;
    min-height: 60px;
}

    .modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 800;
        color: #1e293b;
        text-align: right;
        flex: 1; /* Pushes everything else to the other side */
        order: 1; /* In RTL flex, 1 is Right */
    }

.pl-modal-close {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    flex-shrink: 0;
    order: 2; /* In RTL flex, 2 is to the Left of 1 */
}

    .pl-modal-close:hover {
        background: #fee2e2;
        color: #ef4444;
        transform: rotate(90deg);
    }

.modal-body-scroll {
    overflow: auto !important;
    flex: 1;
    background: #fff;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

/* Responsive Table Fixes for Modals - Premium Scroll Approach */
@media (max-width: 768px) {
    .modal-container .pl-table-responsive {
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 15px;
    }

    .modal-container .pl-table {
        min-width: 100%;
    }
}


.pl-btn[disabled] {
    opacity: .5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ---------- Toolbar ---------- */
.pl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius) var(--pl-radius) 0 0;
    border-bottom: 2px solid var(--pl-border);
}

@media (max-width: 768px) {
    
}

/* Premium Summary/Total Card — Professional Financial Design */
.pl-total-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 5px 10px !important; /* Increased horizontal padding */
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px !important; /* Reduced gap */
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-right: 5px solid #10b981 !important;
    min-width: 200px !important; /* Ensure a minimum width */
}

    .pl-total-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 15px 30px -10px rgba(16, 185, 129, 0.15) !important;
        border-color: #10b981 !important;
    }

.pl-total-icon-box {
    width: 34px !important;
    height: 34px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 6px 12px -3px rgba(16, 185, 129, 0.3) !important;
}

    .pl-total-icon-box i {
        font-size: 18px !important; /* Smaller icon */
    }

.pl-total-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.pl-total-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-bottom: -1px !important;
}

.pl-total-value {
    font-size: 1.6rem !important; /* Smaller font */
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.pl-total-currency {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #10b981 !important;
}

.status-chip {
    color: white !important;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

    .status-chip .material-icons {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Quality Management overrides for internal JS classes */
    .status-chip.green {
        background: #f0fdf4 !important;
        color: #16a34a !important;
        border: 1px solid #dcfce7 !important;
    }

    .status-chip.orange {
        background: #fff7ed !important;
        color: #ea580c !important;
        border: 1px solid #ffedd5 !important;
    }

    .status-chip.red {
        background: #fef2f2 !important;
        color: #dc2626 !important;
        border: 1px solid #fee2e2 !important;
    }

    .status-chip.grey {
        background: #f8fafc !important;
        color: #64748b !important;
        border: 1px solid #e2e8f0 !important;
    }

    .status-chip.approved {
        background: #f0fdf4 !important;
        color: #16a34a !important;
        border: 1px solid #dcfce7 !important;
    }

    .status-chip.cancelled, .status-chip.not-approved {
        background: #fef2f2 !important;
        color: #dc2626 !important;
        border: 1px solid #fee2e2 !important;
    }

    .status-chip.under-process, .status-chip.running {
        background: #eff6ff !important;
        color: #2563eb !important;
        border: 1px solid #dbeafe !important;
    }

    .status-chip.completed, .status-chip.done {
        background: #f0fdf4 !important;
        color: #16a34a !important;
        border: 1px solid #dcfce7 !important;
    }

    .status-chip.underQuality {
        background: #faf5ff !important;
        color: #9333ea !important;
        border: 1px solid #f3e8ff !important;
    }

    .status-chip.waiting, .status-chip.ready {
        background: #fffbeb !important;
        color: #d97706 !important;
        border: 1px solid #fef3c7 !important;
    }

/* Quality Management row input overrides */
.pl-row-input td {
    background: #f8fafc !important;
}
/* ===================================
   ListProductions Page Additions
   =================================== */

/* Progress bar */
.pl-progress-bar {
    background: var(--pl-border);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
}

.pl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pl-primary), var(--pl-secondary));
    border-radius: 99px;
    transition: width 0.6s ease;
}

/* Info items inside cards */
.pl-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-info-label {
    font-size: 0.72rem;
    color: var(--pl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-info-value {
    font-size: 0.88rem;
    color: var(--pl-text);
    font-weight: 500;
}

/* Filter buttons */
.pl-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pl-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid var(--pl-border);
    background: var(--pl-surface);
    color: var(--pl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .pl-filter-btn i {
        font-size: 16px;
    }

    .pl-filter-btn:hover {
        background: var(--pl-primary-light);
        color: var(--pl-primary);
        border-color: var(--pl-primary);
    }

    .pl-filter-btn.pl-active {
        background: var(--pl-primary);
        color: #fff;
        border-color: var(--pl-primary);
        box-shadow: 0 4px 12px rgba(var(--pl-primary-rgb), 0.25);
    }

/* Empty state */
.pl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: var(--pl-text-muted);
    text-align: center;
}

    .pl-empty-state i {
        font-size: 56px;
        opacity: 0.3;
    }

    .pl-empty-state h3 {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--pl-text-muted);
        margin: 0;
    }

    .pl-empty-state p {
        font-size: 0.85rem;
        opacity: 0.7;
        margin: 0;
    }

/* Badges */
.pl-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
}

.pl-badge-primary {
    background: var(--pl-primary-light);
    color: var(--pl-primary);
}

.pl-badge-secondary {
    background: var(--pl-secondary-light);
    color: var(--pl-secondary);
}

/* Grid col-3 */
.pl-col-3 {
    flex: 0 0 calc(25% - 12px);
    min-width: 220px;
}

/* col span support */
.pl-col-span-2 {
    grid-column: span 2;
}

/* Divider vertical */
.pl-divider-v {
    width: 1px;
    height: 20px;
    background: var(--pl-border);
    margin: 0 4px;
}

/* Link */
.pl-link {
    color: var(--pl-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

    .pl-link:hover {
        color: var(--pl-secondary);
        text-decoration: underline;
    }

/* Animated fade for tab panels */
.pl-animated-fade {
    animation: plFadeIn 0.25s ease;
}

@keyframes plFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Row hover */
.pl-row-hover:hover {
    background: var(--pl-bg) !important;
}

/* pl-tab-item icons */
.pl-tab-item i {
    font-size: 18px;
    vertical-align: middle;
}

/* Status Chip Component */
.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

    .status-chip.approved {
        background: #e6f6ee;
        color: #009951;
        border: 1px solid #c2ebd5;
    }

    .status-chip.not-approved,
    .status-chip.cancelled {
        background: #fce8e6;
        color: #e63946;
        border: 1px solid #fad2cf;
    }

    .status-chip.under-process {
        background: #fff3e0;
        color: #ff9800;
        border: 1px solid #ffe0b2;
    }

    .status-chip.completed {
        background: #e8f0fe;
        color: #1a73e8;
        border: 1px solid #d2e3fc;
    }

    .status-chip.underQuality {
        background: #f3e5f5;
        color: #9c27b0;
        border: 1px solid #e1bee7;
    }

    .status-chip.default {
        background: #f1f3f4;
        color: #5f6368;
        border: 1px solid #dadce0;
    }

/* Modal Total Card Component */
.pl-total-card {
    display: inline-flex;
    align-items: center;
    background: var(--pl-primary-light);
    border: 1px solid rgba(var(--pl-primary-rgb), 0.2);
    border-radius: var(--pl-radius);
    padding: 8px 16px;
    gap: 12px;
}

.pl-total-label {
    font-size: 13px;
    color: var(--pl-text-secondary);
    font-weight: 600;
}

.pl-total-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--pl-primary);
}

/* Compact Input for tables */
.pl-input-compact {
    width: 100%;
    padding: 6px 8px !important;
    border: 1px solid var(--pl-border) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    text-align: center;
    background: var(--pl-bg) !important;
    transition: all 0.2s;
    height: auto !important;
    margin: 0 !important;
}

    .pl-input-compact:focus {
        border-color: var(--pl-primary) !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px var(--pl-primary-light) !important;
    }

    .pl-input-compact[readonly] {
        background: var(--pl-background-soft) !important;
        color: var(--pl-text-muted) !important;
        cursor: not-allowed;
    }

/* Modern Search Input */
.pl-search-modern {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0 16px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    height: 44px;
}

    .pl-search-modern:focus-within {
        background: #fff;
        border-color: var(--pl-primary);
        box-shadow: 0 0 0 4px rgba(26,86,219,0.1);
    }

    .pl-search-modern i {
        color: var(--pl-text-muted);
        font-size: 20px;
        margin-left: 12px;
        transition: color 0.3s ease;
    }

    .pl-search-modern:focus-within i {
        color: var(--pl-primary);
    }

    .pl-search-modern input[type="text"] {
        border: none !important;
        border-bottom: none !important;
        background: transparent !important;
        box-shadow: none !important;
        flex: 1;
        font-size: 15px !important;
        color: var(--pl-text) !important;
        margin: 0 !important;
        height: 100% !important;
        padding: 0 !important;
    }

        .pl-search-modern input[type="text"]:focus {
            border: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
        }

/* Filter Group Custom Styles - Premium Segmented Control */
.pl-filter-group {
    display: inline-flex;
    background: #eceff3; /* Soft slate/gray background */
    padding: 6px;
    border-radius: 14px;
    gap: 4px;
    align-items: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

.pl-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #64748b;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .pl-filter-btn i {
        font-size: 18px;
        transition: transform 0.2s ease;
    }

    .pl-filter-btn:hover:not(.pl-active) {
        background: rgba(255, 255, 255, 0.6);
        color: #334155;
    }

    .pl-filter-btn:active {
        transform: scale(0.96);
    }

    /* Active states with deep vivid colors */
    .pl-filter-btn.pl-active {
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
    }

        .pl-filter-btn.pl-active.filter-all {
            color: var(--pl-primary);
        }

        .pl-filter-btn.pl-active.filter-approved {
            color: #059669;
        }

        .pl-filter-btn.pl-active.filter-rejected {
            color: #dc2626;
        }

        .pl-filter-btn.pl-active.filter-pending {
            color: #d97706;
        }

        .pl-filter-btn.pl-active.filter-completed {
            color: #0284c7;
        }

        .pl-filter-btn.pl-active.filter-progress {
            color: #7c3aed;
        }

        .pl-filter-btn.pl-active i {
            transform: scale(1.1);
        }


/* Production Card Premium Layout */
.pl-prod-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .pl-prod-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        transform: translateY(-2px);
        border-color: #cbd5e1;
    }

.pl-prod-header {
    background: linear-gradient(135deg, #4b6cb7, #182848);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pl-prod-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-prod-header-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

    .pl-prod-header-icon i {
        font-size: 24px;
        color: #ffffff;
    }

.pl-prod-header-text h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.pl-prod-header-sub {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
}

.pl-prod-body {
    padding: 20px;
    flex: 1;
}

.pl-prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    margin-bottom: 24px;
}

.pl-prod-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pl-prod-data-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 700;
}

.pl-prod-data-value {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pl-prod-data-value.primary {
        color: var(--pl-primary);
    }

.pl-prod-progress-wrapper {
    margin-top: auto;
    padding-top: 16px;
}

.pl-prod-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    color: #4b6cb7;
    margin-bottom: 8px;
}

.pl-prod-progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.pl-prod-progress-fill {
    height: 100%;
    background: #6366f1;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pl-prod-footer {
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pl-prod-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.pl-prod-action-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Slightly squared for a professional toolbar vibe */
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

    .pl-prod-action-btn:hover {
        background: #f8fafc;
        color: var(--pl-primary); /* Text pops to primary color */
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Floating effect */
        transform: translateY(-2px);
    }

    .pl-prod-action-btn i {
        font-size: 18px;
        color: #94a3b8; /* Soft icon color initially */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pl-prod-action-btn:hover i {
        color: var(--pl-primary); /* Icon illuminates on hover */
        transform: scale(1.15); /* Slight bounce to the icon */
    }

.pl-prod-edit-btn {
    background: #0284c7;
    color: #fff !important;
    border-radius: 8px; /* Matching the 8px border-radius */
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 22px;
}

/* Production Card Premium Layout */
.pl-prod-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .pl-prod-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        transform: translateY(-2px);
        border-color: #cbd5e1;
    }

.pl-prod-header {
    background: linear-gradient(135deg, #4b6cb7, #182848);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pl-prod-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-prod-header-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

    .pl-prod-header-icon i {
        font-size: 24px;
        color: #ffffff;
    }

.pl-prod-header-text h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.pl-prod-header-sub {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
}

.pl-prod-body {
    padding: 20px;
    flex: 1;
}

.pl-prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    margin-bottom: 24px;
}

.pl-prod-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pl-prod-data-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 700;
}

.pl-prod-data-value {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pl-prod-data-value.primary {
        color: var(--pl-primary);
    }

.pl-prod-progress-wrapper {
    margin-top: auto;
    padding-top: 16px;
}

.pl-prod-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    color: #4b6cb7;
    margin-bottom: 8px;
}

.pl-prod-progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.pl-prod-progress-fill {
    height: 100%;
    background: #6366f1;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pl-prod-footer {
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pl-prod-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.pl-prod-action-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Slightly squared for a professional toolbar vibe */
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

    .pl-prod-action-btn:hover {
        background: #f8fafc;
        color: var(--pl-primary); /* Text pops to primary color */
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Floating effect */
        transform: translateY(-2px);
    }

    .pl-prod-action-btn i {
        font-size: 18px;
        color: #94a3b8; /* Soft icon color initially */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pl-prod-action-btn:hover i {
        color: var(--pl-primary); /* Icon illuminates on hover */
        transform: scale(1.15); /* Slight bounce to the icon */
    }

.pl-prod-edit-btn {
    background: #0284c7;
    color: #fff !important;
    border-radius: 8px; /* Matching the 8px border-radius */
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

    .pl-prod-edit-btn:hover {
        background: #0369a1;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(2, 132, 199, 0.3);
    }

/* ---------- Premium Modern Collapsible ---------- */
.pl-modern-collapsible {
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius);
    margin-bottom: 20px;
    border: 1.5px solid var(--pl-border);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pl-modern-collapsible-header {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #f9fafb;
    transition: all 0.2s ease;
    border-right: 4px solid transparent; /* Reserve space for accent border */
}

    .pl-modern-collapsible-header:hover {
        background: #f3f4f6;
    }

.pl-modern-collapsible-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--pl-primary);
    margin: 0;
}

.pl-modern-collapsible-header i.arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--pl-text-muted);
    font-size: 22px;
}

.pl-modern-collapsible.open {
    box-shadow: 0 8px 25px rgba(26, 86, 219, 0.08);
    border-color: var(--pl-primary);
}

    .pl-modern-collapsible.open .pl-modern-collapsible-header {
        background: #fff;
        border-bottom: 1px solid var(--pl-border);
    }

        .pl-modern-collapsible.open .pl-modern-collapsible-header i.arrow {
            transform: rotate(180deg);
            color: var(--pl-primary);
        }

.pl-modern-collapsible-body {
    display: none;
    padding: 24px;
    background: #fff;
}

.pl-modern-collapsible.open .pl-modern-collapsible-body {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* --- Collapsible Variants (Professional Accents) --- */
.pl-modern-collapsible.pl-variant-blue .pl-modern-collapsible-header {
    background: #f0f7ff;
    border-right-color: #3b82f6;
}

.pl-modern-collapsible.pl-variant-blue .pl-modern-collapsible-title {
    color: #1d4ed8;
}

.pl-modern-collapsible.pl-variant-blue.open {
    border-color: #3b82f6;
}

.pl-modern-collapsible.pl-variant-green .pl-modern-collapsible-header {
    background: #f0fdf4;
    border-right-color: #22c55e;
}

.pl-modern-collapsible.pl-variant-green .pl-modern-collapsible-title {
    color: #15803d;
}

.pl-modern-collapsible.pl-variant-green.open {
    border-color: #22c55e;
}

.pl-modern-collapsible.pl-variant-amber .pl-modern-collapsible-header {
    background: #fffbeb;
    border-right-color: #f59e0b;
}

.pl-modern-collapsible.pl-variant-amber .pl-modern-collapsible-title {
    color: #b45309;
}

.pl-modern-collapsible.pl-variant-amber.open {
    border-color: #f59e0b;
}

.pl-modern-collapsible.pl-variant-indigo .pl-modern-collapsible-header {
    background: #f5f3ff;
    border-right-color: #6366f1;
}

.pl-modern-collapsible.pl-variant-indigo .pl-modern-collapsible-title {
    color: #4338ca;
}

.pl-modern-collapsible.pl-variant-indigo.open {
    border-color: #6366f1;
}

/* ---------- Master Grid & Field System ---------- */
.pl-master-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    align-items: flex-end;
}

.pl-col-1 {
    grid-column: span 1;
}

.pl-col-2 {
    grid-column: span 2;
}

.pl-col-3 {
    grid-column: span 3;
}

.pl-col-4 {
    grid-column: span 4;
}

.pl-col-5 {
    grid-column: span 5;
}

.pl-col-6 {
    grid-column: span 6;
}

.pl-col-7 {
    grid-column: span 7;
}

.pl-col-8 {
    grid-column: span 8;
}

.pl-col-9 {
    grid-column: span 9;
}

.pl-col-10 {
    grid-column: span 10;
}

.pl-col-11 {
    grid-column: span 11;
}

.pl-col-12 {
    grid-column: span 12;
}

@media (max-width: 992px) {
    .pl-col-2, .pl-col-3, .pl-col-4 {
        grid-column: span 6;
    }
}

@media (max-width: 600px) {
    .pl-master-grid > div {
        grid-column: span 12 !important;
    }
}

.pl-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.pl-field-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 2px;
}



.pl-field-highlight {
    background-color: #f0f7ff !important;
    border-color: #bfdbfe !important;
    color: #1a56db !important;
    font-weight: 700;
}

/* Switch related cleanup completed */

/* Specialized Search Button */
.pl-btn-search-premium {
    height: 42px !important;
    min-width: 50px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #1e40af, #4338ca) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(31, 63, 174, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

    .pl-btn-search-premium:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 8px 20px rgba(31, 63, 174, 0.35) !important;
        background: linear-gradient(135deg, #1d4ed8, #4f46e5) !important;
    }

    .pl-btn-search-premium i {
        font-size: 24px !important;
        transition: transform 0.3s ease !important;
    }

    .pl-btn-search-premium:active {
        transform: scale(0.95) !important;
    }



/* ==========================================================================
   PREMIUM LEGACY INTEGRATION (Report Specific)
   Use these for standard HTML elements to match VUE-SELECT look
   ========================================================================== */

.pl-premium-field-input {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 15px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

    /* Standard inputs focus */
    .pl-premium-field-input:focus {
        border-color: var(--pl-primary) !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.1) !important;
    }

/* Select2 Premium Integration - High Priority Overrides */
.pl-report-form .select2-container--default .select2-selection--single {
    height: 40px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.pl-report-form .select2-container--default.select2-container--focus .select2-selection--single,
.pl-report-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pl-primary) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.1) !important;
}

.pl-report-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    padding-right: 15px !important;
    padding-left: 35px !important;
    line-height: 42px !important;
}

.pl-report-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    top: 1px !important;
    left: 8px !important; /* RTL Position */
    right: auto !important;
}

    /* Custom Arrow Icon for Select2 */
    .pl-report-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border: none !important;
        width: 18px !important;
        height: 18px !important;
        margin-left: -9px !important;
        margin-top: -9px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

/* Dropdown Results Styling */
.select2-dropdown {
    border: 1px solid var(--pl-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    outline: none !important;
    height: 30px !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--pl-primary) !important;
    color: #fff !important;
}

/* Hide original select when select2 is active */
select.select2-hidden-accessible {
    display: none !important;
}

/* Premium Labels */
.pl-premium-label {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
    pointer-events: auto !important;
    position: static !important;
    transform: none !important;
}

/* Legacy Overrides Removal */
.pl-report-form .select-dropdown,
.pl-report-form .caret {
    display: none !important;
}

/* ================================================================
   LOGIN PAGE – Smart Pro Premium Design  (lp- prefix)
   ================================================================ */

/* ---- Full-page wrapper ---- */
.lp-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: radial-gradient(ellipse at 70% 40%, #1565c0 0%, #0d3b8e 40%, #071b4a 100%);
    position: relative;
    overflow: hidden;
}

/* ---- Animated background blobs ---- */
.lp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .45;
    pointer-events: none;
    animation: lpBlobFloat 8s ease-in-out infinite alternate;
}

.lp-blob-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent);
    top: -200px;
    right: -120px;
    animation-delay: 0s;
    opacity: .5;
}

.lp-blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent);
    bottom: -150px;
    left: -100px;
    animation-delay: 3s;
    opacity: .4;
}

.lp-blob-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(99,179,237,.25), transparent);
    top: 35%;
    left: 28%;
    animation-delay: 6s;
    opacity: .35;
}

@keyframes lpBlobFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, -30px) scale(1.06);
    }
}

/* ---- Left Branding Panel ---- */
.lp-brand-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 50px 220px;
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: hidden;
}

.lp-logo-wrap img {
    width: 180px;
    filter: drop-shadow(0 8px 32px rgba(26,86,219,.5));
    animation: lpLogoFade .9s ease forwards;
}

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

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

.lp-tagline {
    margin-top: 36px;
    max-width: 440px;
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    line-height: 1.9;
    font-weight: 400;
    animation: lpFadeUp .9s .2s ease both;
}

.lp-contact {
    margin-top: 28px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    animation: lpFadeUp .9s .4s ease both;
}

.lp-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 8px 20px;
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
    transition: all .2s ease;
}

    .lp-contact-pill:hover {
        background: rgba(255,255,255,.2);
        transform: translateY(-2px);
    }

.lp-chart-img {
    position: absolute;
    bottom: -30px;
    right: -20px;
    max-width: 520px;
    width: 85%;
    opacity: .92;
    animation: lpFadeUp .9s .6s ease both;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,.35));
    transform-origin: bottom right;
}

/* ---- Right Auth Panel ---- */
.lp-auth-panel {
    width: 480px;
    min-width: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.lp-glass-card {
    width: 100%;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    animation: lpCardSlide .6s ease forwards;
}

@keyframes lpCardSlide {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* ---- Tab Switch ---- */
.lp-tab-switch {
    display: flex;
    background: #f1f5f9;
    border-radius: 14px;
    padding: 5px;
    margin-bottom: 32px;
    gap: 4px;
}

.lp-tab-btn {
    flex: 1;
    padding: 11px 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all .25s ease;
}

    .lp-tab-btn.lp-active {
        background: linear-gradient(135deg, #1a56db, #1141c0);
        color: #fff;
        box-shadow: 0 4px 14px rgba(26,86,219,.35);
    }

    .lp-tab-btn:not(.lp-active):hover {
        background: #e2e8f0;
        color: #334155;
    }

/* ---- Form Panels ---- */
.lp-form-panel {
    display: none;
}

    .lp-form-panel.lp-show {
        display: block;
        animation: lpFadeUp .35s ease;
    }

@keyframes lpFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.lp-form-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
}

.lp-form-subtitle {
    font-size: .85rem;
    color: #64748b;
    margin-bottom: 28px;
}

/* ---- Field Label ---- */
.lp-field-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

/* ---- Input Groups ---- */
.lp-input-group {
    margin-bottom: 20px;
}

/* Flex row: icon | input | toggle-icon */
.lp-input-wrap {
    display: flex;
    align-items: center;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    transition: all .22s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    overflow: hidden;
}

    .lp-input-wrap:focus-within {
        border-color: #1a56db;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,86,219,.12);
    }

/* Icon box – separate from the text area */
.lp-input-icon {
    flex-shrink: 0;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 22px;
    pointer-events: none;
    transition: color .2s ease;
    position: static !important;
    transform: none !important;
}

.lp-input-wrap:focus-within .lp-input-icon {
    color: #1a56db;
}

/* The actual text input – no border, transparent background */
.lp-input {
    flex: 1;
    height: 50px;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #1e293b !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-width: 0;
}

    .lp-input::placeholder {
        color: #94a3b8 !important;
        font-weight: 400 !important;
    }

    /* Hide native browser password reveal/clear icons (Edge/IE) */
    .lp-input::-ms-reveal,
    .lp-input::-ms-clear {
        display: none !important;
    }

/* Password toggle – left icon box */
.lp-pass-toggle {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    font-size: 22px;
    transition: color .2s ease;
    user-select: none;
    position: static !important;
    transform: none !important;
}

    .lp-pass-toggle:hover {
        color: #1a56db;
    }

/* ---- Submit Button ---- */
.lp-submit-btn {
    width: 85%;
    height: 42px;
    padding: 0;
    line-height: 42px;
    background: linear-gradient(135deg, #1a56db, #6366f1);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 12px rgba(26,86,219,.25);
    margin: 16px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .lp-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(26,86,219,.35);
        background: linear-gradient(135deg, #1141c0, #4f46e5);
    }

    .lp-submit-btn:active {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(26,86,219,.25);
    }

/* ---- Remember & Forgot ---- */
.lp-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
}

.lp-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #475569;
    font-size: .88rem;
    font-weight: 600;
    position: relative;
    user-select: none;
}

    .lp-remember input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Custom Checkbox Box */
.lp-cbx {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s cubic-bezier(.4, .0, .2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,.02);
}

    /* The Checkmark */
    .lp-cbx::after {
        content: '';
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0);
        opacity: 0;
        transition: all .2s cubic-bezier(.4, .0, .2, 1);
    }

/* Hover effect */
.lp-remember:hover input ~ .lp-cbx {
    border-color: #94a3b8;
}

/* Checked state */
.lp-remember input:checked ~ .lp-cbx {
    background: linear-gradient(135deg, #1a56db, #6366f1);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(26,86,219,.25);
}

    /* Show checkmark */
    .lp-remember input:checked ~ .lp-cbx::after {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }

/* Focus via keyboard */
.lp-remember input:focus-visible ~ .lp-cbx {
    outline: 2px solid #1a56db;
    outline-offset: 2px;
}

.lp-forgot {
    color: #1a56db;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

    .lp-forgot:hover {
        color: #1141c0;
        text-decoration: underline;
    }

/* ---- Language Toggle Button ---- */
.lp-lang-btn {
    position: fixed;
    top: 24px;
    left: 28px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 8px 18px;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all .22s ease;
    text-decoration: none;
}

    .lp-lang-btn:hover {
        background: rgba(255,255,255,.2);
        transform: translateY(-2px);
        color: #fff;
    }

    .lp-lang-btn img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }

/* ---- Divider ---- */
.lp-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}

    .lp-divider::before,
    .lp-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255,255,255,.1);
    }

    .lp-divider span {
        color: rgba(255,255,255,.35);
        font-size: .8rem;
        white-space: nowrap;
    }

/* ---- Validation Summary (Login context) ---- */
.lp-wrapper .validation-summary-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    color: #b91c1c;
    font-size: .9rem;
    font-weight: 600;
}

    .lp-wrapper .validation-summary-errors ul {
        padding-right: 20px;
        margin: 0;
        list-style-type: disc;
    }

/* ======== RESPONSIVE – Login Page ======== */
@media (max-width: 900px) {
    .lp-wrapper {
        flex-direction: column;
        overflow-y: auto;
    }

    .lp-auth-panel {
        order: 1;
        width: 100%;
        min-width: 0;
        padding: 90px 20px 20px;
        flex: none;
    }

    .lp-brand-panel {
        order: 2;
        width: 100%;
        padding: 20px 20px 60px;
        flex: none;
    }

    .lp-chart-img {
        display: none; /* Hide large decorative image on mobile */
    }

    .lp-glass-card {
        padding: 32px 24px;
    }
}

@media (max-width: 480px) {
    .lp-glass-card {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .lp-form-title {
        font-size: 1.3rem;
    }

    .lp-lang-btn {
        top: 12px;
        left: 12px;
        padding: 7px 14px;
        font-size: .8rem;
    }

    .lp-tagline {
        font-size: .95rem;
    }

    .lp-auth-panel {
        padding-top: 70px;
    }
}

.pl-show-mobile {
    display: none;
}

.pl-col-item-name {
    width: 25% !important;
}
.pl-col-item-no {
    width: 3% !important;
}
.pl-col-item-qty {
    width: 6% !important;
}
.pl-col-item-price {
    width: 6% !important;
}
.pl-col-item-delete {
    width: 3% !important;
    
}
/* ======== Utilities ======== */
@media (max-width: 768px) {
    .pl-col-item-name {
        width: 0% !important;
    }
    .pl-col-item-no {
        width: 0% !important;
    }
    .pl-col-item-qty {
        width: 0% !important;
    }
    .pl-col-item-price {
        width: 0% !important;
    }
    .pl-col-item-delete {
        width: 0% !important;
    }

    .pl-hide-mobile {
        display: none !important;
    }

    .pl-show-mobile {
        display: block !important;
    }

    /* ======== Vue Select Mobile UX Fix (RTL Alignment Bug Fix) ======== */
    /* Fixes dropping far away / detached due to Vue-Select RTL offset bug on mobile */
    .vs__dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        transform: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        border-radius: 8px !important;
    }

    /* When append-to-body is true, it goes to body. We center it horizontally on the screen */
    body > .vs__dropdown-menu {
        left: 5vw !important;
        right: auto !important;
        width: 90vw !important;
        min-width: 90vw !important;
        max-width: 90vw !important;
        z-index: 99999 !important;
        /* Keep 'top' as calculated by JS so it remains directly under the input field vertically */
    }

    /* Enhance list items text wrapping and padding for mobile touch */
    .vs__dropdown-menu > li.vs__dropdown-option {
        padding: 12px 16px !important;
        font-size: 1rem !important;
        white-space: normal !important;
        line-height: 1.4;
        text-align: right;
    }

    .vs__dropdown-menu > li.vs__dropdown-option--highlight {
        background-color: #eff6ff !important;
        color: #1a56db !important;
        font-weight: 700 !important;
    }
}
/* Search bar in bottom table */
.pl-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

    .pl-search-bar .custom-input-field {
        flex: 1;
        max-width: 420px;
        margin: 0 !important;
    }

/* Points table */
.pl-points-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pl-points-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #e2e8f0;
        font-size: 0.82rem;
    }

    .pl-points-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #edf2f7;
    }

        .pl-points-table td input {
            width: 100%;
            border: 1.5px solid #e2e8f0 !important;
            border-radius: 8px !important;
            padding: 6px 10px !important;
            background: #f8fafc !important;
            text-align: center;
            font-size: 0.88rem;
            height: 36px !important;
        }

/* Contract table */
.pl-contract-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pl-contract-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 10px 14px;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .pl-contract-table td {
        padding: 8px 10px;
        border: 1px solid #edf2f7;
        text-align: center;
        vertical-align: middle;
    }

/* Archive table */
.pl-archive-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pl-archive-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 10px 14px;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .pl-archive-table td {
        padding: 8px 10px;
        border: 1px solid #edf2f7;
        text-align: center;
        vertical-align: middle;
    }

/* Upload section */
.pl-upload-section {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .pl-upload-section input[type="file"] {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 7px 12px;
        font-size: 13px;
        background: #fff;
    }

/* Subscription section */
.pl-discount-mechanism {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 8px;
}

.pl-discount-mechanism-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}



/* Color Variants */
.total-green {
    border-color: #d1fae5;
}

    .total-green .titan-v5-total-icon {
        background: #d1fae5;
        color: #10b981;
    }

    .total-green .titan-v5-total-value {
        color: #059669;
    }

.total-red {
    border-color: #fee2e2;
}

    .total-red .titan-v5-total-icon {
        background: #fee2e2;
        color: #ef4444;
    }

    .total-red .titan-v5-total-value {
        color: #dc2626;
    }

.total-pink {
    border-color: #fce7f3;
}

    .total-pink .titan-v5-total-icon {
        background: #fce7f3;
        color: #ec4899;
    }

    .total-pink .titan-v5-total-value {
        color: #db2777;
    }

.total-yellow {
    border-color: #fef3c7;
}

    .total-yellow .titan-v5-total-icon {
        background: #fef3c7;
        color: #f59e0b;
    }

    .total-yellow .titan-v5-total-value {
        color: #d97706;
    }

@media (max-width: 768px) {
    .titan-v5-total-card {
        white-space: normal !important;
        line-height: 1.4;
        text-align: right;
    }

    .vs__dropdown-menu > li.vs__dropdown-option--highlight {
        background-color: #eff6ff !important;
        color: #1a56db !important;
        font-weight: 700 !important;
    }
}
/* Search bar in bottom table */
.pl-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

    .pl-search-bar .custom-input-field {
        flex: 1;
        max-width: 420px;
        margin: 0 !important;
    }

/* Points table */
.pl-points-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pl-points-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #e2e8f0;
        font-size: 0.82rem;
    }

    .pl-points-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #edf2f7;
    }

        .pl-points-table td input {
            width: 100%;
            border: 1.5px solid #e2e8f0 !important;
            border-radius: 8px !important;
            padding: 6px 10px !important;
            background: #f8fafc !important;
            text-align: center;
            font-size: 0.88rem;
            height: 36px !important;
        }

/* Contract table */
.pl-contract-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pl-contract-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 10px 14px;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .pl-contract-table td {
        padding: 8px 10px;
        border: 1px solid #edf2f7;
        text-align: center;
        vertical-align: middle;
    }

/* Archive table */
.pl-archive-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .pl-archive-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 700;
        padding: 10px 14px;
        text-align: center;
        border: 1px solid #e2e8f0;
    }

    .pl-archive-table td {
        padding: 8px 10px;
        border: 1px solid #edf2f7;
        text-align: center;
        vertical-align: middle;
    }

/* Upload section */
.pl-upload-section {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .pl-upload-section input[type="file"] {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 7px 12px;
        font-size: 13px;
        background: #fff;
    }

/* Subscription section */
.pl-discount-mechanism {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 8px;
}

.pl-discount-mechanism-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}



/* Color Variants */
.total-green {
    border-color: #d1fae5;
}

    .total-green .titan-v5-total-icon {
        background: #d1fae5;
        color: #10b981;
    }

    .total-green .titan-v5-total-value {
        color: #059669;
    }

.total-red {
    border-color: #fee2e2;
}

    .total-red .titan-v5-total-icon {
        background: #fee2e2;
        color: #ef4444;
    }

    .total-red .titan-v5-total-value {
        color: #dc2626;
    }

.total-pink {
    border-color: #fce7f3;
}

    .total-pink .titan-v5-total-icon {
        background: #fce7f3;
        color: #ec4899;
    }

    .total-pink .titan-v5-total-value {
        color: #db2777;
    }

.total-yellow {
    border-color: #fef3c7;
}

    .total-yellow .titan-v5-total-icon {
        background: #fef3c7;
        color: #f59e0b;
    }

    .total-yellow .titan-v5-total-value {
        color: #d97706;
    }

@media (max-width: 768px) {
    .titan-v5-total-card {
        min-width: calc(50% - 15px);
    }
}

@media (max-width: 480px) {
    .titan-v5-total-card {
        min-width: 100%;
    }
}

/* --- TITAN PRO V5 - REFINED BILL FOOTER (NO CONFLICTS) --- */
.titan-v5-bill-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 5px;
    justify-content: center;
    width: 100%;
    background: transparent !important;
}

.titan-v5-bill-footer-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    flex: 1 1 0px;
    max-width: 260px;
    background: transparent !important;
}

.titan-v5-bill-footer-label {
    font-size: 11px;
    font-weight: 700;
    color: #555 !important;
    text-align: center;
    background: transparent !important;
    margin-bottom: 2px;
}

.titan-v5-bill-footer-box {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.titan-v5-bill-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    order: 2;
    min-width: 20px;
}

    .titan-v5-bill-footer-icon svg {
        width: 22px; /* Slightly wider for the new stylized symbol */
        height: 22px;
        fill: currentColor; /* Inherit theme color (green, red, etc) */
    }

.titan-v5-bill-footer-value {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #222 !important;
    order: 1;
}

/* Unique Soft Color Palette Variants */
.titan-v5-bill-footer-item.is-green .titan-v5-bill-footer-box {
    border-color: #54b462;
    background: #f3fcf5;
}

.titan-v5-bill-footer-item.is-green .titan-v5-bill-footer-icon {
    color: #54b462;
}

.titan-v5-bill-footer-item.is-red .titan-v5-bill-footer-box {
    border-color: #ea5050;
    background: #fff6f6;
}

.titan-v5-bill-footer-item.is-red .titan-v5-bill-footer-icon {
    color: #ea5050;
}

.titan-v5-bill-footer-item.is-pink .titan-v5-bill-footer-box {
    border-color: #e54694;
    background: #fff2f8;
}

.titan-v5-bill-footer-item.is-pink .titan-v5-bill-footer-icon {
    color: #e54694;
}

.titan-v5-bill-footer-item.is-orange .titan-v5-bill-footer-box {
    border-color: #f7a033;
    background: #fffcf6;
}

.titan-v5-bill-footer-item.is-orange .titan-v5-bill-footer-icon {
    color: #f7a033;
}

.titan-v5-bill-footer-item.is-yellow .titan-v5-bill-footer-box {
    border-color: #f0ad4e;
    background: #fffdf5;
}

.titan-v5-bill-footer-item.is-yellow .titan-v5-bill-footer-icon {
    color: #f0ad4e;
}

/* hero variant */
.titan-v5-bill-footer-item.total-main .titan-v5-bill-footer-value {
    font-size: 1.15rem;
    color: #000 !important;
}

.titan-v5-bill-footer-item:hover .titan-v5-bill-footer-box {
    border-width: 1.5px;
    box-shadow: 0 4px 12px rgba(0,0,10,0.06) !important;
}

.pl-field-label {
    display: flex !important;
    align-items: center;
    justify-content: flex-start; /* Corrected to flex-start for right-to-left consistency */
    gap: 4px;
    margin-bottom: 4px;
}

/* Professional button for picking customer */
.pl-label-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    color: var(--pl-primary);
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 1px 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(26, 86, 219, 0.1);
}

    .pl-label-btn:hover {
        background: var(--pl-primary);
        color: #fff;
        border-color: var(--pl-primary);
        box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25);
        transform: translateY(-1px);
    }

    .pl-label-btn i {
        font-size: 15px !important;
    }

.pl-label-btn-marker {
    font-size: 0.65rem;
    opacity: 0.9;
    background: rgba(26, 86, 219, 0.1);
    padding: 0px 4px;
    border-radius: 3px;
    margin-right: 4px;
    font-family: inherit;
    border: 1px solid rgba(26, 86, 219, 0.1);
}

.pl-label-btn:hover .pl-label-btn-marker {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: transparent;
}


/* Table Input Styling */
.pl-table-input {
    width: 100%;
    padding: 6px 12px;
    border: 1.5px solid var(--pl-border);
    border-radius: 6px;
    font-size: .88rem;
    color: var(--pl-text);
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
    text-align: right;
}

    .pl-table-input:focus {
        border-color: var(--pl-primary);
        box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
        background: #fff;
    }

/* Professional style for Item Name Textarea */
textarea.pl-table-input {
    min-height: 46px; /* Approx 2 lines */
    height: 48px;
    resize: none;
    line-height: 1.4;
    padding: 5px 10px;
    margin: 0;
    vertical-align: middle;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: var(--pl-primary) transparent;
}

/* Professional Table Cell Layout */
.pl-table-cell-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

    .pl-table-cell-flex > div,
    .pl-table-cell-flex > textarea {
        flex: 1;
        min-width: 0;
        width: 100%; /* Force fill */
    }

.pl-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--pl-text-muted);
    background: #f1f5f9;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    text-decoration: none !important;
}

    .pl-action-icon-btn:hover {
        background: rgba(26, 86, 219, 0.1);
        color: var(--pl-primary);
        border-color: rgba(26, 86, 219, 0.2);
        transform: translateY(-1px);
    }

    .pl-action-icon-btn i {
        font-size: 16px !important;
    }

@media (max-width: 768px) {
    /* 
               Ensure the dropdown menu fills the screen width on mobile 
               while keeping its vertical position automatically calculated by JS.
               This prevents horizontal detachment in RTL mode.
            */
    .vs__dropdown-menu,
    body > .vs__dropdown-menu {
        left: 5vw !important;
        right: 5vw !important;
        width: 90vw !important;
        min-width: 90vw !important;
        max-width: 90vw !important;
        z-index: 99999999 !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        background: #fff !important;
        padding: 5px 0 !important;
        overflow-y: auto !important;
        /* Vertical position stays as calculated by Vue-Select JS */
    }
    /* Option styling for mobile touch */
    .vs__dropdown-option {
        padding: 14px 20px !important;
        font-size: 1.05rem !important;
        border-bottom: 1px solid #f1f5f9;
        text-align: right !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    .vs__dropdown-option--highlight {
        background-color: #eff6ff !important;
        color: #1a56db !important;
        font-weight: 700 !important;
    }
    /* Dark Overlay when open (Simulated) - optional but looks professional */
    .vs--open:after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.15);
        z-index: 99999998;
        pointer-events: none;
    }
}

/* =====================================================
   MOBILE FIXED BOTTOM ACTION BAR (BillData2 - Sales)
   Visible ONLY on mobile (max-width: 768px)
   ===================================================== */
.pl-mobile-action-bar {
    display: none;
}


@media (max-width: 768px) {

    body {
        padding-bottom: 76px !important;
    }

    .pl-mobile-action-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        background: #ffffff;
        border-top: 2px solid #e2e8f0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
        padding: 6px 0 env(safe-area-inset-bottom, 6px);
        justify-content: space-around;
        align-items: stretch;
        border-radius: 16px 16px 0 0;
        padding-bottom: 20px;
    }

    .pl-mobile-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 3px;
        padding: 7px 4px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        min-width: 0;
    }

        .pl-mobile-action-btn:active {
            opacity: 0.7;
            transform: scale(0.93);
        }

        .pl-mobile-action-btn i.material-icons {
            font-size: 26px;
            line-height: 1;
            display: block;
        }

    .pl-mobile-action-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        display: block;
    }

    .pl-mobile-action-btn[disabled] {
        opacity: 0.32;
        cursor: not-allowed;
    }

    .pl-mobile-btn-new {
        color: var(--pl-primary, #1a56db);
    }

    .pl-mobile-btn-save {
        color: #10b981;
    }

    .pl-mobile-btn-print {
        color: #64748b;
    }

    .pl-mobile-btn-pay {
        color: #f59e0b;
    }

    /* Separator lines between buttons */
    .pl-mobile-action-btn + .pl-mobile-action-btn {
        border-right: 1px solid #e2e8f0;
    }

    /* Footer: only show total-main on mobile */
    .titan-v5-bill-footer-item.total-main {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }

        .titan-v5-bill-footer-item.total-main .titan-v5-bill-footer-value {
            font-size: 1.4rem !important;
        }

        .titan-v5-bill-footer-item.total-main .titan-v5-bill-footer-label {
            font-size: 13px !important;
        }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM PRINT TEMPLATE NAVIGATOR  — pl-print-modal-*
   Works on ALL screen sizes, enhanced on mobile
   ═══════════════════════════════════════════════════════════ */

/* ── Header wrapper ── */
.pl-print-modal-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 2px 0;
}

/* ── Row 1: icon + title ── */
.pl-print-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-print-modal-icon {
    font-size: 22px;
    color: var(--pl-primary);
    flex-shrink: 0;
}

.pl-print-modal-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pl-text, #1e293b);
    line-height: 1.2;
}

/* ── Row 2: Navigator ── */
.pl-print-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f8fafc;
    border: 1.5px solid var(--pl-border, #e2e8f0);
    border-radius: 14px;
    padding: 8px 10px;
    width: 100%;
    transition: border-color 0.2s ease;
}

.pl-print-nav:hover {
    border-color: var(--pl-primary);
}

/* ── Arrow buttons ── */
.pl-print-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--pl-border, #e2e8f0);
    background: #ffffff;
    color: var(--pl-primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.pl-print-nav-btn i {
    font-size: 22px;
    line-height: 1;
}

.pl-print-nav-btn:hover:not([disabled]) {
    background: var(--pl-primary);
    color: #fff;
    border-color: var(--pl-primary);
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.28);
    transform: scale(1.08);
}

.pl-print-nav-btn:active:not([disabled]) {
    transform: scale(0.94);
}

.pl-print-nav-btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f1f5f9;
    color: #94a3b8;
    box-shadow: none;
}

/* ── Center info ── */
.pl-print-nav-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.pl-print-nav-sublabel {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.pl-print-nav-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--pl-text, #1e293b);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 4px;
    transition: color 0.25s ease;
}

.pl-print-nav-counter {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 20px;
    padding: 1px 8px;
    line-height: 1.6;
}

/* ── Dots ── */
.pl-print-nav-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
}

.pl-print-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border: 1.5px solid transparent;
}

.pl-print-dot:hover {
    background: #93c5fd;
    transform: scale(1.3);
}

.pl-print-dot-active {
    background: var(--pl-primary) !important;
    width: 20px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 6px rgba(26, 86, 219, 0.4);
}

/* ── Mobile enhancements ── */
@media (max-width: 768px) {

    .pl-print-modal-header {
        gap: 12px;
    }

    .pl-print-nav {
        padding: 10px 12px;
        border-radius: 16px;
        background: linear-gradient(135deg, #f8fafc, #eff6ff);
        border-color: rgba(26, 86, 219, 0.15);
    }

    .pl-print-nav-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border-width: 2px;
    }

    .pl-print-nav-btn i {
        font-size: 26px;
    }

    .pl-print-nav-name {
        font-size: 1rem;
    }

    .pl-print-dot {
        width: 8px;
        height: 8px;
    }

    .pl-print-dot-active {
        width: 24px !important;
    }

    .pl-print-modal-title {
        font-size: 1rem;
    }
}

/* ── Print footer layout helpers ── */
.pl-print-footer-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.pl-print-footer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

/* ── Swipe flash feedback animation ── */
@keyframes plPrintNavFlash {
    0%   { background: #f8fafc; border-color: var(--pl-border, #e2e8f0); }
    30%  { background: #eff6ff; border-color: var(--pl-primary);
           box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12); }
    100% { background: #f8fafc; border-color: var(--pl-border, #e2e8f0);
           box-shadow: none; }
}

.pl-print-nav-swipe-flash {
    animation: plPrintNavFlash 0.35s ease-out forwards !important;
}

/* ── Mobile: show swipe hint text under dots ── */
@media (max-width: 768px) {
    .pl-print-nav-center::after {
        content: '← اسحب للتنقل بين النماذج →';
        display: block;
        font-size: 9px;
        color: #b0bec5;
        font-weight: 600;
        margin-top: 4px;
        letter-spacing: 0.03em;
        opacity: 0.8;
    }

    /* Slightly larger touch target for the nav bar on mobile */
    .pl-print-nav {
        min-height: 72px;
        cursor: grab;
    }
}

/* ═══════════════════════════════════════════════════════
   PRINT IFRAME — Desktop + Mobile readable layout
   ═══════════════════════════════════════════════════════ */

/* ── Desktop: full-width, tall ── */
.pl-print-iframe-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--pl-border, #e2e8f0);
    background: #525659;
}

.pl-print-iframe {
    width: 100%;
    height: 1200px;
}

/* ── Mobile: scrollable container + wider iframe for readability ── */
@media (max-width: 768px) {

    .pl-print-iframe-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Let user pan both axes like a native PDF viewer */
         border-radius: 6px;
        /* Limit height so footer navigator is always visible */
    }

   
}

/* ── Mobile Table Optimization (Fit all columns) ── */
@media (max-width: 768px) {
    .pl-table-wrapper {
        padding: 5px !important;
        min-height: auto !important;
    }

    .pl-table-responsive {
        min-height: auto !important;
        overflow-x: hidden !important; /* Avoid horizontal scroll if possible */
    }

    .pl-table {
        min-width: 100% !important;
        table-layout: fixed !important;
        font-size: 0.75rem !important;
    }

    .pl-table thead th, 
    .pl-table tbody td {
        padding: 6px 2px !important;
        height: auto !important;
        word-break: break-all; /* Prevent overflow of long text */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Target specific columns by class */
    .pl-col-item-name {
        width: 38% !important; /* Item name gets the biggest share */
    }

    .pl-col-item-qty {
        width: 18% !important; /* Narrow Quantity */
    }

    .pl-col-item-price {
        width: 22% !important; /* Shared for Price and Total */
    }

    .pl-col-item-delete {
        width: 35px !important; /* Fixed width for delete button column */
    }

    /* Update inputs within table */
    .pl-table-input {
        padding: 2px 2px !important;
        font-size: 0.75rem !important;
        height: 30px !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Badge and Span adjustments */
    .pl-table td span {
        font-size: 0.75rem !important;
    }
}

.pl-btn-upload {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

    .pl-btn-upload:hover:not([disabled]) {
        background: linear-gradient(135deg, #16a34a, #15803d) !important;
        transform: translateY(-2px);
    }

    .pl-btn-upload:active:not([disabled]) {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2) !important;
    }

    .pl-btn-upload[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none !important;
    }
.pl-btn-download {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}

    .pl-btn-download:hover:not([disabled]) {
        background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
        transform: translateY(-2px);
    }

    .pl-btn-download:active:not([disabled]) {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2) !important;
    }

    .pl-btn-download[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none !important;
    }
.pos-category-wrapper {
    background-color: #f1f5f9; /* Distinct background for the row */
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 8px 16px;
}

.category-scroll-container {
    display: flex;
    gap: 14px;
    flex: 1;
    overflow-x: auto;
    padding: 12px 4px 16px 4px; /* Space for scrollbar and shadow */
    scroll-behavior: smooth;
}

    /* Custom scrollbar for professional look */
    .category-scroll-container::-webkit-scrollbar {
        height: 8px;
    }

    .category-scroll-container::-webkit-scrollbar-track {
        background: #e2e8f0;
        border-radius: 10px;
    }

    .category-scroll-container::-webkit-scrollbar-thumb {
        background: #117880 !important;
        border-radius: 10px;
        border: 2px solid #e2e8f0;
    }

        .category-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #0d6067 !important;
        }

/* Larger, clearer category buttons */
.pos-category-btn {
    min-width: max-content;
    font-weight: 800 !important;
    font-size: 1.15rem !important; /* Larger text */
    padding: 12px 30px !important; /* Larger size */
    border-radius: 14px !important;
    background-color: #ffffff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pos-category-btn:hover, .pos-category-btn:focus {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        background-color: var(--pl-primary, #3b82f6) !important;
        color: #ffffff !important;
        border-color: var(--pl-primary, #3b82f6) !important;
    }
.order-item-premium-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

    .order-item-premium-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }

.item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.item-card-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    flex: 1;
    line-height: 1.4;
}

.pos-tables-title {
    display: flex !important;
}

.item-card-total-badge {
    background: #f0fdf4;
    color: #166534;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    border: 1px solid #dcfce7;
}

.item-card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-card-quantity-selector {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #e2e8f0;
}

.item-card-btn-qty {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.15s;
}

.item-card-btn-minus {
    background: #fee2e2;
    color: #ef4444;
}

.item-card-btn-plus {
    background: #dcfce7;
    color: #10b981;
}

.item-card-qty-input {
    width: 40px;
    text-align: center;
    border: none !important;
    background: transparent;
    font-weight: 800;
    margin: 0 !important;
    height: 30px !important;
    color: #1e293b;
}

.item-card-price-display {
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
}

.item-card-actions {
    display: flex;
    gap: 8px;
}

.item-card-btn-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.item-card-btn-delete {
    background: #fff1f2;
    color: #f43f5e;
    border: 1px solid #ffe4e6;
}

.item-card-btn-more {
    background: #f0f9ff;
    color: #0ea5e9;
    border: 1px solid #e0f2fe;
}

.item-card-btn-action i {
    font-size: 18px;
}

.selectedRow .order-item-premium-card {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Unified Green Scrollbar Styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #117880 #f1f5f9;
}

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #117880;
        border-radius: 10px;
        border: 2px solid #f1f5f9;
    }

        *::-webkit-scrollbar-thumb:hover {
            background-color: #0c5a61;
        }

/* Category Scroll Container Custom Style */
.pos-category-wrapper {
    position: relative;
    background: #f8fafc;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.category-scroll-outer {
    position: relative;
    overflow: hidden;
    flex: 1;
}

.category-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 5px 20px 12px 20px; /* Added bottom padding for scrollbar space */
}

    .category-scroll-container::-webkit-scrollbar {
        height: 5px; /* Elegant thin scrollbar */
        display: block;
    }

    .category-scroll-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    .category-scroll-container::-webkit-scrollbar-thumb {
        background-color: #117880;
        border-radius: 10px;
    }

/* Fade Edges */
.category-scroll-outer::before,
.category-scroll-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px; /* Adjusted to not cover scrollbar */
    width: 50px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s;
}

.category-scroll-outer::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc, transparent);
}

.category-scroll-outer::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc, transparent);
}

.pos-category-btn {
    white-space: nowrap;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: white;
    font-weight: 700;
    color: #475569;
    transition: all 0.2s;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

    .pos-category-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        border-color: #117880;
        color: #117880;
    }

/* Premium Item Cards Global Styles */
/* Premium Item Cards Global Styles */
.pos-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    padding: 10px;
}

.pos-item-card-wrapper {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 16px;
}

.pos-item-text-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 15px;
    min-height: 140px; /* Fixed height for CLS */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.01);
    transition: inherit;
    /* اللمسة الاحترافية: خط علوي أخضر */
    border-top: 3px solid #117880;
}

.pos-item-card-wrapper:hover {
    transform: translateY(-8px);
}

    .pos-item-card-wrapper:hover .pos-item-text-card {
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
        border-color: #117880;
        background: #fdfdfd;
    }

.pos-item-price {
    font-weight: 900;
    font-size: 1.4rem;
    color: #117880;
    display: block;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.pos-item-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* صورة الصنف مع لمسة جمالية */
.pos-item-image-card {
    border-radius: 16px;
    overflow: hidden;
    height: 170px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.07);
    transition: inherit;
    position: relative;
    border: 2px solid transparent;
}

.pos-item-card-wrapper:hover .pos-item-image-card {
    border-color: #117880;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
}

.pos-item-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.pos-item-card-wrapper:hover .pos-item-img {
    transform: scale(1.1); /* تكبير بسيط للصورة عند المرور */
}

.pos-item-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(to top, rgba(17, 120, 128, 0.95) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%);
    padding: 20px 12px 12px;
    display: flex;
    flex-direction: column;
}

    .pos-item-overlay .price {
        color: #ffffff;
        font-weight: 900;
        font-size: 1.2rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .pos-item-overlay .name {
        color: #f1f5f9;
        font-weight: 600;
        font-size: 0.9rem;
        margin-top: 2px;
    }
/* CLS Optimized Table Selection System */
.pos-tables-card {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    min-width: 320px;
    background: #ffffff;
    min-height: 450px; /* Pre-reserve height for CLS stability */
}

.pos-tables-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f1f5f9;
    min-height: 80px; /* Pre-reserve header space */
}

.pos-tables-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-table-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto;
    padding: 0 20px 20px;
    direction: ltr;
    min-height: 120px; /* Pre-reserve grid space */
}

.pos-table-item {
    direction: rtl;
}

.pos-table-unit-btn {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    border: 2px solid transparent;
    font-weight: 800;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* حالات أزرار الطاولات */
.table-available {
    background-color: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.table-occupied {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.table-selected-active {
    border-color: #117880 !important;
    box-shadow: 0 0 0 3px rgba(17, 120, 128, 0.2) !important;
    transform: scale(1.08);
    z-index: 10;
}

.pos-selection-actions-box {
    background: #f8fafc;
    border-radius: 14px;
    padding: 15px;
    border: 1.5px dashed #cbd5e1;
    margin: 0 20px 20px;
    transition: opacity 0.3s ease;
    min-height: 110px; /* Pre-reserve action area for CLS */
}

.pos-selection-text {
    margin: 0 0 12px;
    font-weight: 800;
    color: #334155;
    font-size: 0.95rem;
    text-align: center;
}

.pos-status-btns-row {
    display: flex;
    gap: 12px;
}

.btn-status-custom {
    flex: 1;
    border-radius: 10px !important;
    height: 45px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-status-available {
    background: #22c55e !important;
    box-shadow: 0 4px 6px rgba(34, 197, 94, 0.2);
}

.btn-status-occupied {
    background: #ef4444 !important;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
}