/* ==========================================================================
   App page styles — extracted from Front/Pages *.razor <style> blocks
   Linked from _Layout.cshtml. Do not re-add <style> blocks to pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

/* From (shared):
   - Invoices/Invoices.razor
   - Purchases/Purchases.razor
*/
.inv-page-header { display: flex; align-items: center; gap: 1rem; }
    .inv-header-icon {
        width: 48px; height: 48px; border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }
    .inv-summary-card {
        border-right: 4px solid #667eea; border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    .inv-summary-value { font-size: 2rem; font-weight: 700; color: #667eea; line-height: 1; }
    .inv-summary-label { color: #6c757d; font-size: 0.875rem; margin-top: 0.25rem; }
    .inv-filter-section { background: linear-gradient(to bottom, #f8f9fc, #fff); border-radius: 0.5rem; }
    .inv-table-wrap { border-radius: 0.5rem; overflow: hidden; }
    .inv-table thead th {
        background-color: #f8f9fc; font-weight: 600; color: #495057;
        border-bottom: 2px solid #e9ecef; white-space: nowrap;
    }
    .inv-table tbody tr { transition: background-color 0.15s ease; }
    .inv-table tbody tr:hover { background-color: #f0f4ff; }
    .inv-sortable { cursor: pointer; user-select: none; }
    .inv-sortable:hover { color: #667eea; }
    .inv-sort-icon { font-size: 0.75rem; opacity: 0.4; margin-right: 4px; }
    .inv-sort-icon.active { opacity: 1; color: #667eea; }
    .inv-empty-state { padding: 3rem 1rem; text-align: center; }
    .inv-empty-icon { font-size: 3.5rem; color: #dee2e6; margin-bottom: 1rem; }
    .inv-skeleton {
        height: 40px; border-radius: 6px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: inv-shimmer 1.5s ease-in-out infinite;
        margin-bottom: 0.5rem;
    }
    @keyframes inv-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

/* Invoices list page — aligned with inv-form-page language */
.inv-list-page .inv-list-filter-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inv-list-page .inv-list-type-toggle {
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.inv-list-page .inv-list-filters {
    position: relative;
    z-index: 2;
}

.inv-list-page .inv-list-filters .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.inv-list-page .inv-list-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.15rem;
}

.inv-list-page .inv-panel-body .inv-field-group {
    margin-bottom: 0;
}

.inv-list-page .inv-list-notes {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-list-page .inv-list-empty {
    padding: 3.5rem 1.25rem;
}

.inv-list-page .inv-list-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #667eea;
    background: linear-gradient(135deg, #eef2ff 0%, #f8f9fc 100%);
    border: 1px dashed #c7d2fe;
}

.inv-list-page .inv-table-wrap {
    border: 1px solid #e9edff;
    border-radius: 0.85rem;
}

.inv-list-page .inv-table thead th {
    background: linear-gradient(to left, #f8f9fc, #fff);
    border-bottom-color: #e9edff;
    color: #334155;
}

@media (max-width: 991.98px) {
    .inv-list-page .inv-list-type-toggle {
        margin-inline-start: 0;
        width: 100%;
        justify-content: flex-start;
    }
}


/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

/* From: AboutUs.razor */
* {
        box-sizing: border-box;
    }

    .about-us-container {
        min-height: 100vh;
        background: #0a0e27;
        padding: 0;
        position: relative;
        overflow-x: hidden;
    }

    .about-us-container::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    .content-wrapper {
        position: relative;
        z-index: 1;
    }

    /* Hero Section - Dark with diagonal split */
    .about-hero {
        background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%);
        padding: 3rem 2rem 4rem;
        margin-bottom: 0;
        text-align: center;
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    }

    .about-hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: #0a0e27;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
    }

    .about-hero h1 {
        font-size: 4rem;
        font-weight: 900;
        color: #ffffff;
        margin-bottom: 1.5rem;
        text-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
        letter-spacing: -1px;
        line-height: 1.1;
    }

    .about-hero .subtitle {
        font-size: 1.4rem;
        color: #a0aec0;
        margin-bottom: 3rem;
        font-weight: 300;
        letter-spacing: 1px;
    }

    .about-hero .intro-text {
        font-size: 1.1rem;
        color: #cbd5e0;
        line-height: 2;
        max-width: 900px;
        margin: 0 auto;
        text-align: justify;
        text-align-last: center;
        background: rgba(255, 255, 255, 0.03);
        padding: 2.5rem;
        border-radius: 20px;
        border: 1px solid rgba(102, 126, 234, 0.2);
        backdrop-filter: blur(10px);
    }

    /* Section Styles - Dark cards with neon accents */
    .section-wrapper {
        padding: 4rem 2rem;
        background: #0a0e27;
    }

    .section-wrapper:nth-child(even) {
        background: #11152e;
    }

    .info-card {
        background: linear-gradient(145deg, #1a1f3a 0%, #252b4a 100%);
        border-radius: 0;
        padding: 0;
        margin-bottom: 3rem;
        border: 1px solid rgba(102, 126, 234, 0.2);
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    .info-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .info-card:hover {
        transform: translateX(-10px);
        border-color: rgba(102, 126, 234, 0.5);
        box-shadow: 0 15px 50px rgba(102, 126, 234, 0.2);
    }

    .info-card:hover::before {
        opacity: 1;
    }

    .info-card-header {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        padding: 2rem 2.5rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    }

    .info-card-icon {
        width: 80px;
        height: 80px;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        color: white;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .info-card-title {
        font-size: 2rem;
        font-weight: 800;
        color: #ffffff;
        margin: 0;
        letter-spacing: -0.5px;
    }

    .info-card-content {
        padding: 2.5rem;
        color: #cbd5e0;
        line-height: 2.2;
        font-size: 1.05rem;
    }

    .info-card-content h4 {
        color: #ffffff;
        font-weight: 700;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid rgba(102, 126, 234, 0.3);
        display: inline-block;
    }

    .info-card-content h4:first-child {
        margin-top: 0;
    }

    .info-card-content p {
        margin-bottom: 1.5rem;
        text-align: justify;
        text-align-last: right;
        color: #a0aec0;
    }

    .info-card-content ul {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
    }

    .info-card-content ul li {
        padding: 1rem 0;
        padding-right: 2.5rem;
        position: relative;
        color: #cbd5e0;
        line-height: 2;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        transition: all 0.2s ease;
    }

    .info-card-content ul li:last-child {
        border-bottom: none;
    }

    .info-card-content ul li:hover {
        padding-right: 3rem;
        color: #ffffff;
    }

    .info-card-content ul li::before {
        content: 'â–¶';
        position: absolute;
        right: 0;
        color: #667eea;
        font-weight: bold;
        font-size: 0.9rem;
        transition: transform 0.2s ease;
    }

    .info-card-content ul li:hover::before {
        transform: translateX(-5px);
    }

    .info-card-content .highlight {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        padding: 2rem;
        border-radius: 0;
        border-right: 4px solid #667eea;
        border-left: 4px solid #764ba2;
        margin: 2rem 0;
        position: relative;
    }

    .info-card-content .highlight::before {
        content: '"';
        position: absolute;
        top: -10px;
        right: 20px;
        font-size: 4rem;
        color: rgba(102, 126, 234, 0.3);
        font-family: serif;
    }

    .info-card-content .highlight p {
        margin: 0;
        font-weight: 600;
        color: #ffffff;
        font-size: 1.1rem;
    }

    .phone-link {
        color: #667eea;
        text-decoration: none;
        font-weight: 700;
        transition: all 0.2s ease;
        font-size: 1.2rem;
        text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    }

    .phone-link:hover {
        color: #764ba2;
        text-shadow: 0 0 20px rgba(118, 75, 162, 0.8);
    }

    .map-container {
        background: linear-gradient(145deg, #1a1f3a 0%, #252b4a 100%);
        border-radius: 0;
        padding: 3rem 2.5rem;
        margin-bottom: 3rem;
        border: 1px solid rgba(102, 126, 234, 0.2);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    .map-container h3 {
        font-size: 2.5rem;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        letter-spacing: -0.5px;
    }

    .map-container h3 i {
        color: #667eea;
        font-size: 2.5rem;
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
    }

    .map-container p {
        color: #a0aec0;
        margin-bottom: 2rem;
        line-height: 2;
        font-size: 1.05rem;
    }

    #map {
        width: 100%;
        height: 500px;
        border-radius: 0;
        overflow: hidden;
        border: 2px solid rgba(102, 126, 234, 0.3);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    .hours-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .hours-list li {
        padding: 1.25rem 0;
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
        background: rgba(102, 126, 234, 0.05);
        margin-bottom: 0.5rem;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .hours-list li:hover {
        background: rgba(102, 126, 234, 0.15);
        transform: translateX(-5px);
        border-color: rgba(102, 126, 234, 0.4);
    }

    .hours-list li:last-child {
        border-bottom: none;
    }

    .hours-list .day {
        font-weight: 700;
        color: #ffffff;
        font-size: 1.1rem;
    }

    .hours-list .time {
        color: #a0aec0;
        font-size: 1rem;
    }

    .hours-list .closed {
        color: #f5576c;
        font-weight: 700;
        text-shadow: 0 0 10px rgba(245, 87, 108, 0.5);
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .feature-item {
        background: linear-gradient(145deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        padding: 2rem;
        border-radius: 0;
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-right: 4px solid #667eea;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .feature-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .feature-item:hover {
        background: linear-gradient(145deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
        border-color: rgba(102, 126, 234, 0.6);
        transform: translateX(-10px) translateY(-5px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }

    .feature-item:hover::before {
        opacity: 1;
    }

    .feature-item h5 {
        color: #ffffff;
        font-weight: 700;
        margin-bottom: 1rem;
        font-size: 1.3rem;
        position: relative;
        z-index: 1;
    }

    .feature-item p {
        color: #a0aec0;
        margin: 0;
        font-size: 1rem;
        line-height: 1.8;
        position: relative;
        z-index: 1;
    }

    .stats-section {
        background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%);
        padding: 5rem 2rem;
        margin: 0;
        border-top: 2px solid rgba(102, 126, 234, 0.3);
        border-bottom: 2px solid rgba(102, 126, 234, 0.3);
        position: relative;
    }

    .stats-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .stat-item {
        text-align: center;
        padding: 2rem;
        position: relative;
        z-index: 1;
    }

    .stat-number {
        font-size: 4rem;
        font-weight: 900;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.75rem;
        text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
        letter-spacing: -2px;
    }

    .stat-label {
        font-size: 1.2rem;
        color: #a0aec0;
        font-weight: 600;
        letter-spacing: 1px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .about-hero {
            padding: 4rem 1.5rem 3rem;
        }

        .about-hero h1 {
            font-size: 2.5rem;
        }

        .about-hero .subtitle {
            font-size: 1.1rem;
        }

        .about-hero .intro-text {
            font-size: 1rem;
            padding: 1.5rem;
        }

        .section-wrapper {
            padding: 3rem 1rem;
        }

        .info-card {
            margin-bottom: 2rem;
        }

        .info-card-header {
            padding: 1.5rem;
            flex-direction: column;
            text-align: center;
        }

        .info-card-content {
            padding: 1.5rem;
        }

        .map-container {
            padding: 2rem 1.5rem;
        }

        .map-container h3 {
            font-size: 1.75rem;
        }

        #map {
            height: 350px;
        }

        .stat-number {
            font-size: 2.5rem;
        }

        .feature-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }

/* From: Dashboard.razor */
/* Summary Cards */
    .summary-card {
        border-left: 4px solid;
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .summary-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .summary-card-primary {
        border-left-color: #667eea;
    }

    .summary-card-success {
        border-left-color: #28a745;
    }

    .summary-card-danger {
        border-left-color: #dc3545;
    }

    .summary-card-info {
        border-left-color: #17a2b8;
    }

    .summary-card-warning {
        border-left-color: #ffc107;
    }

    /* Chart Cards */
    .chart-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        background: #ffffff;
        margin-bottom: 1.5rem;
    }

    .chart-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .chart-card-header {
        background: #ffffff;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
    }

    .chart-card-title {
        font-weight: 600;
        font-size: 1rem;
        color: #2c3e50;
        margin: 0;
    }

    .chart-card-subtitle {
        font-size: 0.85rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .chart-card-body {
        padding: 1.25rem;
        background: #ffffff;
    }

    .chart-card-body canvas {
        background: transparent !important;
    }

    /* Activity List - Latest Financial Transactions */
    .transactions-card {
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        background: #ffffff;
        overflow: hidden;
    }

    .transactions-card-header {
        background: transparent;
        border: none;
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .transactions-card-title {
        font-weight: 600;
        font-size: 1.1rem;
        color: #5F348F;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .transactions-card-title i {
        color: #5F348F;
        font-size: 1.2rem;
    }

    .transactions-card-body {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .activity-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .activity-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        background: #F7F2FA;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .activity-item:hover {
        background: #F0E8F5;
        transform: translateX(-2px);
    }

    .activity-amount {
        font-weight: 700;
        font-size: 1.1rem;
        color: #5F348F;
        white-space: nowrap;
        margin-left: 1rem;
    }

    .activity-details {
        flex: 1;
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .activity-description {
        font-size: 0.95rem;
        color: #333333;
        font-weight: 500;
        line-height: 1.4;
    }

    .activity-time {
        font-size: 0.8rem;
        color: #888888;
        font-weight: 400;
    }

    /* Icon Container */
    .icon-container {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: white;
        flex-shrink: 0;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .chart-card {
            margin-bottom: 1rem;
        }
        
        .summary-card {
            margin-bottom: 1rem;
        }

        .activity-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .activity-amount {
            margin-left: 0;
            align-self: flex-end;
        }

        .activity-details {
            text-align: right;
            width: 100%;
        }
    }

    /* Animation for cards */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in-up {
        animation: fadeInUp 0.6s ease-out;
    }

    /* Chart container */
    .chart-container {
        position: relative;
        height: 300px;
        padding: 0.5rem 0;
        min-height: 300px;
    }

    .large-chart-container {
        position: relative;
        height: 400px;
        padding: 1rem 0;
        min-height: 400px;
    }

    .chart-container canvas,
    .large-chart-container canvas {
        max-height: 100% !important;
        width: 100% !important;
        background: transparent !important;
        display: block !important;
    }


/* --------------------------------------------------------------------------
   Invoices
   -------------------------------------------------------------------------- */

/* From: Invoices/AddInvoice.razor */
.inv-page-header { display: flex; align-items: center; gap: 1rem; }
    .inv-header-icon {
        width: 48px; height: 48px; border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }
    .inv-form-card { border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
    .inv-form-section { background: linear-gradient(to bottom, #f8f9fc, #fff); border-radius: 0.5rem; }
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    .btn-submit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
    .btn-submit:hover { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
    .inv-section-title {
        display: flex; align-items: center; gap: 0.5rem;
        font-weight: 600; color: #334155; margin-bottom: 0.75rem;
    }
    .inv-section-title i { color: #667eea; font-size: 1.1rem; }

/* From: Invoices/Components/InvoiceLineFields.razor — modern redesign */
.invoice-lines-section {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 0.85rem;
    padding: 1.15rem;
}

/* ---------- Toolbar ---------- */
.invoice-lines-section .invoice-lines-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.invoice-lines-section .invoice-lines-header.is-readonly {
    margin-bottom: 0.75rem;
}

.invoice-lines-section .invoice-lines-header .title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #334155;
    margin-inline-end: auto;
}

.invoice-lines-section .invoice-lines-header .title-wrap i {
    color: #667eea;
    font-size: 1.2rem;
}

.invoice-lines-section .barcode-scan-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 380px;
}

.invoice-lines-section .barcode-scan-wrap > i {
    position: absolute;
    inset-inline-start: 0.7rem;
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

.invoice-lines-section .barcode-scan-wrap .form-control {
    width: 100%;
    height: 38px;
    padding-inline-start: 2.25rem;
    border-radius: 0.6rem;
    border-color: #e2e8f5;
    background: #f8fafc;
    font-size: 0.8125rem;
}

.invoice-lines-section .barcode-scan-wrap .form-control:focus {
    background: #fff;
    border-color: #667eea;
    box-shadow: 0 0 0 0.18rem rgba(102, 126, 234, 0.15);
}

.invoice-lines-section .btn-add-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1.5px dashed #c7d2fe;
    border-radius: 0.6rem;
    padding: 0 1rem;
    height: 38px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4338ca;
    white-space: nowrap;
    background: #eef2ff;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.invoice-lines-section .btn-add-line i {
    font-size: 1.05rem;
    line-height: 1;
}

.invoice-lines-section .btn-add-line:hover,
.invoice-lines-section .btn-add-line:focus-visible {
    color: #3730a3;
    background: #e0e7ff;
    border-color: #a5b4fc;
    border-style: solid;
    box-shadow: none;
    filter: none;
}

.invoice-lines-section .btn-add-line:focus:not(:hover) {
    outline: none;
    box-shadow: 0 0 0 0.18rem rgba(99, 102, 241, 0.2);
}

.invoice-lines-section .btn-add-line:disabled,
.invoice-lines-section .btn-add-line.disabled {
    color: #94a3b8;
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.75;
    box-shadow: none;
}

/* ---------- Empty state ---------- */
.invoice-lines-section .empty-lines-hint {
    text-align: center;
    padding: 2.25rem 1.25rem;
    background: #fbfcff;
    border: 1px dashed #e2e8f5;
    border-radius: 0.8rem;
}

.invoice-lines-section .empty-lines-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 16px;
    background: #f0f4ff;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.invoice-lines-section .empty-lines-title {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
}

.invoice-lines-section .empty-lines-text {
    margin: 0 0 1rem;
    font-size: 0.825rem;
    color: #94a3b8;
}

/* ---------- Table shell ---------- */
.invoice-lines-section .invoice-lines-table-wrap {
    border: 1px solid #e9edff;
    border-radius: 0.8rem;
    background: #fff;
    overflow: visible;
}

.invoice-lines-section .invoice-lines-table-wrap.table-responsive {
    overflow: visible;
}

.invoice-lines-section:has(.item-autocomplete:focus-within),
.invoice-lines-section:has(.item-autocomplete .options) {
    position: relative;
    z-index: 20;
}

.invoice-lines-section:has(.inv-last-sales-popover),
.invoice-lines-section:has(.is-last-sales-open) {
    position: relative;
    z-index: 50;
}

.invoice-lines-section .invoice-lines-table {
    --bs-table-bg: transparent;
    --inv-field-h: 34px;
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.invoice-lines-section .invoice-lines-table thead th {
    background: #f7f9ff;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding: 0.6rem;
    border: none;
    border-bottom: 1px solid #e9edff;
}

.invoice-lines-section .invoice-lines-table thead th:first-child {
    border-start-start-radius: 0.75rem;
}

.invoice-lines-section .invoice-lines-table thead th:last-child {
    border-start-end-radius: 0.75rem;
}

.invoice-lines-section .invoice-lines-table tbody tr {
    position: relative;
    z-index: 0;
    transition: background-color 0.12s ease;
}

.invoice-lines-section .invoice-lines-table tbody tr:has(.item-autocomplete:focus-within),
.invoice-lines-section .invoice-lines-table tbody tr:has(.item-autocomplete .options),
.invoice-lines-section .invoice-lines-table tbody tr.is-last-sales-open,
.invoice-lines-section .invoice-lines-table tbody tr:has(.inv-last-sales-popover) {
    z-index: 10;
}

.invoice-lines-section .invoice-lines-table tbody tr:not(.invoice-line-serial-row):hover {
    background-color: #fafbff;
}

.invoice-lines-section .invoice-lines-table tbody tr:not(.invoice-line-serial-row):focus-within {
    background-color: #f6f8ff;
}

.invoice-lines-section .invoice-lines-table td {
    vertical-align: top;
    padding: 0.5rem;
    border: none;
    border-bottom: 1px solid #f2f5fb;
    background: transparent;
}

.invoice-lines-section .invoice-lines-table tbody tr:last-child > td {
    border-bottom: none;
}

/* ---------- Column sizing (table-layout: fixed — item column takes the rest) ---------- */
.invoice-lines-section .invoice-lines-table .col-index {
    width: 44px;
    text-align: center;
}

.invoice-lines-section .invoice-lines-table .col-item {
    width: auto;
    overflow: visible;
}

.invoice-lines-section .invoice-lines-table tbody tr.is-last-sales-open > .col-item {
    overflow: visible;
}

.invoice-lines-section .invoice-lines-table .col-inventory {
    width: 170px;
}

.invoice-lines-section .invoice-lines-table .col-qty {
    width: 200px;
}

.invoice-lines-section .invoice-lines-table .col-cost {
    width: 120px;
}

.invoice-lines-section .invoice-lines-table .col-profit {
    width: 110px;
    text-align: center;
}

.invoice-lines-section .invoice-lines-table .col-discount {
    width: 135px;
}

.invoice-lines-section .invoice-lines-table .col-expiry {
    width: 110px;
}

.invoice-lines-section .invoice-lines-table .col-total {
    width: 105px;
    text-align: center;
    border-inline-start: 1px solid #eef2f9;
}

.invoice-lines-section .invoice-lines-table tbody .col-total {
    background: #fcfdff;
}

.invoice-lines-section .invoice-lines-table .col-actions {
    width: 48px;
    text-align: center;
}

/* ---------- Controls ---------- */
.invoice-lines-section .invoice-lines-table .form-control,
.invoice-lines-section .invoice-lines-table .form-select {
    height: var(--inv-field-h);
    min-height: var(--inv-field-h);
    border-radius: 0.55rem;
    border-color: #e2e8f5;
    font-size: 0.8125rem;
    padding-block: 0.25rem;
    box-shadow: none;
    background-color: #fff;
}

.invoice-lines-section .invoice-lines-table .form-control:focus,
.invoice-lines-section .invoice-lines-table .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.18rem rgba(102, 126, 234, 0.16);
}

.invoice-lines-section .invoice-lines-table .discount-formula-wrap {
    margin: 0;
    padding: 0;
}

.invoice-lines-section .invoice-lines-table .item-autocomplete .input-group {
    flex-wrap: nowrap;
    height: var(--inv-field-h);
}

.invoice-lines-section .invoice-lines-table .item-autocomplete .input-group-text {
    height: var(--inv-field-h);
    padding-inline: 0.55rem;
    border-color: #e2e8f5;
    border-start-start-radius: 0.55rem;
    border-end-start-radius: 0.55rem;
}

.invoice-lines-section .invoice-lines-table .item-autocomplete .input-group .form-control {
    height: var(--inv-field-h);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.invoice-lines-section .invoice-lines-table .item-autocomplete .input-group:focus-within .input-group-text {
    border-color: #667eea;
}

.invoice-lines-section .invoice-lines-table .item-autocomplete .selected-display {
    display: flex;
    align-items: center;
    min-height: var(--inv-field-h);
    padding: 0.35rem 0.6rem;
    border-radius: 0.55rem;
    font-size: 0.8125rem;
}

.invoice-lines-section .invoice-lines-table .item-autocomplete .searching-hint {
    font-size: 0.68rem;
    margin-top: 0.25rem;
}

/* ---------- Quantity column: hint sits under the inputs ---------- */
.invoice-lines-section .invoice-lines-table .qty-inline-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
}

.invoice-lines-section .invoice-lines-table .boxing-qty-compact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.35rem;
}

.invoice-lines-section .invoice-lines-table .boxing-qty-compact-row .boxing-qty-hint {
    grid-column: 1 / -1;
}

.invoice-lines-section .invoice-lines-table .qty-inline-row input,
.invoice-lines-section .invoice-lines-table .boxing-qty-compact-row input {
    width: 100%;
    min-width: 0;
    flex: none;
}

.invoice-lines-section .invoice-lines-table .boxing-qty-hint {
    display: block;
    font-size: 0.66rem;
    line-height: 1.25;
    color: #94a3b8;
    white-space: nowrap;
    text-align: end;
}

.invoice-lines-section .qty-subhead {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.64rem;
    font-weight: 500;
    color: #a3aec2;
}

/* ---------- Numbers ---------- */
.invoice-lines-section .invoice-lines-table .col-qty input,
.invoice-lines-section .invoice-lines-table .col-cost input,
.invoice-lines-section .invoice-lines-table .col-discount input,
.invoice-lines-section .inv-num,
.invoice-lines-section .line-total-value {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
}

.invoice-lines-section .inv-num {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--inv-field-h);
    margin: 0;
}

.invoice-lines-section .invoice-lines-table .col-inventory > span {
    display: flex;
    align-items: center;
    min-height: var(--inv-field-h);
    font-size: 0.8125rem;
    color: #475569;
}

.invoice-lines-section .line-total-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--inv-field-h);
    font-weight: 700;
    color: #4f46e5;
    font-size: 0.9rem;
    text-align: center;
}

.invoice-lines-section .line-total-value.is-zero {
    color: #cbd5e1;
    font-weight: 600;
}

.invoice-lines-section .invoice-lines-table .col-expiry span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--inv-field-h);
    font-size: 0.75rem;
    color: #64748b;
}

/* ---------- Row index ---------- */
.invoice-lines-section .invoice-lines-table .col-index {
    padding-inline: 0.35rem;
}

.invoice-lines-section .inv-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-block: calc((var(--inv-field-h) - 24px) / 2);
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #f1f4fd;
    color: #6b7ba8;
    font-weight: 700;
    font-size: 0.72rem;
}

/* ---------- Stock chip ---------- */
.invoice-lines-section .inv-item-meta-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.invoice-lines-section .inv-gift-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
}

.invoice-lines-section .inv-gift-hint i {
    font-size: 0.85rem;
}

.invoice-lines-section .col-gift {
    min-width: 5.5rem;
    max-width: 7rem;
}

.invoice-lines-section .inv-stock-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.invoice-lines-section .inv-stock-chip i {
    font-size: 0.75rem;
}

.invoice-lines-section .inv-stock-chip.is-ok {
    background: #f0fdf4;
    color: #16a34a;
}

.invoice-lines-section .inv-stock-chip.is-low {
    background: #fffbeb;
    color: #d97706;
}

.invoice-lines-section .inv-stock-chip.is-out {
    background: #fef2f2;
    color: #dc2626;
}

.invoice-lines-section .inv-purchase-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: #eff6ff;
    color: #2563eb;
}

.invoice-lines-section .inv-purchase-chip i {
    font-size: 0.75rem;
}

.invoice-lines-section .inv-last-sales-wrap {
    position: relative;
    display: inline-flex;
    z-index: 2;
}

.invoice-lines-section .inv-last-sales-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: #ecfeff;
    color: #0e7490;
    cursor: pointer;
}

.invoice-lines-section .inv-last-sales-chip i {
    font-size: 0.75rem;
}

.invoice-lines-section .inv-last-sales-chip:hover,
.invoice-lines-section .inv-last-sales-chip.is-open {
    background: #cffafe;
}

.invoice-lines-section .inv-last-sales-popover {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 60;
    width: min(18.5rem, 78vw);
    max-height: min(16rem, calc(100vh - 8rem));
    padding: 0.55rem 0.6rem 0.5rem;
    border-radius: 0.55rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.invoice-lines-section .inv-last-sales-popover.is-flip-up {
    top: auto;
    bottom: calc(100% + 0.25rem);
}

.invoice-lines-section .inv-last-sales-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
}

.invoice-lines-section .inv-last-sales-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.invoice-lines-section .inv-last-sales-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.invoice-lines-section .inv-last-sales-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
}

.invoice-lines-section .inv-last-sales-scope-btn {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    cursor: pointer;
}

.invoice-lines-section .inv-last-sales-scope-btn.is-active {
    border-color: #a5f3fc;
    background: #ecfeff;
    color: #0e7490;
}

.invoice-lines-section .inv-last-sales-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.25rem;
    font-size: 0.7rem;
    color: #94a3b8;
}

.invoice-lines-section .inv-last-sales-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    max-height: min(11rem, calc(100vh - 12rem));
}

.invoice-lines-section .inv-last-sales-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border-radius: 0.4rem;
    background: #f8fafc;
}

.invoice-lines-section .inv-last-sales-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.invoice-lines-section .inv-last-sales-date {
    font-size: 0.68rem;
    font-weight: 700;
    color: #334155;
}

.invoice-lines-section .inv-last-sales-person {
    font-size: 0.62rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

.invoice-lines-section .inv-last-sales-meta {
    font-size: 0.62rem;
    color: #475569;
}

.invoice-lines-section .inv-last-sales-apply {
    flex-shrink: 0;
    border: 1px solid #a5f3fc;
    background: #fff;
    color: #0e7490;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
}

.invoice-lines-section .inv-last-sales-apply:hover {
    background: #ecfeff;
}

.invoice-lines-section .inv-cost-eq-purchase {
    color: #d97706 !important;
}

.invoice-lines-section .inv-cost-below-purchase {
    color: #dc2626 !important;
}

.invoice-lines-section .inv-selling-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
}

.invoice-lines-section .inv-piece-price-hint {
    display: block;
    text-align: end;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.invoice-lines-section .inv-profit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 4.5rem;
    padding: 0.28rem 0.55rem;
    border-radius: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    line-height: 1.2;
    white-space: nowrap;
}

.invoice-lines-section .inv-profit-badge i {
    font-size: 1rem;
    margin-inline-end: -0.1rem;
}

.invoice-lines-section .inv-profit-badge.is-gain {
    color: #047857;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
}

.invoice-lines-section .inv-profit-badge.is-loss {
    color: #be123c;
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1px solid #fecdd3;
}

.invoice-lines-section .inv-profit-badge.is-neutral {
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

/* ---------- Delete action ---------- */
.invoice-lines-section .inv-line-action-btn {
    width: 30px;
    height: 30px;
    margin-block: calc((var(--inv-field-h) - 30px) / 2);
    padding: 0;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    color: #94a3b8;
    background: transparent;
    line-height: 1;
    font-size: 0.95rem;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.invoice-lines-section .invoice-lines-table tbody tr:hover .inv-line-action-btn,
.invoice-lines-section .invoice-lines-table tbody tr:focus-within .inv-line-action-btn {
    color: #dc3545;
    background: #fff5f5;
    border-color: #fee2e2;
}

.invoice-lines-section .inv-line-action-btn:hover,
.invoice-lines-section .inv-line-action-btn:focus-visible {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
}

/* ---------- Serial panel ---------- */
.invoice-lines-section .invoice-line-serial-row > td {
    background: transparent;
    border: none;
    border-bottom: 1px solid #f2f5fb;
    padding: 0 0.5rem 0.6rem;
}

.invoice-lines-section .serial-panel {
    background: #fbfcff;
    border: 1px solid #eef2fb;
    border-radius: 0.6rem;
    padding: 0.6rem 0.7rem;
}

.invoice-lines-section .serial-panel-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.45rem;
}

.invoice-lines-section .invoice-lines-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #e9edff;
}

.invoice-lines-section .lines-summary {
    font-size: 0.825rem;
    color: #64748b;
}

.invoice-lines-section .lines-summary strong {
    color: #667eea;
}

/* ---------- Card layout on tablets and phones ---------- */
@media (max-width: 991.98px) {
    .invoice-lines-section {
        padding: 0.85rem;
    }

    .invoice-lines-section .barcode-scan-wrap {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .invoice-lines-section .btn-add-line {
        flex: 1 1 100%;
        justify-content: center;
    }

    .invoice-lines-section .invoice-lines-table-wrap {
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .invoice-lines-section .invoice-lines-table thead {
        display: none;
    }

    .invoice-lines-section .invoice-lines-table,
    .invoice-lines-section .invoice-lines-table tbody {
        display: block;
        width: 100%;
    }

    .invoice-lines-section .invoice-lines-table tbody tr:not(.invoice-line-serial-row) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 0.6rem 0.7rem;
        margin-bottom: 0.7rem;
        padding: 0.75rem;
        border: 1px solid #e9edff;
        border-radius: 0.75rem;
        background: #fff;
    }

    .invoice-lines-section .invoice-lines-table td {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0;
        border: none;
        width: auto;
        min-width: 0;
        text-align: start;
    }

    .invoice-lines-section .invoice-lines-table td::before {
        content: attr(data-label);
        font-size: 0.66rem;
        font-weight: 700;
        color: #a3aec2;
    }

    .invoice-lines-section .invoice-lines-table .col-index,
    .invoice-lines-section .invoice-lines-table .col-actions {
        flex-direction: row;
        align-items: center;
        width: auto;
    }

    .invoice-lines-section .invoice-lines-table .col-index::before,
    .invoice-lines-section .invoice-lines-table .col-actions::before {
        content: none;
    }

    .invoice-lines-section .invoice-lines-table .col-index {
        grid-column: 1;
        grid-row: 1;
    }

    .invoice-lines-section .invoice-lines-table .col-actions {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    .invoice-lines-section .invoice-lines-table .col-item {
        grid-column: 1 / -1;
    }

    .invoice-lines-section .invoice-lines-table .col-total,
    .invoice-lines-section .invoice-lines-table tbody .col-total {
        text-align: start;
        background: transparent;
        border-inline-start: none;
    }

    .invoice-lines-section .line-total-value {
        min-height: 0;
        justify-content: flex-start;
        text-align: start;
        direction: ltr;
    }

    .invoice-lines-section .inv-num {
        min-height: 0;
        justify-content: flex-start;
    }

    .invoice-lines-section .invoice-lines-table .col-inventory > span,
    .invoice-lines-section .invoice-lines-table .col-expiry span {
        min-height: 0;
        justify-content: flex-start;
        text-align: start;
    }

    .invoice-lines-section .inv-row-badge,
    .invoice-lines-section .inv-line-action-btn {
        margin-block: 0;
    }

    .invoice-lines-section .invoice-lines-table .item-autocomplete .input-group,
    .invoice-lines-section .invoice-lines-table .item-autocomplete .selected-display {
        height: auto;
        min-height: var(--inv-field-h);
    }

    .invoice-lines-section .invoice-line-serial-row {
        display: block;
        margin: -0.35rem 0 0.7rem;
    }

    .invoice-lines-section .invoice-line-serial-row > td {
        display: block;
        padding: 0;
        border: none;
    }

    .invoice-lines-section .invoice-line-serial-row > td::before {
        content: none;
    }

    .invoice-lines-section .inv-line-action-btn {
        color: #dc3545;
        background: #fff5f5;
        border-color: #fee2e2;
    }
}

/* From: Invoices/Components/InvoiceTotalsCard.razor — replaced by redesign below */
/* ===== Invoice form redesign ===== */
.inv-form-page {
    padding-bottom: 1.5rem;
}

.inv-form-page:has(.inv-last-sales-popover) .inv-form-toolbar.is-bottom {
    z-index: 25;
}

.inv-form-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid #e9edff;
    border-radius: 1rem;
    box-shadow: 0 4px 18px -12px rgba(102, 126, 234, 0.45);
    position: sticky;
    top: 0.5rem;
    z-index: 30;
}

.inv-form-toolbar.is-bottom {
    top: auto;
    bottom: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.inv-toolbar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.inv-toolbar-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.inv-toolbar-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #4338ca;
    line-height: 1.3;
}

.inv-toolbar-sub {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

.inv-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.inv-toolbar-btn {
    border-radius: 0.65rem;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
}

.inv-toolbar-btn.btn-outline-danger {
    border-color: #f1aeb5;
    color: #dc3545;
    background: #fff;
}

.inv-toolbar-btn.btn-outline-danger:hover {
    background: #dc3545;
    color: #fff;
}

.inv-panel {
    background: #fff;
    border: 1px solid #e9edff;
    border-radius: 1rem;
    box-shadow: 0 6px 20px -14px rgba(102, 126, 234, 0.4);
    overflow: hidden;
    height: 100%;
}

/* Autocomplete menus are position:absolute and must escape the panel */
.inv-panel:has(.customer-autocomplete:focus-within),
.inv-panel:has(.customer-autocomplete .options),
.inv-panel:has(.supplier-autocomplete:focus-within),
.inv-panel:has(.supplier-autocomplete .options) {
    overflow: visible;
    position: relative;
    z-index: 30;
}

.inv-panel:has(.inv-last-sales-popover),
.inv-panel:has(.is-last-sales-open) {
    overflow: visible;
    position: relative;
    z-index: 50;
}

.inv-panel-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid #eef2ff;
    font-weight: 700;
    color: #334155;
    background: linear-gradient(to left, #f8f9fc, #fff);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.inv-panel-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f0f4ff;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.inv-mode-toggle {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.18rem;
    border-radius: 999px;
    border: 1px solid #dbe4f0;
    background: #fff;
    gap: 0.15rem;
}

.inv-mode-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.inv-mode-btn:hover {
    color: #334155;
    background: #f8fafc;
}

.inv-mode-btn.is-active {
    background: #eef2ff;
    color: #4338ca;
}

.inv-profit-toggle {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.55rem 0.28rem 0.35rem;
    border-radius: 999px;
    border: 1px solid #dbe4f0;
    background: #fff;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.inv-profit-toggle:hover {
    border-color: #a7f3d0;
    background: #f0fdf4;
}

.inv-profit-toggle.is-on {
    border-color: #6ee7b7;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    box-shadow: 0 4px 14px -10px rgba(5, 150, 105, 0.55);
}

.inv-profit-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inv-profit-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.inv-profit-toggle.is-on .inv-profit-toggle-track {
    background: #059669;
}

.inv-profit-toggle-thumb {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    transition: inset-inline-start 0.18s ease, transform 0.18s ease;
}

.inv-profit-toggle.is-on .inv-profit-toggle-thumb {
    inset-inline-start: 18px;
}

.inv-profit-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}

.inv-profit-toggle.is-on .inv-profit-toggle-label {
    color: #047857;
}

.inv-profit-toggle-label i {
    font-size: 0.95rem;
}

.inv-profit-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid #a7f3d0;
    background:
        radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.12), transparent 45%),
        linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 55%, #fff 100%);
    box-shadow: 0 10px 24px -18px rgba(5, 150, 105, 0.45);
    animation: inv-profit-in 0.28s ease;
}

.inv-profit-summary.is-loss {
    border-color: #fecdd3;
    background:
        radial-gradient(circle at 0% 0%, rgba(244, 63, 94, 0.1), transparent 45%),
        linear-gradient(135deg, #fff1f2 0%, #fff7ed 55%, #fff 100%);
    box-shadow: 0 10px 24px -18px rgba(225, 29, 72, 0.4);
}

.inv-profit-summary.is-neutral,
.inv-profit-summary.is-empty {
    border-color: #e2e8f0;
    background:
        radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.12), transparent 45%),
        linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.25);
}

.inv-profit-summary-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.inv-profit-summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    color: #059669;
    background: rgba(5, 150, 105, 0.12);
}

.inv-profit-summary.is-loss .inv-profit-summary-icon {
    color: #e11d48;
    background: rgba(225, 29, 72, 0.1);
}

.inv-profit-summary.is-neutral .inv-profit-summary-icon,
.inv-profit-summary.is-empty .inv-profit-summary-icon {
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
}

.inv-profit-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.inv-profit-summary-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.inv-profit-summary-hint {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.inv-profit-summary.is-gain .inv-profit-summary-hint {
    color: #047857;
}

.inv-profit-summary.is-loss .inv-profit-summary-hint {
    color: #be123c;
}

.inv-profit-summary-amount-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    min-width: 0;
}

.inv-profit-summary-amount {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: #047857;
}

.inv-profit-summary.is-loss .inv-profit-summary-amount {
    color: #e11d48;
}

.inv-profit-summary.is-neutral .inv-profit-summary-amount,
.inv-profit-summary .inv-profit-summary-amount.is-empty {
    color: #94a3b8;
}

.inv-profit-summary-currency {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.04em;
}

@keyframes inv-profit-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .inv-profit-toggle-label span,
    .inv-profit-toggle-label {
        font-size: 0.72rem;
    }

    .inv-profit-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .inv-profit-summary-amount-wrap {
        align-items: flex-start;
        text-align: start;
        padding-inline-start: 3.7rem;
    }

    .inv-profit-summary-amount {
        font-size: 1.35rem;
    }
}

.inv-panel-body {
    padding: 1.1rem;
}

.inv-insight {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(14, 165, 233, 0.08), transparent 45%),
        linear-gradient(135deg, #f8fafc 0%, #eef6ff 55%, #f8fafc 100%);
    animation: inv-insight-in 0.28s ease-out;
}

.inv-insight.is-risk {
    border-color: #fecdd3;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(244, 63, 94, 0.1), transparent 45%),
        linear-gradient(135deg, #fff7f8 0%, #fff1f2 55%, #fffafb 100%);
}

.inv-insight.is-credit-risk {
    box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.18);
}

@keyframes inv-insight-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inv-insight-loading,
.inv-insight-empty {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
}

.inv-insight-empty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.inv-insight-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
}

.inv-insight-metric {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(226, 232, 240, 0.9);
    min-width: 0;
}

.inv-insight-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e2e8f0;
    color: #475569;
    font-size: 1rem;
}

.inv-insight-metric.is-debt .inv-insight-metric-icon {
    background: #ffe4e6;
    color: #e11d48;
}

.inv-insight-metric.is-clear .inv-insight-metric-icon {
    background: #d1fae5;
    color: #059669;
}

.inv-insight-metric.is-limit .inv-insight-metric-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.inv-insight-metric.is-movement .inv-insight-metric-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.inv-insight-metric.is-contact .inv-insight-metric-icon {
    background: #fef3c7;
    color: #d97706;
}

.inv-insight-metric-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.inv-insight-metric-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.01em;
}

.inv-insight-metric-value {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.inv-insight-metric.is-debt .inv-insight-metric-value {
    color: #e11d48;
}

.inv-insight-metric.is-clear .inv-insight-metric-value {
    color: #059669;
}

.inv-insight-phone {
    font-size: 0.92rem;
    font-weight: 700;
    direction: ltr;
    text-align: start;
}

.inv-insight-movement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
}

.inv-insight-movement-date {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.inv-insight-movement-amount {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.inv-insight-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    background: #e2e8f0;
    color: #475569;
}

.inv-insight-badge.is-cash {
    background: #d1fae5;
    color: #047857;
}

.inv-insight-badge.is-credit {
    background: #ffedd5;
    color: #c2410c;
}

.inv-insight-badge.is-recv {
    background: #dbeafe;
    color: #1d4ed8;
}

.inv-insight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #dbe4f0;
    flex-wrap: wrap;
}

.inv-insight-terms {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    min-width: 0;
}

.inv-insight-terms i {
    color: #94a3b8;
}

.inv-insight-statement-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem 0.38rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px -8px rgba(37, 99, 235, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.inv-insight-statement-btn:hover {
    color: #1e40af;
    border-color: #93c5fd;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.7);
    transform: translateY(-1px);
}

.inv-insight-statement-btn:active {
    transform: translateY(0);
}

.inv-insight-statement-btn > i:first-child {
    font-size: 0.95rem;
}

.inv-insight-statement-arrow {
    font-size: 1rem;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.inv-insight-statement-btn:hover .inv-insight-statement-arrow {
    transform: translateX(-2px);
}

.inv-insight.is-risk .inv-insight-footer {
    border-top-color: #fecdd3;
}

.inv-insight-alerts {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.inv-insight-alert {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.inv-insight-alert.is-danger {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.inv-insight-alert.is-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.inv-insight-credit-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #fecdd3;
    font-size: 0.78rem;
    font-weight: 700;
    color: #be123c;
}

@media (max-width: 575.98px) {
    .inv-insight-metrics {
        grid-template-columns: 1fr;
    }
}

/* Customer split: form + insight side panels (AddInvoice) */
.inv-customer-split > [class*="col-"] > .inv-panel {
    height: 100%;
}

.inv-customer-insight-panel {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(14, 165, 233, 0.06), transparent 45%),
        linear-gradient(160deg, #fff 0%, #f8fafc 55%, #f0f7ff 100%);
    border-color: #e0eaff;
}

.inv-customer-insight-panel .inv-panel-header {
    background: linear-gradient(to left, #f0f7ff, #fff);
}

.inv-customer-insight-panel .inv-panel-header-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.inv-customer-insight-panel .inv-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.inv-customer-insight-panel .inv-insight {
    margin-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.inv-customer-insight-panel .inv-insight.is-risk {
    margin: -0.25rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #fecdd3;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(244, 63, 94, 0.1), transparent 45%),
        linear-gradient(135deg, #fff7f8 0%, #fff1f2 55%, #fffafb 100%);
}

.inv-customer-insight-panel .inv-insight-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    flex: 1;
}

.inv-customer-insight-panel .inv-insight-metric {
    padding: 0.65rem 0.7rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px -10px rgba(15, 23, 42, 0.35);
}

.inv-customer-insight-panel .inv-insight-footer {
    margin-top: auto;
    padding-top: 0.75rem;
}

.inv-customer-insight-panel .inv-insight-loading,
.inv-customer-insight-panel .inv-insight-empty-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-customer-insight-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
    padding: 1.5rem 1rem;
    border-radius: 0.9rem;
    border: 1px dashed #c7d7f0;
    background:
        radial-gradient(circle at 50% 20%, rgba(14, 165, 233, 0.08), transparent 55%),
        rgba(255, 255, 255, 0.55);
    animation: inv-insight-in 0.28s ease-out;
}

.inv-customer-insight-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: #0284c7;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    margin-bottom: 0.35rem;
    box-shadow: 0 8px 18px -12px rgba(2, 132, 199, 0.55);
}

.inv-customer-insight-empty-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #334155;
}

.inv-customer-insight-empty-hint {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    max-width: 220px;
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .inv-customer-insight-panel .inv-panel-body {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .inv-customer-insight-panel .inv-insight-metrics {
        grid-template-columns: 1fr;
    }
}

/* Delivery split: form + live preview (AddInvoice) */
.inv-delivery-form-panel .inv-panel-header-icon {
    background: #ecfdf5;
    color: #059669;
}

.inv-delivery-form-panel .inv-mode-btn.is-active {
    background: #ecfdf5;
    color: #047857;
}

.inv-delivery-section + .inv-delivery-section {
    margin-top: 1.15rem;
    padding-top: 1.05rem;
    border-top: 1px dashed #dbe4f0;
}

.inv-delivery-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    border-radius: 999px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 700;
}

.inv-delivery-section-title i {
    font-size: 0.95rem;
}

.inv-delivery-preview-panel {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(16, 185, 129, 0.1), transparent 45%),
        linear-gradient(160deg, #fff 0%, #f8fafc 45%, #ecfdf5 100%);
    border-color: #c6f0dd;
}

.inv-delivery-preview-panel .inv-panel-header {
    background: linear-gradient(to left, #ecfdf5, #fff);
}

.inv-delivery-preview-panel .inv-panel-header-icon {
    background: #d1fae5;
    color: #059669;
}

.inv-delivery-preview-panel .inv-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.inv-delivery-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    animation: inv-insight-in 0.28s ease-out;
}

.inv-delivery-preview-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    border: 1px solid #a7f3d0;
    background:
        radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.12), transparent 50%),
        linear-gradient(135deg, #ecfdf5 0%, #fff 70%);
    box-shadow: 0 8px 20px -16px rgba(5, 150, 105, 0.45);
}

.inv-delivery-preview-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
    color: #059669;
    background: rgba(5, 150, 105, 0.12);
}

.inv-delivery-preview-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    flex: 1;
}

.inv-delivery-preview-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
}

.inv-delivery-preview-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-word;
}

.inv-delivery-preview-badge {
    flex-shrink: 0;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.inv-delivery-preview-badge.is-draft {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

.inv-delivery-preview-badge.is-ready {
    background: #d1fae5;
    color: #047857;
    border-color: #6ee7b7;
}

.inv-delivery-preview-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.inv-delivery-preview-metric {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.95);
    opacity: 0.72;
    transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-delivery-preview-metric.is-filled {
    opacity: 1;
    border-color: #bbf7d0;
    box-shadow: 0 4px 12px -10px rgba(5, 150, 105, 0.4);
}

.inv-delivery-preview-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 1rem;
}

.inv-delivery-preview-metric-icon.is-alt {
    background: #fef3c7;
    color: #d97706;
}

.inv-delivery-preview-metric-icon.is-truck {
    background: #ede9fe;
    color: #7c3aed;
}

.inv-delivery-preview-metric-icon.is-pin {
    background: #ffe4e6;
    color: #e11d48;
}

.inv-delivery-preview-metric-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.inv-delivery-preview-metric-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
}

.inv-delivery-preview-metric-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
}

.inv-delivery-ltr {
    direction: ltr;
    text-align: start;
}

.inv-delivery-preview-notes {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
}

.inv-delivery-preview-notes i {
    color: #d97706;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.inv-delivery-preview-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

.inv-delivery-check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
}

.inv-delivery-check.is-done {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.inv-delivery-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
    padding: 1.5rem 1rem;
    border-radius: 0.9rem;
    border: 1px dashed #a7f3d0;
    background:
        radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.1), transparent 55%),
        rgba(255, 255, 255, 0.55);
    animation: inv-insight-in 0.28s ease-out;
}

.inv-delivery-preview-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: #059669;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    margin-bottom: 0.35rem;
    box-shadow: 0 8px 18px -12px rgba(5, 150, 105, 0.55);
}

.inv-delivery-preview-empty-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #334155;
}

.inv-delivery-preview-empty-hint {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    max-width: 240px;
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .inv-delivery-preview-panel .inv-panel-body {
        min-height: 0;
    }
}

.inv-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 0.65rem 0.85rem;
    background: #f8f9fc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.75rem;
}

.inv-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.inv-meta-label {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}

.inv-meta-value {
    font-size: 0.875rem;
    color: #334155;
    font-weight: 600;
}

.inv-field-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.inv-field-group .inv-field-icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 2;
    pointer-events: none;
    font-size: 1rem;
}

.inv-field-group .form-control,
.inv-field-group .form-select,
.inv-field-group .customer-autocomplete,
.inv-field-group .supplier-autocomplete {
    width: 100%;
    min-width: 0;
}

.inv-field-group .form-control,
.inv-field-group .form-select,
.inv-field-group .customer-autocomplete > input,
.inv-field-group .customer-autocomplete .input-wrap > .form-control,
.inv-field-group .supplier-autocomplete > input,
.inv-field-group .supplier-autocomplete .input-wrap > .form-control {
    padding-inline-start: 2.35rem;
    border-radius: 0.65rem;
    border-color: #dbe3f0;
}

.inv-field-group.inv-field-group-textarea .inv-field-icon {
    top: 0.85rem;
    transform: none;
}

.inv-field-group.inv-field-group-textarea .form-control {
    min-height: 88px;
}

.inv-settings-card {
    height: 100%;
}

.inv-settings-card.is-collapsed {
    height: auto;
}

.inv-settings-toggle {
    cursor: pointer;
    user-select: none;
}

.inv-settings-toggle:hover {
    background: linear-gradient(to left, #f0f4ff, #fff);
}

.inv-settings-chevron {
    color: #94a3b8;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.inv-settings-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inv-settings-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.inv-settings-group-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.inv-settings-group-title i {
    color: #667eea;
    font-size: 0.95rem;
}

.inv-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.inv-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    background: #f8f9fc;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.inv-settings-row:hover {
    background: #f0f4ff;
    border-color: #e0e7ff;
}

.inv-settings-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
}

.inv-settings-label i {
    color: #667eea;
    font-size: 1.05rem;
}

.inv-settings-card .form-switch .form-check-input,
.inv-settings-modal .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.3rem;
    cursor: pointer;
}

.inv-settings-card .form-switch .form-check-input:checked,
.inv-settings-modal .form-switch .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

.inv-settings-extras {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #e2e8f0;
}

.inv-settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.inv-settings-trigger-badge {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
}

.inv-settings-modal-backdrop {
    z-index: 1050;
}

.inv-settings-modal-root {
    z-index: 1055;
}

.inv-settings-dialog {
    max-width: 640px;
    margin: 0.75rem auto;
}

.inv-settings-dialog.is-wide {
    max-width: 980px;
}

.inv-settings-dialog .modal-content {
    max-height: calc(100vh - 1.5rem);
}

.inv-settings-modal {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

.inv-settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
}

.inv-settings-modal-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.inv-settings-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.7rem;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.inv-settings-modal-header .modal-title {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
}

.inv-settings-modal-sub {
    margin-top: 0.05rem;
    color: #94a3b8;
    font-size: 0.7rem;
}

.inv-settings-modal-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.inv-settings-modal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.inv-settings-modal-chip.is-saving {
    background: #f8fafc;
    color: #64748b;
}

.inv-settings-modal .modal-body {
    padding: 0;
    background: linear-gradient(to bottom, #f8f9fc, #fff);
}

.inv-settings-modal-footer {
    display: block;
    border-top: 1px solid #eef2f7;
    padding: 0.7rem 0.85rem;
    background: #fff;
}

.inv-settings-sheet {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.15rem 0;
}

.inv-settings-sheet-wide {
    padding: 0.85rem 0.95rem 0.75rem;
}

.inv-settings-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.inv-settings-col {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.65rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-height: 100%;
}

.inv-settings-col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: #f8f9fc;
    border-bottom: 1px solid #e9ecef;
    color: #495057;
    font-size: 0.82rem;
    font-weight: 700;
}

.inv-settings-col-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.inv-settings-col-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.45rem 0.55rem;
}

.inv-settings-col-body .inv-settings-flat-row {
    padding: 0.45rem 0.4rem;
}

.inv-settings-col-body .inv-settings-inline-field {
    margin: 0.15rem 0.35rem 0.45rem;
}

.inv-settings-block {
    padding: 0.65rem 0.95rem 0.75rem;
    border-bottom: 1px solid #eef2f7;
}

.inv-settings-block:last-child {
    border-bottom: none;
}

.inv-settings-block-title {
    margin-bottom: 0.45rem;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.inv-settings-flat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.05rem 2rem;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 0.75rem;
    padding: 0.05rem 0.35rem;
}

.inv-settings-flat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.4rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.inv-settings-flat-row:hover {
    background: #f8fafc;
}

.inv-settings-flat-row.is-on .inv-settings-flat-icon {
    background: #dbeafe;
    color: #2563eb;
}

.inv-settings-flat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.45rem;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.inv-settings-flat-text {
    flex: 1;
    min-width: 0;
    color: #1e293b;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.inv-settings-flat-row .form-switch {
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.inv-settings-modal .form-switch .form-check-input {
    width: 2.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.inv-settings-modal .form-switch .form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

.inv-settings-inline-field {
    margin-top: 0.55rem;
}

.inv-settings-field-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

.inv-settings-inline-field .form-select,
.inv-settings-inline-field .form-control {
    border-radius: 0.55rem;
    border-color: #e2e8f0;
    background: #fff;
    min-height: 2.15rem;
    font-size: 0.85rem;
}

.inv-settings-inline-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.inv-settings-inline-field-row .form-control {
    max-width: 180px;
}

.inv-settings-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.3rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
}

.inv-settings-segment-footer {
    width: 100%;
}

.inv-settings-segment-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.75rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.55);
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.inv-settings-segment-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inv-settings-segment-item i {
    font-size: 1.05rem;
}

.inv-settings-segment-item.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.inv-settings-segment-item.is-active i {
    color: #fff;
}

.inv-settings-segment-item:hover:not(.is-active) {
    color: #1e40af;
    background: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}

@media (max-width: 991.98px) {
    .inv-settings-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .inv-settings-dialog,
    .inv-settings-dialog.is-wide {
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .inv-settings-cols,
    .inv-settings-flat-grid,
    .inv-settings-segment {
        grid-template-columns: 1fr;
    }

    .inv-settings-modal-chip {
        display: none;
    }

    .inv-settings-segment-item {
        font-size: 0.75rem;
        padding: 0.65rem 0.4rem;
    }
}

.inv-settings-persist {
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #e2e8f0;
}

.inv-settings-persist-modal .inv-settings-persist-options {
    flex-direction: row;
    flex-wrap: wrap;
}

.inv-settings-persist-modal .inv-settings-persist-option {
    flex: 1 1 220px;
}
.inv-settings-persist-panel {
    margin-top: 1rem;
}

.inv-settings-persist-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.inv-settings-persist-title i {
    color: #667eea;
    font-size: 1rem;
}

.inv-settings-persist-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.inv-settings-persist-option {
    display: block;
    margin: 0;
    cursor: pointer;
}

.inv-settings-persist-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inv-settings-persist-option-body {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.inv-settings-persist-option-body > i {
    color: #94a3b8;
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.inv-settings-persist-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.inv-settings-persist-option-text strong {
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.inv-settings-persist-option-text small {
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.35;
}

.inv-settings-persist-option:hover .inv-settings-persist-option-body {
    border-color: #c7d2fe;
    background: #f8faff;
}

.inv-settings-persist-option.is-active .inv-settings-persist-option-body {
    border-color: #667eea;
    background: #eef2ff;
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.15);
}

.inv-settings-persist-option.is-active .inv-settings-persist-option-body > i {
    color: #667eea;
}

.inv-settings-persist-option.is-active .inv-settings-persist-option-text strong {
    color: #4338ca;
}

.settings-scope-hint {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.settings-scope-hint i {
    margin-inline-end: 0.2rem;
}

.invoice-lines-section.inv-lines-flat {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.invoice-lines-section.inv-lines-flat .invoice-lines-header {
    margin-bottom: 0.9rem;
}

.invoice-lines-section.inv-lines-flat .invoice-lines-header .btn-add-line {
    margin-inline-start: auto;
}

.invoice-lines-section.inv-lines-flat .invoice-lines-footer {
    justify-content: flex-start;
}

.invoice-lines-section.inv-lines-flat .lines-summary {
    color: #64748b;
    font-size: 0.875rem;
}

.inv-tot-card {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 0.75rem;
    box-shadow: 0 3px 12px -10px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.inv-tot-body {
    padding: 0.55rem 0.75rem 0.15rem;
}

.inv-tot-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.inv-tot-metrics-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inv-tot-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    min-width: 0;
}

.inv-tot-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.inv-tot-metric-label i {
    font-size: 0.85rem;
    flex-shrink: 0;
    color: #94a3b8;
}

.inv-tot-metric-label i.is-items,
.inv-tot-chip i.is-items,
.inv-tot-metric-label i.is-qty,
.inv-tot-chip i.is-qty,
.inv-tot-metric-label i.is-subtotal,
.inv-tot-chip i.is-subtotal { color: #94a3b8; }

.inv-tot-metric-value {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
    line-height: 1.2;
    flex-shrink: 0;
}

.inv-tot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0.1rem;
    border-top: 1px solid #f1f5f9;
}

.inv-tot-row-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}

.inv-tot-row-label i {
    font-size: 0.9rem;
}

.inv-tot-row-label i.is-discount,
.inv-tot-chip i.is-discount { color: #d97706; }
.inv-tot-row-label i.is-receive,
.inv-tot-chip i.is-receive { color: #059669; }
.inv-tot-row-label i.is-remain,
.inv-tot-chip i.is-remain { color: #e11d48; }

.inv-tot-row-value {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.inv-tot-row-value.is-discount,
.inv-tot-chip-value.is-discount {
    color: #dc3545;
}

.inv-tot-row.is-discount .discount-formula-wrap {
    width: 9.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.inv-tot-discount-input {
    width: 100%;
    max-width: none;
    height: 30px;
    font-size: 0.78rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.45rem;
    border-color: #e2e8f0;
    background: #fff;
    direction: ltr;
    text-align: left;
}

.inv-tot-discount-input::placeholder {
    color: #94a3b8;
    opacity: 1;
    font-size: 0.72rem;
}

/* Legacy chip layout (refund card & older markup) */
.inv-tot-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.35rem;
    padding: 0.55rem 0.75rem 0.15rem;
}

.inv-tot-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    font-size: 0.75rem;
    line-height: 1.2;
}

.inv-tot-chip i {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.inv-tot-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.inv-tot-chip-value {
    color: #0f172a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
}

.inv-tot-chip.is-input {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.inv-tot-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0.5rem 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.55rem;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.inv-tot-final-start {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.inv-tot-final-icon {
    display: none;
}

.inv-tot-final-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.inv-tot-final-amount-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}

.inv-tot-final-amount {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.inv-tot-final-currency {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.04em;
}

@media (max-width: 991.98px) {
    .inv-form-toolbar {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .inv-tot-metrics {
        grid-template-columns: 1fr;
    }

    .inv-tot-row.is-discount .discount-formula-wrap {
        width: 8.5rem;
    }

    .inv-tot-final {
        margin-inline: 0.4rem;
    }

    .inv-tot-final-amount {
        font-size: 1.05rem;
    }

    .inv-toolbar-actions {
        width: 100%;
    }

    .inv-toolbar-btn {
        flex: 1;
        justify-content: center;
    }
}

/* From: Invoices/EditInvoice.razor */
.inv-page-header { display: flex; align-items: center; gap: 1rem; }
    .inv-header-icon {
        width: 48px; height: 48px; border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }
    .inv-form-card { border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
    .inv-form-section { background: linear-gradient(to bottom, #f8f9fc, #fff); border-radius: 0.5rem; }
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    .btn-submit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
    .inv-section-title {
        display: flex; align-items: center; gap: 0.5rem;
        font-weight: 600; color: #334155; margin-bottom: 0.75rem;
    }
    .inv-section-title i { color: #667eea; font-size: 1.1rem; }


/* --------------------------------------------------------------------------
   Purchases
   -------------------------------------------------------------------------- */

/* From: Purchases/AddPurchase.razor */
.inv-page-header { display: flex; align-items: center; gap: 1rem; }
    .inv-header-icon {
        width: 48px; height: 48px; border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }
    .inv-form-card { border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
    .inv-form-section { background: linear-gradient(to bottom, #f8f9fc, #fff); border-radius: 0.5rem; }
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    .btn-submit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
    .btn-submit:hover { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
    .inv-section-title {
        display: flex; align-items: center; gap: 0.5rem;
        font-weight: 600; color: #334155; margin-bottom: 0.75rem;
    }
    .inv-section-title i { color: #667eea; font-size: 1.1rem; }
    .purchase-total-bar {
        background: #f0f4ff; border-radius: 0.5rem; padding: 1rem 1.25rem;
    }
    .purchase-total-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.35rem 0;
    }
    .purchase-total-row.final {
        border-top: 1px dashed #c7d2fe; margin-top: 0.5rem; padding-top: 0.75rem;
    }
    .purchase-total-value { font-size: 1.5rem; font-weight: 700; color: #667eea; }
    .purchase-total-discount-input { max-width: 160px; text-align: end; }

/* From: Purchases/Components/PurchaseBoxingQtyFields.razor */
.boxing-qty-compact-row {

        display: flex;

        align-items: center;

        gap: 0.35rem;

    }



    .boxing-qty-compact-row input {

        min-width: 0;

        flex: 1;

    }



    .boxing-qty-full-row {

        display: flex;

        align-items: flex-end;

        gap: 0.5rem;

    }



    .boxing-qty-hint {

        font-size: 0.7rem;

        white-space: nowrap;

        flex-shrink: 0;

    }



    .boxing-qty-hint-full {

        margin-bottom: 0.25rem;

    }

/* From: Purchases/Components/PurchaseFormSettingsPanel.razor */
.purchase-settings-panel {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .purchase-settings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: linear-gradient(to left, #f8f9fc, #fff);
        cursor: pointer;
        user-select: none;
    }

    .purchase-settings-header .title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #475569;
        font-size: 0.9rem;
    }

    .purchase-settings-header .title i {
        color: #667eea;
    }

    .purchase-settings-body {
        padding: 1rem 1.15rem;
        border-top: 1px dashed #e2e8f0;
    }

    .settings-toggle-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 2rem;
        margin-bottom: 0.75rem;
    }

    .settings-toggle-row .form-check {
        min-width: 200px;
    }

    .settings-invoice-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: end;
        padding-top: 0.75rem;
        border-top: 1px dashed #f1f5f9;
    }

    .settings-saving-hint {
        font-size: 0.75rem;
        color: #94a3b8;
    }

/* From: Purchases/Components/PurchaseLineFields.razor */
.purchase-lines-section {

        background: linear-gradient(to bottom, #f8f9fc, #fff);

        border: 1px solid #e2e8f0;

        border-radius: 0.75rem;

        padding: 1.25rem;

    }



    .purchase-lines-header {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 1rem;

        margin-bottom: 1.25rem;

        padding-bottom: 1rem;

        border-bottom: 1px dashed #e2e8f0;

    }



    .purchase-lines-header .title-wrap {

        display: flex;

        align-items: center;

        gap: 0.5rem;

        font-weight: 600;

        color: #334155;

    }



    .purchase-lines-header .title-wrap i {

        color: #667eea;

        font-size: 1.2rem;

    }



    .barcode-scan-wrap {

        display: flex;

        align-items: center;

        gap: 0.5rem;

        min-width: 260px;

        flex: 1;

        max-width: 380px;

    }



    .barcode-scan-wrap .form-control {

        border-radius: 0.5rem;

        border-color: #cbd5e1;

    }



    .barcode-scan-wrap .form-control:focus {

        border-color: #667eea;

        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.2);

    }



    .purchase-lines-table-wrap {

        border-radius: 0.5rem;

        overflow: visible;

        border: 1px solid #e9ecef;

    }



    .purchase-lines-table-wrap.table-responsive {

        overflow: visible;

    }



    .purchase-lines-section:has(.item-autocomplete:focus-within),
    .purchase-lines-section:has(.item-autocomplete .options) {

        position: relative;

        z-index: 20;

    }



    .purchase-lines-table thead.table-light th {

        background-color: #f8f9fc;

        font-weight: 600;

        color: #334155;

        border-bottom: 2px solid #e9ecef;

        white-space: nowrap;

        font-size: 0.8125rem;

        vertical-align: middle;

    }



    .purchase-lines-table tbody tr {

        position: relative;

        z-index: 0;

        transition: background-color 0.15s ease;

    }



    .purchase-lines-table tbody tr:has(.item-autocomplete:focus-within),
    .purchase-lines-table tbody tr:has(.item-autocomplete .options) {

        z-index: 5;

    }



    .purchase-lines-table tbody tr:hover:not(.purchase-line-serial-row) {

        background-color: #f0f4ff;

    }



    .purchase-lines-table tbody tr:nth-child(4n+1):not(.purchase-line-serial-row),

    .purchase-lines-table tbody tr:nth-child(4n+2):not(.purchase-line-serial-row) {

        background-color: #fafbfc;

    }



    .purchase-lines-table td {

        vertical-align: middle;

        padding: 0.5rem 0.45rem;

    }



    .purchase-lines-table .col-index {

        width: 2.5rem;

        text-align: center;

    }



    .purchase-lines-table tbody .col-index {

        color: #64748b;

        font-weight: 600;

        font-size: 0.8125rem;

    }



    .purchase-lines-table .col-item {

        min-width: 220px;

        overflow: visible;

    }



    .purchase-lines-table .col-inventory {

        min-width: 130px;

    }



    .purchase-lines-table .col-qty {

        min-width: 200px;

    }



    .qty-inline-row {

        display: flex;

        align-items: center;

        gap: 0.35rem;

    }



    .qty-inline-row input {

        flex: 1;

        min-width: 0;

    }



    .qty-inline-row .boxing-qty-hint {

        font-size: 0.7rem;

        white-space: nowrap;

        flex-shrink: 0;

    }



    .purchase-lines-table .col-cost,

    .purchase-lines-table .col-discount {

        min-width: 110px;

    }



    .purchase-lines-table .col-total {

        min-width: 85px;

        text-align: center;

    }



    .purchase-lines-table .col-expiry {

        min-width: 130px;

    }



    .purchase-lines-table .col-actions {

        width: 52px;

        text-align: center;

    }



    .line-total-value {

        font-weight: 700;

        color: #667eea;

        font-size: 0.9375rem;

    }



    .purchase-line-serial-row td {

        background: #f1f5f9 !important;

        border-top: 1px dashed #cbd5e1 !important;

        padding: 0.65rem 0.75rem;

    }



    .serial-panel-title {

        font-size: 0.8rem;

        font-weight: 600;

        color: #475569;

        margin-bottom: 0.5rem;

    }



    .purchase-lines-footer {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 1rem;

        margin-top: 0.5rem;

        padding-top: 1rem;

        border-top: 1px dashed #e2e8f0;

    }



    .btn-add-line {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: none;
        border-radius: 999px;
        padding: 0.55rem 1.4rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #fff;
        background-image: linear-gradient(135deg, #667eea 0%, #7c5ac9 55%, #764ba2 100%);
        box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
        transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }

    .btn-add-line i {
        font-size: 1.05rem;
        line-height: 1;
    }

    .btn-add-line:hover,
    .btn-add-line:focus-visible {
        color: #fff;
        filter: brightness(1.06);
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(102, 126, 234, 0.45);
    }

    .btn-add-line:focus:not(:hover) {
        outline: none;
        box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35), 0 0 0 0.2rem rgba(102, 126, 234, 0.28);
    }

    .btn-add-line:active {
        transform: translateY(0);
        box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
    }

    .btn-add-line:disabled,
    .btn-add-line.disabled {
        filter: grayscale(0.35);
        opacity: 0.65;
        transform: none;
        box-shadow: none;
    }



    .lines-summary {

        font-size: 0.875rem;

        color: #64748b;

    }



    .lines-summary strong {

        color: #667eea;

    }



    .empty-lines-hint {

        text-align: center;

        padding: 2rem 1rem;

        color: #94a3b8;

    }



    .empty-lines-hint i {

        font-size: 2.5rem;

        display: block;

        margin-bottom: 0.5rem;

        color: #cbd5e1;

    }



    @media (max-width: 768px) {

        .barcode-scan-wrap { max-width: 100%; }

    }

/* From: Purchases/EditPurchase.razor */
.inv-page-header { display: flex; align-items: center; gap: 1rem; }
    .inv-header-icon {
        width: 48px; height: 48px; border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }
    .inv-form-card { border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
    .inv-form-section { background: linear-gradient(to bottom, #f8f9fc, #fff); border-radius: 0.5rem; }
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    .btn-submit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
    .inv-section-title {
        display: flex; align-items: center; gap: 0.5rem;
        font-weight: 600; color: #334155; margin-bottom: 0.75rem;
    }
    .inv-section-title i { color: #667eea; font-size: 1.1rem; }
    .purchase-total-bar {
        background: #f0f4ff; border-radius: 0.5rem; padding: 1rem 1.25rem;
    }
    .purchase-total-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.35rem 0;
    }
    .purchase-total-row.final {
        border-top: 1px dashed #c7d2fe; margin-top: 0.5rem; padding-top: 0.75rem;
    }
    .purchase-total-value { font-size: 1.5rem; font-weight: 700; color: #667eea; }
    .purchase-total-discount-input { max-width: 160px; text-align: end; }


/* --------------------------------------------------------------------------
   Inventories
   -------------------------------------------------------------------------- */

/* From: Inventories/CurrentQuantitiesReport.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-summary-card {
        border-right: 4px solid #667eea;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .inv-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .inv-summary-card.warning {
        border-right-color: #ffc107;
    }

    .inv-summary-card.danger {
        border-right-color: #dc3545;
    }

    .inv-summary-card.success {
        border-right-color: #28a745;
    }

    .inv-summary-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #667eea;
        line-height: 1;
    }

    .inv-summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .inv-filter-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .inv-table-wrap {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .inv-table thead th {
        background-color: #f8f9fc;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .inv-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .inv-table tbody tr:hover {
        background-color: #f0f4ff;
    }

    .inv-table tbody tr.row-below-critical {
        background-color: #fff8e1;
    }

    .inv-table tbody tr.row-zero {
        background-color: #f8f9fa;
        color: #6c757d;
    }

    .inv-sortable {
        cursor: pointer;
        user-select: none;
    }

    .inv-sortable:hover {
        color: #667eea;
    }

    .inv-sort-icon {
        font-size: 0.75rem;
        opacity: 0.4;
        margin-right: 4px;
    }

    .inv-sort-icon.active {
        opacity: 1;
        color: #667eea;
    }

    .inv-qty-cell {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    .inv-empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .inv-empty-icon {
        font-size: 3.5rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    @media print {
        .no-print {
            display: none !important;
        }

        .inv-table thead th {
            background-color: #eee !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }

    @media only screen and (max-width: 768px) {
        .inv-summary-value {
            font-size: 1.35rem;
        }
    }

/* From: Inventories/Inventories.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-summary-card {
        border-right: 4px solid #667eea;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .inv-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .inv-summary-value {
        font-size: 2rem;
        font-weight: 700;
        color: #667eea;
        line-height: 1;
    }

    .inv-summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .inv-filter-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .inv-table-wrap {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .inv-table thead th {
        background-color: #f8f9fc;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .inv-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .inv-table tbody tr:hover {
        background-color: #f0f4ff;
    }

    .inv-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    .inv-table tbody tr:nth-child(even):hover {
        background-color: #f0f4ff;
    }

    .inv-sortable {
        cursor: pointer;
        user-select: none;
    }

    .inv-sortable:hover {
        color: #667eea;
    }

    .inv-sort-icon {
        font-size: 0.75rem;
        opacity: 0.4;
        margin-right: 4px;
    }

    .inv-sort-icon.active {
        opacity: 1;
        color: #667eea;
    }

    .inv-action-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.15s ease;
    }

    .inv-action-btn:hover {
        transform: scale(1.08);
    }

    .inv-empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .inv-empty-icon {
        font-size: 3.5rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    .inv-modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-bottom: none;
    }

    .inv-modal-header .btn-close {
        filter: brightness(0) invert(1);
    }

    .inv-modal-header .modal-title {
        font-weight: 600;
    }

    .inv-view-label {
        font-weight: 600;
        color: #6c757d;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.25rem;
    }

    .inv-view-value {
        font-size: 1rem;
        color: #212529;
        padding: 0.5rem 0.75rem;
        background: #f8f9fc;
        border-radius: 0.375rem;
        margin-bottom: 1rem;
    }

    .inv-skeleton {
        height: 40px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: inv-shimmer 1.5s ease-in-out infinite;
        margin-bottom: 0.5rem;
    }

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

    @media only screen and (max-width: 768px) {
        .inv-action-btn {
            width: 28px;
            height: 28px;
            font-size: 0.8rem;
        }

        .inv-summary-value {
            font-size: 1.5rem;
        }
    }

/* From: Inventories/Items/ItemForm.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-form-card {
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .inv-form-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .btn-submit {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }

        .btn-submit:hover {
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

    .tab-sections-nav .nav-link {
        color: #6c757d;
        font-weight: 500;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 0.75rem 1.25rem;
    }

        .tab-sections-nav .nav-link:hover {
            color: #667eea;
            border-color: transparent;
        }

        .tab-sections-nav .nav-link.active {
            color: #667eea;
            background: transparent;
            border-bottom-color: #667eea;
        }

    .item-type-radios {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding-top: 0.35rem;
    }

        .item-type-radios .form-check {
            margin-bottom: 0;
        }

    .item-image-preview {
        max-width: 160px;
        max-height: 160px;
        border-radius: 0.5rem;
        border: 1px solid #e9ecef;
        object-fit: cover;
    }

    .serial-upload-link {
        color: #667eea;
        cursor: pointer;
        text-decoration: underline;
    }

        .serial-upload-link:hover {
            color: #764ba2;
        }

    .inv-section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.75rem;
    }

        .inv-section-title i {
            color: #667eea;
            font-size: 1.1rem;
        }

    .inv-pricing-fields {
        padding: 1rem 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

        .inv-pricing-fields .form-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: #475569;
            margin-bottom: 0.35rem;
        }

    .inv-quantities-fields {
        padding: 1rem 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        height: 100%;
    }

        .inv-quantities-fields .form-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: #475569;
            margin-bottom: 0.35rem;
        }

    .inv-split-panels-row {
        align-items: stretch;
    }

        .inv-split-panels-row .inv-pricing-fields {
            height: 100%;
        }

    .inv-general-fields {
        padding: 1rem 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        height: 100%;
    }

        .inv-general-fields .form-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: #475569;
            margin-bottom: 0.35rem;
        }

        .inv-split-panels-row .inv-general-fields {
            height: 100%;
        }

    .inv-boxing-price-hint {
        display: block;
        margin-top: 0.35rem;
        padding: 0.45rem 0.65rem;
        background: #f8fafc;
        border-radius: 0.375rem;
        border-right: 3px solid #667eea;
        font-size: 0.8125rem;
        color: #64748b;
    }

    .inv-item-name-strip {
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

        .inv-item-name-strip .inv-section-title {
            margin-bottom: 0.65rem;
        }

    .inv-item-name-input {
        font-size: 1.05rem;
        padding: 0.65rem 1rem;
    }

    .inv-item-name-hint {
        display: block;
        margin-top: 0.4rem;
        font-size: 0.8125rem;
        color: #64748b;
    }

    .inv-tabs-region {
        padding-top: 0.25rem;
    }

    .inv-checkbox-group {
        padding: 0.85rem 1rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
    }

        .inv-checkbox-group .d-flex {
            gap: 1.5rem;
        }

    .inv-meta-strip {
        margin-bottom: 1.25rem;
        padding: 0.9rem;
        background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }

    .inv-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .inv-meta-card {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-height: 64px;
        padding: 0.7rem 0.8rem;
        border: 1px solid #dbe7ff;
        border-radius: 0.65rem;
        background: #fff;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .inv-meta-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
    }

    .inv-meta-icon {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #3b82f6;
        background: #eff6ff;
        border: 1px solid #dbeafe;
        flex-shrink: 0;
    }

    .inv-meta-content {
        min-width: 0;
    }

    .inv-meta-label {
        font-size: 0.72rem;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 0.1rem;
    }

    .inv-meta-value {
        font-size: 0.92rem;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.2;
    }

    @media (max-width: 768px) {
        .inv-meta-grid {
            grid-template-columns: 1fr;
        }
    }

    .inv-action-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

/* From: Inventories/Items/Items.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-summary-card {
        border-right: 4px solid #667eea;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .inv-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .inv-summary-value {
        font-size: 2rem;
        font-weight: 700;
        color: #667eea;
        line-height: 1;
    }

    .inv-summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .inv-filter-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .inv-table-wrap {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .inv-table thead th {
        background-color: #f8f9fc;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .inv-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .inv-table tbody tr:hover {
        background-color: #f0f4ff;
    }

    .inv-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    .inv-table tbody tr:nth-child(even):hover {
        background-color: #f0f4ff;
    }

    .inv-sortable {
        cursor: pointer;
        user-select: none;
    }

    .inv-sortable:hover {
        color: #667eea;
    }

    .inv-sort-icon {
        font-size: 0.75rem;
        opacity: 0.4;
        margin-right: 4px;
    }

    .inv-sort-icon.active {
        opacity: 1;
        color: #667eea;
    }

    .inv-action-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.15s ease;
    }

    .inv-action-btn:hover {
        transform: scale(1.08);
    }

    .inv-empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .inv-empty-icon {
        font-size: 3.5rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    .inv-modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-bottom: none;
    }

    .inv-modal-header .btn-close {
        filter: brightness(0) invert(1);
    }

    .inv-modal-header .modal-title {
        font-weight: 600;
    }

    .inv-view-label {
        font-weight: 600;
        color: #6c757d;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.25rem;
    }

    .inv-view-value {
        font-size: 1rem;
        color: #212529;
        padding: 0.5rem 0.75rem;
        background: #f8f9fc;
        border-radius: 0.375rem;
        margin-bottom: 1rem;
    }

    .inv-skeleton {
        height: 40px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: inv-shimmer 1.5s ease-in-out infinite;
        margin-bottom: 0.5rem;
    }

    .inv-serials-section {
        border-top: 1px solid #e9ecef;
        margin-top: 1rem;
        padding-top: 1rem;
    }

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

    @media only screen and (max-width: 768px) {
        .inv-action-btn {
            width: 28px;
            height: 28px;
            font-size: 0.8rem;
        }

        .inv-summary-value {
            font-size: 1.5rem;
        }
    }

/* From: Inventories/Items/ItemSalePrices.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-summary-card {
        border-right: 4px solid #667eea;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .inv-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .inv-summary-value {
        font-size: 2rem;
        font-weight: 700;
        color: #667eea;
        line-height: 1;
    }

    .inv-summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .inv-filter-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .inv-table-wrap {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .inv-table thead th {
        background-color: #f8f9fc;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .inv-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .inv-table tbody tr:hover {
        background-color: #f0f4ff;
    }

    .inv-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    .inv-table tbody tr:nth-child(even):hover {
        background-color: #f0f4ff;
    }

    .inv-sortable {
        cursor: pointer;
        user-select: none;
    }

    .inv-sortable:hover {
        color: #667eea;
    }

    .inv-sort-icon {
        font-size: 0.75rem;
        opacity: 0.4;
        margin-right: 4px;
    }

    .inv-sort-icon.active {
        opacity: 1;
        color: #667eea;
    }

    .inv-empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .inv-empty-icon {
        font-size: 3.5rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    .inv-skeleton {
        height: 40px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: inv-shimmer 1.5s ease-in-out infinite;
        margin-bottom: 0.5rem;
    }

    .inv-price-cell {
        font-variant-numeric: tabular-nums;
        font-weight: 500;
    }

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

    @media only screen and (max-width: 768px) {
        .inv-summary-value {
            font-size: 1.5rem;
        }
    }


/* --------------------------------------------------------------------------
   Customers
   -------------------------------------------------------------------------- */

/* From: Customers/AddCustomer.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

/* From: Customers/CustomerForm.razor */
.inv-form-card {
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .inv-form-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .btn-submit {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }

    .btn-submit:hover {
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .tab-sections-nav .nav-link {
        color: #6c757d;
        font-weight: 500;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 0.75rem 1.25rem;
    }

    .tab-sections-nav .nav-link:hover {
        color: #667eea;
        border-color: transparent;
    }

    .tab-sections-nav .nav-link.active {
        color: #667eea;
        background: transparent;
        border-bottom-color: #667eea;
    }

    .inv-section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.75rem;
    }

    .inv-section-title i {
        color: #667eea;
        font-size: 1.1rem;
    }

    .inv-general-fields,
    .inv-pricing-fields {
        padding: 1rem 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        height: 100%;
    }

    .inv-general-fields .form-label,
    .inv-pricing-fields .form-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.35rem;
    }

    .inv-item-name-input {
        font-size: 1.05rem;
        padding: 0.65rem 1rem;
    }

    .inv-tabs-region {
        padding-top: 0.25rem;
    }

    .inv-split-panels-row {
        align-items: stretch;
    }

/* From: Customers/Customers.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-summary-card {
        border-right: 4px solid #667eea;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .inv-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .inv-summary-value {
        font-size: 2rem;
        font-weight: 700;
        color: #667eea;
        line-height: 1;
    }

    .inv-summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .inv-filter-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .inv-table-wrap {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .inv-table thead th {
        background-color: #f8f9fc;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .inv-table tbody tr {
        transition: background-color 0.15s ease;
        cursor: pointer;
    }

    .inv-table tbody tr:hover {
        background-color: #f0f4ff;
    }

    .inv-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    .inv-table tbody tr:nth-child(even):hover {
        background-color: #f0f4ff;
    }

    .inv-sortable {
        cursor: pointer;
        user-select: none;
    }

    .inv-sortable:hover {
        color: #667eea;
    }

    .inv-sort-icon {
        font-size: 0.75rem;
        opacity: 0.4;
        margin-right: 4px;
    }

    .inv-sort-icon.active {
        opacity: 1;
        color: #667eea;
    }

    .inv-empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .inv-empty-icon {
        font-size: 3.5rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    .inv-skeleton {
        height: 40px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: inv-shimmer 1.5s ease-in-out infinite;
        margin-bottom: 0.5rem;
    }

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


/* --------------------------------------------------------------------------
   Suppliers
   -------------------------------------------------------------------------- */

/* From: Suppliers/AddSupplier.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-form-card {
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .inv-form-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .btn-submit {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }

        .btn-submit:hover {
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

    .tab-sections-nav .nav-link {
        color: #6c757d;
        font-weight: 500;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 0.75rem 1.25rem;
    }

        .tab-sections-nav .nav-link:hover {
            color: #667eea;
            border-color: transparent;
        }

        .tab-sections-nav .nav-link.active {
            color: #667eea;
            background: transparent;
            border-bottom-color: #667eea;
        }

    .inv-section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.75rem;
    }

        .inv-section-title i {
            color: #667eea;
            font-size: 1.1rem;
        }

    .inv-general-fields {
        padding: 1rem 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        height: 100%;
    }

        .inv-general-fields .form-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: #475569;
            margin-bottom: 0.35rem;
        }

    .inv-pricing-fields {
        padding: 1rem 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.625rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        height: 100%;
    }

        .inv-pricing-fields .form-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: #475569;
            margin-bottom: 0.35rem;
        }

    .inv-split-panels-row {
        align-items: stretch;
    }

        .inv-split-panels-row .inv-general-fields,
        .inv-split-panels-row .inv-pricing-fields {
            height: 100%;
        }

    .inv-item-name-input {
        font-size: 1.05rem;
        padding: 0.65rem 1rem;
    }

    .inv-tabs-region {
        padding-top: 0.25rem;
    }

/* From: Suppliers/Suppliers.razor */
.inv-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .inv-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }

    .inv-summary-card {
        border-right: 4px solid #667eea;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .inv-summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .inv-summary-value {
        font-size: 2rem;
        font-weight: 700;
        color: #667eea;
        line-height: 1;
    }

    .inv-summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .inv-filter-section {
        background: linear-gradient(to bottom, #f8f9fc, #fff);
        border-radius: 0.5rem;
    }

    .inv-table-wrap {
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .inv-table thead th {
        background-color: #f8f9fc;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }

    .inv-table tbody tr {
        transition: background-color 0.15s ease;
    }

    .inv-table tbody tr:hover {
        background-color: #f0f4ff;
    }

    .inv-table tbody tr:nth-child(even) {
        background-color: #fafbfc;
    }

    .inv-table tbody tr:nth-child(even):hover {
        background-color: #f0f4ff;
    }

    .inv-sortable {
        cursor: pointer;
        user-select: none;
    }

    .inv-sortable:hover {
        color: #667eea;
    }

    .inv-sort-icon {
        font-size: 0.75rem;
        opacity: 0.4;
        margin-right: 4px;
    }

    .inv-sort-icon.active {
        opacity: 1;
        color: #667eea;
    }

    .inv-empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .inv-empty-icon {
        font-size: 3.5rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    .inv-skeleton {
        height: 40px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: inv-shimmer 1.5s ease-in-out infinite;
        margin-bottom: 0.5rem;
    }

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


/* --------------------------------------------------------------------------
   Money
   -------------------------------------------------------------------------- */

/* From: Money/CashAccountsReport.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .summary-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .balance-positive {
        color: #28a745;
        font-weight: 600;
    }

    .balance-negative {
        color: #dc3545;
        font-weight: 600;
    }

    .balance-zero {
        color: #6c757d;
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

/* From: Money/CashAccountStatement.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .summary-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .statement-table {
        font-size: 0.9rem;
    }

        .statement-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            white-space: nowrap;
        }

        .statement-table td {
            vertical-align: middle;
        }

    .transaction-type-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .balance-positive {
        color: #28a745;
        font-weight: 600;
    }

    .balance-negative {
        color: #dc3545;
        font-weight: 600;
    }

    .balance-zero {
        color: #6c757d;
    }

    .account-info-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

/* From: Money/CashTransfers.razor */
@media only screen and (max-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
            float: left;
        }
    }

    @media only screen and (min-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    /* Filter Section Improvements */
    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .filter-group {
        margin-bottom: 1rem;
    }

    .filter-group:last-child {
        margin-bottom: 0;
    }

    .filters-collapsible {
        margin-bottom: 10px;
    }

/* From: Money/FinancialDashboard.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .summary-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

    .summary-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 50%, #ffd700 100%);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

/* From: Money/FinancialDetailedReport.razor */
.filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .summary-pill {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .summary-pill .badge {
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
    }

/* From: Money/FinancialSummaryReport.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .summary-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

    .summary-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 50%, #ffd700 100%);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

    @media print {
        .no-print {
            display: none !important;
        }
        .page-header-breadcrumb {
            margin-top: 0 !important;
        }
    }

/* From: Money/Payables.razor */
@media only screen and (max-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
            float: left;
        }
    }

    @media only screen and (min-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    /* Filter Section Improvements */
    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .filter-group {
        margin-bottom: 1rem;
    }

        .filter-group:last-child {
            margin-bottom: 0;
        }

    .filters-collapsible {
        margin-bottom: 10px;
    }

/* From: Money/PayablesRevenuesAnalysis.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .summary-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

    .summary-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 50%, #ffd700 100%);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

/* From: Money/Purchases.razor */
@media only screen and (max-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
            float: left;
        }
    }

    @media only screen and (min-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
        }
    }


/* --------------------------------------------------------------------------
   Subscribers
   -------------------------------------------------------------------------- */

/* From: Subscribers/ActivationsReceivables/Activations.razor */
@media only screen and (max-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
            float: left;
        }
    }

    @media only screen and (min-width:768px) {
        .activeuser {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    /* Filter Section Improvements */
    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .filter-group {
        margin-bottom: 1rem;
    }

        .filter-group:last-child {
            margin-bottom: 0;
        }

    .filter-group-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }

    .form-select, .form-control {
        border-radius: 6px;
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
    }

        .form-select:focus, .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

/* From: Subscribers/ActivationsReceivables/EditUserActivation.razor */
.autocomplete {
        position: relative;
    }

        .autocomplete .options {
            position: absolute;
            top: 60px;
            left: 0;
            background: white;
            width: 100%;
            padding: 0;
            z-index: 10;
            border: 1px solid #ced4da;
            border-radius: 0.5rem;
            box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: scroll;
        }

        .autocomplete .option {
            display: block;
            padding: 0.25rem;
        }

            .autocomplete .option .option-text {
                padding: 0.25rem 0.5rem;
            }

            .autocomplete .option:hover {
                background: #1E90FF;
                color: #fff;
            }

            .autocomplete .option.disabled {
                background-color: lightgrey;
                cursor: not-allowed;
            }

                .autocomplete .option.disabled:hover {
                    background: lightgrey;
                    color: var(--bs-body);
                }





    @media only screen and (max-width:768px) {
        .wizard-body {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            padding-top: 1rem !important;
        }

        .fullNameMargin {
            margin-right: 0px;
        }
    }

    @media only screen and (min-width:768px) {
        .wizard-body {
            padding-left: 4rem !important;
            padding-right: 4rem !important;
        }

        .fullNameMargin {
            margin-right: 25px;
        }
    }

/* From: Subscribers/ActivationsReceivables/Receivables.razor */
/* Add New Button Styling */
    .activeuser {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-weight: 500;
        font-size: 0.9375rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        white-space: nowrap;
    }

        .activeuser:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            text-decoration: none;
        }

        .activeuser:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .activeuser i {
            font-size: 1rem;
            transition: transform 0.3s ease;
        }

        .activeuser:hover i {
            transform: scale(1.1);
        }

    @media only screen and (max-width:768px) {
        .activeuser {
            width: auto;
            min-width: 140px;
            margin-bottom: 0;
            font-size: 0.875rem;
            padding: 0.5rem 1rem;
        }
    }

    @media only screen and (min-width:769px) {
        .activeuser {
            min-width: 180px;
            margin-bottom: 0;
        }
    }

    /* Filter Section Improvements */
    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .filter-group {
        margin-bottom: 1rem;
    }

        .filter-group:last-child {
            margin-bottom: 0;
        }

    .filter-group-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }

    .form-select, .form-control {
        border-radius: 6px;
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
    }

        .form-select:focus, .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

    .filters-collapsible {
        margin-bottom: 10px;
    }

/* From: Subscribers/ActivationsReceivables/ReceiveFromUser.razor */
.autocomplete {
        position: relative;
    }

        .autocomplete .options {
            position: absolute;
            top: 60px;
            left: 0;
            background: white;
            width: 100%;
            padding: 0;
            z-index: 10;
            border: 1px solid #ced4da;
            border-radius: 0.5rem;
            box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: scroll;
        }

        .autocomplete .option {
            display: block;
            padding: 0.25rem;
        }

            .autocomplete .option .option-text {
                padding: 0.25rem 0.5rem;
            }

            .autocomplete .option:hover {
                background: #1E90FF;
                color: #fff;
            }

            .autocomplete .option.disabled {
                background-color: lightgrey;
                cursor: not-allowed;
            }

                .autocomplete .option.disabled:hover {
                    background: lightgrey;
                    color: var(--bs-body);
                }

/* From: Subscribers/ActivationsReceivables/UserActivation.razor */
.autocomplete {
        position: relative;
    }

        .autocomplete .options {
            position: absolute;
            top: 60px;
            left: 0;
            background: white;
            width: 100%;
            padding: 0;
            z-index: 10;
            border: 1px solid #ced4da;
            border-radius: 0.5rem;
            box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: scroll;
        }

        .autocomplete .option {
            display: block;
            padding: 0.25rem;
        }

            .autocomplete .option .option-text {
                padding: 0.25rem 0.5rem;
            }

            .autocomplete .option:hover {
                background: #1E90FF;
                color: #fff;
            }

            .autocomplete .option.disabled {
                background-color: lightgrey;
                cursor: not-allowed;
            }

                .autocomplete .option.disabled:hover {
                    background: lightgrey;
                    color: var(--bs-body);
                }





    @media only screen and (max-width:768px) {
        .wizard-body {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            padding-top: 1rem !important;
        }

        .fullNameMargin {
            margin-right: 0px;
        }
    }

    @media only screen and (min-width:768px) {
        .wizard-body {
            padding-left: 4rem !important;
            padding-right: 4rem !important;
        }

        .fullNameMargin {
            margin-right: 25px;
        }
    }

    /* Hide subscription step title when saveInvoiceOnly is true */
    .hide-subscription-step .blazorwizard-step:nth-child(2) {
        display: none !important;
    }

    /* Financial Data Step Styles */
    .financial-data-container {
        padding: 0rem 0rem;
    }

    .financial-subscriber-warnings {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .financial-warning-item {
        margin-bottom: 0;
        border-radius: 0.5rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .financial-subscriber-warnings--blocked {
        border: 2px solid var(--bs-danger);
        border-radius: 0.5rem;
        background-color: rgba(220, 53, 69, 0.06);
        padding: 0.75rem;
    }

    .financial-blocked-alert {
        border: 1px solid var(--bs-danger);
    }

    .financial-section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e9ecef;
    }

    .financial-form-group {
        margin-bottom: 1.5rem;
    }

    .financial-form-group label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
    }

    .financial-form-group .form-control,
    .financial-form-group .form-select {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .financial-form-group .form-control:focus,
    .financial-form-group .form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .financial-form-group .form-control:disabled,
    .financial-form-group .form-select:disabled {
        background-color: #e9ecef;
        opacity: 1;
    }

    .financial-left-column {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .financial-right-column {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .financial-amount-group {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .financial-amount-group .form-control {
        flex: 0 0 auto;
        min-width: 120px;
        max-width: 160px;
    }

    .financial-amount-input {
        min-width: 120px;
        max-width: 160px;
        box-sizing: border-box;
    }

    .financial-amount-group .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .btn-show-prices {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #198754;
        background-color: transparent;
        border: 1.5px solid #198754;
        border-radius: 0.5rem;
        white-space: nowrap;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .btn-show-prices:hover {
            color: #fff;
            background-color: #198754;
            border-color: #198754;
            box-shadow: 0 2px 4px rgba(25, 135, 84, 0.25);
        }

        .btn-show-prices:focus {
            color: #fff;
            background-color: #198754;
            border-color: #198754;
            box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
            outline: 0;
        }

        .btn-show-prices:active {
            color: #fff;
            background-color: #157347;
            border-color: #146c43;
        }

    .financial-info-section {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.25rem;
        margin-top: 1.5rem;
        border-left: 4px solid #0d6efd;
    }

    .financial-info-section h6 {
        font-size: 0.95rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
    }

    .financial-info-field {
        margin-bottom: 1rem;
    }

    .financial-info-field:last-child {
        margin-bottom: 0;
    }

    .financial-info-field label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    .financial-info-field .form-control {
        font-size: 0.95rem;
    }

    @media only screen and (max-width: 1200px) {
        .financial-left-column {
            padding-right: 0.75rem;
        }

        .financial-right-column {
            padding-left: 0.75rem;
        }
    }

    @media only screen and (max-width: 768px) {
        .financial-data-container {
            padding: 1rem 0.5rem;
        }

        .financial-left-column,
        .financial-right-column {
            padding-left: 0;
            padding-right: 0;
        }

        .financial-amount-group {
            flex-direction: column;
            flex-wrap: wrap;
        }

        .financial-amount-group .form-control {
            width: 100%;
            min-width: 100%;
            max-width: none;
        }

        .financial-amount-input {
            width: 100%;
            min-width: 100%;
            max-width: none;
        }
    }

    /* Subscription Info Step Styles */
    .subscription-info-container {
        padding: 0rem 0rem;
    }

    .subscription-card {
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        transition: box-shadow 0.3s ease;
        height: 100%;
    }

    .subscription-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .subscription-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        padding-bottom: 1rem;
        margin-bottom: 1.25rem;
        border-bottom: 2px solid #e9ecef;
        display: flex;
        align-items: center;
    }

    .subscription-card .card-title i {
        font-size: 1.25rem;
        margin-left: 0.5rem;
    }

    .subscription-info-field {
        margin-bottom: 1.25rem;
    }

    .subscription-info-field:last-child {
        margin-bottom: 0;
    }

    .subscription-info-field label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
        font-size: 0.95rem;
    }

    .subscription-info-field .form-control {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        background-color: #f8f9fa;
        font-size: 0.95rem;
    }

    .subscription-info-field .form-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        background-color: #fff;
    }

    .subscription-info-field .input-group .btn {
        border-radius: 0 0.375rem 0.375rem 0;
    }

    .subscription-status-card {
        margin-top: 1.5rem;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
    }

    .subscription-status-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        padding-bottom: 1rem;
        margin-bottom: 1.25rem;
        border-bottom: 2px solid #e9ecef;
    }

    .subscription-status-field {
        margin-bottom: 1rem;
    }

    .subscription-status-field label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
        font-size: 0.95rem;
    }

    .subscription-status-field .form-control {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        background-color: #f8f9fa;
    }

    .subscription-status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
        font-size: 0.95rem;
    }

    .subscription-status-online {
        background-color: #d1e7dd;
        color: #0f5132;
        border: 1px solid #badbcc;
    }

    .subscription-status-offline {
        background-color: #f8d7da;
        color: #842029;
        border: 1px solid #f5c2c7;
    }

    .subscription-status-warning {
        background-color: #fff3cd;
        color: #664d03;
        border: 1px solid #ffecb5;
    }

    .subscription-left-column {
        padding-right: 1rem;
    }

    .subscription-right-column {
        padding-left: 1rem;
    }

    @media only screen and (max-width: 1200px) {
        .subscription-left-column {
            padding-right: 0.75rem;
        }

        .subscription-right-column {
            padding-left: 0.75rem;
        }
    }

    @media only screen and (max-width: 768px) {
        .subscription-info-container {
            padding: 1rem 0.5rem;
        }

        .subscription-left-column,
        .subscription-right-column {
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 1.5rem;
        }

        .subscription-status-field {
            margin-bottom: 1.25rem;
        }
    }

    /* Confirmation/Display Data Step Styles */
    .confirmation-container {
        padding: 0rem 0rem;
    }

    .confirmation-card {
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        transition: box-shadow 0.3s ease;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .confirmation-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .confirmation-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem 1.5rem;
        font-weight: 600;
        font-size: 1.1rem;
        border-bottom: none;
        display: flex;
        align-items: center;
    }

    .confirmation-card-header i {
        margin-left: 0.5rem;
        font-size: 1.25rem;
    }

    .confirmation-card-header.payment-header {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .confirmation-table {
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .confirmation-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s ease;
    }

    .confirmation-table tbody tr:hover {
        background-color: #f8f9fa;
    }

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

    .confirmation-table td {
        padding: 1rem 1.5rem;
        vertical-align: middle;
    }

    .confirmation-label {
        font-size: 1rem;
        font-weight: 600;
        color: #495057;
        display: block;
    }

    .confirmation-value {
        font-size: 1rem;
        color: #6c757d;
        text-align: right;
        direction: rtl;
    }

    .confirmation-separator {
        font-size: 1.25rem;
        font-weight: bold;
        color: #dee2e6;
        text-align: center;
        width: 2rem;
    }

    .confirmation-radio-section {
        margin-top: 1.5rem;
    }

    .confirmation-radio-card {
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        padding: 1.5rem;
        background-color: #f8f9fa;
    }

    .confirmation-radio-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .confirmation-radio-title i {
        margin-left: 0.5rem;
        color: #0d6efd;
    }

    .confirmation-radio-option {
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
        margin-bottom: 0.75rem;
        background-color: white;
    }

    .confirmation-radio-option:hover {
        border-color: #86b7fe;
        background-color: #f0f7ff;
    }

    .confirmation-radio-option:last-child {
        margin-bottom: 0;
    }

    .confirmation-radio-option input[type="radio"]:checked + label {
        color: #0d6efd;
        font-weight: 600;
    }

    .confirmation-radio-option input[type="radio"]:checked ~ .confirmation-radio-option {
        border-color: #0d6efd;
    }

    .confirmation-radio-label {
        font-size: 1rem;
        color: #495057;
        cursor: pointer;
        margin: 0;
        padding-right: 0.5rem;
        display: flex;
        align-items: center;
    }

    .confirmation-radio-label i {
        margin-left: 0.5rem;
        color: #6c757d;
    }

    @media only screen and (max-width: 768px) {
        .confirmation-container {
            padding: 1rem 0.5rem;
        }

        .confirmation-card {
            margin-bottom: 1.25rem;
        }

        .confirmation-card-header {
            padding: 0.875rem 1rem;
            font-size: 1rem;
        }

        .confirmation-table td {
            padding: 0.875rem 1rem;
            font-size: 0.95rem;
        }

        .confirmation-label,
        .confirmation-value {
            font-size: 0.95rem;
        }

        .confirmation-radio-card {
            padding: 1.25rem;
        }
    }

    /* Activation Step Styles */
    .activation-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
    }

    .activation-card {
        max-width: 800px;
        width: 100%;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .activation-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }

    .activation-header {
        background: linear-gradient(135deg, #198754 0%, #20c997 100%);
        color: white;
        padding: 1.5rem;
        text-align: center;
        border-bottom: none;
    }

    .activation-header-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        display: block;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.9;
        }
    }

    .activation-header-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }

    .activation-body {
        padding: 2.5rem;
        text-align: center;
    }

    .activation-message {
        font-size: 1.1rem;
        color: #495057;
        line-height: 1.8;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        border-right: 4px solid #198754;
    }

    .activation-message-icon {
        font-size: 1.5rem;
        color: #198754;
        margin-left: 0.5rem;
        vertical-align: middle;
    }

    .activation-button-container {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .activation-button {
        min-width: 180px;
        padding: 0.875rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 0.5rem;
        border: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
    }

    .activation-button:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(25, 135, 84, 0.4);
    }

    .activation-button:active:not(:disabled) {
        transform: translateY(0);
    }

    .activation-button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .activation-button-icon {
        font-size: 1.25rem;
    }

    .activation-spinner {
        width: 1.25rem;
        height: 1.25rem;
        border-width: 0.2em;
    }

    @media only screen and (max-width: 768px) {
        .activation-container {
            padding: 2rem 1rem;
            min-height: 300px;
        }

        .activation-card {
            max-width: 100%;
        }

        .activation-header {
            padding: 1.5rem;
        }

        .activation-header-icon {
            font-size: 3rem;
        }

        .activation-header-title {
            font-size: 1.25rem;
        }

        .activation-body {
            padding: 1.5rem;
        }

        .activation-message {
            font-size: 1rem;
            padding: 1.25rem;
        }

        .activation-button {
            min-width: 160px;
            font-size: 1rem;
            padding: 0.75rem 1.5rem;
        }
    }

    /* Select Cost Modal */
    .select-cost-modal-backdrop {
        z-index: 1050;
    }

    .select-cost-modal-dialog {
        max-width: 560px;
    }

    .select-cost-modal-content {
        border-radius: 0.75rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
        border: none;
    }

    .select-cost-modal-header {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        background: linear-gradient(to bottom, #f8f9fa, #fff);
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .select-cost-profile-badge {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .select-cost-modal-body {
        padding: 1.25rem;
    }

    .select-cost-loading {
        min-height: 120px;
    }

    .select-cost-table {
        margin-bottom: 0;
    }

        .select-cost-table thead th {
            font-weight: 600;
            color: #495057;
            border-bottom: 2px solid #dee2e6;
            padding: 0.75rem;
        }

        .select-cost-table tbody td {
            vertical-align: middle;
            padding: 0.75rem;
        }

        .select-cost-table tbody tr:hover {
            background-color: rgba(25, 135, 84, 0.06);
        }

    .select-cost-btn {
        white-space: nowrap;
    }

    .select-cost-modal-footer {
        border-top: 1px solid #e9ecef;
        padding: 0.75rem 1.25rem;
        background: #f8f9fa;
        border-radius: 0 0 0.75rem 0.75rem;
    }

/* From: Subscribers/EditUser.razor */
@media only screen and (max-width:768px) {
        .wizard-body {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        .fullNameMargin {
            margin-right: 0px;
        }
    }

    @media only screen and (min-width:768px) {

        .fullNameMargin {
            margin-right: 25px;
        }
    }

/* From: Subscribers/ExpiringUsers.razor */
@media only screen and (max-width:768px) {
        .adduser {
            margin-right: 0px;
            width: 100%;
            margin-bottom: 20px;
        }


        .syncuser {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    @media only screen and (min-width:768px) {
        .adduser {
            float: left;
            margin-bottom: 20px;
            width: 150px;
        }

        .syncuser {
            width: 150px;
            float: left;
            margin-bottom: 20px;
        }
    }

/* From: Subscribers/SubscriberSettings.razor */
.settings-card {
        border-radius: 1rem;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .settings-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

    .settings-card .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.25rem 1.5rem;
        border: none;
    }

    .settings-card .card-header h5 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .settings-card .card-header h5 i {
        font-size: 1.5rem;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .settings-card .card-body {
        padding: 1.5rem;
    }

    .setting-item {
        padding: 1rem;
        border-radius: 0.75rem;
        background: #f8f9fa;
        margin-bottom: 1rem;
        transition: all 0.2s ease;
    }

    .setting-item:hover {
        background: #e9ecef;
    }

    .setting-item:last-child {
        margin-bottom: 0;
    }

    .setting-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .setting-label i {
        color: #6c757d;
    }

    .setting-description {
        font-size: 0.85rem;
        color: #6c757d;
        margin-bottom: 0.75rem;
    }

    .form-switch {
        padding-right: 2.5em;
    }

    .form-switch .form-check-input {
        width: 3em;
        height: 1.5em;
        cursor: pointer;
    }

    .form-switch .form-check-input:checked {
        background-color: #667eea;
        border-color: #667eea;
    }

    .form-control, .form-select {
        border-radius: 0.5rem;
        border: 2px solid #e9ecef;
        padding: 0.625rem 1rem;
        transition: all 0.2s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .save-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 0.875rem 2.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .save-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .save-btn:disabled {
        opacity: 0.7;
        transform: none;
    }

    .page-header {
        margin-bottom: 2rem;
    }

    .page-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #2d3436;
    }

    .breadcrumb {
        background: transparent;
        padding: 0;
    }

    .breadcrumb-item a {
        color: #667eea;
        text-decoration: none;
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .input-group-text {
        background: #e9ecef;
        border: 2px solid #e9ecef;
        border-right: none;
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .input-group .form-control {
        border-radius: 0 0.5rem 0.5rem 0;
    }

    @media (max-width: 768px) {
        .settings-card .card-body {
            padding: 1rem;
        }
        
        .setting-item {
            padding: 0.75rem;
        }
    }

/* From: Subscribers/SubscribersReports/DebtorsReport.razor */
.filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
    }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

        .summary-card-danger::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(220, 53, 69, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

        .summary-card-primary::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

        .summary-card-info::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(23, 162, 184, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .summary-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

    .chart-card {
        height: 400px;
        margin-bottom: 1.5rem;
    }

    .chart-container {
        position: relative;
        height: 350px;
        width: 100%;
    }

    .chart-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 350px;
    }

    .chart-error {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 350px;
        color: #dc3545;
    }

    @media only screen and (max-width: 768px) {
        .chart-card {
            height: 300px;
        }

        .chart-container {
            height: 250px;
        }
    }

/* From: Subscribers/SubscribersReports/ExpiringSubscribersReport.razor */
.filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        color: #495057;
        padding: 0.875rem;
        vertical-align: middle;
    }

    .table tbody td {
        padding: 0.875rem;
        vertical-align: middle;
    }

    .expiration-date-link {
        cursor: pointer;
        text-decoration: underline;
        color: #0d6efd;
    }

        .expiration-date-link:hover {
            color: #0a58ca;
        }

    .pagination-footer {
        padding: 0.875rem 1rem;
        background-color: #f8f9fa;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .pagination-info {
        white-space: nowrap;
        font-size: 0.875rem;
    }

/* From: Subscribers/SubscribersReports/LateSubscribersReport.razor */
.filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
    }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

        .summary-card-danger::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(220, 53, 69, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

        .summary-card-primary::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

        .summary-card-info::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(23, 162, 184, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .summary-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

        .summary-card-warning::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }

    .chart-card {
        height: 400px;
        margin-bottom: 1.5rem;
    }

    .chart-container {
        position: relative;
        height: 350px;
        width: 100%;
    }

    .chart-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 350px;
    }

    .chart-error {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 350px;
        color: #dc3545;
    }

    @media only screen and (max-width: 768px) {
        .chart-card {
            height: 300px;
        }

        .chart-container {
            height: 250px;
        }
    }

/* From: Subscribers/SubscribersReports/SubscriberCreditsReport.razor */
@media only screen and (max-width:768px) {
        .table-responsive {
            font-size: 0.85rem;
        }
    }

    .sortable-header {
        cursor: pointer;
        user-select: none;
    }

        .sortable-header:hover {
            background-color: #f8f9fa;
        }

    .sort-icon {
        margin-right: 5px;
        opacity: 0.5;
    }

        .sort-icon.active {
            opacity: 1;
        }

    .credit-badge-positive {
        background-color: #28a745 !important;
        color: white;
    }

    .credit-badge-negative {
        background-color: #dc3545 !important;
        color: white;
    }

    .credit-badge-zero {
        background-color: #6c757d !important;
        color: white;
    }

    .highlight-search {
        background-color: #fff3cd;
        padding: 2px 4px;
        border-radius: 3px;
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .summary-card {
        border-left: 4px solid #667eea;
    }

    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        color: #495057;
        padding: 0.875rem;
        vertical-align: middle;
    }

    .table tbody td {
        padding: 0.875rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

    .table tbody tr:hover {
        background-color: #f8f9fa;
        transition: background-color 0.15s ease;
    }

    .table-group-header {
        background-color: #e9ecef !important;
        font-weight: bold;
    }

        .table-group-header:hover {
            background-color: #dee2e6 !important;
        }

    .pagination-footer {
        padding: 0.875rem 1rem;
        background-color: #f8f9fa;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .pagination-left-group {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .pagination-info {
        white-space: nowrap;
        font-size: 0.875rem;
    }

    .pagination-wrapper {
        display: flex;
        align-items: center;
    }

    .pagination-wrapper nav {
        float: none !important;
        margin: 0;
    }

    .page-size-selector {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

        .page-size-selector label {
            font-size: 0.875rem;
            margin: 0;
        }

        .page-size-selector select {
            font-size: 0.8125rem;
            padding: 0.25rem 0.5rem;
            height: auto;
            line-height: 1.5;
        }

    @media only screen and (max-width: 768px) {
        .pagination-footer {
            padding: 0.75rem;
        }

        .pagination-footer .row {
            text-align: center;
        }

        .pagination-left-group {
            width: 100%;
            justify-content: center;
            gap: 1rem;
            flex-direction: column;
        }

        .pagination-info {
            margin-bottom: 0.75rem;
            text-align: center;
            white-space: normal;
        }

        .pagination-wrapper {
            width: 100%;
            justify-content: center;
        }

        .pagination-wrapper nav {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .page-size-selector {
            width: 100%;
            justify-content: center;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 991px) {
        .pagination-left-group {
            gap: 0.75rem;
        }
    }

    /* Table Improvements */
    .table {
        margin-bottom: 0;
    }

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

    .table-bordered {
        border: 1px solid #dee2e6;
    }

    .table-bordered thead th {
        border: 1px solid #dee2e6;
    }

    .table-bordered tbody td {
        border: 1px solid #e9ecef;
    }

/* From: Subscribers/SubscribersReports/SubscriberStatement.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .summary-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .statement-table {
        font-size: 0.9rem;
    }

        .statement-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            white-space: nowrap;
        }

        .statement-table td {
            vertical-align: middle;
        }

    .transaction-type-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .transaction-type-opening {
        background-color: #e3f2fd;
        color: #1976d2;
    }

    .transaction-type-sale {
        background-color: #fff3e0;
        color: #f57c00;
    }

    .transaction-type-payment {
        background-color: #e8f5e9;
        color: #388e3c;
    }

    .balance-positive {
        color: #dc3545;
        font-weight: 600;
    }

    .balance-negative {
        color: #28a745;
        font-weight: 600;
    }

    .balance-zero {
        color: #6c757d;
    }

    .subscriber-info-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .status-alert {
        border-left: 5px solid;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        animation: slideIn 0.3s ease-out;
    }

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

    .status-alert-danger {
        background-color: #f8d7da;
        border-left-color: #dc3545;
        color: #721c24;
    }

    .status-alert-warning {
        background-color: #fff3cd;
        border-left-color: #ffc107;
        color: #856404;
    }

    .status-alert-info {
        background-color: #d1ecf1;
        border-left-color: #17a2b8;
        color: #0c5460;
    }

    .status-icon {
        font-size: 2rem;
        margin-left: 1rem;
        flex-shrink: 0;
    }

    .print-button {
        position: fixed;
        bottom: 2rem;
        left: 2rem;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    @media print {
        .filter-section,
        .print-button,
        .page-header-breadcrumb {
            display: none !important;
        }

        .summary-card {
            page-break-inside: avoid;
        }
    }

    .autocomplete {
        position: relative;
    }

        .autocomplete .options {
            position: absolute;
            top: 60px;
            left: 0;
            background: white;
            width: 100%;
            padding: 0;
            z-index: 10;
            border: 1px solid #ced4da;
            border-radius: 0.5rem;
            box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: scroll;
        }

        .autocomplete .option {
            display: block;
            padding: 0.25rem;
        }

            .autocomplete .option .option-text {
                padding: 0.25rem 0.5rem;
            }

            .autocomplete .option:hover {
                background: #1E90FF;
                color: #fff;
            }

            .autocomplete .option.disabled {
                background-color: lightgrey;
                cursor: not-allowed;
            }

                .autocomplete .option.disabled:hover {
                    background: lightgrey;
                    color: var(--bs-body);
                }

/* From: Subscribers/UserAffiliateDataByUser.razor */
.autocomplete {
        position: relative;
    }

        .autocomplete .options {
            position: absolute;
            top: 60px;
            left: 0;
            background: white;
            width: 100%;
            padding: 0;
            z-index: 10;
            border: 1px solid #ced4da;
            border-radius: 0.5rem;
            box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: scroll;
        }

        .autocomplete .option {
            display: block;
            padding: 0.25rem;
        }

            .autocomplete .option .option-text {
                padding: 0.25rem 0.5rem;
            }

            .autocomplete .option:hover {
                background: #1E90FF;
                color: #fff;
            }

            .autocomplete .option.disabled {
                background-color: lightgrey;
                cursor: not-allowed;
            }

                .autocomplete .option.disabled:hover {
                    background: lightgrey;
                    color: var(--bs-body);
                }

    @media only screen and (max-width:768px) {
        .wizard-body {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        .fullNameMargin {
            margin-right: 0px;
        }
    }

    @media only screen and (min-width:768px) {

        .fullNameMargin {
            margin-right: 25px;
        }
    }

/* From: Subscribers/UsersList.razor */
@media only screen and (max-width:768px) {
        .adduser {
            margin-right: 0px;
            width: 100%;
            margin-bottom: 20px;
        }

        .syncuser {
            width: 100%;
            margin-bottom: 20px;
        }

        .table-responsive {
            font-size: 0.85rem;
        }

        .btn-icon {
            padding: 0.25rem 0.4rem;
        }
    }

    @media only screen and (min-width:768px) {
        .adduser {
            float: left;
            margin-bottom: 20px;
            width: 150px;
        }

        .syncuser {
            width: 150px;
            float: left;
            margin-bottom: 20px;
        }
    }

    .badge .btn-close {
        opacity: 0.8;
    }

    .badge .btn-close:hover {
        opacity: 1;
    }

    .skeleton-loader {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s ease-in-out infinite;
    }

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

    .sortable-header {
        cursor: pointer;
        user-select: none;
    }

    .sortable-header:hover {
        background-color: #f8f9fa;
    }

    .sort-icon {
        margin-right: 5px;
        opacity: 0.5;
    }

    .sort-icon.active {
        opacity: 1;
    }

    .debt-badge-high {
        background-color: #dc3545 !important;
    }

    .debt-badge-medium {
        background-color: #ffc107 !important;
    }

    .debt-badge-low {
        background-color: #28a745 !important;
    }

    .status-badge-active {
        background-color: #28a745;
    }

    .status-badge-inactive {
        background-color: #6c757d;
    }

    .summary-card {
        border-left: 4px solid #667eea;
    }

    .highlight-search {
        background-color: #fff3cd;
        padding: 2px 4px;
        border-radius: 3px;
    }

    .mobile-card-view {
        display: none;
    }

    @media only screen and (max-width: 768px) {
        .desktop-table-view {
            display: none;
        }

        .mobile-card-view {
            display: block;
        }

        .filters-collapsible {
            margin-bottom: 10px;
        }
    }

    .column-toggle-menu {
        max-height: 300px;
        overflow-y: auto;
    }

    .card-footer {
        padding: 1rem;
        background-color: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.125);
        width: 100%;
    }

    .pagination-footer {
        padding: 0.875rem 1rem;
        background-color: #f8f9fa;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .pagination-left-group {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .pagination-info {
        white-space: nowrap;
        font-size: 0.875rem;
    }

    .pagination-wrapper {
        display: flex;
        align-items: center;
    }

    .pagination-wrapper nav {
        float: none !important;
        margin: 0;
    }

    .page-size-selector {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .page-size-selector label {
        font-size: 0.875rem;
        margin: 0;
    }

    .page-size-selector select {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
        height: auto;
        line-height: 1.5;
    }

    @media only screen and (max-width: 768px) {
        .pagination-footer {
            padding: 0.75rem;
        }

        .pagination-footer .row {
            text-align: center;
        }

        .pagination-left-group {
            width: 100%;
            justify-content: center;
            gap: 1rem;
            flex-direction: column;
        }

        .pagination-info {
            margin-bottom: 0.75rem;
            text-align: center;
            white-space: normal;
        }

        .pagination-wrapper {
            width: 100%;
            justify-content: center;
        }

        .pagination-wrapper nav {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .page-size-selector {
            width: 100%;
            justify-content: center;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 991px) {
        .pagination-left-group {
            gap: 0.75rem;
        }
    }

    /* Action Button Styles */
    .action-btn {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .action-btn-text {
        font-size: 0.875rem;
    }

    @media only screen and (max-width: 1200px) {
        .action-btn-text {
            display: none;
        }

        .action-btn {
            padding: 0.25rem 0.5rem;
        }

        .action-btn .bi-three-dots-vertical {
            margin: 0 !important;
        }
    }

    @media only screen and (min-width: 1201px) {
        .action-btn {
            min-width: 110px;
            justify-content: center;
        }
    }

    /* Filter Section Improvements */
    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .filter-group {
        margin-bottom: 1rem;
    }

    .filter-group:last-child {
        margin-bottom: 0;
    }

    .filter-group-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }

    .form-select, .form-control {
        border-radius: 6px;
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
    }

    .form-select:focus, .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    /* Table Improvements */
    .table {
        margin-bottom: 0;
    }

    .table thead th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        color: #495057;
        padding: 0.875rem;
        vertical-align: middle;
    }

    .table tbody td {
        padding: 0.875rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

    .table tbody tr:hover {
        background-color: #f8f9fa;
        transition: background-color 0.15s ease;
    }

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

    .table-bordered {
        border: 1px solid #dee2e6;
    }

    .table-bordered thead th {
        border: 1px solid #dee2e6;
    }

    .table-bordered tbody td {
        border: 1px solid #e9ecef;
    }

    /* Badge Improvements */
    .status-badge-active {
        background-color: #28a745;
        color: white;
        padding: 0.35em 0.65em;
        border-radius: 0.375rem;
        font-weight: 500;
        font-size: 0.75rem;
    }

    .status-badge-inactive {
        background-color: #6c757d;
        color: white;
        padding: 0.35em 0.65em;
        border-radius: 0.375rem;
        font-weight: 500;
        font-size: 0.75rem;
    }

    /* Active Filter Badges */
    .active-filter-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    /* Financial Terms Column */
    .financial-terms {
        line-height: 1.6;
    }

    .financial-terms .term-label {
        color: #6c757d;
        font-size: 0.75rem;
        display: inline-block;
        min-width: 30px;
    }

    .financial-terms .term-value {
        font-weight: 600;
        color: #212529;
        font-size: 0.8125rem;
    }

    /* Subscription Modal Action Buttons */
    .subscription-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        min-width: fit-content;
    }

    .subscription-actions .btn {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8125rem;
        padding: 0.4rem 0.875rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        font-weight: 500;
        border: none;
    }

    .subscription-actions .btn i {
        font-size: 0.875rem;
    }

    .subscription-actions .btn-info {
        background-color: #0dcaf0;
        color: #000;
    }

    .subscription-actions .btn-info:hover {
        background-color: #0aa2c0;
        color: #000;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(13, 202, 240, 0.3);
    }

    .subscription-actions .btn-danger {
        background-color: #dc3545;
        color: #fff;
    }

    .subscription-actions .btn-danger:hover {
        background-color: #bb2d3b;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    }

    .subscription-actions .btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .subscription-actions .btn:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    #subscriptionsModal .table th:last-child,
    #subscriptionsModal .table td:last-child {
        min-width: 280px;
        width: auto;
        white-space: nowrap;
    }

    @media only screen and (max-width: 992px) {
        .subscription-actions .btn span {
            display: none;
        }

        .subscription-actions .btn {
            padding: 0.4rem 0.6rem;
            min-width: auto;
        }

        .subscription-actions .btn i {
            margin: 0;
        }

        #subscriptionsModal .table th:last-child,
        #subscriptionsModal .table td:last-child {
            min-width: 120px;
        }
    }

    @media only screen and (max-width: 768px) {
        .subscription-actions {
            flex-direction: row;
            gap: 0.375rem;
        }

        .subscription-actions .btn {
            flex: 1;
            justify-content: center;
        }

        #subscriptionsModal .table th:last-child,
        #subscriptionsModal .table td:last-child {
            min-width: auto;
            width: auto;
        }
    }

    @media only screen and (max-width: 576px) {
        .subscription-actions {
            flex-direction: column;
            width: 100%;
        }

        .subscription-actions .btn {
            width: 100%;
        }
    }

    /* Fix dropdown menu appearing behind table */
    .desktop-table-view .card-body {
        overflow: visible !important;
        max-width: 100%;
    }

    .desktop-table-view .table-responsive {
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100%;
        max-width: 100%;
    }

    .desktop-table-view .table-responsive .table {
        width: 100%;
        max-width: 100%;
        table-layout: auto;
        margin-bottom: 0;
        overflow: visible !important;
    }

    .desktop-table-view .table-responsive .table tbody {
        overflow: visible !important;
    }

    .desktop-table-view .table-responsive .table tbody tr {
        overflow: visible !important;
    }

    .desktop-table-view .table-responsive .table td,
    .desktop-table-view .table-responsive .table th {
        white-space: normal;
        word-wrap: break-word;
    }

    /* Prevent actions cell from clipping dropdown menu */
    .desktop-table-view .table-responsive .table td.actions-cell {
        overflow: visible !important;
    }

    .desktop-table-view .table-responsive .dropdown-menu {
        z-index: 100055 !important;
        max-height: none !important;
    }

    /* Actions dropdown menu - light background */
    .actions-dropdown-menu {
        background-color: #FAFBFC;
        border: 1px solid rgba(0, 0, 0, 0.06);
    }
    .actions-dropdown-menu .dropdown-item:hover {
        background-color: #F3E9FB;
    }


    .dropdown, .dropdown-center, .dropend, .dropstart, .dropup, .dropup-center {
    position: inherit !important;
}


/* --------------------------------------------------------------------------
   Affiliates
   -------------------------------------------------------------------------- */

/* From: Affiliates/AddMainAffiliate.razor */
.form-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .form-section {
        background: white;
        border-radius: 0.5rem;
        padding: 2rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e9ecef;
    }

    .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.5rem;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .form-check-input:checked {
        background-color: #667eea;
        border-color: #667eea;
    }

    .form-check-input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
    }

    .btn-submit {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 0.75rem 2rem;
        font-weight: 500;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-submit:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .btn-cancel {
        background-color: #6c757d;
        border: none;
        padding: 0.75rem 2rem;
        font-weight: 500;
    }

    .btn-cancel:hover {
        background-color: #5a6268;
    }

    .required-field::after {
        content: " *";
        color: #dc3545;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .checkbox-group {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .checkbox-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

/* From: Affiliates/CostManagement.razor */
.section-header {
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .info-row {
        margin-bottom: 1rem;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #212529;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    /* Cost management modals - same as CustomizeCost */
    .modal-cost .modal-dialog {
        max-width: 480px;
    }
    .modal-cost .modal-header {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .modal-cost .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }
    .modal-cost .modal-title {
        font-weight: 600;
        font-size: 1.125rem;
    }
    .modal-cost .modal-body {
        padding: 1.5rem 1.25rem;
    }
    .modal-cost .modal-footer {
        border-top: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        gap: 0.5rem;
    }
    .modal-cost .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.35rem;
    }
    .modal-cost .form-control, .modal-cost .form-select {
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid #dee2e6;
    }
    .modal-cost .form-control:focus, .modal-cost .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

/* From: Affiliates/CustomizeCost.razor */
.section-header {
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .info-row {
        margin-bottom: 1rem;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #212529;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    /* Cost/Price modals - clean design */
    .modal-cost .modal-dialog {
        max-width: 480px;
    }
    .modal-cost .modal-header {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .modal-cost .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }
    .modal-cost .modal-title {
        font-weight: 600;
        font-size: 1.125rem;
    }
    .modal-cost .modal-body {
        padding: 1.5rem 1.25rem;
    }
    .modal-cost .modal-footer {
        border-top: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        gap: 0.5rem;
    }
    .modal-cost .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.35rem;
    }
    .modal-cost .form-control, .modal-cost .form-select {
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid #dee2e6;
    }
    .modal-cost .form-control:focus, .modal-cost .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

/* From: Affiliates/MainAffiliateDetail.razor */
.section-header {
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .info-row {
        margin-bottom: 1rem;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #212529;
    }

    .credential-field {
        background-color: #f8f9fa;
        padding: 0.75rem;
        border-radius: 0.375rem;
        font-family: monospace;
        word-break: break-all;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    /* Edit affiliate modal (SweetAlert content) */
    .edit-affiliate-popup.swal2-popup {
        padding: 1.75rem 2rem 1.5rem;
        border-radius: 0.875rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.06);
        max-width: 560px;
    }
    .edit-affiliate-popup .swal2-title {
        font-size: 1.35rem;
        font-weight: 600;
        color: #1a1d21;
        margin-bottom: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .edit-affiliate-popup .swal2-html-container {
        margin: 0;
        padding: 1.25rem 0 0;
        overflow: visible;
    }
    .swal2-html-container .edit-affiliate-modal {
        max-width: 520px;
        padding: 0;
        text-align: right;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-row .edit-affiliate-field {
        flex: 1;
        min-width: 0;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-field.full-width {
        flex: 1 1 100%;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-label {
        display: block;
        font-weight: 600;
        font-size: 0.8125rem;
        color: #495057;
        margin-bottom: 0.35rem;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-input,
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.9375rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        background-color: #fff;
        color: #212529;
        box-sizing: border-box;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-input:focus,
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-input[readonly] {
        background-color: #f1f3f5;
        color: #6c757d;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-permissions {
        margin-top: 1rem;
        padding: 1rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
        border-radius: 0.5rem;
        border: 1px solid #e9ecef;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-permissions-title {
        font-weight: 600;
        font-size: 0.8125rem;
        color: #495057;
        margin-bottom: 0.75rem;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-checkbox-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-checkbox-item input {
        width: 1.125rem;
        height: 1.125rem;
        accent-color: #667eea;
        cursor: pointer;
    }
    .swal2-html-container .edit-affiliate-modal .edit-affiliate-checkbox-item label {
        font-size: 0.9375rem;
        color: #212529;
        cursor: pointer;
        margin: 0;
    }

    /* Edit credentials modal (SweetAlert content) */
    .edit-credentials-popup.swal2-popup {
        padding: 1.75rem 2rem 1.5rem;
        border-radius: 0.875rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.06);
        max-width: 460px;
    }
    .edit-credentials-popup .swal2-title {
        font-size: 1.35rem;
        font-weight: 600;
        color: #1a1d21;
        margin-bottom: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .edit-credentials-popup .swal2-html-container {
        margin: 0;
        padding: 1.25rem 0 0;
        overflow: visible;
    }
    .swal2-html-container .edit-credentials-modal {
        max-width: 420px;
        padding: 0;
        text-align: right;
    }
    .swal2-html-container .edit-credentials-modal .edit-credentials-field {
        margin-bottom: 1rem;
    }
    .swal2-html-container .edit-credentials-modal .edit-credentials-field:last-child {
        margin-bottom: 0;
    }
    .swal2-html-container .edit-credentials-modal .edit-credentials-label {
        display: block;
        font-weight: 600;
        font-size: 0.8125rem;
        color: #495057;
        margin-bottom: 0.35rem;
    }
    .swal2-html-container .edit-credentials-modal .edit-credentials-input {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.9375rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        background-color: #fff;
        color: #212529;
        box-sizing: border-box;
    }
    .swal2-html-container .edit-credentials-modal .edit-credentials-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }
    .swal2-html-container .edit-credentials-modal .edit-credentials-deposit {
        margin-top: 1rem;
        padding: 1rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
        border-radius: 0.5rem;
        border: 1px solid #e9ecef;
    }

/* From: Affiliates/MainAffiliates.razor */
.affiliate-card {
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        border: none;
        overflow: hidden;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .affiliate-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .affiliate-card .card-body {
        padding: 1.75rem;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 220px;
    }

    /* Card Color Schemes */
    .card-color-0 {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .card-color-1 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }

    .card-color-2 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }

    .card-color-3 {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: #1a1a1a;
    }

    .card-color-4 {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: #1a1a1a;
    }

    .card-color-5 {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
        color: white;
    }

    .card-color-6 {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #1a1a1a;
    }

    .card-color-7 {
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        color: #1a1a1a;
    }

    .card-color-8 {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        color: #1a1a1a;
    }

    .card-color-9 {
        background: linear-gradient(135deg, #ff8a80 0%, #ea6100 100%);
        color: white;
    }

    .card-color-10 {
        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
        color: #1a1a1a;
    }

    .card-color-11 {
        background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
        color: #1a1a1a;
    }

    .affiliate-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.875rem;
        border-radius: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        margin-top: 0.5rem;
        background-color: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        color: inherit;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .affiliate-card .card-title {
        color: inherit;
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .add-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
    }

    .add-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .stats-section {
        margin-top: auto;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .stat-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0;
        transition: transform 0.2s;
    }

    .stat-item:hover {
        transform: translateX(-3px);
    }

    .stat-item:last-child {
        padding-bottom: 0;
    }

    .stat-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        opacity: 0.95;
        font-weight: 500;
    }

    .stat-value {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .stat-icon {
        font-size: 1rem;
        opacity: 0.9;
    }

    .empty-state {
        padding: 4rem 2rem;
        text-align: center;
    }

    .empty-state-icon {
        font-size: 4rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }

    .loading-container {
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Summary Statistics */
    .summary-stats {
        margin-bottom: 2rem;
    }

    .summary-card {
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        height: 100%;
        overflow: hidden;
    }

    .summary-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }

    .summary-card-body {
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .summary-icon {
        width: 60px;
        height: 60px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        flex-shrink: 0;
    }

    .summary-content {
        flex: 1;
    }

    .summary-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
        font-weight: 500;
    }

    .summary-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #212529;
    }

    .summary-icon-1 {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .summary-icon-2 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }

    .summary-icon-3 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }

    .summary-icon-4 {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
    }

    /* Refresh Button */
    .refresh-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
    }

    .refresh-button:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .refresh-icon {
        transition: transform 0.3s;
    }

    .refresh-icon.rotating {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /* View Toggle */
    .view-toggle-group {
        display: inline-flex;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .view-toggle-btn {
        border: none;
        padding: 0.5rem 0.75rem;
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: pointer;
        transition: all 0.2s;
        border-right: 1px solid #dee2e6;
    }

    .view-toggle-btn:last-child {
        border-right: none;
    }

    .view-toggle-btn:hover {
        background-color: #e9ecef;
        color: #495057;
    }

    .view-toggle-btn.active {
        background-color: #667eea;
        color: white;
    }

    /* List View */
    .list-view-card {
        cursor: pointer;
        transition: all 0.3s;
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .list-view-card:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .list-view-body {
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .list-view-main {
        flex: 1;
        min-width: 0;
    }

    .list-view-title {
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #212529;
    }

    .list-view-stats {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .list-view-stat {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .list-view-stat-icon {
        font-size: 1.125rem;
        color: #6c757d;
    }

    .list-view-stat-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-left: 0.25rem;
    }

    .list-view-stat-value {
        font-weight: 600;
        color: #212529;
    }

    .list-view-type {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.8125rem;
        font-weight: 600;
        background-color: #e7f3ff;
        color: #0066cc;
    }

/* From: Affiliates/MainAffiliateStatement.razor */
.filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .statement-table {
        font-size: 0.9rem;
    }

        .statement-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            white-space: nowrap;
        }

        .statement-table td {
            vertical-align: middle;
        }

    .transaction-type-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .balance-positive {
        color: #28a745;
        font-weight: 600;
    }

    .balance-negative {
        color: #dc3545;
        font-weight: 600;
    }

    .balance-zero {
        color: #6c757d;
    }

    .summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

    .summary-card-info {
        border-left-color: #17a2b8;
    }

    .summary-card-success {
        border-left-color: #28a745;
    }

    .summary-card-danger {
        border-left-color: #dc3545;
    }

    .summary-card-primary {
        border-left-color: #6366f1;
    }

    .affiliate-info-card {
        background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

/* From: Affiliates/Profiles.razor */
.section-header {
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .info-row {
        margin-bottom: 1rem;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #212529;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    .sub-affiliate-costs-badge {
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .sub-affiliate-costs-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

    /* Edit buy cost modal - gradient #667eea → #764ba2, same as CustomizeCost */
    .modal-cost .modal-dialog {
        max-width: 480px;
    }
    .modal-cost .modal-content {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .modal-cost .modal-header {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .modal-cost .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }
    .modal-cost .modal-title {
        font-weight: 600;
        font-size: 1.125rem;
    }
    .modal-cost .modal-body {
        padding: 1.5rem 1.25rem;
    }
    .modal-cost .modal-footer {
        border-top: 1px solid #e9ecef;
        padding: 1rem 1.25rem;
        gap: 0.5rem;
        background: #f8f9fa;
    }
    .modal-cost .form-label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.35rem;
    }
    .modal-cost .form-control {
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid #dee2e6;
    }
    .modal-cost .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

/* From: Affiliates/ProfilesMainAffiliateSelector.razor */
.affiliate-card {
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        border: none;
        overflow: hidden;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .affiliate-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .affiliate-card .card-body {
        padding: 1.75rem;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 220px;
    }

    /* Card Color Schemes (same as MainAffiliates.razor) */
    .card-color-0 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
    .card-color-1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; }
    .card-color-2 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; }
    .card-color-3 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: #1a1a1a; }
    .card-color-4 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #1a1a1a; }
    .card-color-5 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); color: white; }
    .card-color-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #1a1a1a; }
    .card-color-7 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); color: #1a1a1a; }
    .card-color-8 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #1a1a1a; }
    .card-color-9 { background: linear-gradient(135deg, #ff8a80 0%, #ea6100 100%); color: white; }
    .card-color-10 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #1a1a1a; }
    .card-color-11 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); color: #1a1a1a; }

    .affiliate-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.875rem;
        border-radius: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        margin-top: 0.5rem;
        background-color: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        color: inherit;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .affiliate-card .card-title {
        color: inherit;
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .stats-section {
        margin-top: auto;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .stat-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0;
        transition: transform 0.2s;
    }

    .stat-item:hover {
        transform: translateX(-3px);
    }

    .stat-item:last-child {
        padding-bottom: 0;
    }

    .stat-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        opacity: 0.95;
        font-weight: 500;
    }

    .stat-value {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .stat-icon {
        font-size: 1rem;
        opacity: 0.9;
    }


/* --------------------------------------------------------------------------
   WhatsApp
   -------------------------------------------------------------------------- */

/* From: WhatsApp/Messages.razor */
.message-row {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 0;
    }
    .message-row:last-child {
        border-bottom: none;
    }
    .status-sent { color: #198754; }
    .status-pending { color: #ffc107; }
    .status-failed { color: #dc3545; }
    .stat-card {
        text-align: center;
        padding: 1.5rem;
        border-radius: 0.5rem;
    }
    .stat-number {
        font-size: 2rem;
        font-weight: bold;
    }
    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
    }

/* From: WhatsApp/SendToSubscribers.razor */
.filter-section { background-color: #f8f9fa; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
    .stat-number { font-size: 1.75rem; font-weight: bold; }
    .stat-label { color: #6c757d; font-size: 0.875rem; }

/* From: WhatsApp/SentMessages.razor */
.message-row {
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 0;
    }
    .message-row:last-child {
        border-bottom: none;
    }
    .status-sent { color: #198754; }
    .status-pending { color: #ffc107; }
    .status-failed { color: #dc3545; }

/* From: WhatsApp/Templates.razor */
.template-card {
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
        padding: 1.25rem;
        margin-bottom: 1rem;
        transition: all 0.2s;
        height: 100%;
    }

        .template-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            border-color: #5c67f2;
        }

    .template-type-badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
        border-radius: 0.25rem;
    }

    .template-message {
        background-color: #f8f9fa;
        border-radius: 0.375rem;
        padding: 1rem;
        white-space: pre-wrap;
        font-size: 0.9rem;
        max-height: 150px;
        overflow-y: auto;
    }

    .filter-badge {
        cursor: pointer;
        transition: all 0.2s;
    }

        .filter-badge:hover {
            transform: scale(1.05);
        }

        .filter-badge.active {
            box-shadow: 0 0 0 3px rgba(92, 103, 242, 0.3);
        }

    .template-var-section {
        background: var(--bs-light, #f8f9fa);
        border-radius: 0.5rem;
        padding: 1rem 1.25rem;
        border: 1px solid rgba(0,0,0,0.06);
    }

        .template-var-section h6 {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--bs-secondary);
        }

    .template-var-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.5rem 1rem;
    }

    .template-var-chip {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.65rem;
        background: #fff;
        border-radius: 0.375rem;
        border: 1px solid #e9ecef;
        font-size: 0.8125rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .template-var-chip:hover {
            border-color: #5c67f2;
            box-shadow: 0 1px 4px rgba(92, 103, 242, 0.15);
        }

        .template-var-chip code {
            font-family: ui-monospace, monospace;
            font-size: 0.8rem;
            padding: 0.15rem 0.35rem;
            background: rgb(245 184 73);
            color: black;
            border-radius: 0.25rem;
            white-space: nowrap;
        }

        .template-var-chip .var-desc {
            color: var(--bs-body-color);
            flex: 1;
            min-width: 0;
        }

    .template-var-modal-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.5rem;
        margin-top: 0.35rem;
    }

        .template-var-modal-list code {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
            background: var(--bs-light, #f8f9fa);
            border-radius: 0.25rem;
            border: 1px solid #e9ecef;
        }

    .cursor-pointer {
        cursor: pointer;
    }

    .rotate-180 {
        transform: rotate(180deg);
    }

/* From: WhatsApp/WhatsAppSettings.razor */
/* Connection Status Banner */
    .connection-banner {
        border-radius: 1rem;
        padding: 1.5rem 2rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

        .connection-banner.connected {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            border: 1px solid #28a745;
        }

        .connection-banner.disconnected {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            border: 1px solid #dc3545;
        }

        .connection-banner.no-account {
            background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
            border: 1px solid #6c757d;
        }

    .connection-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .connection-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
    }

        .connection-icon.connected {
            background: #28a745;
            color: white;
        }

        .connection-icon.disconnected {
            background: #dc3545;
            color: white;
        }

        .connection-icon.no-account {
            background: #6c757d;
            color: white;
        }

    .connection-details h4 {
        margin: 0;
        font-weight: 600;
    }

    .connection-details p {
        margin: 0.25rem 0 0;
        opacity: 0.8;
    }

    /* Account Card */
    .account-card {
        border-radius: 1rem;
        border: none;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

        .account-card .card-body {
            padding: 1.5rem;
        }

    .account-info-item {
        padding: 1rem;
        border-radius: 0.5rem;
        background: #f8f9fa;
        margin-bottom: 0.75rem;
    }

        .account-info-item label {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: #6c757d;
            margin-bottom: 0.25rem;
            display: block;
        }

        .account-info-item .value {
            font-weight: 600;
            font-size: 1rem;
            color: #212529;
        }

    /* QR Modal */
    .qr-modal-content {
        text-align: center;
        padding: 2rem;
    }

    .qr-code-img {
        max-width: 280px;
        margin: 0 auto;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

    /* Buttons */
    .btn-whatsapp {
        background: #25d366;
        border-color: #25d366;
        color: white;
    }

        .btn-whatsapp:hover {
            background: #1ebe5a;
            border-color: #1ebe5a;
            color: white;
        }

    .btn-outline-whatsapp {
        color: #25d366;
        border-color: #25d366;
    }

        .btn-outline-whatsapp:hover {
            background: #25d366;
            color: white;
        }

    /* Action buttons group */
    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }


/* --------------------------------------------------------------------------
   PlansPayments
   -------------------------------------------------------------------------- */

/* From: PlansPayments/PaymentAnalytics.razor */
/* Page Container */
    .payment-analytics-page {
        min-height: 100vh;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        padding: 2rem 0;
        direction: rtl;
    }

    /* Page Header */
    .payment-analytics-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border-radius: 1.5rem;
        padding: 3.5rem 2.5rem;
        margin-bottom: 3rem;
        color: white;
        text-align: center;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
    }

    .payment-analytics-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: pulse 8s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.5;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    .payment-analytics-header h1 {
        font-size: 2.75rem;
        font-weight: 800;
        margin-bottom: 0.75rem;
        color: #ffffff;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
        position: relative;
        z-index: 1;
        letter-spacing: -0.5px;
    }

    .payment-analytics-header p {
        font-size: 1.15rem;
        color: rgba(255, 255, 255, 0.95);
        margin: 0;
        position: relative;
        z-index: 1;
        font-weight: 400;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    }

    /* Analytics Cards */
    .analytics-card {
        border-radius: 1.5rem;
        border: none;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 2rem;
        overflow: hidden;
        background: white;
        position: relative;
        border: 2px solid #e2e8f0;
    }

    .analytics-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .analytics-card:hover {
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
        transform: translateY(-4px);
        border-color: #667eea;
    }

    .analytics-card:hover::before {
        opacity: 1;
    }

    .analytics-card .card-header {
        background: transparent;
        color: #1e293b;
        padding: 1.75rem 2rem;
        border: none;
        border-bottom: 2px solid #e2e8f0;
        position: relative;
    }


    .analytics-card .card-header h5 {
        margin: 0;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.2rem;
        letter-spacing: 0.3px;
        color: #1e293b;
    }

    .analytics-card .card-header h5 i {
        font-size: 1.75rem;
        color: #667eea;
    }

    .analytics-card .card-body {
        padding: 2.5rem;
        background: white;
    }

    /* Stat Cards */
    .stat-card-analytics {
        background: white;
        border-radius: 1.25rem;
        padding: 2rem 1.5rem;
        text-align: center;
        border: 2px solid #e2e8f0;
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .stat-card-analytics::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .stat-card-analytics:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
    }

    .stat-card-analytics:hover::before {
        transform: scaleX(1);
    }

    .stat-card-analytics .stat-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: 0.8;
    }

    .stat-card-analytics .stat-value {
        font-size: 2.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.75rem;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .stat-card-analytics .stat-label {
        font-size: 0.95rem;
        color: #64748b;
        font-weight: 600;
        letter-spacing: 0.3px;
        margin-top: auto;
    }

    /* Chart Container */
    .chart-container-analytics {
        position: relative;
        height: 350px;
        margin: 0;
        padding: 1.5rem;
        background: #f8fafc;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
    }

    /* Filter Section */
    .filter-section {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }

    /* Statistics Section */
    .statistics-section {
        margin-bottom: 3rem;
    }

    .statistics-section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 3px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .statistics-section-title i {
        color: #667eea;
        font-size: 1.75rem;
    }

    /* Charts Section */
    .charts-section {
        margin-bottom: 2rem;
    }

    .charts-section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 3px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .charts-section-title i {
        color: #667eea;
        font-size: 1.75rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .payment-analytics-page {
            padding: 1rem 0;
        }

        .payment-analytics-header {
            padding: 2.5rem 1.5rem;
            border-radius: 1rem;
            margin-bottom: 2rem;
        }

        .payment-analytics-header h1 {
            font-size: 2rem;
        }

        .analytics-card .card-header {
            padding: 1.5rem 1.5rem;
        }

        .analytics-card .card-body {
            padding: 1.5rem;
        }

        .stat-card-analytics {
            padding: 1.5rem 1rem;
            margin-bottom: 1rem;
        }

        .stat-card-analytics .stat-value {
            font-size: 2rem;
        }

        .stat-card-analytics .stat-icon {
            font-size: 2.5rem;
        }

        .chart-container-analytics {
            height: 250px;
            padding: 1rem;
        }

        .statistics-section-title,
        .charts-section-title {
            font-size: 1.25rem;
        }
    }

/* From: PlansPayments/PlanUpgrade.razor */
.upgrade-page-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        direction: rtl;
    }

    .upgrade-page-header {
        position: relative;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 3rem 2rem;
        margin-bottom: 3rem;
        overflow: hidden;
    }

    .header-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
        background-size: cover;
        opacity: 0.3;
    }

    .header-content {
        position: relative;
        z-index: 1;
        text-align: center;
        color: white;
    }

    .back-button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 0.5rem;
        color: white;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        backdrop-filter: blur(10px);
    }

    .back-button:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateX(-5px);
    }

    .upgrade-icon-wrapper {
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        backdrop-filter: blur(10px);
        border: 4px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .upgrade-icon-wrapper i {
        font-size: 3rem;
        color: white;
        animation: bounce 2s ease-in-out infinite;
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    .upgrade-page-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: white;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
    }

    .upgrade-page-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.95);
        margin: 0;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    }

    .upgrade-page-body {
        padding: 0 1rem 3rem;
    }

    .unified-upgrade-card {
        background: white;
        border-radius: 1.5rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .upgrade-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 2.5rem 2rem;
        color: white;
    }

    .upgrade-card-header .plan-item {
        color: white;
    }

    .plan-comparison {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .plan-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .plan-badge {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }

    .plan-badge:hover {
        transform: scale(1.1);
    }

    .plan-badge.current {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
    }

    .plan-badge.new {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
        }
    }

    .plan-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .plan-label {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }

    .plan-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .plan-arrow {
        font-size: 3rem;
        color: white;
        opacity: 0.9;
        animation: slide 1.5s ease-in-out infinite;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    @keyframes slide {
        0%, 100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-15px);
        }
    }

    .upgrade-card-body {
        padding: 2.5rem;
    }

    .info-section {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-radius: 1rem;
        margin-bottom: 2rem;
        border: 2px solid #93c5fd;
    }

    .info-badge {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .info-text {
        margin: 0;
        font-size: 1.1rem;
        color: #1e40af;
        line-height: 1.6;
    }

    .details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .detail-item {
        padding: 1.5rem;
        background: #f8fafc;
        border-radius: 1rem;
        border: 2px solid #e2e8f0;
        transition: all 0.3s ease;
    }

    .detail-item:hover {
        border-color: #667eea;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
    }

    .detail-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.95rem;
        color: #64748b;
        font-weight: 600;
    }

    .detail-header i {
        font-size: 1.25rem;
        color: #667eea;
    }

    .detail-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1e293b;
    }

    .detail-value .currency {
        font-size: 1rem;
        font-weight: 500;
        margin-right: 0.25rem;
        color: #64748b;
    }

    .detail-value.credit-value {
        color: #2563eb;
    }

    .detail-value.price-value {
        color: #7c3aed;
    }

    .detail-value.price-value .original-price {
        text-decoration: line-through;
        color: #94a3b8;
        font-size: 1.25rem;
        margin-left: 0.5rem;
    }

    .detail-value.discount-value {
        color: #059669;
    }

    .detail-value.excess-value {
        color: #d97706;
    }

    .discount-badge {
        margin-top: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-radius: 0.5rem;
        font-size: 0.875rem;
        color: #92400e;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid #f59e0b;
    }

    .discount-badge i {
        font-size: 1rem;
    }

    .discount-date {
        margin-right: auto;
        font-size: 0.75rem;
        opacity: 0.8;
    }

    .excess-note {
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: #92400e;
        font-weight: 500;
    }

    .final-amount-section {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 3px solid #e2e8f0;
    }

    .amount-display {
        text-align: center;
        padding: 2rem;
        background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
        border-radius: 1rem;
        border: 2px solid #fecaca;
    }

    .amount-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-size: 1.1rem;
        color: #991b1b;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .amount-label i {
        font-size: 1.5rem;
    }

    .amount-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: #dc2626;
        margin-bottom: 0.5rem;
    }

    .amount-value .currency {
        font-size: 1.5rem;
        font-weight: 500;
        margin-right: 0.5rem;
    }

    .charge-date {
        font-size: 0.95rem;
        color: #991b1b;
        margin-top: 0.5rem;
    }

    .success-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 2rem;
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-radius: 1rem;
        border: 2px solid #86efac;
    }

    .success-display i {
        font-size: 3rem;
        color: #22c55e;
    }

    .success-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #15803d;
        margin-bottom: 0.25rem;
    }

    .success-text {
        font-size: 1rem;
        color: #166534;
    }

    .upgrade-page-footer {
        display: flex;
        gap: 1rem;
        justify-content: center;
        padding: 2rem 0;
        margin-top: 2rem;
    }

    .upgrade-btn {
        padding: 1rem 2.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 1.1rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 180px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .upgrade-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

    .cancel-btn {
        background: white;
        color: #495057;
        border: 2px solid #dee2e6;
    }

    .cancel-btn:hover:not(:disabled) {
        background: #f8f9fa;
        border-color: #adb5bd;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .confirm-btn {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    }

    .confirm-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(34, 197, 94, 0.5);
    }

    .confirm-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    @media (max-width: 768px) {
        .upgrade-page-header {
            padding: 2rem 1rem;
        }

        .upgrade-page-title {
            font-size: 1.75rem;
        }

        .plan-comparison {
            flex-direction: column;
            gap: 1.5rem;
        }

        .upgrade-card-header {
            padding: 2rem 1.5rem;
        }

        .upgrade-card-body {
            padding: 1.5rem;
        }

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

        .plan-arrow {
            transform: rotate(90deg);
        }

        .upgrade-page-footer {
            flex-direction: column-reverse;
        }

        .upgrade-btn {
            width: 100%;
        }

        .detail-item {
            padding: 1.25rem;
        }

        .detail-value {
            font-size: 1.5rem;
        }

        .amount-value {
            font-size: 2rem;
        }
    }

/* From: PlansPayments/PlanUpgradeModal.razor */
.upgrade-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        padding: 1rem;
    }

    .upgrade-modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .upgrade-modal-container {
        background: white;
        border-radius: 1.5rem;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        max-width: 600px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        transform: scale(0.9) translateY(20px);
        transition: transform 0.3s ease;
        direction: rtl;
    }

    .upgrade-modal-overlay.show .upgrade-modal-container {
        transform: scale(1) translateY(0);
    }

    .upgrade-modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 2rem;
        border-radius: 1.5rem 1.5rem 0 0;
        position: relative;
        text-align: center;
        color: white;
    }

    .upgrade-icon-wrapper {
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        backdrop-filter: blur(10px);
        border: 3px solid rgba(255, 255, 255, 0.3);
    }

    .upgrade-icon-wrapper i {
        font-size: 2.5rem;
        color: white;
        animation: bounce 2s ease-in-out infinite;
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    .upgrade-modal-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .upgrade-modal-close {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: white;
        font-size: 1.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .upgrade-modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

    .upgrade-modal-body {
        padding: 2rem;
    }

    .plan-comparison {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 1rem;
        gap: 1rem;
    }

    .plan-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .plan-badge {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .plan-badge.current {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
    }

    .plan-badge.new {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }
    }

    .plan-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .plan-label {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
    }

    .plan-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: #212529;
    }

    .plan-arrow {
        font-size: 2rem;
        color: #667eea;
        animation: slide 1.5s ease-in-out infinite;
    }

    @keyframes slide {
        0%, 100% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(-10px);
        }
    }

    .upgrade-details {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .detail-card {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
        background: white;
        border-radius: 0.75rem;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .detail-card:hover {
        border-color: #667eea;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
    }

    .detail-card.amount-card {
        background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
        border-color: #fecaca;
    }

    .detail-card.success-card {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-color: #86efac;
    }

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

    .detail-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .detail-icon.amount-icon {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    }

    .detail-icon.success-icon {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }

    .detail-icon.credit-icon {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .detail-icon.price-icon {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    }

    .detail-icon.discount-icon {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .detail-icon.excess-icon {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .detail-card.credit-card {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-color: #93c5fd;
    }

    .detail-card.price-card {
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
        border-color: #c4b5fd;
    }

    .detail-card.discount-card {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border-color: #86efac;
    }

    .detail-card.excess-card {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border-color: #fcd34d;
        border-width: 3px;
        animation: excess-pulse 2s ease-in-out infinite;
    }

    @keyframes excess-pulse {
        0%, 100% {
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
        }
        50% {
            box-shadow: 0 6px 25px rgba(245, 158, 11, 0.4);
        }
    }

    .credit-amount {
        color: #2563eb;
    }

    .price-amount {
        color: #7c3aed;
    }

    .discount-amount {
        color: #059669;
    }

    .excess-amount {
        color: #d97706;
        font-size: 2rem;
    }

    .excess-label {
        color: #92400e;
        font-weight: 700;
        font-size: 1rem;
    }

    .excess-text {
        color: #92400e;
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .summary-card {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border: 2px solid #cbd5e1;
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin: 1rem 0;
    }

    .summary-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 1rem 0;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #cbd5e1;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .summary-row:last-child {
        border-bottom: none;
    }

    .summary-row.final-row {
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 2px solid #cbd5e1;
        border-bottom: none;
    }

    .summary-label {
        font-size: 0.95rem;
        color: #475569;
        font-weight: 500;
    }

    .summary-value {
        font-size: 1rem;
        color: #1e293b;
        font-weight: 600;
    }

    .summary-value.discount-value {
        color: #059669;
    }

    .summary-value.final-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #dc2626;
    }

    .discount-row {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        margin: 0.25rem -0.5rem;
        padding: 0.5rem 0.5rem;
        border-radius: 0.5rem;
        border-bottom: none;
    }

    .detail-content {
        flex: 1;
    }

    .detail-text {
        margin: 0;
        font-size: 1rem;
        color: #495057;
        line-height: 1.6;
    }

    .detail-text.success-text {
        color: #15803d;
        font-weight: 600;
    }

    .detail-label {
        margin: 0 0 0.5rem 0;
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
    }

    .detail-amount {
        margin: 0 0 0.5rem 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: #dc2626;
    }

    .detail-amount .currency {
        font-size: 1rem;
        font-weight: 500;
        margin-right: 0.25rem;
    }

    .detail-date {
        margin: 0;
        font-size: 0.875rem;
        color: #6c757d;
    }

    .upgrade-modal-footer {
        padding: 1.5rem 2rem;
        border-top: 1px solid #e9ecef;
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
    }

    .upgrade-btn {
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 1rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
    }

    .upgrade-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .cancel-btn {
        background: #f8f9fa;
        color: #495057;
        border: 2px solid #dee2e6;
    }

    .cancel-btn:hover:not(:disabled) {
        background: #e9ecef;
        border-color: #adb5bd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .confirm-btn {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
    }

    .confirm-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
    }

    .confirm-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    @media (max-width: 768px) {
        .upgrade-modal-container {
            margin: 1rem;
            max-width: calc(100% - 2rem);
        }

        .plan-comparison {
            flex-direction: column;
        }

        .plan-arrow {
            transform: rotate(90deg);
        }

        .upgrade-modal-footer {
            flex-direction: column-reverse;
        }

        .upgrade-btn {
            width: 100%;
        }
    }

/* From: PlansPayments/PlanUsage.razor */
/* Page Header */
    .plan-usage-page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border-radius: 1.5rem;
        padding: 3.5rem 2.5rem;
        margin-bottom: 3rem;
        color: white;
        text-align: center;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
    }

        .plan-usage-page-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 8s ease-in-out infinite;
        }

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

        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    .plan-usage-page-header h1 {
        font-size: 2.75rem;
        font-weight: 800;
        margin-bottom: 0.75rem;
        color: #ffffff;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3);
        position: relative;
        z-index: 1;
        letter-spacing: -0.5px;
    }

    .plan-usage-page-header p {
        font-size: 1.15rem;
        opacity: 0.95;
        margin: 0;
        position: relative;
        z-index: 1;
        font-weight: 400;
    }

    /* Usage Cards */
    .usage-card {
        border-radius: 1.25rem;
        border: none;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 2rem;
        overflow: hidden;
        background: white;
        position: relative;
    }

        .usage-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .usage-card:hover {
            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
            transform: translateY(-4px);
        }

            .usage-card:hover::before {
                opacity: 1;
            }

        .usage-card .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem 2rem;
            border: none;
            position: relative;
        }

            .usage-card .card-header::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            }

            .usage-card .card-header h5 {
                margin: 0;
                font-weight: 700;
                display: flex;
                align-items: center;
                gap: 0.75rem;
                font-size: 1.1rem;
                letter-spacing: 0.3px;
                color: #ffffff;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.4);
            }

    .usage-card .card-header h5 i {
        font-size: 1.5rem;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .cost-per-activation-badge {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        margin-top: 0.5rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

    .cost-per-activation-badge:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

    .cost-per-activation-badge i {
        font-size: 1rem;
    }

    .cost-per-activation-badge strong {
        font-weight: 700;
        font-size: 1.05rem;
    }

        .usage-card .card-body {
            padding: 2rem;
            background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
        }

    /* Stat Cards */
    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 2rem 1.5rem;
        text-align: center;
        border: 2px solid transparent;
        background-clip: padding-box;
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        overflow: hidden;
    }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2);
            border-color: #667eea;
        }

            .stat-card:hover::before {
                transform: scaleX(1);
            }

        .stat-card .stat-value {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.75rem;
            line-height: 1.2;
            letter-spacing: -1px;
        }

        .stat-card .stat-label {
            font-size: 0.95rem;
            color: #6c757d;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

    /* Progress Bar */
    .progress-container {
        margin: 2rem 0;
        padding: 1.5rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    .progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
        font-weight: 700;
        color: #667eea;
        font-size: 1rem;
        text-shadow: 0 1px 3px rgba(102, 126, 234, 0.2);
    }

    .progress {
        height: 2rem;
        border-radius: 1rem;
        background: linear-gradient(135deg, #f1f3f5 0%, #e9ecef 100%);
        overflow: hidden;
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
        position: relative;
    }

    .progress-bar {
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 0.9rem;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
    }

        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }

    @keyframes shimmer {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    .progress-bar.bg-success {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    }

    .progress-bar.bg-warning {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    }

    .progress-bar.bg-danger {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
    }

    /* Credit Card */
    .credit-card {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-radius: 1.25rem;
        padding: 2rem;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
    }

        .credit-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        }

        .credit-card .credit-value {
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
            line-height: 1;
            letter-spacing: -2px;
        }

    /* Billing Table */
    .billing-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

        .billing-table thead {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .billing-table th {
            font-weight: 700;
            color: #2d3436;
            padding: 1.25rem 1rem;
            border-bottom: 3px solid #667eea;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .billing-table tbody tr {
            transition: all 0.2s ease;
            border-bottom: 1px solid #e9ecef;
        }

            .billing-table tbody tr:hover {
                background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, transparent 100%);
                transform: scale(1.01);
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }

        .billing-table td {
            padding: 1.25rem 1rem;
            color: #495057;
            font-weight: 500;
        }

    /* Status Badges */
    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-size: 0.85rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

        .status-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .status-badge.succeeded {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            color: #155724;
            border: 1px solid #b8dacc;
        }

        .status-badge.pending {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        .status-badge.failed {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .status-badge.canceled {
            background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
            color: #383d41;
            border: 1px solid #d6d8db;
        }

    /* Chart Container */
    .chart-container {
        position: relative;
        height: 320px;
        margin: 1.5rem 0;
        padding: 1rem;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
        border-radius: 1rem;
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
    }

    /* Renew/Pay Button */
    .btn-renew {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: 2px solid rgba(255,255,255,0.2);
        color: white;
        font-weight: 700;
        padding: 0.625rem 1.5rem;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        backdrop-filter: blur(10px);
    }

        .btn-renew:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            border-color: rgba(255,255,255,0.4);
        }

    /* Change Plan Button */
    .btn-change-plan {
        background: rgba(255, 255, 255, 0.15);
        border: 2px solid rgba(255,255,255,0.3);
        color: white;
        font-weight: 700;
        padding: 0.625rem 1.5rem;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
    }

        .btn-change-plan:hover {
            background: rgba(255, 255, 255, 0.25);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            border-color: rgba(255,255,255,0.5);
        }

    /* Trial badge in card header */
    .trial-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.35rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.85rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.25);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.4);
        white-space: nowrap;
    }

    /* CTA link for choosing plan */
    .plan-cta-link {
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

        .plan-cta-link:hover {
            color: white;
            opacity: 1;
        }

    /* Pagination */
    .pagination .page-link {
        border-radius: 0.5rem;
        margin: 0 0.25rem;
        border: 2px solid #e9ecef;
        color: #667eea;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .pagination .page-link:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
            transform: translateY(-2px);
        }

    .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    /* Empty State */
    .empty-state {
        padding: 4rem 2rem;
        text-align: center;
    }

        .empty-state i {
            font-size: 4rem;
            color: #dee2e6;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

    /* Responsive Design */
    @media (max-width: 768px) {
        .plan-usage-page-header {
            padding: 2.5rem 1.5rem;
            border-radius: 1rem;
        }

            .plan-usage-page-header h1 {
                font-size: 2rem;
            }

            .plan-usage-page-header p {
                font-size: 1rem;
            }

        .usage-card .card-body {
            padding: 1.5rem;
        }

        .usage-card .card-header {
            padding: 1.25rem 1.5rem;
        }

        .stat-card {
            padding: 1.5rem 1rem;
            margin-bottom: 1rem;
        }

            .stat-card .stat-value {
                font-size: 2rem;
            }

            .stat-card .stat-label {
                font-size: 0.85rem;
            }

        .chart-container {
            height: 250px;
            padding: 0.75rem;
        }

        .billing-table th,
        .billing-table td {
            padding: 0.75rem 0.5rem;
            font-size: 0.85rem;
        }

        .credit-card {
            padding: 1.5rem;
        }

            .credit-card .credit-value {
                font-size: 2.25rem;
            }
    }

    @media (max-width: 576px) {
        .plan-usage-page-header h1 {
            font-size: 1.75rem;
        }

        .stat-card .stat-value {
            font-size: 1.75rem;
        }

        .chart-container {
            height: 200px;
        }
    }

/* From: PlansPayments/PricingPlans.razor */
.pricing-page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 1.5rem;
        padding: 3rem 2rem;
        margin-bottom: 3rem;
        color: white;
        text-align: center;
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
    }

    .pricing-page-header h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: white;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .pricing-page-header p {
        font-size: 1.1rem;
        opacity: 0.95;
        margin: 0;
    }

    .pricing-card {
        border-radius: 10px;
        border: none;
        transition: all 0.3s ease;
        margin-bottom: 2rem;
        overflow: visible;
        background: white;
        position: relative;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .pricing-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-5px);
    }

    .pricing-card.selected {
        box-shadow: 0 12px 40px rgba(34, 197, 94, 0.3);
        border: 3px solid #22c55e;
        transform: scale(1.02);
        position: relative;
        overflow: visible;
    }

    .pricing-card.selected::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
        border-radius: 10px;
        z-index: -1;
        opacity: 0.2;
        animation: glow 2s ease-in-out infinite alternate;
    }

    @keyframes glow {
        0% {
            opacity: 0.2;
            box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
        }
        100% {
            opacity: 0.4;
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
        }
    }

    .pricing-card.selected .pricing-card-header {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
        position: relative;
    }

    .pricing-card.selected .pricing-card-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
        pointer-events: none;
    }

    .pricing-card.selected .pricing-card-body {
        background: linear-gradient(to bottom, #f0fdf4 0%, #dcfce7 50%, #ffffff 100%);
        border-top: 2px solid #22c55e;
    }

    .pricing-card.selected .max-activations-info {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        border-left: 4px solid #22c55e;
    }

    .pricing-card.selected .max-activations-info i {
        color: #22c55e;
    }

    .plan-badge {
        display: none;
    }

    .discount-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        z-index: 10;
        animation: pulse 2s ease-in-out infinite;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
        }
    }

    .discount-badge .discount-percentage {
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1;
    }

    .discount-badge .discount-period {
        font-size: 0.65rem;
        font-weight: 500;
        opacity: 0.95;
        font-style: italic;
    }

    .max-activations-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem;
        margin: 1rem 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 0.5rem;
        border-left: 3px solid #667eea;
    }

    .max-activations-info i {
        color: #667eea;
        font-size: 1.1rem;
    }

    .max-activations-info span {
        color: #495057;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .plan-feature-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem;
        margin: 0.75rem 0;
        border-radius: 0.5rem;
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
    }

    .plan-feature-badge.ticketing {
        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
        border-left: 3px solid #667eea;
        color: #495057;
    }

    .plan-feature-badge.ticketing i {
        color: #667eea;
        font-size: 1.1rem;
    }

    .plan-feature-badge.support {
        background: linear-gradient(135deg, #28a74515 0%, #20c99715 100%);
        border-left: 3px solid #28a745;
        color: #495057;
    }

    .plan-feature-badge.support i {
        color: #28a745;
        font-size: 1.1rem;
    }

    .plan-feature-badge.self-service {
        background: linear-gradient(135deg, #f9731615 0%, #fb923c15 100%);
        border-left: 3px solid #f97316;
        color: #495057;
    }

    .plan-feature-badge.self-service i {
        color: #f97316;
        font-size: 1.1rem;
    }

    .plan-feature-badge.unavailable {
        background: linear-gradient(135deg, #e9ecef15 0%, #dee2e615 100%);
        border-left: 3px solid #adb5bd;
        color: #6c757d;
        opacity: 0.7;
    }

    .plan-feature-badge.unavailable i {
        color: #adb5bd;
        font-size: 1.1rem;
    }

    .plan-feature-badge.whatsapp {
        background: linear-gradient(135deg, #25d36615 0%, #128c7e15 100%);
        border-left: 3px solid #25d366;
        color: #495057;
    }

    .plan-feature-badge.whatsapp i {
        color: #25d366;
        font-size: 1.1rem;
    }

    .pricing-card-header {
        color: white;
        padding: 2.5rem 1.5rem 3rem;
        text-align: center;
        position: relative;
        border-radius: 10px 10px 50% 50% / 10px 10px 30px 30px;
        margin-bottom: -20px;
        z-index: 1;
    }

    .pricing-card-header.plan-purple {
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    }

    .pricing-card-header.plan-green {
        background: linear-gradient(135deg, #84cc16 0%, #a3e635 100%);
    }

    .pricing-card-header.plan-orange {
        background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    }

    .pricing-card-header.plan-blue {
        background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    }

    .pricing-card-header.plan-pink {
        background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    }

    .pricing-card-header.plan-teal {
        background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
    }

    .pricing-card-header.plan-active-green {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
        position: relative;
        overflow: hidden;
    }

    .pricing-card-header.plan-active-green::before {
        content: '✓';
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 900;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        animation: checkmark-pulse 2s ease-in-out infinite;
    }

    @keyframes checkmark-pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    .pricing-card.selected .plan-feature-badge {
        background: linear-gradient(135deg, #dcfce715 0%, #bbf7d015 100%);
        border-left-color: #22c55e;
    }

    .pricing-card.selected .plan-feature-badge i {
        color: #22c55e;
    }

    .pricing-card-header {
        color: white;
    }

    .pricing-card-header h5 {
        font-size: 0.85rem;
        font-weight: 700;
        margin: 0 0 1rem 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .plan-icon {
        display: none;
    }

    .pricing-card-body {
        padding: 2.5rem 2rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .pricing-card-header .price-display {
        font-size: 3.5rem;
        font-weight: 900;
        color: white;
        margin: 0.5rem 0;
        text-align: center;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .pricing-card-header .price-display small {
        font-size: 0.75rem;
        font-weight: 600;
        color: white;
        display: block;
        margin-top: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.95;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .plan-description {
        min-height: 120px;
        margin: 1.5rem 0;
        flex-grow: 1;
    }

    .plan-description p {
        color: #495057;
        font-size: 0.9rem;
        line-height: 1.8;
        text-align: center;
        margin: 0;
    }

    .plan-features {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
    }

    .plan-features li {
        padding: 0.75rem 0;
        color: #495057;
        font-size: 0.9rem;
        border-bottom: 1px solid #f0f0f0;
    }

    .plan-features li:last-child {
        border-bottom: none;
    }

    .plan-features li i {
        color: #28a745;
        margin-left: 0.5rem;
        font-size: 1rem;
    }

    .trial-banner {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        padding: 2rem;
        border-radius: 1.5rem;
        margin-bottom: 3rem;
        text-align: center;
        box-shadow: 0 8px 25px rgba(240, 147, 251, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .trial-banner.warning {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
    }

    .trial-banner.expired {
        background: linear-gradient(135deg, #c92a2a 0%, #a61e1e 100%);
        box-shadow: 0 8px 25px rgba(201, 42, 42, 0.3);
    }

    .trial-banner.active {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
        box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.3);
        position: relative;
        overflow: hidden;
    }

    .trial-banner.active::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: rotate-banner 10s linear infinite;
    }

    @keyframes rotate-banner {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .trial-banner.active h4 {
        position: relative;
        z-index: 1;
    }

    .trial-banner.active p {
        position: relative;
        z-index: 1;
    }

    .trial-banner h4 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: white;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .select-plan-btn {
        background: #f97316;
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.9rem;
        color: white;
        width: 100%;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: auto;
    }

    .select-plan-btn:hover:not(:disabled) {
        background: #ea580c;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
    }

    .select-plan-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .select-plan-btn:disabled {
        opacity: 0.6;
        transform: none;
        cursor: not-allowed;
    }

    .current-plan-badge {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        padding: 1rem 2rem;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.9rem;
        width: 100%;
        border: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .current-plan-badge:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    }

    .current-plan-badge:active:not(:disabled) {
        transform: translateY(0);
    }

    .current-plan-badge:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .current-plan-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shine 3s infinite;
    }

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

    .current-plan-badge:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    }

    .current-plan-badge:active:not(:disabled) {
        transform: translateY(0);
    }

    .current-plan-badge:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .current-plan-badge i {
        animation: pulse-check 2s ease-in-out infinite;
    }

    @keyframes pulse-check {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
    }

    .pricing-grid {
        margin-bottom: 2rem;
    }

    .pricing-grid .pricing-card {
        margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
        .pricing-grid > div[class*="col-"] {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
    }

    @media (max-width: 768px) {
        .pricing-page-header {
            padding: 2rem 1.5rem;
        }

        .pricing-page-header h1 {
            font-size: 2rem;
        }

        .pricing-card-body {
            padding: 2rem 1.5rem;
        }
    }

    /* Ensure SweetAlert appears above modals */
    .swal2-container,
    .swal2-container.swal2-backdrop-show,
    .swal2-container.swal2-container-custom {
        z-index: 10000 !important;
    }

    .swal2-popup {
        z-index: 10001 !important;
    }


/* --------------------------------------------------------------------------
   Company
   -------------------------------------------------------------------------- */

/* From: Company/CompanyInformation.razor */
.settings-card {
        border-radius: 1rem;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .settings-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

    .settings-card .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.25rem 1.5rem;
        border: none;
    }

    .settings-card.logo-card .card-header {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .settings-card .card-header h5 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .settings-card .card-header h5 i {
        font-size: 1.5rem;
    }

    .settings-card .card-body {
        padding: 1.5rem;
    }

    .company-logo-container {
        position: relative;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        border: 2px dashed #dee2e6;
        border-radius: 1rem;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        background: #f8f9fa;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .company-logo-container:hover {
        border-color: #667eea;
        background: #e7f1ff;
    }

    .company-logo-container.has-logo {
        border-style: solid;
        border-color: #667eea;
        background: white;
        padding: 1rem;
    }

    .company-logo-container img {
        max-width: 100%;
        max-height: 250px;
        object-fit: contain;
        border-radius: 0.5rem;
    }

    .logo-placeholder {
        text-align: center;
        color: #6c757d;
    }

    .logo-placeholder i {
        font-size: 4rem;
        margin-bottom: 1rem;
        color: #adb5bd;
    }

    .logo-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .logo-actions button {
        flex: 1;
    }

    .setting-item {
        padding: 1rem;
        border-radius: 0.75rem;
        background: #f8f9fa;
        margin-bottom: 1rem;
        transition: all 0.2s ease;
    }

    .setting-item:hover {
        background: #e9ecef;
    }

    .setting-item:last-child {
        margin-bottom: 0;
    }

    .setting-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .setting-label i {
        color: #6c757d;
    }

    .form-control {
        border-radius: 0.5rem;
        border: 2px solid #e9ecef;
        padding: 0.625rem 1rem;
        transition: all 0.2s ease;
    }

    .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .save-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 0.875rem 2.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .save-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .save-btn:disabled {
        opacity: 0.7;
        transform: none;
    }

    .page-header {
        margin-bottom: 2rem;
    }

    .page-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #2d3436;
    }

    .breadcrumb {
        background: transparent;
        padding: 0;
    }

    .breadcrumb-item a {
        color: #667eea;
        text-decoration: none;
    }

    .creation-date {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 1rem;
        text-align: center;
    }

    @media (max-width: 768px) {
        .settings-card .card-body {
            padding: 1rem;
        }
        
        .setting-item {
            padding: 0.75rem;
        }

        .company-logo-container {
            min-height: 250px;
        }
    }

/* From: Company/CompanyStatus.razor */
.status-card {
        border-radius: 1rem;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .status-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

    .status-card .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.25rem 1.5rem;
        border: none;
    }

    .status-card.status-active .card-header {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    }

    .status-card.status-warning .card-header {
        background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    }

    .status-card.status-disabled .card-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    }

    .status-card .card-header h5 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .status-card .card-header h5 i {
        font-size: 1.5rem;
    }

    .status-card .card-body {
        padding: 1.5rem;
    }

    .status-item {
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

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

    .status-label {
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .status-value {
        color: #212529;
        font-weight: 500;
    }

    .notification-item {
        padding: 1rem;
        border-left: 4px solid #667eea;
        background: #f8f9fa;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }

    .notification-item.warning {
        border-left-color: #ffc107;
        background: #fff3cd;
    }

    .notification-item.disabled {
        border-left-color: #dc3545;
        background: #f8d7da;
    }

    .notification-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .notification-type {
        font-weight: 600;
        color: #495057;
    }

    .notification-date {
        color: #6c757d;
        font-size: 0.875rem;
    }

    .notification-message {
        color: #212529;
        margin: 0;
    }

    .badge-status {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .badge-active {
        background: #d4edda;
        color: #155724;
    }

    .badge-warning {
        background: #fff3cd;
        color: #856404;
    }

    .badge-disabled {
        background: #f8d7da;
        color: #721c24;
    }


/* --------------------------------------------------------------------------
   Authentications
   -------------------------------------------------------------------------- */

/* From: Authentications/AddUser.razor */
@media only screen and (max-width:768px) {
        .wizard-body {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            padding-top: 1rem !important;
        }
    }

    @media only screen and (min-width:768px) {
        .wizard-body {
            padding-left: 4rem !important;
            padding-right: 4rem !important;
        }
    }

    .role-checkbox-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .role-checkbox-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

/* From: Authentications/Users.razor */
.role-checkbox-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .role-checkbox-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modal-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }


/* --------------------------------------------------------------------------
   Monitoring
   -------------------------------------------------------------------------- */

/* From: Monitoring/Alerts.razor */
.alert-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .alert-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .alert-active {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
    }

    .alert-acknowledged {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%);
    }

    .alert-resolved {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .alert-table {
        font-size: 0.9rem;
    }

    .alert-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        padding: 0.75rem;
        white-space: nowrap;
    }

    .alert-table td {
        padding: 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

    .alert-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .badge-status {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        font-weight: 500;
    }

    .badge-active {
        background-color: #dc3545;
        color: white;
    }

    .badge-acknowledged {
        background-color: #ffc107;
        color: #212529;
    }

    .badge-resolved {
        background-color: #28a745;
        color: white;
    }

    .alert-type-badge {
        background-color: #667eea;
        color: white;
        padding: 0.3rem 0.6rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .summary-stats {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .stat-card {
        flex: 1;
        min-width: 150px;
        background: white;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #212529;
    }

    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }

    .no-data {
        text-align: center;
        padding: 3rem;
        color: #6c757d;
    }

    .no-data i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .rule-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background: white;
    }

    .rule-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

/* From: Monitoring/AuditLogs.razor */
.audit-log-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .audit-log-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .audit-log-create {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    }

    .audit-log-update {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
    }

    .audit-log-delete {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .audit-table {
        font-size: 0.9rem;
    }

    .audit-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        padding: 0.75rem;
        white-space: nowrap;
    }

    .audit-table td {
        padding: 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

    .audit-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .badge-action {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        font-weight: 500;
    }

    .badge-create {
        background-color: #28a745;
        color: white;
    }

    .badge-update {
        background-color: #17a2b8;
        color: white;
    }

    .badge-delete {
        background-color: #dc3545;
        color: white;
    }

    .entity-type-badge {
        background-color: #667eea;
        color: white;
        padding: 0.3rem 0.6rem;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .bg-purple {
        background-color: #667eea !important;
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 500;
    }

    .badge-status-change {
        background-color: #fd7e14;
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 500;
    }

    .badge-edit {
        background-color: #0d6efd;
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 500;
    }

    .badge-delete-action {
        background-color: #dc3545;
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-weight: 500;
    }

    .btn-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .json-viewer {
        max-height: 200px;
        overflow-y: auto;
        background-color: #f8f9fa;
        padding: 0.5rem;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        white-space: pre-wrap;
        word-break: break-all;
    }

    .change-description-box {
        background-color: #e7f3ff;
        border-left: 4px solid #0d6efd;
        padding: 0.75rem;
        border-radius: 4px;
        margin-bottom: 1rem;
    }

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

    .comparison-table th {
        background-color: #f8f9fa;
        padding: 0.75rem;
        text-align: right;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
    }

    .comparison-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #e9ecef;
    }

    .old-value {
        color: #dc3545;
        font-weight: 500;
    }

    .new-value {
        color: #28a745;
        font-weight: 500;
    }

    .summary-stats {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .stat-card {
        flex: 1;
        min-width: 150px;
        background: white;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #212529;
    }

    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }

    .no-data {
        text-align: center;
        padding: 3rem;
        color: #6c757d;
    }

    .no-data i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

/* From: Monitoring/DatabaseAnalytics.razor */
.stat-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .stat-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
    }

    .stat-card-success {
        border-left-color: #28a745;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    }

    .stat-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 50%, #ffd700 100%);
    }

    .stat-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
    }

    .query-table {
        font-size: 0.9rem;
    }

    .query-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
        padding: 0.75rem;
        white-space: nowrap;
    }

    .query-table td {
        padding: 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

    .query-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .query-text {
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
    }

    .query-text-full {
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 300px;
        overflow-y: auto;
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 4px;
    }

    .execution-time-badge {
        padding: 0.3rem 0.6rem;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .execution-time-fast {
        background-color: #28a745;
        color: white;
    }

    .execution-time-medium {
        background-color: #ffc107;
        color: #212529;
    }

    .execution-time-slow {
        background-color: #dc3545;
        color: white;
    }

    .table-size-card {
        background: white;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 1rem;
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }


/* --------------------------------------------------------------------------
   Analytics
   -------------------------------------------------------------------------- */

/* From: Analytics/BusinessIntelligence.razor */
.bi-page { min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 2rem 0; direction: rtl; }
    .bi-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        border-radius: 1.5rem; padding: 2.5rem 2rem; margin-bottom: 2rem; color: white; text-align: center;
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    }
    .bi-header h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.5rem; color: white; }
    .bi-header p { font-size: 1rem; opacity: 0.95; margin: 0; }
    .bi-filter {
        background: white; border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    }
    .bi-tabs .nav-link { font-weight: 600; color: #64748b; }
    .bi-tabs .nav-link.active { color: #667eea; border-bottom: 2px solid #667eea; background: transparent; }
    .bi-card {
        background: white; border-radius: 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        margin-bottom: 1.5rem; border: 2px solid #e2e8f0; overflow: hidden;
    }
    .bi-card .card-header { background: transparent; padding: 1.25rem 1.5rem; border-bottom: 2px solid #e2e8f0; font-weight: 700; color: #1e293b; }
    .bi-card .card-body { padding: 1.5rem; }
    .stat-kpi { background: white; border-radius: 1rem; padding: 1.5rem; text-align: center; border: 2px solid #e2e8f0; height: 100%; }
    .stat-kpi .val { font-size: 1.75rem; font-weight: 800; color: #667eea; }
    .stat-kpi .lbl { font-size: 0.9rem; color: #64748b; font-weight: 600; margin-top: 0.5rem; }
    .chart-wrap { position: relative; height: 320px; background: #f8fafc; border-radius: 1rem; padding: 1rem; border: 1px solid #e2e8f0; }
    .table-analytics { font-size: 0.9rem; }
    .table-analytics th { background: #f8f9fa; font-weight: 600; }
    .empty-msg { text-align: center; padding: 3rem; color: #64748b; }
    @media (max-width: 768px) {
        .bi-header h1 { font-size: 1.75rem; }
        .chart-wrap { height: 260px; }
    }


/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */

/* From: Admin/DeletedRowsViewer.razor */
.summary-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .summary-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .summary-card-danger {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ffb3ba 100%);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
    }

    .summary-card-warning {
        border-left-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 50%, #ffd54f 100%);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    }

    .summary-card-info {
        border-left-color: #17a2b8;
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
    }

    .summary-card-primary {
        border-left-color: #667eea;
        background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #9fa8da 100%);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    }

    .filter-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .filter-group {
        margin-bottom: 1rem;
    }

    .row-details {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 4px;
        margin-top: 0.5rem;
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        max-height: 400px;
        overflow-y: auto;
    }

    .json-key {
        color: #0066cc;
        font-weight: 600;
    }

    .json-string {
        color: #008000;
    }

    .json-number {
        color: #ff6600;
    }

    .json-boolean {
        color: #9900cc;
    }

    .table-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        margin-right: 0.5rem;
    }

    .badge-subscribers { background-color: #e3f2fd; color: #1976d2; }
    .badge-financial { background-color: #fff3e0; color: #f57c00; }
    .badge-affiliates { background-color: #f3e5f5; color: #7b1fa2; }
    .badge-settings { background-color: #e8f5e9; color: #388e3c; }
    .badge-default { background-color: #f5f5f5; color: #616161; }


/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

/* From: Settings/ChartAccounts.razor */
.section-header {
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .info-row {
        margin-bottom: 1rem;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #212529;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-action {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .status-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    .filter-section {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1.5rem;
    }


/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

/* From: Components/BulkActionBar.razor */
.bulk-action-bar {
        background-color: #f8f9fa;
        border-left: 4px solid #007bff;
    }

/* From: Components/CustomerAutocomplete.razor */
.customer-autocomplete {
    position: relative;
}

.customer-autocomplete .input-wrap {
    display: flex;
    gap: 0.45rem;
    align-items: stretch;
}

.customer-autocomplete .input-wrap .form-control {
    flex: 1;
    min-width: 0;
}

.customer-autocomplete.no-add .input-wrap {
    gap: 0;
}

.customer-autocomplete.no-add .input-wrap .form-control {
    border-radius: 0.5rem;
}

.customer-autocomplete .customer-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
    border-radius: 0.65rem;
    border-color: #c7d2fe;
    color: #4f46e5;
    background: #eef2ff;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.customer-autocomplete .customer-add-btn:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #4338ca;
    transform: translateY(-1px);
}

.customer-autocomplete .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 0.25rem 0;
    margin: 2px 0 0;
    z-index: 1050;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.28);
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
}

.customer-autocomplete .options.is-floating {
    position: fixed;
    right: auto;
    margin: 0;
    z-index: 2000;
}

.customer-autocomplete .option {
    display: block;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
}

.customer-autocomplete .option:hover {
    background: #667eea;
    color: #fff;
}

.customer-autocomplete .option.add-new {
    color: #4f46e5;
    font-weight: 700;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.15rem;
}

.customer-autocomplete .option.add-new:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%);
    color: #3730a3;
}

.customer-autocomplete .option.clear-option {
    color: #667eea;
    font-weight: 500;
}

.customer-autocomplete .option.disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: default;
}

.customer-autocomplete .option.disabled:hover {
    background: #f8f9fa;
    color: #6c757d;
}

.customer-inline-add {
    margin-top: 0.55rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.85rem;
    border: 1px solid #c7d2fe;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(99, 102, 241, 0.1), transparent 45%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 60%, #f8fafc 100%);
    animation: inv-insight-in 0.22s ease-out;
}

.customer-inline-add-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.customer-inline-add-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.customer-inline-add-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.customer-inline-add-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 0.1rem;
}

.customer-inline-add-input {
    border-radius: 0.65rem !important;
    border-color: #c7d2fe !important;
    margin-bottom: 0.65rem;
}

.customer-inline-add-input:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.15);
}

.customer-inline-add-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* From: Components/DiscountFormulaInput.razor */
.discount-formula-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .discount-formula-preview {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.55rem;
        background: linear-gradient(to bottom, #f0f4ff, #e8eeff);
        border: 1px solid #c7d2fe;
        border-radius: 0.375rem;
        font-size: 0.8125rem;
        color: #4338ca;
        direction: ltr;
        text-align: left;
    }

    .discount-formula-preview i {
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .discount-formula-preview .preview-eq {
        font-weight: 600;
        color: #3730a3;
    }

    .discount-formula-input {
        direction: ltr;
        text-align: left;
    }

    .discount-formula-input.is-empty {
        color: #94a3b8;
    }

    .discount-formula-error {
        font-size: 0.75rem;
        color: #dc3545;
    }

/* From: Components/ItemAutocomplete.razor */
.item-autocomplete {
        position: relative;
    }

    .item-autocomplete:focus-within {
        z-index: 1050;
    }

    .item-autocomplete .options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        padding: 0;
        margin: 4px 0 0;
        z-index: 1050;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        box-shadow: 0 10px 28px rgba(102, 126, 234, 0.15);
        max-height: 280px;
        overflow-y: auto;
        list-style: none;
    }

    .item-autocomplete .options.is-floating {
        position: fixed;
        right: auto;
        margin: 0;
        z-index: 2000;
    }

    .item-autocomplete .option {
        display: block;
        padding: 0.65rem 0.85rem;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
    }

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

    .item-autocomplete .option:hover {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }

    .item-autocomplete .option:hover .option-sub,
    .item-autocomplete .option:hover .option-badge {
        color: rgba(255, 255, 255, 0.85);
    }

    .item-autocomplete .option-name {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .item-autocomplete .option-sub {
        font-size: 0.78rem;
        color: #64748b;
        margin-top: 2px;
    }

    .item-autocomplete .option-badge {
        font-size: 0.7rem;
        color: #667eea;
        margin-top: 2px;
    }

    .item-autocomplete .option.disabled {
        background: #f8fafc;
        color: #94a3b8;
        cursor: default;
        text-align: center;
        padding: 1rem;
    }

    .item-autocomplete .option.disabled:hover {
        background: #f8fafc;
        color: #94a3b8;
    }

    .item-autocomplete .option.add-new {
        border-bottom: 1px solid #e9ecef;
        color: #667eea;
        font-weight: 600;
        display: flex;
        align-items: center;
    }

    .item-autocomplete .option.add-new:hover {
        background: #f0f4ff;
        color: #4c51bf;
    }

    .item-inline-add {
        background: #f8f9fc;
        border-color: #e2e8f0 !important;
        position: relative;
        z-index: 1060;
    }

    .item-autocomplete .searching-hint {
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 4px;
    }

    .item-autocomplete .selected-display {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        padding: 0.65rem 0.85rem;
    }

    .item-autocomplete .selected-display .name {
        font-weight: 600;
        color: #334155;
    }

    .item-autocomplete .selected-display .desc {
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 2px;
    }

    .item-autocomplete .selected-note {
        font-size: 0.78rem;
        color: #64748b;
        margin-top: 4px;
        line-height: 1.35;
        padding: 0 0.15rem;
    }

/* From: Components/ItemCostManagementPricing.razor */
.pricing-tiers-section {

        margin-top: 0.5rem;

    }



    .pricing-tiers-card {

        border: 1px solid #e2e8f0;

        border-radius: 0.625rem;

        overflow: hidden;

        background: #fff;

        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);

    }



    .pricing-tiers-table {

        width: 100%;

        margin-bottom: 0;

        border-collapse: separate;

        border-spacing: 0;

    }



    .pricing-tiers-table thead th {

        background: linear-gradient(to bottom, #f1f5f9, #e8edf5);

        color: #334155;

        font-weight: 600;

        font-size: 0.8125rem;

        padding: 0.75rem 1rem;

        border-bottom: 2px solid #cbd5e1;

        white-space: nowrap;

        vertical-align: middle;

    }



    .pricing-tiers-table thead th:first-child {

        text-align: right;

    }



    .pricing-tiers-table thead th.col-default {

        width: 72px;

        text-align: center;

    }



    .pricing-tiers-table tbody td {

        padding: 0.625rem 1rem;

        vertical-align: middle;

        border-bottom: 1px solid #eef2f7;

        transition: background-color 0.15s ease;

    }



    .pricing-tiers-table tbody tr:last-child td {

        border-bottom: none;

    }



    .pricing-tiers-table tbody tr:hover td {

        background-color: #f8fafc;

    }



    .pricing-tiers-table tbody tr.row-default td {

        background-color: #f0f4ff;

    }



    .pricing-tiers-table tbody tr.row-default:hover td {

        background-color: #e8eeff;

    }



    .pricing-tiers-table tbody tr.row-losing td {

        background-color: #fff5f5;

    }



    .pricing-tiers-table tbody tr.row-losing:hover td {

        background-color: #feecec;

    }



    .pricing-tiers-table tbody tr.row-losing.row-default td {

        background-color: #fff0f0;

    }



    .tier-name-cell {

        font-weight: 500;

        color: #1e293b;

        white-space: nowrap;

    }



    .tier-badge {

        display: inline-flex;

        align-items: center;

        gap: 0.2rem;

        font-size: 0.7rem;

        font-weight: 600;

        padding: 0.2rem 0.5rem;

        border-radius: 999px;

        margin-right: 0.35rem;

        vertical-align: middle;

    }



    .tier-badge-default {

        background: rgba(102, 126, 234, 0.12);

        color: #5568d3;

    }



    .tier-badge-loss {

        background: rgba(220, 53, 69, 0.1);

        color: #c82333;

    }



    .tier-price-input {

        max-width: 140px;

        border: 1px solid #cbd5e1;

        border-radius: 0.375rem;

        padding: 0.4rem 0.65rem;

        font-size: 0.875rem;

        text-align: left;

        direction: ltr;

        transition: border-color 0.15s ease, box-shadow 0.15s ease;

    }



    .tier-price-input:focus {

        border-color: #667eea;

        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.2);

        outline: none;

    }



    .tier-price-input.is-empty {

        color: #94a3b8;

    }



    .tier-price-input.input-loss {

        border-color: #f5c2c7;

        background-color: #fffbfb;

    }



    .tier-price-input.input-loss:focus {

        border-color: #dc3545;

        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);

    }



    .tier-default-cell {

        text-align: center;

    }



    .tier-radio {

        width: 1.1rem;

        height: 1.1rem;

        margin: 0;

        cursor: pointer;

        accent-color: #667eea;

    }



    .tier-price-input.input-error {

        border-color: #dc3545;

        background-color: #fffbfb;

    }



    .tier-price-input.input-error:focus {

        border-color: #dc3545;

        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);

    }



    .tier-field-wrap {

        display: flex;

        flex-direction: column;

        gap: 0.2rem;

    }



    .tier-field-error {

        font-size: 0.7rem;

        color: #dc3545;

        line-height: 1.2;

        max-width: 140px;

    }



    .pricing-tiers-footer {

        display: flex;

        align-items: center;

        gap: 0.35rem;

        margin-top: 0.625rem;

        padding: 0.5rem 0.75rem;

        background: #f8fafc;

        border: 1px solid #e2e8f0;

        border-radius: 0.5rem;

        color: #64748b;

        font-size: 0.8125rem;

    }



    .pricing-tiers-footer i {

        color: #667eea;

        font-size: 0.95rem;

    }



    @media (max-width: 576px) {

        .pricing-tiers-table thead th,

        .pricing-tiers-table tbody td {

            padding: 0.5rem 0.65rem;

            font-size: 0.8125rem;

        }



        .tier-price-input {

            max-width: 100%;

            width: 100%;

        }

    }

/* From: Components/PriceFormulaInput.razor */
.price-formula-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .price-formula-preview {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.55rem;
        background: linear-gradient(to bottom, #f0f4ff, #e8eeff);
        border: 1px solid #c7d2fe;
        border-radius: 0.375rem;
        font-size: 0.8125rem;
        color: #4338ca;
        direction: ltr;
        text-align: left;
    }

    .price-formula-preview i {
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .price-formula-preview .preview-eq {
        font-weight: 600;
        color: #3730a3;
    }

    .price-formula-input {
        direction: ltr;
        text-align: left;
    }

    .price-formula-input.is-empty {
        color: #94a3b8;
    }

    .price-formula-error {
        font-size: 0.75rem;
        color: #dc3545;
    }

/* From: Components/SupplierAutocomplete.razor */
.supplier-autocomplete {
    position: relative;
}

.supplier-autocomplete .input-wrap {
    display: flex;
    gap: 0.45rem;
    align-items: stretch;
}

.supplier-autocomplete .input-wrap .form-control {
    flex: 1;
    min-width: 0;
}

.supplier-autocomplete .supplier-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
    border-radius: 0.65rem;
    border-color: #c7d2fe;
    color: #4f46e5;
    background: #eef2ff;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.supplier-autocomplete .supplier-add-btn:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #4338ca;
    transform: translateY(-1px);
}

.supplier-autocomplete .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 0.25rem 0;
    margin: 2px 0 0;
    z-index: 1050;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.28);
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
}

.supplier-autocomplete .option {
    display: block;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.supplier-autocomplete .option:hover {
    background: #667eea;
    color: #fff;
}

.supplier-autocomplete .option.add-new {
    border-top: 1px solid #e9ecef;
    color: #667eea;
    font-weight: 500;
}

.supplier-autocomplete .option.add-new:hover {
    background: #f0f4ff;
    color: #4c51bf;
}

.supplier-autocomplete .option.clear-option {
    color: #667eea;
    font-weight: 500;
}

.supplier-autocomplete .option.disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: default;
}

.supplier-autocomplete .option.disabled:hover {
    background: #f8f9fa;
    color: #6c757d;
}


/* ========== Installment payment table (ipt-*) ========== */
.ipt-page .inv-toolbar-icon {
    background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}

.ipt-page .inv-toolbar-title {
    color: #0f766e;
}

.ipt-page .inv-form-toolbar {
    border-color: #ccfbf1;
    box-shadow: 0 4px 18px -12px rgba(13, 148, 136, 0.45);
}

.ipt-header-icon {
    background: #ecfdf5 !important;
    color: #0d9488 !important;
}

.ipt-badge-credit {
    margin-inline-start: auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f766e;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
}

.ipt-btn-schedule,
.ipt-btn-confirm {
    border: none;
    color: #fff !important;
    font-weight: 700;
    background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
    box-shadow: 0 6px 16px -8px rgba(5, 150, 105, 0.65);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ipt-btn-schedule:hover,
.ipt-btn-confirm:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(5, 150, 105, 0.7);
    color: #fff !important;
}

.ipt-btn-schedule:disabled,
.ipt-btn-confirm:disabled {
    opacity: 0.7;
    transform: none;
}

.ipt-btn-ghost {
    border: 1px solid #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
    border-radius: 0.65rem;
    font-weight: 600;
}

.ipt-btn-ghost:hover {
    background: #ccfbf1;
    color: #115e59;
}

.ipt-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #64748b;
}

.ipt-empty i {
    font-size: 3.5rem;
    color: #99f6e4;
    display: block;
    margin-bottom: 1rem;
}

.ipt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 1.15rem;
}

.ipt-main {
    order: 1;
    min-width: 0;
}

.ipt-side {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 5.5rem;
}

.ipt-summary-card {
    border-radius: 1.15rem;
    border: 1px solid #ccfbf1;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 32px -22px rgba(13, 148, 136, 0.55);
}

.ipt-summary-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    color: #334155;
    border-bottom: 1px solid #eef2ff;
    background: linear-gradient(to left, #f8fffd, #fff);
}

.ipt-summary-head-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #0d9488;
    font-size: 1.05rem;
}

.ipt-summary-hero {
    margin: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background:
        radial-gradient(600px 140px at 100% 0%, rgba(45, 212, 191, 0.2), transparent 60%),
        linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 100%);
    border: 1px solid #99f6e4;
}

.ipt-summary-hero.is-bad {
    background:
        radial-gradient(600px 140px at 100% 0%, rgba(248, 113, 113, 0.18), transparent 60%),
        linear-gradient(160deg, #fef2f2 0%, #fff7f7 100%);
    border-color: #fecaca;
}

.ipt-summary-hero-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.ipt-summary-hero-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.ipt-summary-hero.is-bad .ipt-summary-hero-value {
    color: #b91c1c;
}

.ipt-summary-hero-value small {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    margin-inline-start: 0.2rem;
}

.ipt-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    overflow: hidden;
    margin-top: 0.25rem;
}

.ipt-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #059669);
    transition: width 0.35s ease;
}

.ipt-summary-hero.is-bad .ipt-progress-fill {
    background: linear-gradient(90deg, #fb923c, #ef4444);
}

.ipt-progress-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.ipt-summary-hero.is-ok .ipt-progress-label i {
    color: #059669;
}

.ipt-summary-hero.is-bad .ipt-progress-label i {
    color: #dc2626;
}

.ipt-summary-list {
    list-style: none;
    margin: 0;
    padding: 0 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ipt-summary-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.8rem;
    background: #fbfdff;
    border: 1px solid #eef2f7;
}

.ipt-summary-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0fdfa;
    color: #0d9488;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ipt-summary-label {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.ipt-summary-value {
    margin-inline-start: auto;
    font-size: 1rem;
    font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.ipt-summary-list li.is-ok {
    border-color: #a7f3d0;
    background: #f0fdf4;
}

.ipt-summary-list li.is-bad {
    border-color: #fecaca;
    background: #fef2f2;
}

.ipt-summary-list li.is-bad .ipt-summary-ic {
    background: #fee2e2;
    color: #dc2626;
}

.ipt-summary-list li.is-bad .ipt-summary-value {
    color: #dc2626;
}

.ipt-config-card .inv-panel-body {
    padding: 1.1rem 1.2rem 1.25rem;
}

.ipt-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0.75rem;
    align-items: start;
}

.ipt-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ipt-field .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.ipt-field.is-wide {
    grid-column: span 2;
}

.ipt-cycle-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    margin-top: 1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #f8fffd, #ffffff);
    border: 1px solid #e6fffa;
}

.ipt-cycle-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-width: 0;
}

.ipt-cycle-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

.ipt-custom-days {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #ccfbf1;
}

.ipt-custom-days-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.ipt-custom-days-field {
    flex: 1;
    min-width: 0;
}

.ipt-last-date {
    align-self: flex-start;
}

.ipt-config-actions .btn {
    flex: 1 1 auto;
}

.ipt-term-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ipt-term-pill {
    border: 1px solid #99f6e4;
    background: #fff;
    color: #0f766e;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    transition: all 0.15s ease;
}

.ipt-term-pill:hover {
    background: #f0fdfa;
}

.ipt-term-pill.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0d9488, #059669);
    box-shadow: 0 6px 14px -8px rgba(5, 150, 105, 0.7);
}

.ipt-last-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #475569;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    white-space: nowrap;
}

.ipt-last-date i {
    color: #0d9488;
}

.ipt-last-date strong {
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.ipt-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #ccfbf1;
}

.ipt-table-card {
    background: #fff;
    border: 1px solid #ccfbf1;
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 12px 32px -22px rgba(13, 148, 136, 0.55);
    margin-bottom: 1rem;
}

.ipt-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background:
        radial-gradient(600px 120px at 0% 0%, rgba(45, 212, 191, 0.16), transparent 55%),
        linear-gradient(180deg, #f0fdfa, #fff);
    border-bottom: 1px solid #e6fffa;
}

.ipt-table-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #115e59;
}

.ipt-table-sub {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: #64748b;
}

.ipt-row-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
}

.ipt-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.ipt-table thead th {
    background: #f8fffc;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.ipt-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.ipt-table tbody tr {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.ipt-table tbody tr:nth-child(even) {
    background: #fbfdff;
}

.ipt-table tbody tr:hover {
    background: #f0fdfa;
}

.ipt-table tbody tr.is-zero {
    background: #f8fafc;
}

.ipt-table tbody tr.is-zero .ipt-amount-input {
    color: #94a3b8;
}

.ipt-table tbody tr.is-flash {
    animation: ipt-row-flash 0.45s ease;
}

@keyframes ipt-row-flash {
    0% { background: #ccfbf1; }
    100% { background: transparent; }
}

.ipt-table tfoot td {
    padding: 0.9rem 1rem;
    background: #f8fffc;
    border-top: 1px solid #ccfbf1;
}

.ipt-col-idx {
    width: 64px;
}

.ipt-col-actions {
    width: 72px;
    text-align: center;
}

.ipt-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.85rem;
    color: #0f766e;
    background: linear-gradient(180deg, #ecfdf5, #f0fdfa);
    border: 1px solid #99f6e4;
}

.ipt-amount-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 240px;
}

.ipt-amount-input {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 0.7rem;
    border-color: #cbd5e1;
}

.ipt-amount-input:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
}

.ipt-amount-unit {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}

.ipt-date-input {
    max-width: 200px;
    border-radius: 0.7rem;
}

.ipt-row-menu-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d1fae5;
    background: #fff;
    color: #0f766e;
}

.ipt-row-menu-btn:hover,
.ipt-row-menu-btn:focus {
    background: #ecfdf5;
    color: #115e59;
}

.ipt-row-menu {
    position: relative;
}

.ipt-dropdown {
    border: 1px solid #ccfbf1;
    border-radius: 0.85rem;
    box-shadow: 0 18px 44px -16px rgba(15, 118, 110, 0.5);
    padding: 0.35rem;
    min-width: 220px;
    z-index: 1090;
}

/* Sticky toolbars must stay under the row menus */
.ipt-page .inv-form-toolbar {
    z-index: 20;
}

.ipt-dropdown .dropdown-item {
    border-radius: 0.55rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: #334155;
    padding: 0.5rem 0.75rem;
}

.ipt-dropdown .dropdown-item:hover {
    background: #f0fdfa;
    color: #0f766e;
}

.ipt-dropdown .dropdown-item:disabled {
    opacity: 0.45;
}

@media (max-width: 1399.98px) {
    .ipt-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 1199.98px) {
    .ipt-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ipt-side {
        order: 1;
        position: static;
    }

    .ipt-main {
        order: 2;
    }

    .ipt-config-grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .ipt-cycle-main {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem 0.85rem;
    }

    .ipt-custom-days {
        padding-top: 0;
        border-top: none;
        padding-inline-start: 0.85rem;
        border-inline-start: 1px dashed #ccfbf1;
    }

    .ipt-custom-days-field {
        flex: 0 0 140px;
    }

    .ipt-config-actions .btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .ipt-table-head {
        flex-direction: column;
    }

    .ipt-amount-wrap,
    .ipt-date-input {
        max-width: none;
    }

    .ipt-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ipt-cycle-main {
        flex-direction: column;
        align-items: stretch;
    }

    .ipt-custom-days {
        padding-inline-start: 0;
        border-inline-start: none;
        padding-top: 0.55rem;
        border-top: 1px dashed #ccfbf1;
    }

    .ipt-custom-days-field {
        flex: 1;
    }
}

/* Installment view/edit status chips & readonly lines */
.ipt-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ipt-status.is-unpaid {
    color: #64748b;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.ipt-status.is-paid-partial {
    color: #b45309;
    background: #fffbeb;
    border-color: #fcd34d;
}

.ipt-status.is-paid-full {
    color: #047857;
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.ipt-status.is-not-due {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
}

.ipt-status.is-due-today {
    color: #0369a1;
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.ipt-status.is-overdue {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fca5a5;
}

.ipt-status.is-on-time {
    color: #0f766e;
    background: #f0fdfa;
    border-color: #99f6e4;
}

.ipt-status.is-paid-late {
    color: #c2410c;
    background: #fff7ed;
    border-color: #fdba74;
}

.ipt-table-rich th,
.ipt-table-rich td {
    font-size: 0.86rem;
    white-space: nowrap;
}

.ipt-table tbody tr.is-paid {
    background: #f8fffc;
}

.ipt-view-notes {
    padding: 0 0.9rem 0.9rem;
}

.ipt-view-notes > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.ipt-view-notes p {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.88rem;
}

.ipt-lines-readonly {
    padding: 0.5rem 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 280px;
    overflow: auto;
}

.ipt-lines-full {
    width: 100%;
    margin-top: 1.15rem;
}

.ipt-collapse-toggle {
    width: 100%;
    border: none;
    background: inherit;
    text-align: inherit;
    cursor: pointer;
    user-select: none;
}

button.inv-panel-header.ipt-collapse-toggle,
button.ipt-summary-head.ipt-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: inherit;
    font: inherit;
    font-weight: 700;
}

.ipt-collapse-toggle:hover {
    background: linear-gradient(to left, #f0fdfa, #fff);
}

.ipt-collapse-chevron {
    margin-inline-start: auto;
    color: #94a3b8;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.ipt-collapsible.is-collapsed {
    height: auto;
}

.ipt-collapsible.is-collapsed .ipt-collapse-toggle {
    border-bottom: none;
}

.ipt-lines-readonly-wide {
    max-height: none;
    padding: 0.85rem 1rem 1rem;
}

.ipt-lines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.55rem;
}

.ipt-line-ro {
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    background: #fbfdff;
    border: 1px solid #eef2f7;
}

.ipt-line-ro-name {
    font-weight: 700;
    color: #334155;
    font-size: 0.88rem;
}

.ipt-line-ro-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #64748b;
}

.ipt-line-ro-meta strong {
    color: #0f766e;
}

/* ===== Installment edit page v2 ===== */
.ipt-page .ipt-hero {
    position: relative;
    margin-bottom: 1.15rem;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid #ccfbf1;
    overflow: hidden;
    background:
        radial-gradient(720px 180px at 100% 0%, rgba(45, 212, 191, 0.22), transparent 55%),
        radial-gradient(480px 160px at 0% 100%, rgba(13, 148, 136, 0.12), transparent 50%),
        linear-gradient(160deg, #f0fdfa 0%, #ffffff 55%, #f8fffc 100%);
    box-shadow: 0 14px 36px -24px rgba(13, 148, 136, 0.55);
}

.ipt-page .ipt-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ipt-page .ipt-hero-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #115e59;
    line-height: 1.3;
}

.ipt-page .ipt-hero-sub {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.ipt-page .ipt-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.ipt-page .ipt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #99f6e4;
    background: #ecfdf5;
    color: #0f766e;
}

.ipt-page .ipt-hero-badge.is-ok {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}

.ipt-page .ipt-hero-badge.is-bad {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.ipt-page .ipt-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.ipt-page .ipt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.ipt-page .ipt-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e6fffa;
    box-shadow: 0 6px 16px -14px rgba(15, 118, 110, 0.45);
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ipt-page .ipt-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -16px rgba(15, 118, 110, 0.55);
}

.ipt-page .ipt-kpi-ic {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
    background: #ecfdf5;
    color: #0d9488;
}

.ipt-page .ipt-kpi.is-amber .ipt-kpi-ic {
    background: #fffbeb;
    color: #d97706;
}

.ipt-page .ipt-kpi.is-slate .ipt-kpi-ic {
    background: #f1f5f9;
    color: #475569;
}

.ipt-page .ipt-kpi.is-rose .ipt-kpi-ic {
    background: #fff1f2;
    color: #e11d48;
}

.ipt-page .ipt-kpi-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ipt-page .ipt-kpi-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.ipt-page .ipt-kpi-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    word-break: break-word;
}

.ipt-page .ipt-kpi.is-amber .ipt-kpi-value {
    color: #b45309;
}

.ipt-page .ipt-kpi.is-slate .ipt-kpi-value {
    color: #334155;
}

.ipt-page .ipt-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
}

.ipt-page .ipt-ring {
    --pct: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#0d9488 calc(var(--pct) * 1%), #e2e8f0 0);
    box-shadow: 0 8px 20px -14px rgba(13, 148, 136, 0.7);
}

.ipt-page .ipt-ring.is-bad {
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#ef4444 calc(var(--pct) * 1%), #fee2e2 0);
}

.ipt-page .ipt-ring-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.ipt-page .ipt-ring.is-bad .ipt-ring-value {
    color: #b91c1c;
}

.ipt-page .ipt-ring-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.ipt-page .ipt-charts-card {
    background: #fff;
    border: 1px solid #ccfbf1;
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 12px 32px -22px rgba(13, 148, 136, 0.55);
    margin-bottom: 1rem;
}

.ipt-page .ipt-charts-card .ipt-summary-head {
    border-bottom: 1px solid #e6fffa;
}

.ipt-page .ipt-charts-body {
    padding: 1rem 1.1rem 1.15rem;
}

.ipt-page .ipt-charts-grid {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.ipt-page .ipt-chart-box {
    position: relative;
    border: 1px solid #e6fffa;
    border-radius: 1rem;
    background:
        linear-gradient(180deg, #f8fffd 0%, #ffffff 100%);
    padding: 0.75rem 0.85rem 0.65rem;
    min-width: 0;
}

.ipt-page .ipt-chart-box.is-wide {
    grid-column: 1 / -1;
}

.ipt-page .ipt-chart-title {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #115e59;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ipt-page .ipt-chart-title i {
    color: #0d9488;
}

.ipt-page .ipt-chart-canvas-wrap {
    position: relative;
    height: 230px;
}

.ipt-page .ipt-chart-box.is-wide .ipt-chart-canvas-wrap {
    height: 240px;
}

.ipt-page .ipt-chart-note {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309;
}

.ipt-page .ipt-chart-box.is-empty .ipt-chart-canvas-wrap::after {
    content: "لا توجد بيانات كافية للرسم";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(248, 250, 252, 0.72);
    border-radius: 0.75rem;
    z-index: 2;
}

.ipt-page .ipt-chart-empty {
    display: none;
}

.ipt-page .ipt-statuses {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
}

.ipt-page .ipt-rowbar {
    height: 5px;
    width: 100%;
    max-width: 120px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-top: 0.35rem;
}

.ipt-page .ipt-rowbar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #059669);
    transition: width 0.3s ease;
}

.ipt-page .ipt-rowbar-fill.is-partial {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.ipt-page .ipt-rowbar-fill.is-full {
    background: linear-gradient(90deg, #34d399, #059669);
}

.ipt-page .ipt-table tbody tr.is-overdue-row {
    box-shadow: inset 3px 0 0 #ef4444;
    background: #fffbfb;
}

.ipt-page .ipt-table tbody tr.is-overdue-row:hover {
    background: #fef2f2;
}

/* Shared table card chrome */
.ipt-page .ipt-table-head {
    padding: 0.85rem 1.1rem;
    gap: 0.75rem;
}

.ipt-page .ipt-table-title {
    font-size: 1.05rem;
}

.ipt-page .ipt-table-sub {
    margin-top: 0.2rem;
    font-size: 0.8rem;
}

.ipt-page .ipt-row-count {
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
}

.ipt-page .ipt-table-scroll {
    max-height: min(48vh, 440px);
    overflow-x: auto;
    overflow-y: scroll;
    overscroll-behavior: contain;
    border-top: 1px solid #e6fffa;
    scrollbar-gutter: stable;
}

.ipt-page .ipt-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ipt-page .ipt-table-scroll::-webkit-scrollbar-track {
    background: #f0fdfa;
}

.ipt-page .ipt-table-scroll::-webkit-scrollbar-thumb {
    background: #5eead4;
    border-radius: 999px;
    border: 2px solid #f0fdfa;
}

.ipt-page .ipt-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #14b8a6;
}

.ipt-page .ipt-table {
    width: 100%;
    margin: 0;
}

.ipt-page .ipt-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    background: #f8fffc;
    border-bottom: 1px solid #e2e8f0;
}

.ipt-page .ipt-table tbody td {
    padding: 0.4rem 0.75rem;
    vertical-align: middle;
}

.ipt-page .ipt-idx {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.ipt-page .ipt-row-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 0.55rem;
}

.ipt-page .ipt-table-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.1rem;
    background: #f8fffc;
    border-top: 1px solid #ccfbf1;
}

.ipt-page .ipt-table-summary-total {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.ipt-page .ipt-table-summary-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.ipt-page .ipt-table-summary-total strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.ipt-page .ipt-table-summary-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f766e;
}

.ipt-page .ipt-table-summary.is-bad .ipt-table-summary-total strong,
.ipt-page .ipt-table-summary.is-bad .ipt-table-summary-status {
    color: #dc2626;
}

.ipt-page .ipt-table-summary.is-ok .ipt-table-summary-status i {
    color: #059669;
}

.ipt-page .ipt-table-summary.is-bad .ipt-table-summary-status i {
    color: #dc2626;
}

/* Create schedule (4 columns) */
.ipt-schedule-simple .ipt-table {
    table-layout: fixed;
}

.ipt-schedule-simple .ipt-col-idx {
    width: 56px;
    text-align: center;
}

.ipt-schedule-simple .ipt-col-amount {
    width: 40%;
}

.ipt-schedule-simple .ipt-col-due {
    width: 40%;
}

.ipt-schedule-simple .ipt-col-actions {
    width: 64px;
    text-align: center;
}

.ipt-schedule-simple .ipt-amount-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    max-width: none;
}

.ipt-schedule-simple .ipt-amount-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0.35rem 0.55rem;
    font-size: 0.875rem;
    min-height: 2.1rem;
    border-radius: 0.6rem;
}

.ipt-schedule-simple .ipt-amount-unit {
    flex-shrink: 0;
    font-size: 0.72rem;
}

.ipt-schedule-simple .ipt-date-input {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0.35rem 0.55rem;
    font-size: 0.875rem;
    min-height: 2.1rem;
    border-radius: 0.6rem;
}

/* Edit/view rich schedule */
.ipt-schedule-rich .ipt-table,
.ipt-page .ipt-table-rich {
    table-layout: auto;
}

.ipt-page .ipt-table-rich th,
.ipt-page .ipt-table-rich td {
    white-space: nowrap;
}

.ipt-schedule-rich .ipt-col-idx {
    width: 52px;
    text-align: center;
}

.ipt-schedule-rich .ipt-col-amount {
    width: 132px;
    min-width: 120px;
}

.ipt-schedule-rich .ipt-col-due {
    width: 140px;
    min-width: 130px;
}

.ipt-schedule-rich .ipt-col-received {
    min-width: 100px;
}

.ipt-schedule-rich .ipt-col-received-date {
    min-width: 110px;
}

.ipt-schedule-rich .ipt-col-pay-status,
.ipt-schedule-rich .ipt-col-time-status {
    min-width: 118px;
}

.ipt-schedule-rich .ipt-col-actions {
    width: 56px;
    text-align: center;
}

.ipt-schedule-rich .ipt-amount-wrap {
    max-width: 120px;
    width: 100%;
}

.ipt-schedule-rich .ipt-amount-input {
    width: 100%;
    padding: 0.3rem 0.45rem;
    font-size: 0.82rem;
    min-height: 2rem;
    border-radius: 0.55rem;
}

.ipt-schedule-rich .ipt-date-input {
    width: 100%;
    max-width: 138px;
    padding: 0.3rem 0.4rem;
    font-size: 0.82rem;
    min-height: 2rem;
    border-radius: 0.55rem;
}

.ipt-schedule-rich .ipt-status {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

/* Keep edit (ipt-v3) density compact inside the scroll area */
.ipt-page.ipt-v3 .ipt-schedule-rich .ipt-table thead th {
    padding: 0.5rem 0.65rem;
}

.ipt-page.ipt-v3 .ipt-schedule-rich .ipt-table tbody td {
    padding: 0.4rem 0.65rem;
}

@media (max-width: 1199.98px) {
    .ipt-page .ipt-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ipt-page .ipt-charts-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ipt-page .ipt-hero-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .ipt-page .ipt-ring-wrap {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .ipt-page .ipt-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .ipt-page .ipt-hero {
        padding: 1rem;
    }

    .ipt-page .ipt-chart-canvas-wrap,
    .ipt-page .ipt-chart-box.is-wide .ipt-chart-canvas-wrap {
        height: 210px;
    }

    .ipt-page .ipt-table-scroll {
        max-height: min(42vh, 360px);
    }

    .ipt-page .ipt-table-summary {
        padding: 0.65rem 0.85rem;
    }
}

/* ===== Installment edit page v3 — modern refresh (scoped to .ipt-v3) ===== */
.ipt-page.ipt-v3 {
    --ipt-brand: #2563eb;
    --ipt-brand-soft: #3b82f6;
    --ipt-brand-light: #60a5fa;
    --ipt-brand-deep: #1d4ed8;
    --ipt-brand-ink: #1e3a8a;
    --ipt-brand-bg: #eff6ff;
    --ipt-brand-bg-soft: #dbeafe;
    --ipt-brand-bg-mid: #bfdbfe;
    --ipt-line: #e0e7ff;
    --ipt-line-strong: #bfdbfe;
    --ipt-radius: 1.35rem;
    --ipt-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ipt-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 38px -24px rgba(37, 99, 235, 0.45);
}

@keyframes ipt-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ipt-shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* ---------- Shared .ipt-page chrome overrides (brand only) ---------- */
.ipt-page.ipt-v3 .inv-toolbar-icon {
    background: linear-gradient(135deg, var(--ipt-brand) 0%, var(--ipt-brand-deep) 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.ipt-page.ipt-v3 .inv-toolbar-title {
    color: var(--ipt-brand-deep);
}

.ipt-page.ipt-v3 .inv-form-toolbar {
    border-color: var(--ipt-line);
    box-shadow: 0 4px 18px -12px rgba(37, 99, 235, 0.45);
}

.ipt-page.ipt-v3 .ipt-header-icon {
    background: var(--ipt-brand-bg) !important;
    color: var(--ipt-brand) !important;
}

.ipt-page.ipt-v3 .ipt-btn-schedule,
.ipt-page.ipt-v3 .ipt-btn-confirm {
    background: linear-gradient(135deg, var(--ipt-brand) 0%, var(--ipt-brand-deep) 100%);
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.65);
}

.ipt-page.ipt-v3 .ipt-btn-schedule:hover,
.ipt-page.ipt-v3 .ipt-btn-confirm:hover {
    box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.7);
}

.ipt-page.ipt-v3 .ipt-btn-ghost {
    border: 1px solid var(--ipt-line-strong);
    color: var(--ipt-brand-deep);
    background: var(--ipt-brand-bg);
}

.ipt-page.ipt-v3 .ipt-btn-ghost:hover {
    background: var(--ipt-brand-bg-soft);
    color: var(--ipt-brand-ink);
    border-color: var(--ipt-brand-light);
}

.ipt-page.ipt-v3 .ipt-empty i {
    color: var(--ipt-brand-bg-mid);
}

.ipt-page.ipt-v3 .ipt-summary-card {
    border-color: var(--ipt-line);
    box-shadow: 0 12px 32px -22px rgba(37, 99, 235, 0.55);
}

.ipt-page.ipt-v3 .ipt-summary-head {
    background: linear-gradient(to left, #f8faff, #fff);
}

.ipt-page.ipt-v3 .ipt-summary-ic {
    color: var(--ipt-brand);
}

.ipt-page.ipt-v3 .ipt-summary-value {
    color: var(--ipt-brand-deep);
}

.ipt-page.ipt-v3 .ipt-progress-fill {
    background: linear-gradient(90deg, var(--ipt-brand-light), var(--ipt-brand-deep));
}

.ipt-page.ipt-v3 .ipt-rowbar-fill {
    background: linear-gradient(90deg, var(--ipt-brand-soft), var(--ipt-brand-deep));
}

.ipt-page.ipt-v3 .ipt-chart-title i {
    color: var(--ipt-brand);
}

.ipt-page.ipt-v3 .ipt-table-scroll {
    border-top-color: var(--ipt-line);
}

.ipt-page.ipt-v3 .ipt-table-scroll::-webkit-scrollbar-track {
    background: var(--ipt-brand-bg);
}

.ipt-page.ipt-v3 .ipt-table-scroll::-webkit-scrollbar-thumb {
    background: var(--ipt-brand-light);
    border-color: var(--ipt-brand-bg);
}

.ipt-page.ipt-v3 .ipt-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ipt-brand-soft);
}

.ipt-page.ipt-v3 .ipt-table-summary {
    background: #f8faff;
    border-top-color: var(--ipt-line);
}

.ipt-page.ipt-v3 .ipt-table-summary-total strong,
.ipt-page.ipt-v3 .ipt-table-summary-status {
    color: var(--ipt-brand-deep);
}

/* ---------- Hero ---------- */
.ipt-page.ipt-v3 .ipt-hero {
    position: relative;
    isolation: isolate;
    margin-bottom: 1rem;
    padding: 0.95rem 1.1rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
    background:
        radial-gradient(680px 220px at 100% -20%, rgba(96, 165, 250, 0.28), transparent 60%),
        radial-gradient(520px 200px at 0% 120%, rgba(147, 197, 253, 0.3), transparent 58%),
        linear-gradient(135deg, #f0f7ff 0%, #ffffff 55%, #eff6ff 100%);
    box-shadow: 0 14px 34px -26px rgba(37, 99, 235, 0.5);
    animation: ipt-rise 0.45s ease both;
}

.ipt-page.ipt-v3 .ipt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(37, 99, 235, 0.14) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 65%);
    mask-image: linear-gradient(to bottom, #000, transparent 65%);
}

.ipt-page.ipt-v3 .ipt-hero-top {
    position: relative;
    align-items: center;
    margin-bottom: 0.85rem;
}

.ipt-page.ipt-v3 .ipt-hero-id {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.ipt-page.ipt-v3 .ipt-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(140deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 8px 18px -12px rgba(37, 99, 235, 0.85);
}

.ipt-page.ipt-v3 .ipt-hero-id-text {
    min-width: 0;
}

.ipt-page.ipt-v3 .ipt-hero-title {
    color: #1e3a8a;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.ipt-page.ipt-v3 .ipt-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.8rem;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
}

.ipt-page.ipt-v3 .ipt-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.ipt-page.ipt-v3 .ipt-hero-meta i {
    color: var(--ipt-brand);
    font-size: 0.9rem;
}

.ipt-page.ipt-v3 .ipt-hero-badges {
    position: relative;
    gap: 0.35rem;
}

.ipt-page.ipt-v3 .ipt-hero-badge {
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    color: var(--ipt-brand-deep);
    background: #ffffff;
    border-color: #93c5fd;
}

.ipt-page.ipt-v3 .ipt-hero-badge.is-ok {
    color: #047857;
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.ipt-page.ipt-v3 .ipt-hero-badge.is-bad {
    color: #be123c;
    background: #fff1f2;
    border-color: #fda4af;
}

.ipt-page.ipt-v3 .ipt-hero-body {
    position: relative;
    gap: 1rem;
}

.ipt-page.ipt-v3 .ipt-kpi-grid {
    gap: 0.55rem;
}

.ipt-page.ipt-v3 .ipt-kpi {
    position: relative;
    align-items: center;
    overflow: hidden;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem 0.6rem 0.9rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbeafe;
    box-shadow: 0 6px 14px -12px rgba(37, 99, 235, 0.4);
}

.ipt-page.ipt-v3 .ipt-kpi::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.ipt-page.ipt-v3 .ipt-kpi:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 12px 22px -16px rgba(29, 78, 216, 0.55);
}

.ipt-page.ipt-v3 .ipt-kpi-ic {
    width: 30px;
    height: 30px;
    border-radius: 0.65rem;
    font-size: 0.95rem;
    background: var(--ipt-brand-bg);
    color: var(--ipt-brand);
}

.ipt-page.ipt-v3 .ipt-kpi-label {
    font-size: 0.7rem;
    color: #64748b;
}

.ipt-page.ipt-v3 .ipt-kpi-value {
    font-size: 1.02rem;
    color: var(--ipt-brand-deep);
    letter-spacing: -0.01em;
}

.ipt-page.ipt-v3 .ipt-kpi.is-mint::before {
    background: linear-gradient(180deg, #6ee7b7, #10b981);
}

.ipt-page.ipt-v3 .ipt-kpi.is-mint .ipt-kpi-ic {
    background: #d1fae5;
    color: #059669;
}

.ipt-page.ipt-v3 .ipt-kpi.is-mint .ipt-kpi-value {
    color: #047857;
}

.ipt-page.ipt-v3 .ipt-kpi.is-amber::before {
    background: linear-gradient(180deg, #fcd34d, #f59e0b);
}

.ipt-page.ipt-v3 .ipt-kpi.is-amber .ipt-kpi-ic {
    background: #fef3c7;
    color: #d97706;
}

.ipt-page.ipt-v3 .ipt-kpi.is-amber .ipt-kpi-value {
    color: #b45309;
}

.ipt-page.ipt-v3 .ipt-kpi.is-slate::before {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}

.ipt-page.ipt-v3 .ipt-kpi.is-slate .ipt-kpi-ic {
    background: #f1f5f9;
    color: #475569;
}

.ipt-page.ipt-v3 .ipt-kpi.is-slate .ipt-kpi-value {
    color: #334155;
}

.ipt-page.ipt-v3 .ipt-ring-wrap {
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
}

.ipt-page.ipt-v3 .ipt-ring {
    width: 82px;
    height: 82px;
    background:
        radial-gradient(circle at center, #ffffff 58%, transparent 59%),
        conic-gradient(from -90deg, var(--ipt-brand-soft) calc(var(--pct) * 1%), #dbeafe 0);
    box-shadow: 0 10px 22px -16px rgba(37, 99, 235, 0.7);
}

.ipt-page.ipt-v3 .ipt-ring.is-bad {
    background:
        radial-gradient(circle at center, #ffffff 58%, transparent 59%),
        conic-gradient(from -90deg, #fb7185 calc(var(--pct) * 1%), #ffe4e6 0);
}

.ipt-page.ipt-v3 .ipt-ring-value {
    font-size: 1.1rem;
    color: var(--ipt-brand-deep);
}

.ipt-page.ipt-v3 .ipt-ring.is-bad .ipt-ring-value {
    color: #be123c;
}

.ipt-page.ipt-v3 .ipt-ring-label {
    font-size: 0.7rem;
    color: #64748b;
}

/* ---------- Cards & section headers ---------- */
.ipt-page.ipt-v3 .ipt-table-card,
.ipt-page.ipt-v3 .ipt-summary-card,
.ipt-page.ipt-v3 .ipt-charts-card,
.ipt-page.ipt-v3 .inv-panel {
    border-radius: var(--ipt-radius);
    border: 1px solid var(--ipt-line);
    background: #ffffff;
    box-shadow: var(--ipt-shadow-md);
    animation: ipt-rise 0.45s ease both;
}

.ipt-page.ipt-v3 .ipt-summary-head,
.ipt-page.ipt-v3 .inv-panel-header {
    gap: 0.7rem;
    padding: 0.95rem 1.15rem;
    font-size: 0.95rem;
    color: #0f172a;
    border-bottom: 1px solid var(--ipt-line);
    background: linear-gradient(to left, #f8faff, #ffffff);
}

.ipt-page.ipt-v3 .ipt-summary-head-icon,
.ipt-page.ipt-v3 .inv-panel-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.85rem;
    background: linear-gradient(140deg, #dbeafe, #eff6ff) !important;
    color: var(--ipt-brand) !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.ipt-page.ipt-v3 .ipt-collapse-toggle:hover {
    background: linear-gradient(to left, #eef5ff, #ffffff);
}

.ipt-page.ipt-v3 .ipt-collapse-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 1rem;
    color: #64748b;
    background: #f1f5f9;
}

.ipt-page.ipt-v3 .ipt-collapse-toggle:hover .ipt-collapse-chevron {
    color: var(--ipt-brand-deep);
    background: var(--ipt-brand-bg-soft);
}

/* ---------- Settings panel ---------- */
.ipt-page.ipt-v3 .ipt-term-pills {
    gap: 0.25rem;
    padding: 0.28rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e6ebf1;
}

.ipt-page.ipt-v3 .ipt-term-pill {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.8rem;
    padding: 0.44rem 0.7rem;
}

.ipt-page.ipt-v3 .ipt-term-pill:hover {
    color: var(--ipt-brand-deep);
    background: #ffffff;
}

.ipt-page.ipt-v3 .ipt-term-pill.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ipt-brand), var(--ipt-brand-deep));
    box-shadow: 0 8px 16px -10px rgba(37, 99, 235, 0.95);
}

.ipt-page.ipt-v3 .ipt-cycle-block {
    border-radius: 1.1rem;
    border-color: var(--ipt-line);
    background: linear-gradient(180deg, #f7faff, #ffffff);
}

.ipt-page.ipt-v3 .ipt-last-date {
    background: #ffffff;
    border-color: var(--ipt-line-strong);
    box-shadow: var(--ipt-shadow-xs);
}

.ipt-page.ipt-v3 .ipt-last-date i {
    color: var(--ipt-brand);
}

.ipt-page.ipt-v3 .ipt-last-date strong {
    color: var(--ipt-brand-deep);
}

.ipt-page.ipt-v3 .ipt-config-actions {
    border-top-color: var(--ipt-line);
}

.ipt-page.ipt-v3 .ipt-btn-ghost {
    border: 1px solid var(--ipt-line-strong);
    background: #ffffff;
    border-radius: 0.8rem;
    box-shadow: var(--ipt-shadow-xs);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ipt-page.ipt-v3 .ipt-btn-ghost:hover {
    transform: translateY(-1px);
    background: var(--ipt-brand-bg);
    border-color: var(--ipt-brand-light);
}

.ipt-page.ipt-v3 .ipt-btn-confirm {
    position: relative;
    overflow: hidden;
    border-radius: 0.8rem;
    padding-inline: 1.15rem;
}

.ipt-page.ipt-v3 .ipt-btn-confirm::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: -60%;
    width: 40%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: inset-inline-start 0.55s ease;
}

.ipt-page.ipt-v3 .ipt-btn-confirm:hover::after {
    inset-inline-start: 120%;
}

/* ---------- Summary side card ---------- */
.ipt-page.ipt-v3 .ipt-summary-hero {
    margin: 1rem;
    padding: 1.15rem 1.2rem;
    border-radius: 1.2rem;
    border-color: #93c5fd;
    background:
        radial-gradient(520px 170px at 100% 0%, rgba(96, 165, 250, 0.28), transparent 62%),
        linear-gradient(160deg, #eff6ff 0%, #f7faff 100%);
}

.ipt-page.ipt-v3 .ipt-summary-hero-value {
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    color: var(--ipt-brand-deep);
}

.ipt-page.ipt-v3 .ipt-progress-track {
    height: 10px;
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.28);
}

.ipt-page.ipt-v3 .ipt-progress-fill {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #60a5fa, #1d4ed8);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
}

.ipt-page.ipt-v3 .ipt-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: ipt-shimmer 2.4s linear infinite;
}

.ipt-page.ipt-v3 .ipt-summary-list li {
    padding: 0.7rem 0.8rem;
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: var(--ipt-shadow-xs);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ipt-page.ipt-v3 .ipt-summary-list li:hover {
    transform: translateY(-1px);
    border-color: var(--ipt-line-strong);
}

/* ---------- Schedule table ---------- */
.ipt-page.ipt-v3 .ipt-table-head {
    padding: 1.15rem 1.35rem;
    background: linear-gradient(180deg, #f3f7ff, #ffffff);
    border-bottom: 1px solid var(--ipt-line);
}

.ipt-page.ipt-v3 .ipt-table-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    color: var(--ipt-brand-ink);
}

.ipt-page.ipt-v3 .ipt-table-title::before {
    content: "";
    width: 4px;
    height: 1.05em;
    border-radius: 999px;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.ipt-page.ipt-v3 .ipt-row-count {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ipt-brand), var(--ipt-brand-deep));
    box-shadow: 0 10px 18px -12px rgba(37, 99, 235, 0.9);
}

.ipt-page.ipt-v3 .ipt-table thead th {
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--ipt-brand-deep);
    background: rgba(248, 250, 255, 0.94);
    border-bottom: 1px solid var(--ipt-line-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ipt-page.ipt-v3 .ipt-table tbody td {
    padding: 0.65rem 1rem;
}

.ipt-page.ipt-v3 .ipt-table tbody tr:nth-child(even) {
    background: transparent;
}

.ipt-page.ipt-v3 .ipt-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0));
    box-shadow: inset 3px 0 0 #60a5fa;
}

.ipt-page.ipt-v3 .ipt-table tbody tr.is-paid {
    background: linear-gradient(90deg, rgba(236, 253, 245, 0.8), rgba(255, 255, 255, 0));
    box-shadow: inset 3px 0 0 #34d399;
}

.ipt-page.ipt-v3 .ipt-table tbody tr.is-overdue-row {
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.85), rgba(255, 255, 255, 0));
}

.ipt-page.ipt-v3 .ipt-idx {
    width: 32px;
    height: 32px;
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
    box-shadow: 0 8px 16px -10px rgba(37, 99, 235, 0.95);
}

.ipt-page.ipt-v3 .ipt-table tbody tr.is-paid .ipt-idx {
    background: linear-gradient(145deg, #34d399, #059669);
}

.ipt-page.ipt-v3 .ipt-table tbody tr.is-overdue-row .ipt-idx {
    background: linear-gradient(145deg, #fb7185, #dc2626);
    box-shadow: 0 8px 16px -10px rgba(220, 38, 38, 0.95);
}

.ipt-page.ipt-v3 .ipt-amount-input,
.ipt-page.ipt-v3 .ipt-date-input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ipt-page.ipt-v3 .ipt-amount-input:focus,
.ipt-page.ipt-v3 .ipt-date-input:focus {
    background: #ffffff;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.ipt-page.ipt-v3 .ipt-rowbar {
    height: 6px;
    background: #eef2f7;
}

.ipt-page.ipt-v3 .ipt-rowbar-fill.is-full {
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

.ipt-page.ipt-v3 .ipt-status {
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
}

.ipt-page.ipt-v3 .ipt-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

.ipt-page.ipt-v3 .ipt-row-menu-btn {
    width: 34px;
    height: 34px;
    border-radius: 0.7rem;
    border-color: var(--ipt-line-strong);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ipt-page.ipt-v3 .ipt-table tfoot td {
    background: linear-gradient(180deg, #ffffff, #f3f7ff);
    border-top: 1px solid var(--ipt-line-strong);
}

.ipt-page.ipt-v3 .ipt-table-card .table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ipt-page.ipt-v3 .ipt-table-card .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
    border: 3px solid #ffffff;
}

.ipt-page.ipt-v3 .ipt-table-card .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---------- Charts ---------- */
.ipt-page.ipt-v3 .ipt-chart-box {
    border-radius: 1.1rem;
    border-color: #eef2ff;
    background: linear-gradient(180deg, #fbfdff, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ipt-page.ipt-v3 .ipt-chart-box:hover {
    border-color: var(--ipt-line-strong);
    box-shadow: var(--ipt-shadow-xs);
}

/* ---------- Empty state ---------- */
.ipt-page.ipt-v3 .ipt-empty {
    border-radius: var(--ipt-radius);
    border: 1px dashed var(--ipt-line-strong);
    background: linear-gradient(180deg, #f8faff, #ffffff);
}

@media (max-width: 768px) {
    .ipt-page.ipt-v3 .ipt-hero {
        padding: 0.85rem 0.9rem 0.9rem;
        border-radius: 1rem;
    }

    .ipt-page.ipt-v3 .ipt-avatar {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .ipt-page.ipt-v3 .ipt-hero-title {
        font-size: 1.02rem;
    }

    .ipt-page.ipt-v3 .ipt-ring {
        width: 72px;
        height: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ipt-page.ipt-v3 *,
    .ipt-page.ipt-v3 *::before,
    .ipt-page.ipt-v3 *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* ===== Person Receivables (سندات القبض) ===== */
.recv-page {
    --recv-accent: #0f766e;
    --recv-accent-2: #14b8a6;
    --recv-soft: #f0fdfa;
    --recv-border: #ccfbf1;
    --recv-ink: #134e4a;
}

.recv-page-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.recv-page-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25);
}

.recv-page-sub {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.recv-card {
    border: 1px solid rgba(15, 118, 110, 0.08);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
}

.recv-filter-section {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
    border: 1px solid var(--recv-border);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    margin-top: 0.35rem;
}

.recv-add-btn {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
}

.recv-add-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.35);
}

.recv-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recv-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.recv-summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
}

.recv-summary-icon.is-total {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.recv-summary-icon.is-count {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
}

.recv-summary-icon.is-avg {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.recv-summary-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.recv-summary-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}

.recv-table-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.recv-table thead th {
    background: linear-gradient(180deg, #f0fdfa 0%, #ecfdf5 100%);
    color: var(--recv-ink);
    font-weight: 700;
    font-size: 0.82rem;
    border-color: var(--recv-border) !important;
}

.recv-table tbody tr {
    transition: background-color 0.15s ease;
}

.recv-table tbody tr:hover {
    background-color: #f0fdfa;
}

.recv-row-invalid {
    opacity: 0.55;
}

.recv-person-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.recv-person-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--recv-soft);
    color: var(--recv-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recv-amount-cell {
    font-weight: 700;
    color: var(--recv-accent);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.recv-empty {
    text-align: center;
    padding: 2.5rem 1rem;
}

.recv-empty-icon {
    font-size: 2.75rem;
    color: #99f6e4;
    margin-bottom: 0.5rem;
}

/* Modal */
.recv-modal {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.recv-modal-header {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
    color: #fff;
    border-bottom: none;
    padding: 1.1rem 1.35rem;
}

.recv-modal-header .btn-close {
    filter: invert(1) brightness(1.8);
    opacity: 0.85;
}

.recv-modal-header-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.recv-modal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.recv-modal-header-sub {
    display: block;
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.recv-modal-body {
    background: linear-gradient(180deg, #f8fffe 0%, #ffffff 40%);
    padding: 1.35rem 1.4rem;
}

.recv-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    overflow: visible;
}

.recv-panel-insight {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 55%);
    border-color: var(--recv-border);
}

.recv-panel-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: var(--recv-ink);
}

.recv-panel-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.recv-panel-body {
    padding: 1rem 1.1rem 1.15rem;
}

.recv-cash-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 0.8rem;
}

.recv-amount-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.recv-amount-currency {
    position: absolute;
    inset-inline-start: 0.9rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.04em;
    z-index: 1;
}

.recv-amount-input {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    height: auto !important;
    padding: 0.85rem 1rem 0.85rem 3.4rem !important;
    border-radius: 0.85rem !important;
    border: 2px solid #99f6e4 !important;
    background: #f0fdfa !important;
    color: #0f766e !important;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.recv-amount-input:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18) !important;
    background: #fff !important;
}

.recv-insight-placeholder {
    text-align: center;
    padding: 2.2rem 1rem;
    color: #64748b;
}

.recv-insight-placeholder-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: #ccfbf1;
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.recv-insight-fade {
    animation: recv-fade-in 0.35s ease;
}

@keyframes recv-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.recv-modal-footer {
    border-top: 1px solid #e2e8f0;
    padding: 0.9rem 1.35rem 1.1rem;
    background: #fafafa;
}

.recv-btn {
    min-width: 120px;
    border-radius: 0.65rem;
    font-weight: 600;
}

.recv-btn-save {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
}

.recv-btn-save.is-loading {
    animation: recv-pulse 1.1s ease-in-out infinite;
}

@keyframes recv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

@media (max-width: 991.98px) {
    .recv-amount-input {
        font-size: 1.45rem !important;
    }
}

/* ===== Installment Collect (تسديد الأقساط) ===== */
.ipt-collect-page {
    --ipt-collect-accent: #0f766e;
    --ipt-collect-soft: #f0fdfa;
    --ipt-collect-border: #99f6e4;
}

.ipt-collect-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(15, 118, 110, 0.28);
    flex-shrink: 0;
}

.ipt-collect-header-actions {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.ipt-collect-empty {
    text-align: center;
    padding: 1.75rem 1rem;
    color: #64748b;
}

.ipt-collect-empty i {
    font-size: 2.25rem;
    color: #99f6e4;
    display: block;
    margin-bottom: 0.5rem;
}

.ipt-collect-invoice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}

.ipt-collect-invoice-card {
    text-align: start;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.95rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.ipt-collect-invoice-card:hover {
    border-color: var(--ipt-collect-border);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.1);
    transform: translateY(-2px);
}

.ipt-collect-invoice-card.is-active {
    border-color: #0d9488;
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 70%);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

.ipt-collect-invoice-card.is-preview-hit:not(.is-active) {
    border-color: #5eead4;
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 75%);
}

.ipt-collect-invoice-card.is-active.is-preview-hit {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22);
}

.ipt-collect-invoice-card.is-overdue:not(.is-active) {
    border-color: #fecaca;
}

.ipt-collect-invoice-card.is-settled {
    background: linear-gradient(160deg, #f0fdf4 0%, #f8fafc 70%);
    border-color: #bbf7d0;
    opacity: 0.92;
}

.ipt-collect-invoice-card.is-settled:not(.is-active) .ipt-collect-invoice-total {
    color: #64748b;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: #94a3b8;
}

.ipt-collect-invoice-card.is-settled.is-active {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
    opacity: 1;
}

.ipt-collect-invoice-card.is-settled .ipt-collect-invoice-id {
    color: #166534;
}

.ipt-collect-remaining.is-settled-text {
    color: #15803d !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ipt-collect-invoice-counts {
    margin-inline-start: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

.ipt-collect-inv-header-titles .ipt-collect-invoice-counts {
    margin-inline-start: 0;
    align-self: flex-start;
    margin-top: 0.15rem;
}

.ipt-collect-show-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(15, 118, 110, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
    color: #0f766e;
    border-radius: 999px;
    padding: 0.32rem 0.85rem 0.32rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ipt-collect-show-all i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ccfbf1;
    font-size: 0.85rem;
}

.ipt-collect-show-all:hover {
    border-color: #14b8a6;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.16);
    transform: translateY(-1px);
}

.ipt-collect-show-all.is-on {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.28);
}

.ipt-collect-show-all.is-on i {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.ipt-collect-show-all.is-link {
    margin: 0.65rem auto 0;
    background: #ecfdf5;
    box-shadow: none;
}

.ipt-collect-invoice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.ipt-collect-invoice-id {
    font-weight: 800;
    color: #0f172a;
}

.ipt-collect-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}

.ipt-collect-pill.is-bad {
    background: #fee2e2;
    color: #b91c1c;
}

.ipt-collect-pill.is-ok {
    background: #d1fae5;
    color: #047857;
}

.ipt-collect-invoice-total {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}

.ipt-collect-invoice-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #64748b;
}

.ipt-collect-remaining {
    color: #b45309;
    font-weight: 700;
}

.ipt-collect-hero .ipt-collect-kpi-remain {
    color: #0f766e !important;
}

.ipt-collect-progress {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.ipt-collect-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    transition: width 0.35s ease;
}

.ipt-collect-table .ipt-collect-cell-remain {
    font-weight: 700;
    color: #0f766e;
}

.ipt-collect-row-pay {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0.55rem !important;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.ipt-collect-row-pay:hover:not(:disabled) {
    filter: brightness(1.05);
}

.ipt-collect-row-pay:disabled {
    opacity: 0.7;
}

.ipt-collect-dock {
    --dock-ink: #0b3d3a;
    --dock-accent: #0f766e;
    --dock-soft: #ecfdf5;
    position: sticky;
    top: 1rem;
    border-radius: 1.25rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(20, 184, 166, 0.18), transparent 55%),
        linear-gradient(165deg, #f8fffe 0%, #ffffff 42%, #f1f5f9 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.ipt-collect-dock-topbar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 1.15rem 0.95rem;
    border-bottom: 1px solid rgba(15, 118, 110, 0.1);
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.08), transparent 70%);
}

.ipt-collect-dock-brand {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(145deg, #115e59, #14b8a6);
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.28);
    flex-shrink: 0;
    z-index: 1;
}

.ipt-collect-dock-glow {
    position: absolute;
    inset: -6px;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.35), transparent 70%);
    z-index: -1;
}

.ipt-collect-dock > .alert,
.ipt-collect-dock > .ipt-collect-dock-done,
.ipt-collect-dock > .ipt-collect-mode-grid,
.ipt-collect-dock > .ipt-collect-field,
.ipt-collect-dock > .ipt-collect-pay-btn {
    margin-left: 1.15rem;
    margin-right: 1.15rem;
}

.ipt-collect-dock > .ipt-collect-mode-grid {
    margin-top: 1rem;
}

.ipt-collect-dock > .ipt-collect-pay-btn {
    margin-bottom: 1.15rem;
}

.ipt-collect-dock-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--dock-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.ipt-collect-dock-sub {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.ipt-collect-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.ipt-collect-mode {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    text-align: start;
    border: 1px solid #dbe4ee;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 0.95rem;
    padding: 0.7rem 0.65rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
    cursor: pointer;
    min-height: 96px;
}

.ipt-collect-mode:hover:not(:disabled) {
    border-color: #5eead4;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.1);
}

.ipt-collect-mode.is-active {
    border-color: transparent;
    background: linear-gradient(160deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.28);
}

.ipt-collect-mode:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ipt-collect-mode-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 1rem;
}

.ipt-collect-mode.is-active .ipt-collect-mode-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ipt-collect-mode-label {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
}

.ipt-collect-mode-value {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}

.ipt-collect-mode.is-active .ipt-collect-mode-value {
    color: rgba(255, 255, 255, 0.9);
}

.ipt-collect-mode-hint {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f766e;
    background: #ecfdf5;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.ipt-collect-field .form-label {
    font-weight: 700;
    color: #334155;
}

.ipt-collect-select,
.ipt-collect-notes {
    border-radius: 0.75rem !important;
    border-color: #dbe4ee !important;
}

.recv-amount-wrap.is-locked .recv-amount-input {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f766e !important;
    cursor: default;
}

.recv-amount-wrap.is-editable .recv-amount-input {
    background: #fff !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.ipt-collect-pay-btn {
    background: linear-gradient(135deg, #115e59 0%, #0f766e 45%, #14b8a6 100%) !important;
    border: none !important;
    border-radius: 0.9rem !important;
    font-weight: 800;
    padding: 0.85rem 1rem;
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.3);
}

.ipt-collect-pay-btn:hover:not(:disabled) {
    filter: brightness(1.05);
}

.ipt-collect-dock-done {
    text-align: center;
    padding: 1.5rem 0.5rem 1.75rem;
    color: #047857;
}

.ipt-collect-dock-done i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
    .ipt-collect-dock {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .ipt-collect-mode-grid {
        grid-template-columns: 1fr;
    }
}
.ipt-collect-cta {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.25);
}
.ipt-collect-cta:hover {
    filter: brightness(1.05);
    color: #fff !important;
}

/* FIFO preview highlight on installment collect table */
.ipt-collect-table tbody tr.is-preview-hit {
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.12) 0%, rgba(20, 184, 166, 0.06) 55%, transparent 100%) !important;
    box-shadow: inset 3px 0 0 #0f766e;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    animation: ipt-preview-pulse 0.55s ease;
}

.ipt-collect-table tbody tr.is-preview-hit.is-overdue-row {
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.14) 0%, rgba(254, 202, 202, 0.25) 100%) !important;
}

.ipt-collect-table tbody tr.is-preview-hit td {
    border-color: rgba(15, 118, 110, 0.12) !important;
}

.ipt-collect-preview-received {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.ipt-collect-received-val {
    font-weight: 800;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
}

.ipt-collect-alloc-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    direction: ltr;
    box-shadow: 0 4px 10px rgba(15, 118, 110, 0.25);
}

.ipt-collect-cell-cleared {
    font-weight: 700;
    color: #059669;
}

@keyframes ipt-preview-pulse {
    from {
        background-color: rgba(20, 184, 166, 0.28);
    }
    to {
        background-color: transparent;
    }
}

/* Multi-invoice auto distribute — header toggle */
.ipt-collect-inv-header {
    flex-wrap: wrap;
    gap: 0.65rem 0.85rem;
    row-gap: 0.75rem;
}

.ipt-collect-inv-header-main {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.ipt-collect-inv-header-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ipt-collect-inv-title {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.ipt-collect-panel-auto {
    border-color: rgba(15, 118, 110, 0.22);
    box-shadow: 0 10px 28px rgba(15, 118, 110, 0.08);
}

.ipt-collect-panel-auto > .inv-panel-header {
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        linear-gradient(180deg, #f8fffe, #ffffff);
}

.ipt-collect-auto-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: linear-gradient(120deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.9));
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 600;
}

.ipt-collect-auto-hint i {
    font-size: 1.05rem;
    margin-top: 0.05rem;
    flex-shrink: 0;
}

.ipt-collect-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #99f6e4;
    background: #fff;
    color: #0f766e;
    border-radius: 999px;
    padding: 0.32rem 0.55rem 0.32rem 0.4rem;
    font-size: 0.76rem;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ipt-collect-auto-toggle:hover {
    border-color: #5eead4;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.12);
    transform: translateY(-1px);
}

.ipt-collect-auto-toggle-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ipt-collect-auto-toggle-label {
    white-space: nowrap;
}

.ipt-collect-auto-toggle-track {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #e2e8f0;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.ipt-collect-auto-toggle-thumb {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    transition: inset-inline-start 0.2s ease;
}

.ipt-collect-auto-toggle.is-on {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.28);
}

.ipt-collect-auto-toggle.is-on .ipt-collect-auto-toggle-icon {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.ipt-collect-auto-toggle.is-on .ipt-collect-auto-toggle-track {
    background: rgba(255, 255, 255, 0.28);
}

.ipt-collect-auto-toggle.is-on .ipt-collect-auto-toggle-thumb {
    inset-inline-start: 18px;
}

.ipt-collect-pill.is-alloc {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    direction: ltr;
}

.ipt-collect-cross-bar {
    margin-top: 0.55rem;
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.ipt-collect-cross-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #2dd4bf);
    transition: width 0.3s ease;
}

.ipt-collect-dock-cross .ipt-collect-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

@media (max-width: 767.98px) {
    .ipt-collect-inv-header {
        align-items: stretch;
    }

    .ipt-collect-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .ipt-collect-auto-toggle {
        order: -1;
        flex: 1 1 auto;
        justify-content: space-between;
    }
}

/* ===== Financial Vouchers (القيود المالية) ===== */
.voucher-page {
    --voucher-accent: #1d4ed8;
    --voucher-accent-2: #3b82f6;
    --voucher-soft: #eff6ff;
    --voucher-border: #bfdbfe;
    --voucher-ink: #1e3a8a;
    --voucher-debt: #0f766e;
    --voucher-credit: #b45309;
}

.voucher-page-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.voucher-page-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25);
}

.voucher-page-sub {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.voucher-card {
    border: 1px solid rgba(29, 78, 216, 0.08);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
}

.voucher-filter-section {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    border: 1px solid var(--voucher-border);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    margin-top: 0.35rem;
}

.voucher-add-btn {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.28);
}

.voucher-add-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
}

.voucher-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.voucher-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.voucher-summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
}

.voucher-summary-icon.is-total {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
}

.voucher-summary-icon.is-count {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.voucher-summary-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.voucher-summary-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}

.voucher-table-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.voucher-table thead th {
    background: #f8fafc;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.voucher-table tbody tr {
    transition: background-color 0.15s ease;
}

.voucher-table tbody tr:hover {
    background-color: #f0f7ff;
}

.voucher-row-invalid {
    opacity: 0.55;
    background: #fef2f2 !important;
}

.voucher-amount-cell {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: center;
    color: var(--voucher-ink);
}

.voucher-source-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--voucher-soft);
    color: var(--voucher-ink);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--voucher-border);
}

.voucher-empty {
    padding: 3rem 1rem;
    text-align: center;
}

.voucher-empty-icon {
    font-size: 3.5rem;
    color: #cbd5e1;
    margin-bottom: 0.75rem;
}

/* Entry page */
.voucher-entry-page {
    padding-bottom: 2rem;
}

.voucher-sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    margin-top: 1rem;
}

.voucher-balance-bar {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.voucher-balance-bar.is-balanced {
    border-color: #99f6e4;
    background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
}

.voucher-balance-bar.is-unbalanced {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fff7ed, #fef2f2);
}

.voucher-balance-item {
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0.75rem;
    min-width: 88px;
}

.voucher-balance-item .lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.voucher-balance-item .val {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
    color: #0f172a;
}

.voucher-balance-diff {
    border-inline-start: 1px dashed #cbd5e1;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}

.voucher-lines-wrap {
    overflow-x: auto;
}

.voucher-lines-table thead th {
    background: #f8fafc;
    font-weight: 700;
    color: #334155;
    font-size: 0.82rem;
    padding: 0.85rem 0.65rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.voucher-lines-table tbody td {
    padding: 0.65rem 0.5rem;
    vertical-align: middle;
    border-color: #f1f5f9;
}

.voucher-lines-table tbody tr:hover {
    background: #f8fbff;
}

.voucher-col-debt {
    background: rgba(15, 118, 110, 0.04);
}

.voucher-col-debt .form-control,
.voucher-lines-footer .voucher-col-debt {
    color: var(--voucher-debt);
}

.voucher-col-credit {
    background: rgba(180, 83, 9, 0.05);
}

.voucher-col-credit .form-control,
.voucher-lines-footer .voucher-col-credit {
    color: var(--voucher-credit);
}

.voucher-lines-footer td {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0 !important;
    padding: 0.85rem 0.65rem;
}

.voucher-lines-table .customer-autocomplete,
.voucher-lines-table .supplier-autocomplete {
    min-width: 200px;
}

@media (max-width: 991.98px) {
    .voucher-sticky-toolbar {
        position: static;
    }

    .voucher-balance-bar {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== Voucher entry (sales form style) ===== */
.voucher-entry-page .voucher-balance-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e9edff;
    background: #f8f9fc;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.voucher-entry-page .voucher-balance-inline b {
    color: #4338ca;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    display: inline-block;
}

.voucher-entry-page .voucher-balance-inline .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c7d2fe;
}

.voucher-entry-page .voucher-balance-inline.is-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.voucher-entry-page .voucher-balance-inline.is-ok b {
    color: #15803d;
}

.voucher-entry-page .voucher-balance-inline.is-warn {
    border-color: #fecaca;
    background: #fef2f2;
}

.voucher-entry-page .voucher-balance-inline.is-warn b {
    color: #b91c1c;
}

.voucher-entry-page .voucher-amt {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}

.voucher-entry-page .voucher-form-side {
    height: 100%;
    padding: 0.9rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid #eef2ff;
    background: #fbfcff;
}

.voucher-entry-page .voucher-form-side-amount {
    border-color: #e0e7ff;
    background: linear-gradient(180deg, #f8f9fc 0%, #fff 100%);
}

.voucher-entry-page .voucher-form-side-account {
    border-color: #e9edff;
    background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}

.voucher-entry-page .voucher-add-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3.15rem;
    padding: 0.85rem 1.25rem;
    border: none;
    border-radius: 0.95rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.voucher-entry-page .voucher-add-line-btn:hover {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.34);
}

.voucher-entry-page .voucher-add-line-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.26);
}

.voucher-entry-page .voucher-add-line-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.15rem;
    line-height: 1;
}

.voucher-entry-page .voucher-add-line-btn-text {
    line-height: 1;
}

.voucher-entry-page .voucher-entry-table thead th {
    background: #f8f9fc;
    color: #495057;
    font-weight: 600;
    font-size: 0.82rem;
    border-bottom: 2px solid #e9ecef;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.voucher-entry-page .voucher-entry-table tbody td {
    padding: 0.8rem 1rem;
    border-color: #f1f5f9;
}

.voucher-entry-page .voucher-entry-table tbody tr:hover {
    background: #f0f4ff;
}

.voucher-entry-page .voucher-entry-table tfoot td {
    background: #f8f9fc;
    border-top: 2px solid #e9ecef;
    padding: 0.9rem 1rem;
}

.voucher-entry-page .voucher-amt-cell {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
    font-weight: 700;
    min-width: 100px;
}

.voucher-entry-page .voucher-amt-cell.is-debt {
    color: #059669;
}

.voucher-entry-page .voucher-amt-cell.is-credit {
    color: #d97706;
}

@media (max-width: 991.98px) {
    .voucher-entry-page .voucher-balance-inline {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== Invoice refund create page ===== */
.inv-refund-page .inv-form-toolbar .inv-toolbar-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.inv-refund-page .inv-toolbar-title {
    color: #4338ca;
}

.inv-refund-header-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35) !important;
}

.inv-refund-panel-icon {
    background: #f0f4ff !important;
    color: #667eea !important;
}

.inv-refund-empty-icon {
    color: #c7d2fe !important;
}

.inv-refund-details-panel .inv-panel-header {
    align-items: center;
}

.inv-refund-total-box {
    padding: 1rem 1.1rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #f8f9fc 0%, #eef2ff 100%);
    border: 1px solid #e9edff;
}

.inv-refund-total-label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.inv-refund-total-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: #4338ca;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.inv-refund-invoice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.9rem;
}

.inv-refund-invoice-card {
    text-align: start;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 1.05rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    position: relative;
}

.inv-refund-invoice-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.14);
    transform: translateY(-2px);
}

.inv-refund-invoice-card.is-active {
    border-color: #667eea;
    background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 72%);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

.inv-refund-invoice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.inv-refund-invoice-id {
    font-weight: 800;
    color: #4338ca;
    font-size: 0.95rem;
}

.inv-refund-invoice-total {
    font-size: 1.35rem;
    font-weight: 800;
    color: #059669;
    margin-bottom: 0.55rem;
    font-variant-numeric: tabular-nums;
}

.inv-refund-invoice-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #64748b;
}

.inv-refund-invoice-selected {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #667eea;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.inv-refund-line-selected {
    background: #f0f4ff !important;
}

.inv-refund-line-selected:hover {
    background: #e0e7ff !important;
}

.inv-refund-lines .invoice-lines-header {
    margin-bottom: 1rem;
}

.inv-refund-lines .title-wrap .badge {
    font-weight: 600;
    font-size: 0.72rem;
}

.inv-refund-lines-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.inv-refund-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.6rem;
    padding: 0 1rem;
    height: 38px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-color: #c7d2fe;
    color: #4f46e5;
    background: #fff;
}

.inv-refund-clear-btn:hover:not(:disabled),
.inv-refund-clear-btn:focus-visible:not(:disabled) {
    background: #eef2ff;
    border-color: #667eea;
    color: #4338ca;
}

.inv-refund-clear-btn:disabled {
    opacity: 0.55;
}

.inv-refund-lines-filters {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(to bottom, #f8f9fc, #fff);
    border: 1px solid #eef2ff;
    border-radius: 0.75rem;
}

.inv-refund-selltype-toggle {
    margin-inline-start: 0;
    width: 100%;
}

.inv-refund-selltype-toggle .inv-mode-btn {
    flex: 1 1 0;
    justify-content: center;
}

.inv-refund-lines .invoice-lines-table .col-check {
    width: 64px;
    text-align: center;
}

.inv-refund-qty-input {
    max-width: 110px;
    margin-inline: auto;
    text-align: center;
    border-radius: 0.5rem;
}

.inv-refund-lines .invoice-lines-table td.col-qty,
.inv-refund-lines .invoice-lines-table th.col-qty,
.inv-refund-lines .invoice-lines-table td.col-cost,
.inv-refund-lines .invoice-lines-table th.col-cost {
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .inv-refund-invoice-grid {
        grid-template-columns: 1fr;
    }

    .inv-refund-lines .invoice-lines-header {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-refund-lines .title-wrap {
        margin-inline-end: 0;
    }

    .inv-refund-lines-actions {
        width: 100%;
    }

    .inv-refund-lines-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ===== Invoice refund modal (from invoices list) ===== */
.inv-refund-modal {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.2);
}

.inv-refund-modal .modal-body {
    padding: 1.15rem 1.25rem;
    background: #fbfcfe;
}

.inv-refund-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inv-refund-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.inv-refund-modal-sub {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.inv-refund-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
    padding: 0.9rem 1.25rem;
    background: #fff;
    border-top: 1px solid #eef2ff;
}

.inv-refund-modal-footer .inv-toolbar-btn {
    min-width: 140px;
}