/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-layout[b-ywns07vmy0] {
    min-height: 100vh;
    width: 100%;
}

#blazor-error-ui[b-ywns07vmy0] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-ywns07vmy0] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout wrapper */
.layout-wrapper[b-ncqiczgm0g] {
    --nav-bg: #073d63;
    min-height: 100vh;
}

.page[b-ncqiczgm0g] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ncqiczgm0g] {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.sidebar[b-ncqiczgm0g] {
    background-color: var(--nav-bg, #073d63);
}

.top-row[b-ncqiczgm0g] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-ncqiczgm0g]  a, .top-row[b-ncqiczgm0g]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    color: #0366d6;
}

.top-row[b-ncqiczgm0g]  a:hover {
    text-decoration: underline;
}

@media (min-width: 641px) {
    .page[b-ncqiczgm0g] {
        flex-direction: row;
    }

    .sidebar[b-ncqiczgm0g] {
        width: 260px;
        min-width: 260px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        padding-top: 70px;
    }

    .top-row[b-ncqiczgm0g] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-ncqiczgm0g], article[b-ncqiczgm0g] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-ncqiczgm0g] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-ncqiczgm0g] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Sidebar Logo */
.sidebar-logo[b-ncqiczgm0g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 70px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 1100;
    transition: width 0.3s ease;
}

.sidebar-logo:hover[b-ncqiczgm0g] {
    background-color: #f9fafb;
}

.sidebar-logo img[b-ncqiczgm0g] {
    max-width: 180px;
    max-height: 50px;
    height: auto;
    transition: all 0.3s ease;
}

.sidebar[b-ncqiczgm0g] {
    transition: width 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.sidebar-collapsed .sidebar[b-ncqiczgm0g] {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.sidebar-collapsed .sidebar-logo[b-ncqiczgm0g] {
    width: 70px;
    border-radius: 0 0 8px 0;
}

.sidebar-collapsed .sidebar-logo img[b-ncqiczgm0g] {
    max-width: 50px;
    max-height: 45px;
}

@media (max-width: 640px) {
    .sidebar-logo[b-ncqiczgm0g] {
        width: 70px;
        height: 60px;
        padding: 0.5rem;
        border-radius: 0 0 8px 0;
    }

    .sidebar-logo img[b-ncqiczgm0g] {
        max-width: 50px;
        max-height: 45px;
    }

    .sidebar[b-ncqiczgm0g] {
        padding-top: 60px;
    }
}

/* Auto-print toggle styling */
.autoprint-container[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.autoprint-toggle[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-right: 0.5rem;
}

.autoprint-toggle input[type="checkbox"][b-ncqiczgm0g] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0366d6;
}

.autoprint-label[b-ncqiczgm0g] {
    font-size: 0.9rem;
    color: #0366d6;
    white-space: nowrap;
}

.autoprint-toggle:hover .autoprint-label[b-ncqiczgm0g] {
    text-decoration: underline;
}

.autoprint-info[b-ncqiczgm0g] {
    cursor: help;
    font-size: 0.85rem;
    margin-right: 1rem;
}

/* Operator display - shows logged-in employee at top center */
.operator-display[b-ncqiczgm0g] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #81c784;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.operator-display svg[b-ncqiczgm0g] {
    color: #2e7d32;
    flex-shrink: 0;
}

.operator-name[b-ncqiczgm0g] {
    font-weight: 600;
    color: #1b5e20;
    white-space: nowrap;
    font-size: 0.9rem;
}

.operator-badge[b-ncqiczgm0g] {
    font-size: 0.8rem;
    color: #388e3c;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .operator-display[b-ncqiczgm0g] {
        position: static;
        transform: none;
        margin-right: auto;
    }
}

/* User menu button only - dropdown styles are in app.css */
.user-menu-button[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: #163a49;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.user-menu-button:hover[b-ncqiczgm0g] {
    background-color: #e9ecef;
}

.user-icon[b-ncqiczgm0g] {
    color: #163a49;
}

.user-name[b-ncqiczgm0g] {
    font-weight: 600;
    white-space: nowrap;
    color: #163a49;
}

.dropdown-arrow[b-ncqiczgm0g] {
    transition: transform 0.2s;
}

.dropdown-arrow.open[b-ncqiczgm0g] {
    transform: rotate(180deg);
}

/* Notification bell */
.feedback-btn[b-ncqiczgm0g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
    color: #163a49;
    border: none;
    background: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
    margin-right: 0.25rem;
}

.feedback-btn:hover[b-ncqiczgm0g] {
    background-color: #e9ecef;
    color: #163a49;
}

.feedback-btn svg[b-ncqiczgm0g] {
    width: 22px;
    height: 22px;
}

.notification-bell[b-ncqiczgm0g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
    color: #163a49;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
    margin-right: 0.25rem;
}

.notification-bell:hover[b-ncqiczgm0g] {
    background-color: #e9ecef;
    color: #163a49;
}

.notification-bell svg[b-ncqiczgm0g] {
    width: 22px;
    height: 22px;
}

.notification-badge[b-ncqiczgm0g] {
    position: absolute;
    top: 0;
    right: -2px;
    background: #dc2626;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 2px solid #f7f7f7;
}

/* About/Database icon button */
.about-link[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.about-link:hover[b-ncqiczgm0g] {
    background-color: #e9ecef;
    color: #163a49;
}

.about-link svg[b-ncqiczgm0g] {
    width: 20px;
    height: 20px;
}

/* About Modal - Database Table Mapping */
.about-modal-backdrop[b-ncqiczgm0g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.about-modal[b-ncqiczgm0g] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    z-index: 1051;
}

.about-modal.about-modal-large[b-ncqiczgm0g] {
    max-width: 1100px;
    max-height: 90vh;
}

.about-modal-header[b-ncqiczgm0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #163a49;
}

.about-modal-header h3[b-ncqiczgm0g] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
}

.about-modal-header .btn-close[b-ncqiczgm0g] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    line-height: 1;
    padding: 0;
}

.about-modal-header .btn-close:hover[b-ncqiczgm0g] {
    color: #111827;
}

/* Modal Tabs */
.about-modal-tabs[b-ncqiczgm0g] {
    display: flex;
    gap: 0;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.about-modal-tabs .tab-btn[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.about-modal-tabs .tab-btn:hover[b-ncqiczgm0g] {
    color: #163a49;
    background: #f3f4f6;
}

.about-modal-tabs .tab-btn.active[b-ncqiczgm0g] {
    color: #163a49;
    font-weight: 600;
    border-bottom-color: #ff6b3c;
    background: white;
}

.about-modal-tabs .tab-btn svg[b-ncqiczgm0g] {
    flex-shrink: 0;
}

.about-modal-body[b-ncqiczgm0g] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.about-description[b-ncqiczgm0g] {
    color: #6b7280;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.active-connection-banner[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 0.85rem;
}

.active-connection-banner .acb-label[b-ncqiczgm0g] {
    color: #0369a1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.7rem;
}

.active-connection-banner .acb-server[b-ncqiczgm0g],
.active-connection-banner .acb-db[b-ncqiczgm0g] {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #0f172a;
}

.active-connection-banner .acb-sep[b-ncqiczgm0g] {
    color: #94a3b8;
}

.about-table[b-ncqiczgm0g] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.about-table th[b-ncqiczgm0g],
.about-table td[b-ncqiczgm0g] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.about-table th[b-ncqiczgm0g] {
    background: #f3f4f6;
    font-weight: 600;
    color: #374151;
}

.about-table td:first-child[b-ncqiczgm0g] {
    white-space: nowrap;
}

.table-name[b-ncqiczgm0g] {
    display: inline-block;
    background: #e5e7eb;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
    margin: 0.15rem 0.25rem 0.15rem 0;
    color: #374151;
}

.about-modal-footer[b-ncqiczgm0g] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.about-modal-footer .btn-secondary[b-ncqiczgm0g] {
    padding: 0.5rem 1.5rem;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.about-modal-footer .btn-secondary:hover[b-ncqiczgm0g] {
    background: #4b5563;
}

/* ERD Styles */
.erd-filter-bar[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border-radius: 6px;
}

.erd-filter-bar label[b-ncqiczgm0g] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.erd-filter-select[b-ncqiczgm0g] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
}

.erd-filter-select:focus[b-ncqiczgm0g] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.erd-container[b-ncqiczgm0g] {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    overflow: auto;
    max-height: 500px;
}

.erd-svg[b-ncqiczgm0g] {
    width: 100%;
    min-width: 900px;
    height: auto;
    min-height: 700px;
}

.erd-entity[b-ncqiczgm0g] {
    cursor: pointer;
    transition: filter 0.2s ease;
}

.erd-entity:hover[b-ncqiczgm0g] {
    filter: brightness(0.95);
}

.erd-legend[b-ncqiczgm0g] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.8rem;
}

.legend-item[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #4b5563;
}

.legend-color[b-ncqiczgm0g] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* ===================== Nav Style Variants ===================== */

.layout-wrapper.nav-charcoal[b-ncqiczgm0g] {
    --nav-bg: #2d3340;
}

.layout-wrapper.nav-slate[b-ncqiczgm0g] {
    --nav-bg: #3b4a5a;
}

.layout-wrapper.nav-midnight[b-ncqiczgm0g] {
    --nav-bg: #1a1e2e;
}

.layout-wrapper.nav-teal[b-ncqiczgm0g] {
    --nav-bg: #0d4f4f;
}

.layout-wrapper.nav-navy[b-ncqiczgm0g] {
    --nav-bg: #1b2a4a;
}

.layout-wrapper.nav-warm[b-ncqiczgm0g] {
    --nav-bg: #3d3535;
}

/* Responsive */
@media (max-width: 768px) {
    .about-modal.about-modal-large[b-ncqiczgm0g] {
        max-width: 95%;
        max-height: 95vh;
    }

    .erd-container[b-ncqiczgm0g] {
        max-height: 350px;
    }

    .erd-legend[b-ncqiczgm0g] {
        gap: 0.5rem;
        font-size: 0.75rem;
    }

    .about-modal-tabs .tab-btn[b-ncqiczgm0g] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Feedback Modal */
.feedback-modal-backdrop[b-ncqiczgm0g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.feedback-modal[b-ncqiczgm0g] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    width: 520px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.feedback-modal-header[b-ncqiczgm0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.feedback-modal-header h3[b-ncqiczgm0g] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
}

.feedback-modal-body[b-ncqiczgm0g] {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feedback-modal-row[b-ncqiczgm0g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.feedback-modal-field[b-ncqiczgm0g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feedback-modal-field label[b-ncqiczgm0g] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.feedback-modal-field .required[b-ncqiczgm0g] {
    color: #ef4444;
}

.feedback-modal-field select[b-ncqiczgm0g],
.feedback-modal-field input[b-ncqiczgm0g],
.feedback-modal-field textarea[b-ncqiczgm0g] {
    padding: 0.45rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}

.feedback-modal-field textarea[b-ncqiczgm0g] {
    resize: vertical;
}

.feedback-modal-field select:focus[b-ncqiczgm0g],
.feedback-modal-field input:focus[b-ncqiczgm0g],
.feedback-modal-field textarea:focus[b-ncqiczgm0g] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.feedback-modal-hint[b-ncqiczgm0g] {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
}

.feedback-modal-hint a[b-ncqiczgm0g] {
    color: #2563eb;
}

.feedback-modal-footer[b-ncqiczgm0g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.feedback-modal-submit[b-ncqiczgm0g] {
    background-color: #ff6b3c !important;
    border-color: #ff6b3c !important;
    color: white !important;
}

.feedback-modal-submit:hover:not(:disabled)[b-ncqiczgm0g] {
    background-color: #e55a2b !important;
}

.feedback-modal-error[b-ncqiczgm0g] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.feedback-modal-success[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.9rem;
    color: #16a34a;
}

/* Feedback Modal - Evidence/Attachments (matches WorkflowStepEvidence styling) */
.fb-evidence-container[b-ncqiczgm0g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}

.fb-evidence-header[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fb-evidence-title[b-ncqiczgm0g] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
}

.fb-evidence-add-link[b-ncqiczgm0g] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    user-select: none;
}

.fb-evidence-add-link:hover[b-ncqiczgm0g] {
    color: #1d4ed8;
    text-decoration: underline;
}

.fb-evidence-upload-section[b-ncqiczgm0g] {
    animation: fbSlideIn-b-ncqiczgm0g 0.2s ease-out;
}

@keyframes fbSlideIn-b-ncqiczgm0g {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fb-evidence-dropzone[b-ncqiczgm0g] {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: pointer;
}

.fb-evidence-dropzone:hover[b-ncqiczgm0g] {
    border-color: #2563eb;
    background: #eff6ff;
}

.fb-evidence-dropzone.drag-over[b-ncqiczgm0g] {
    border-color: #2563eb;
    background: #dbeafe;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.fb-evidence-dropzone-inner[b-ncqiczgm0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    gap: 0.3rem;
}

.fb-evidence-upload-icon[b-ncqiczgm0g] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eff6ff;
    border: 2px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    margin-bottom: 0.15rem;
    transition: all 0.25s ease;
}

.fb-evidence-dropzone:hover .fb-evidence-upload-icon[b-ncqiczgm0g] {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
}

.fb-evidence-dropzone.drag-over .fb-evidence-upload-icon[b-ncqiczgm0g] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.fb-evidence-upload-text[b-ncqiczgm0g] {
    font-size: 0.825rem;
    color: #475569;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.fb-evidence-browse-link[b-ncqiczgm0g] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fb-evidence-upload-subtext[b-ncqiczgm0g] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

.fb-evidence-progress-bar[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.fb-evidence-progress-track[b-ncqiczgm0g] {
    flex: 1;
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.fb-evidence-progress-fill[b-ncqiczgm0g] {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px;
    animation: fbProgressIndeterminate-b-ncqiczgm0g 1.5s ease-in-out infinite;
    width: 40%;
}

@keyframes fbProgressIndeterminate-b-ncqiczgm0g {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

.fb-evidence-progress-text[b-ncqiczgm0g] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
}

.fb-evidence-files[b-ncqiczgm0g] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fb-evidence-file-row[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 0.3rem;
    transition: all 0.15s ease;
}

.fb-evidence-file-row:hover[b-ncqiczgm0g] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.fb-evidence-file-thumb[b-ncqiczgm0g] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-evidence-file-thumb img[b-ncqiczgm0g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fb-evidence-file-icon[b-ncqiczgm0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fb-evidence-file-info[b-ncqiczgm0g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fb-evidence-file-name[b-ncqiczgm0g] {
    font-size: 0.825rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-evidence-action-btn[b-ncqiczgm0g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.fb-evidence-action-delete:hover[b-ncqiczgm0g] {
    background: #fee2e2;
    color: #dc2626;
}

.feedback-modal-view-all[b-ncqiczgm0g] {
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #2563eb;
    padding: 0.6rem;
    border: 2px solid #2563eb;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.feedback-modal-view-all:hover[b-ncqiczgm0g] {
    background: #2563eb;
    color: white;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-s697g1cekm] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='003030'%3e%3cpath stroke='rgba%28255,255,255,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M47h22M415h22M423h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-s697g1cekm] {
    background-color: rgba(255, 255, 255, 0.5);
}

.brand[b-s697g1cekm] {
    background: white;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 6px 6px 0;
}

.brand img[b-s697g1cekm] {
    max-width: 140px;
    display: block;
}

.top-row[b-s697g1cekm] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.nav-item[b-s697g1cekm] {
    font-size: 0.95rem;
    padding-bottom: 0.5rem;
    display: flex;
}

.nav-item:first-of-type[b-s697g1cekm] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-s697g1cekm] {
    padding-bottom: 1rem;
}

.nav-item[b-s697g1cekm]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3.5rem;
    display: flex;
    align-items: center;
    line-height: 3.5rem;
    width: 100%;
    padding-left: 0.75rem;
    font-weight: 600;
}

.nav-item[b-s697g1cekm]  .bi {
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.75rem;
    background-size: cover;
}

.nav-text[b-s697g1cekm] {
    flex: 1;
    font-weight: 600;
}

.nav-item[b-s697g1cekm]  .nav-text {
    flex: 1;
    font-weight: 600;
}

.nav-item[b-s697g1cekm]  a.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
}

/* Mobile: hide by default, show when toggler checked */
.nav-scrollable[b-s697g1cekm] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-s697g1cekm] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-s697g1cekm] {
        display: none;
    }

    .nav-scrollable[b-s697g1cekm] {
        /* Always show sidebar on desktop - never collapse */
        display: block !important;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

/* Sidebar background - inherits from layout wrapper CSS variable */
.sidebar[b-s697g1cekm] {
    background-color: var(--nav-bg, #0b4f7e);
}

/* nav icon sizing for svg use */
.nav-icon[b-s697g1cekm] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-right: 0.75rem;
    color: white;
    stroke: currentColor;
    fill: none;
    opacity: 0.9;
    flex-shrink: 0;
}

/* new: image icon styling - same sizing as svg and hidden by default if not available */
.nav-icon-img[b-s697g1cekm] {
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    display: inline-block;
    object-fit: contain;
}

.nav-item[b-s697g1cekm]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: white;
}

.nav-icon use[b-s697g1cekm] {
    color: inherit;
}

/* ensure icons are vertically centered in the nav link */
.nav-item[b-s697g1cekm]  .nav-link {
    display: flex;
    align-items: center;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-layout[b-fc8vfal2ol] {
    min-height: 100vh;
    background: #f5f6fa;
    display: flex;
    flex-direction: column;
}

.public-header[b-fc8vfal2ol] {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.public-header-inner[b-fc8vfal2ol] {
    max-width: 960px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}

.public-logo[b-fc8vfal2ol] {
    height: 36px;
    width: auto;
}

.public-header-accent[b-fc8vfal2ol] {
    height: 4px;
    background: linear-gradient(90deg, #003366 0%, #ff6b3c 50%, #003366 100%);
}

.public-content[b-fc8vfal2ol] {
    flex: 1;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.access-denied-page[b-siuxt80dl7] {
    min-height: 100vh;
    background: var(--page-bg, #f5f6fa);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.access-denied-card[b-siuxt80dl7] {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 51, 102, 0.08);
    padding: 3rem 2.5rem 2.5rem;
    text-align: center;
    overflow: hidden;
}

.access-denied-watermark[b-siuxt80dl7] {
    position: absolute;
    bottom: -28px;
    right: -8px;
    font-size: 8rem;
    font-weight: 800;
    color: rgba(0, 51, 102, 0.05);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.05em;
}

.access-denied-icon[b-siuxt80dl7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 107, 60, 0.1);
    color: #ff6b3c;
    margin-bottom: 1.25rem;
}

.access-denied-title[b-siuxt80dl7] {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #003366;
}

.access-denied-message[b-siuxt80dl7] {
    margin: 0 0 1.5rem 0;
    color: #495057;
    line-height: 1.55;
    font-size: 0.95rem;
}

.access-denied-context[b-siuxt80dl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: #f5f6fa;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.context-label[b-siuxt80dl7] {
    color: #6c757d;
}

.context-value[b-siuxt80dl7] {
    font-weight: 600;
    color: #003366;
}

.access-denied-actions[b-siuxt80dl7] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* Let the sign-out form's button sit directly in the actions flex row. */
.access-denied-signout-form[b-siuxt80dl7] {
    display: contents;
}

.btn-signout[b-siuxt80dl7] {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 2px solid #ff6b3c;
    background: #ff6b3c;
    color: #fff;
}

.btn-signout:hover[b-siuxt80dl7] {
    background: #e55a2b;
    border-color: #e55a2b;
    color: #fff;
}

.access-denied-help[b-siuxt80dl7] {
    margin: 0 0 0.75rem 0;
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1.5;
}

.access-denied-helpdesk[b-siuxt80dl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 51, 102, 0.06);
    border: 1px solid rgba(0, 51, 102, 0.12);
    border-radius: 6px;
    color: #003366;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.access-denied-helpdesk:hover[b-siuxt80dl7] {
    background: rgba(0, 51, 102, 0.1);
    border-color: rgba(0, 51, 102, 0.24);
    color: #003366;
}
/* /Components/Pages/AdminConfiguration.razor.rz.scp.css */
/* Admin Configuration page */
.admin-configuration-page[b-1amp0svql6] {
    padding: 2rem 1.5rem;
}

.configuration-section[b-1amp0svql6] {
    margin-bottom: 2rem;
}

.section-header h3[b-1amp0svql6] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0b3f63;
}

.section-subtitle[b-1amp0svql6] {
    color: #e87722;
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
}

/* Card rows */
.card-row[b-1amp0svql6] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.card-row > *[b-1amp0svql6] {
    flex: 1 1 0;
    min-width: 0;
}

.card-placeholder[b-1amp0svql6] {
    visibility: hidden;
}

/* Card */
.card[b-1amp0svql6] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid #e9ecef;
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.card:hover[b-1amp0svql6] {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 8px 24px var(--accent-shadow, rgba(37, 99, 235, 0.15));
    transform: translateY(-4px);
}

.card-top[b-1amp0svql6] {
    background-color: var(--accent-bg, #cfe9fb);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    position: relative;
}

.card-top[b-1amp0svql6]::after {
    content: "";
    position: absolute;
    left: -20%;
    top: -10%;
    width: 140%;
    height: 140%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
    transform: rotate(-6deg);
    pointer-events: none;
}

.card-icon svg[b-1amp0svql6] {
    width: 48px;
    height: 48px;
    color: var(--accent, #0b5f8f);
}

.card-body[b-1amp0svql6] {
    padding: 1rem;
    background: white;
    flex: 1;
}

.card-meta[b-1amp0svql6] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa8b6;
    margin-bottom: 0.35rem;
}

.card-title[b-1amp0svql6] {
    font-size: 1.25rem;
    color: var(--accent, #0b5f8f);
    font-weight: 700;
}

.card-link[b-1amp0svql6] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 599px) {
    .card-row[b-1amp0svql6] {
        flex-wrap: wrap;
    }

    .card-row > *[b-1amp0svql6] {
        flex: 1 1 100%;
    }

    .card-placeholder[b-1amp0svql6] {
        display: none;
    }
}
/* /Components/Pages/AppSettings.razor.rz.scp.css */
/* ===================== Page Layout ===================== */

.settings-page[b-5ncuklfq1c] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.settings-topbar[b-5ncuklfq1c] {
    margin-bottom: 0.5rem;
}

.back-link[b-5ncuklfq1c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #0b5f8f;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0;
}

.back-link:hover[b-5ncuklfq1c] {
    color: #094a6f;
    text-decoration: underline;
}

.settings-header[b-5ncuklfq1c] {
    margin-bottom: 1.5rem;
}

.settings-header h2[b-5ncuklfq1c] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #163a49;
    margin: 0 0 0.25rem;
}

/* Subtle indicator of the active file-storage backend. */
.storage-indicator[b-5ncuklfq1c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.storage-indicator.storage-cloud[b-5ncuklfq1c] {
    color: #0b5f8f;
    background: #e8f3fa;
    border-color: #cfe6f3;
}

.storage-indicator.storage-local[b-5ncuklfq1c] {
    color: #7c6a1f;
    background: #fbf4dd;
    border-color: #efe3b8;
}

.settings-subtitle[b-5ncuklfq1c] {
    color: #7c8b95;
    font-size: 0.9rem;
    margin: 0;
}

.settings-loading[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #7c8b95;
    padding: 2rem 0;
}

/* ===================== Status Message ===================== */

.status-message[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    animation: fadeIn-b-5ncuklfq1c 0.2s ease-out;
}

.status-message.success[b-5ncuklfq1c] {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.status-message.error[b-5ncuklfq1c] {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.btn-close-status[b-5ncuklfq1c] {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
}

.btn-close-status:hover[b-5ncuklfq1c] {
    opacity: 1;
}

/* ===================== Accordion Cards ===================== */

.settings-sections[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-card[b-5ncuklfq1c] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.settings-card:hover[b-5ncuklfq1c] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.settings-card-header[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.settings-card-header:hover[b-5ncuklfq1c] {
    background-color: #f8fafc;
}

.settings-card-title[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    color: #0b5f8f;
}

.settings-card-title svg[b-5ncuklfq1c] {
    flex-shrink: 0;
    color: #0b5f8f;
}

.settings-chevron[b-5ncuklfq1c] {
    color: #94a3b8;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.settings-card-header.expanded .settings-chevron[b-5ncuklfq1c] {
    transform: rotate(180deg);
}

.settings-card-content[b-5ncuklfq1c] {
    padding: 0 1.25rem 1.25rem;
    animation: slideDown-b-5ncuklfq1c 0.2s ease-out;
}

@keyframes slideDown-b-5ncuklfq1c {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-5ncuklfq1c {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===================== Form Fields ===================== */

.form-field[b-5ncuklfq1c] {
    margin-bottom: 1rem;
}

.form-field:last-child[b-5ncuklfq1c] {
    margin-bottom: 0;
}

.form-field label[b-5ncuklfq1c] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input[b-5ncuklfq1c] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d5dce6;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1a1a2e;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus[b-5ncuklfq1c] {
    outline: none;
    border-color: #0b5f8f;
    box-shadow: 0 0 0 3px rgba(11, 95, 143, 0.1);
}

.form-input[b-5ncuklfq1c]::placeholder {
    color: #a0aec0;
}

.score-input[b-5ncuklfq1c] {
    max-width: 120px;
}

.form-row-inline[b-5ncuklfq1c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field-hint[b-5ncuklfq1c] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.section-hint[b-5ncuklfq1c] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.section-hint a[b-5ncuklfq1c] {
    color: #0b5f8f;
}

.settings-divider[b-5ncuklfq1c] {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.5rem 0 1rem;
}

.section-subheading[b-5ncuklfq1c] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.25rem;
}

/* ===================== Toggle Switch ===================== */

.toggle-field[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-field label:first-child[b-5ncuklfq1c] {
    margin-bottom: 0;
}

/* Password-complexity toggle panel — compact rows, text left, switch right */
.policy-toggles[b-5ncuklfq1c] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.policy-toggle-row[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.policy-toggle-row + .policy-toggle-row[b-5ncuklfq1c] {
    border-top: 1px solid #eef2f6;
}

.policy-toggle-text[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.policy-toggle-title[b-5ncuklfq1c] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

.policy-toggle-eg[b-5ncuklfq1c] {
    font-size: 0.78rem;
    color: #94a3b8;
}

.policy-toggle-row .toggle-switch[b-5ncuklfq1c] {
    flex-shrink: 0;
}

.toggle-switch[b-5ncuklfq1c] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input[b-5ncuklfq1c] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-5ncuklfq1c] {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.25s ease;
}

.toggle-slider[b-5ncuklfq1c]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider[b-5ncuklfq1c] {
    background: #0b5f8f;
}

.toggle-switch input:checked + .toggle-slider[b-5ncuklfq1c]::before {
    transform: translateX(20px);
}

/* ===================== Radio Group ===================== */

.radio-group[b-5ncuklfq1c] {
    display: flex;
    gap: 1.5rem;
}

.radio-option[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: #4a5568;
    cursor: pointer;
}

.radio-option input[type="radio"][b-5ncuklfq1c] {
    accent-color: #0b5f8f;
}

/* ===================== QR Section ===================== */

.qr-showcase[b-5ncuklfq1c] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.qr-preview-stage[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.qr-preview-label[b-5ncuklfq1c] {
    border: 1px solid #333;
    background: white;
    display: inline-flex;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.qr-preview-content[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
}

.qr-preview-qr[b-5ncuklfq1c] {
    flex-shrink: 0;
}

.qr-preview-info[b-5ncuklfq1c] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qr-preview-text[b-5ncuklfq1c] {
    font-size: 8px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.qr-preview-dims[b-5ncuklfq1c] {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.qr-controls[b-5ncuklfq1c] {
    max-width: 480px;
    margin: 0 auto;
}

/* ===================== Theme Section ===================== */

.under-construction[b-5ncuklfq1c] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: #92400e;
    line-height: 1.4;
}

.under-construction svg[b-5ncuklfq1c] {
    flex-shrink: 0;
    margin-top: 1px;
}

.coming-soon-badge[b-5ncuklfq1c] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.5rem;
}

.theme-mode-toggle[b-5ncuklfq1c] {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.mode-option[b-5ncuklfq1c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    background: #fff;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mode-option:first-child[b-5ncuklfq1c] {
    border-right: 1px solid #e2e8f0;
}

.mode-option.active[b-5ncuklfq1c] {
    background: #0b5f8f;
    color: #fff;
}

.mode-option:hover:not(.active)[b-5ncuklfq1c] {
    background: #f1f5f9;
}

.colour-swatches[b-5ncuklfq1c] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.colour-swatch[b-5ncuklfq1c] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}

.colour-swatch:hover[b-5ncuklfq1c] {
    transform: scale(1.15);
}

.colour-swatch.selected[b-5ncuklfq1c] {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor;
    transform: scale(1.1);
}

/* ===================== Card Template Picker ===================== */

.card-template-grid[b-5ncuklfq1c] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.card-template-option[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 120px;
    overflow: hidden;
}

.card-template-option:hover[b-5ncuklfq1c] {
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-template-option.selected[b-5ncuklfq1c] {
    border-color: #0b5f8f;
    box-shadow: 0 0 0 3px rgba(11, 95, 143, 0.15);
}

.card-template-label[b-5ncuklfq1c] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
    padding-bottom: 0.5rem;
}

.card-template-option.selected .card-template-label[b-5ncuklfq1c] {
    color: #0b5f8f;
}

/* Mini-preview card structure */
.card-template-preview[b-5ncuklfq1c] {
    width: 100%;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.ctp-top[b-5ncuklfq1c] {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctp-body[b-5ncuklfq1c] {
    padding: 0.4rem 0.6rem 0.5rem;
}

.ctp-meta[b-5ncuklfq1c] {
    height: 4px;
    width: 60%;
    border-radius: 2px;
    margin-bottom: 0.3rem;
}

.ctp-title[b-5ncuklfq1c] {
    height: 6px;
    width: 80%;
    border-radius: 2px;
}

/* === Classic preview === */
.card-template-preview.classic .ctp-top[b-5ncuklfq1c] {
    background: #cfe9fb;
    color: #0b5f8f;
}

.card-template-preview.classic .ctp-body[b-5ncuklfq1c] {
    background: #fff;
}

.card-template-preview.classic .ctp-meta[b-5ncuklfq1c] {
    background: #d1d5db;
}

.card-template-preview.classic .ctp-title[b-5ncuklfq1c] {
    background: #0b5f8f;
}

/* === Gradient preview === */
.card-template-preview.gradient .ctp-top[b-5ncuklfq1c] {
    background: linear-gradient(135deg, #0b5f8f 0%, #1e90c8 100%);
    color: #fff;
}

.card-template-preview.gradient .ctp-body[b-5ncuklfq1c] {
    background: #fff;
}

.card-template-preview.gradient .ctp-meta[b-5ncuklfq1c] {
    background: #d1d5db;
}

.card-template-preview.gradient .ctp-title[b-5ncuklfq1c] {
    background: #0b5f8f;
}

/* === Outlined preview === */
.card-template-preview.outlined .ctp-top[b-5ncuklfq1c] {
    background: #fff;
    border-bottom: 2px solid #0b5f8f;
    color: #0b5f8f;
}

.card-template-preview.outlined .ctp-body[b-5ncuklfq1c] {
    background: #fff;
}

.card-template-preview.outlined .ctp-meta[b-5ncuklfq1c] {
    background: #d1d5db;
}

.card-template-preview.outlined .ctp-title[b-5ncuklfq1c] {
    background: #0b5f8f;
}

/* === Minimal preview === */
.card-template-preview.minimal[b-5ncuklfq1c] {
    border-left: 3px solid #0b5f8f;
}

.card-template-preview.minimal .ctp-top[b-5ncuklfq1c] {
    background: #f8fafc;
    color: #0b5f8f;
}

.card-template-preview.minimal .ctp-body[b-5ncuklfq1c] {
    background: #fff;
}

.card-template-preview.minimal .ctp-meta[b-5ncuklfq1c] {
    background: #d1d5db;
}

.card-template-preview.minimal .ctp-title[b-5ncuklfq1c] {
    background: #0b5f8f;
}

/* === Glass preview === */
.card-template-preview.glass .ctp-top[b-5ncuklfq1c] {
    background: linear-gradient(135deg, rgba(11, 95, 143, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
    color: #0b5f8f;
    backdrop-filter: blur(4px);
}

.card-template-preview.glass .ctp-body[b-5ncuklfq1c] {
    background: rgba(255, 255, 255, 0.85);
}

.card-template-preview.glass .ctp-meta[b-5ncuklfq1c] {
    background: #cbd5e1;
}

.card-template-preview.glass .ctp-title[b-5ncuklfq1c] {
    background: #0b5f8f;
}

/* ===================== Icon Style Picker ===================== */

.icon-style-grid[b-5ncuklfq1c] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.icon-style-option[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.icon-style-option:hover[b-5ncuklfq1c] {
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.icon-style-option.selected[b-5ncuklfq1c] {
    border-color: #0b5f8f;
    background: #f0f7ff;
}

.icon-style-preview[b-5ncuklfq1c] {
    color: #0b5f8f;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.icon-style-label[b-5ncuklfq1c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

.icon-style-option.selected .icon-style-label[b-5ncuklfq1c] {
    color: #0b5f8f;
}

/* ===================== Nav Style Picker ===================== */

.nav-style-grid[b-5ncuklfq1c] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.nav-style-swatch[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem;
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 72px;
}

.nav-style-swatch:hover[b-5ncuklfq1c] {
    border-color: #cbd5e1;
}

.nav-style-swatch.selected[b-5ncuklfq1c] {
    border-color: #0b5f8f;
    background: #f0f7ff;
}

.nav-style-colour[b-5ncuklfq1c] {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-style-swatch.selected .nav-style-colour[b-5ncuklfq1c] {
    box-shadow: 0 0 0 2px rgba(11, 95, 143, 0.15);
}

.nav-style-label[b-5ncuklfq1c] {
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.nav-style-swatch.selected .nav-style-label[b-5ncuklfq1c] {
    color: #0b5f8f;
    font-weight: 600;
}

/* ===================== Page Background Picker ===================== */

.bg-swatch-grid[b-5ncuklfq1c] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.bg-swatch[b-5ncuklfq1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem;
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 72px;
}

.bg-swatch:hover[b-5ncuklfq1c] {
    border-color: #cbd5e1;
}

.bg-swatch.selected[b-5ncuklfq1c] {
    border-color: #0b5f8f;
    background: #f0f7ff;
}

.bg-swatch-colour[b-5ncuklfq1c] {
    width: 48px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #d5dce6;
}

.bg-swatch.selected .bg-swatch-colour[b-5ncuklfq1c] {
    border-color: #0b5f8f;
    box-shadow: 0 0 0 2px rgba(11, 95, 143, 0.15);
}

.bg-swatch-label[b-5ncuklfq1c] {
    font-size: 0.6rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.bg-swatch.selected .bg-swatch-label[b-5ncuklfq1c] {
    color: #0b5f8f;
    font-weight: 600;
}

/* ===================== Save Bar ===================== */

.settings-save-bar[b-5ncuklfq1c] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.btn-save-all[b-5ncuklfq1c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 2rem;
    background: #198754;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(25, 135, 84, 0.2);
}

.btn-save-all:hover:not(:disabled)[b-5ncuklfq1c] {
    background: #157347;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
    transform: translateY(-1px);
}

.btn-save-all:active:not(:disabled)[b-5ncuklfq1c] {
    transform: translateY(0);
}

.btn-save-all:disabled[b-5ncuklfq1c] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ===================== Responsive ===================== */

@media (max-width: 768px) {
    .settings-page[b-5ncuklfq1c] {
        padding: 0.75rem 1rem 2rem;
    }

    .form-row-inline[b-5ncuklfq1c] {
        grid-template-columns: 1fr;
    }

    .btn-save-all[b-5ncuklfq1c] {
        width: 100%;
    }

    .settings-header h2[b-5ncuklfq1c] {
        font-size: 1.4rem;
    }
}
/* /Components/Pages/ArchiveData.razor.rz.scp.css */
.archive-container[b-x6w2ldc9ib] {
    padding: 1.5rem;
    max-width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tabs */
.archive-tabs[b-x6w2ldc9ib] {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.tab-btn[b-x6w2ldc9ib] {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover[b-x6w2ldc9ib] {
    color: #163a49;
}

.tab-btn.active[b-x6w2ldc9ib] {
    color: #163a49;
    border-bottom-color: #163a49;
}

/* Search */
.search-bar[b-x6w2ldc9ib] {
    position: relative;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.search-icon[b-x6w2ldc9ib] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-input[b-x6w2ldc9ib] {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 2.5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.search-input:focus[b-x6w2ldc9ib] {
    border-color: #163a49;
    box-shadow: 0 0 0 3px rgba(22, 58, 73, 0.1);
}

.search-clear[b-x6w2ldc9ib] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

.search-clear:hover[b-x6w2ldc9ib] {
    background: #f0f0f0;
}

/* Result info */
.result-info[b-x6w2ldc9ib] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.loading-text[b-x6w2ldc9ib] {
    color: #163a49;
    font-style: italic;
}

/* Results layout - list + detail side by side */
.results-layout[b-x6w2ldc9ib] {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.results-list[b-x6w2ldc9ib] {
    flex: 0 0 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.5rem;
}

/* Result card */
.result-card[b-x6w2ldc9ib] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.result-card:hover[b-x6w2ldc9ib] {
    border-color: #163a49;
    background: #f8fafb;
}

.result-card.selected[b-x6w2ldc9ib] {
    border-color: #163a49;
    background: #edf2f5;
    box-shadow: 0 0 0 1px #163a49;
}

.card-header[b-x6w2ldc9ib] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.card-id[b-x6w2ldc9ib] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #163a49;
}

.card-badge[b-x6w2ldc9ib] {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-weight: 500;
}

.car-badge[b-x6w2ldc9ib] {
    background: #e8f4fd;
    color: #0d6efd;
}

.rpn-badge[b-x6w2ldc9ib] {
    background: #fff3e0;
    color: #e65100;
}

.card-title[b-x6w2ldc9ib] {
    font-size: 0.85rem;
    color: #212529;
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta[b-x6w2ldc9ib] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meta-tag[b-x6w2ldc9ib] {
    font-size: 0.75rem;
    background: #e9ecef;
    color: #495057;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.meta-item[b-x6w2ldc9ib] {
    font-size: 0.75rem;
    color: #6c757d;
}

.meta-item[b-x6w2ldc9ib]::before {
    content: "\00b7";
    margin-right: 0.5rem;
}

.no-results[b-x6w2ldc9ib] {
    text-align: center;
    color: #6c757d;
    padding: 2rem;
    font-size: 0.9rem;
}

/* Detail panel */
.detail-panel[b-x6w2ldc9ib] {
    flex: 1;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1.25rem;
    overflow-y: auto;
}

.detail-title[b-x6w2ldc9ib] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #163a49;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.detail-grid[b-x6w2ldc9ib] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.detail-field[b-x6w2ldc9ib] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-label[b-x6w2ldc9ib] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.detail-value[b-x6w2ldc9ib] {
    font-size: 0.85rem;
    color: #212529;
}

.detail-field-wide[b-x6w2ldc9ib] {
    margin-bottom: 0.75rem;
}

.detail-value-long[b-x6w2ldc9ib] {
    font-size: 0.85rem;
    color: #212529;
    margin: 0.25rem 0 0 0;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8f9fa;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

/* Placeholder */
.detail-placeholder[b-x6w2ldc9ib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #adb5bd;
    gap: 0.75rem;
}

.detail-placeholder p[b-x6w2ldc9ib] {
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 900px) {
    .results-layout[b-x6w2ldc9ib] {
        flex-direction: column;
    }

    .results-list[b-x6w2ldc9ib] {
        flex: 0 0 auto;
        max-height: 40vh;
    }

    .detail-panel[b-x6w2ldc9ib] {
        flex: 1;
    }

    .detail-grid[b-x6w2ldc9ib] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Area.razor.rz.scp.css */
.area-page[b-c7ri4lc5b4] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* Options Button Container - positions dropdown relative to button */
.options-button-container[b-c7ri4lc5b4] {
    position: relative;
    display: inline-block;
}

/* Options Dropdown */
.options-dropdown-backdrop[b-c7ri4lc5b4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.options-dropdown[b-c7ri4lc5b4] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 180px;
}

.dropdown-item[b-c7ri4lc5b4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: #212529;
}

.dropdown-item:hover[b-c7ri4lc5b4] {
    background: #f8f9fa;
}

.dropdown-item svg[b-c7ri4lc5b4] {
    flex-shrink: 0;
}

/* Modal styles */
.modal-backdrop[b-c7ri4lc5b4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-c7ri4lc5b4] {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: visible;
    pointer-events: auto;
}

.modal-dialog.modal-lg[b-c7ri4lc5b4] {
    max-width: 620px;
}

.modal-dialog *[b-c7ri4lc5b4] {
    pointer-events: auto;
}

.modal-content[b-c7ri4lc5b4] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-c7ri4lc5b4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.modal-header h4[b-c7ri4lc5b4],
.modal-header h5[b-c7ri4lc5b4],
.modal-title[b-c7ri4lc5b4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close[b-c7ri4lc5b4] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-c7ri4lc5b4] {
    color: #000;
}

.modal-body[b-c7ri4lc5b4] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body .mb-3[b-c7ri4lc5b4] {
    margin-bottom: 1rem;
}

.modal-body .form-label[b-c7ri4lc5b4] {
    display: block;
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
}

.modal-body .form-control[b-c7ri4lc5b4] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

.modal-body .form-control:focus[b-c7ri4lc5b4] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-body textarea.form-control[b-c7ri4lc5b4] {
    resize: vertical;
    min-height: 80px;
}

.modal-body .form-select[b-c7ri4lc5b4] {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    appearance: none;
    box-sizing: border-box;
}

.modal-body .form-select:focus[b-c7ri4lc5b4] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-footer[b-c7ri4lc5b4] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

.modal-footer .btn-primary[b-c7ri4lc5b4] {
    background-color: #ff6b3c;
    border-color: #ff6b3c;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.modal-footer .btn-primary:hover[b-c7ri4lc5b4] {
    background-color: #e55a2d;
    border-color: #e55a2d;
}

.modal-footer .btn-primary:disabled[b-c7ri4lc5b4] {
    background-color: #ffb099;
    border-color: #ffb099;
    cursor: not-allowed;
}

.modal-footer .btn-secondary[b-c7ri4lc5b4] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    cursor: pointer;
}

.modal-footer .btn-secondary:hover[b-c7ri4lc5b4] {
    background-color: #5c636a;
    border-color: #565e64;
}

.modal-footer .btn-outline-secondary[b-c7ri4lc5b4] {
    color: #6c757d;
    border: 1px solid #6c757d;
    background: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    cursor: pointer;
}

.modal-footer .btn-outline-secondary:hover[b-c7ri4lc5b4] {
    background-color: #6c757d;
    color: white;
}

.json-preview[b-c7ri4lc5b4] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.75rem;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Radio button group styles */
.radio-group[b-c7ri4lc5b4] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.radio-option[b-c7ri4lc5b4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #212529;
}

.radio-option input[type="radio"][b-c7ri4lc5b4] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.radio-option input[type="radio"]:checked[b-c7ri4lc5b4] {
    background-color: #fff;
}

.radio-option input[type="radio"]:checked[b-c7ri4lc5b4]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #0d6efd;
    border-radius: 50%;
}

.radio-option input[type="radio"]:focus[b-c7ri4lc5b4] {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Alert styles */
.alert[b-c7ri4lc5b4] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-danger[b-c7ri4lc5b4] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.alert-success[b-c7ri4lc5b4] {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

/* Area container */
.area-container[b-c7ri4lc5b4] {
    padding: 0;
}

/* Search Panel - Animated */
.search-panel[b-c7ri4lc5b4] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-c7ri4lc5b4] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-c7ri4lc5b4] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-c7ri4lc5b4] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-c7ri4lc5b4] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-c7ri4lc5b4] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-c7ri4lc5b4] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-c7ri4lc5b4] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-c7ri4lc5b4] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-c7ri4lc5b4] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.area-toolbar[b-c7ri4lc5b4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-c7ri4lc5b4] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-c7ri4lc5b4] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-c7ri4lc5b4] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-c7ri4lc5b4],
.toolbar-buttons .btn-outline-primary.active[b-c7ri4lc5b4] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-c7ri4lc5b4] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-c7ri4lc5b4] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-c7ri4lc5b4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-c7ri4lc5b4] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-c7ri4lc5b4] {
    opacity: 0.5;
}

.pagination-info[b-c7ri4lc5b4] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.area-table[b-c7ri4lc5b4] {
    width: 100%;
    border-collapse: collapse;
}

.area-table thead th[b-c7ri4lc5b4] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.area-table tbody tr[b-c7ri4lc5b4] {
    border-bottom: 1px solid #f0f0f0;
}

.area-table tbody tr:hover[b-c7ri4lc5b4] {
    background-color: #f8f9fa;
}

.area-table tbody tr.table-active[b-c7ri4lc5b4] {
    background-color: #e7f1ff;
}

.area-table tbody td[b-c7ri4lc5b4] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}
/* /Components/Pages/AssembledSource.razor.rz.scp.css */
.back-link[b-mm818f8pw2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-mm818f8pw2] {
    transform: translateY(1px);
}

.panel-header-row[b-mm818f8pw2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-mm818f8pw2] {
    flex: 1;
}

.panel-header-actions h2[b-mm818f8pw2] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-mm818f8pw2] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-buttons[b-mm818f8pw2] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Assembled Source container */
.assembled-source-container[b-mm818f8pw2] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-mm818f8pw2] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-mm818f8pw2] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-mm818f8pw2] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-mm818f8pw2] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-mm818f8pw2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-mm818f8pw2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-mm818f8pw2] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-mm818f8pw2] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-mm818f8pw2] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-mm818f8pw2] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.assembled-source-toolbar[b-mm818f8pw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-mm818f8pw2] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-mm818f8pw2] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-mm818f8pw2] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-mm818f8pw2],
.toolbar-buttons .btn-outline-primary.active[b-mm818f8pw2] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-mm818f8pw2] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-mm818f8pw2] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-mm818f8pw2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-mm818f8pw2] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-mm818f8pw2] {
    opacity: 0.5;
}

.pagination-info[b-mm818f8pw2] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.assembled-source-table[b-mm818f8pw2] {
    width: 100%;
    border-collapse: collapse;
}

.assembled-source-table thead th[b-mm818f8pw2] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.assembled-source-table tbody tr[b-mm818f8pw2] {
    border-bottom: 1px solid #f0f0f0;
}

.assembled-source-table tbody tr:hover[b-mm818f8pw2] {
    background-color: #f8f9fa;
}

.assembled-source-table tbody tr.table-active[b-mm818f8pw2] {
    background-color: #e7f1ff;
}

.assembled-source-table tbody td[b-mm818f8pw2] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

/* Modal styles */
.modal-backdrop[b-mm818f8pw2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-mm818f8pw2] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 450px;
    max-width: 90%;
}

.modal-header[b-mm818f8pw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h4[b-mm818f8pw2] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
}

.btn-close[b-mm818f8pw2] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-mm818f8pw2] {
    color: #000;
}

.modal-body[b-mm818f8pw2] {
    padding: 1.5rem;
}

.modal-body .form-label[b-mm818f8pw2] {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
}

.modal-body .form-control[b-mm818f8pw2] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    font-size: 0.95rem;
}

.modal-body .form-control:focus[b-mm818f8pw2] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-footer[b-mm818f8pw2] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

.modal-footer .btn-success[b-mm818f8pw2] {
    background-color: #198754;
    border-color: #198754;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
}

.modal-footer .btn-success:hover[b-mm818f8pw2] {
    background-color: #157347;
    border-color: #146c43;
}

.modal-footer .btn-outline-danger[b-mm818f8pw2] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
}

.modal-footer .btn-outline-danger:hover[b-mm818f8pw2] {
    background-color: #ff6b3c;
    color: white;
}
/* /Components/Pages/AuditOverview.razor.rz.scp.css */
/* Audit Header */
.audit-header[b-x5n9wo69se] {
    padding: 1.5rem;
    background: #163a49;
    color: white;
}

.audit-header h2[b-x5n9wo69se] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.audit-header .muted[b-x5n9wo69se] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Main Container - Split Layout */
.audit-container[b-x5n9wo69se] {
    display: flex;
    height: calc(100vh - 120px);
    overflow: hidden;
}

/* Left Panel */
.audit-left-panel[b-x5n9wo69se] {
    width: 520px;
    min-width: 400px;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    background: white;
}

/* Toggle Buttons */
.panel-toggle-buttons[b-x5n9wo69se] {
    display: flex;
    padding: 1rem;
    gap: 0;
}

.btn-toggle[b-x5n9wo69se] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    background: white;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-toggle:first-child[b-x5n9wo69se] {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.btn-toggle:last-child[b-x5n9wo69se] {
    border-radius: 0 4px 4px 0;
}

.btn-toggle.active[b-x5n9wo69se] {
    background: #163a49;
    color: white;
    border-color: #163a49;
}

.btn-toggle:hover:not(.active)[b-x5n9wo69se] {
    background: #f8f9fa;
}

/* Search Box */
.search-box-container[b-x5n9wo69se] {
    display: flex;
    padding: 0 1rem 1rem 1rem;
    gap: 0.5rem;
}

.search-input[b-x5n9wo69se] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.875rem;
}

.search-input:focus[b-x5n9wo69se] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.btn-refresh[b-x5n9wo69se] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ff6b3c;
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-refresh:hover[b-x5n9wo69se] {
    background: #fff5f2;
}

/* Log Entries List */
.log-entries-list[b-x5n9wo69se] {
    flex: 1;
    overflow-y: auto;
    border-top: 1px solid #dee2e6;
}

.log-entry[b-x5n9wo69se] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.log-entry:hover[b-x5n9wo69se] {
    background-color: #f8f9fa;
}

.log-entry.selected[b-x5n9wo69se] {
    background-color: #4a9fc7;
    color: white;
}

.log-entry.selected .log-entry-description[b-x5n9wo69se],
.log-entry.selected .log-entry-date[b-x5n9wo69se] {
    color: rgba(255, 255, 255, 0.85);
}

.log-entry-icon[b-x5n9wo69se] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.log-entry-icon.edit[b-x5n9wo69se] {
    border: 2px solid #ff6b3c;
    color: #ff6b3c;
}

.log-entry-icon.create[b-x5n9wo69se] {
    background: #ff6b3c;
    color: white;
}

.log-entry.selected .log-entry-icon.edit[b-x5n9wo69se] {
    border-color: white;
    color: white;
}

.log-entry.selected .log-entry-icon.create[b-x5n9wo69se] {
    background: white;
    color: #ff6b3c;
}

.log-entry-content[b-x5n9wo69se] {
    flex: 1;
    min-width: 0;
}

.log-entry-title[b-x5n9wo69se] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #ff6b3c;
    margin-bottom: 0.25rem;
}

.log-entry.selected .log-entry-title[b-x5n9wo69se] {
    color: white;
}

.log-entry-description[b-x5n9wo69se] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.log-entry-date[b-x5n9wo69se] {
    font-size: 0.75rem;
    color: #6c757d;
}

.log-entry-arrow[b-x5n9wo69se] {
    color: #6c757d;
    margin-left: 0.5rem;
}

.log-entry.selected .log-entry-arrow[b-x5n9wo69se] {
    color: white;
}

/* Right Panel */
.audit-right-panel[b-x5n9wo69se] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
    padding: 1.5rem;
}

.no-selection[b-x5n9wo69se] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
}

/* Detail Header */
.detail-header[b-x5n9wo69se] {
    margin-bottom: 1rem;
}

.detail-header h3[b-x5n9wo69se] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #163a49;
    font-weight: 600;
}

.detail-reference[b-x5n9wo69se] {
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.detail-info[b-x5n9wo69se] {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Search Panel - Animated */
.search-panel[b-x5n9wo69se] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-x5n9wo69se] {
    max-height: 150px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-x5n9wo69se] {
    padding: 1rem;
}

.search-row[b-x5n9wo69se] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-field[b-x5n9wo69se] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
}

.search-label[b-x5n9wo69se] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

.search-field .form-control[b-x5n9wo69se] {
    width: 140px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-x5n9wo69se] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-x5n9wo69se] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    align-items: flex-end;
}

.search-actions .btn[b-x5n9wo69se] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.search-actions .btn-outline-primary[b-x5n9wo69se] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.search-actions .btn-outline-primary:hover[b-x5n9wo69se] {
    color: white;
    background-color: #ff6b3c;
}

.search-actions .btn-outline-secondary[b-x5n9wo69se] {
    color: #6c757d;
    border-color: #6c757d;
    background: white;
}

.search-actions .btn-outline-secondary:hover[b-x5n9wo69se] {
    color: white;
    background-color: #6c757d;
}

/* Detail Actions */
.detail-actions[b-x5n9wo69se] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.detail-actions .btn-outline-primary[b-x5n9wo69se] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.detail-actions .btn-outline-primary:hover[b-x5n9wo69se],
.detail-actions .btn-outline-primary.active[b-x5n9wo69se] {
    color: white;
    background-color: #ff6b3c;
}

.detail-actions .btn-primary[b-x5n9wo69se] {
    color: white;
    background-color: #ff6b3c;
    border-color: #ff6b3c;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.detail-actions .btn-primary:hover[b-x5n9wo69se] {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

/* Detail Pagination */
.detail-pagination[b-x5n9wo69se] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.detail-pagination .btn-link[b-x5n9wo69se] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.detail-pagination .btn-link:hover:not(:disabled)[b-x5n9wo69se] {
    color: #212529;
}

.detail-pagination .btn-link:disabled[b-x5n9wo69se] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-x5n9wo69se] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Attributes Table */
.attributes-table-container[b-x5n9wo69se] {
    flex: 1;
    overflow: auto;
}

.attributes-table[b-x5n9wo69se] {
    width: 100%;
    border-collapse: collapse;
}

.attributes-table thead th[b-x5n9wo69se] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: white;
}

.column-header[b-x5n9wo69se] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-btn[b-x5n9wo69se] {
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-btn:hover[b-x5n9wo69se] {
    color: #212529;
}

.attributes-table tbody tr[b-x5n9wo69se] {
    border-bottom: 1px solid #f0f0f0;
}

.attributes-table tbody tr:hover[b-x5n9wo69se] {
    background-color: #f8f9fa;
}

.attributes-table tbody td[b-x5n9wo69se] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.attributes-table tbody td.new-value[b-x5n9wo69se] {
    color: #0d6efd;
}

/* Responsive */
@media (max-width: 992px) {
    .audit-container[b-x5n9wo69se] {
        flex-direction: column;
        height: auto;
    }

    .audit-left-panel[b-x5n9wo69se] {
        width: 100%;
        min-width: 100%;
        max-height: 400px;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .audit-right-panel[b-x5n9wo69se] {
        min-height: 400px;
    }

    .search-row[b-x5n9wo69se] {
        flex-direction: column;
    }

    .search-field .form-control[b-x5n9wo69se] {
        width: 100%;
    }

    .search-actions[b-x5n9wo69se] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Pages/Configuration.razor.rz.scp.css */
/* Configuration page */
.configuration-page[b-19v1j2rwv4] {
    padding: 2rem 1.5rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.configuration-body[b-19v1j2rwv4] {
    margin-top: 1.5rem;
}

/* Card rows */
.card-row[b-19v1j2rwv4] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-row > *[b-19v1j2rwv4] {
    flex: 1 1 0;
    min-width: 0;
}

.card-placeholder[b-19v1j2rwv4] {
    visibility: hidden;
}

/* Card */
.card[b-19v1j2rwv4] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid #e9ecef;
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.card:hover[b-19v1j2rwv4] {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 8px 24px var(--accent-shadow, rgba(37, 99, 235, 0.15));
    transform: translateY(-4px);
}

.card-top[b-19v1j2rwv4] {
    background-color: var(--accent-bg, #cfe9fb);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    position: relative;
}

.card-top[b-19v1j2rwv4]::after {
    content: "";
    position: absolute;
    left: -20%;
    top: -10%;
    width: 140%;
    height: 140%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
    transform: rotate(-6deg);
    pointer-events: none;
}

.card-icon svg[b-19v1j2rwv4] {
    width: 48px;
    height: 48px;
    color: var(--accent, #0b5f8f);
}

.card-body[b-19v1j2rwv4] {
    padding: 1rem;
    background: white;
    flex: 1;
}

.card-meta[b-19v1j2rwv4] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa8b6;
    margin-bottom: 0.35rem;
}

.card-title[b-19v1j2rwv4] {
    font-size: 1.25rem;
    color: var(--accent, #0b5f8f);
    font-weight: 700;
}

.card-link[b-19v1j2rwv4] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 899px) {
    .card-row[b-19v1j2rwv4] {
        flex-wrap: wrap;
    }

    .card-row > *[b-19v1j2rwv4] {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .card-placeholder[b-19v1j2rwv4] {
        display: none;
    }
}

@media (max-width: 599px) {
    .card-row > *[b-19v1j2rwv4] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/ConfigureCatalogues.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-b4w6ggteyg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-b4w6ggteyg] {
    transform: translateY(1px);
}

.panel-header-row[b-b4w6ggteyg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-b4w6ggteyg] {
    flex: 1;
}

.panel-header-actions h2[b-b4w6ggteyg] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-b4w6ggteyg] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-buttons[b-b4w6ggteyg] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Catalogue container */
.catalogue-container[b-b4w6ggteyg] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    background: #f8f9fa;
    margin: 0 1.5rem;
    border-radius: 4px;
}

/* Search Panel - Animated */
.search-panel[b-b4w6ggteyg] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: white;
    border-radius: 4px;
}

.search-panel.open[b-b4w6ggteyg] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
    padding: 1rem;
}

.search-panel-content[b-b4w6ggteyg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-b4w6ggteyg] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-b4w6ggteyg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-b4w6ggteyg] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-b4w6ggteyg],
.search-field .form-select[b-b4w6ggteyg] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-actions[b-b4w6ggteyg] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-b4w6ggteyg] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.catalogue-toolbar[b-b4w6ggteyg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem 0;
}

.toolbar-buttons[b-b4w6ggteyg] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-buttons .btn[b-b4w6ggteyg] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-b4w6ggteyg] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-b4w6ggteyg],
.toolbar-buttons .btn-outline-primary.active[b-b4w6ggteyg] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-danger[b-b4w6ggteyg] {
    color: white;
    border-color: #ff6b3c;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-danger:hover[b-b4w6ggteyg] {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

.toolbar-buttons .btn-danger:disabled[b-b4w6ggteyg] {
    opacity: 0.65;
}

.toolbar-buttons .btn-outline-warning[b-b4w6ggteyg] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-b4w6ggteyg] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-b4w6ggteyg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-b4w6ggteyg] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-b4w6ggteyg] {
    opacity: 0.5;
}

.pagination-info[b-b4w6ggteyg] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.catalogue-table[b-b4w6ggteyg] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.catalogue-table thead th[b-b4w6ggteyg] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.catalogue-table thead th.sortable[b-b4w6ggteyg] {
    cursor: pointer;
    user-select: none;
}

.catalogue-table thead th.sortable:hover[b-b4w6ggteyg] {
    background-color: #f8f9fa;
}

.sort-indicator[b-b4w6ggteyg] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
}

.catalogue-table tbody tr[b-b4w6ggteyg] {
    border-bottom: 1px solid #f0f0f0;
}

.catalogue-table tbody tr:hover[b-b4w6ggteyg] {
    background-color: #f8f9fa;
}

.catalogue-table tbody tr.table-active[b-b4w6ggteyg] {
    background-color: #e7f1ff;
}

.catalogue-table tbody td[b-b4w6ggteyg] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.catalogue-table tbody td a[b-b4w6ggteyg] {
    color: #0d6efd;
    text-decoration: none;
}

.catalogue-table tbody td a:hover[b-b4w6ggteyg] {
    text-decoration: underline;
}

/* Status message */
.status-message[b-b4w6ggteyg] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-message.success[b-b4w6ggteyg] {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.status-message.error[b-b4w6ggteyg] {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.btn-close-status[b-b4w6ggteyg] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.btn-close-status:hover[b-b4w6ggteyg] {
    opacity: 1;
}

/* Loading indicator */
.loading-indicator[b-b4w6ggteyg] {
    padding: 2rem;
    text-align: center;
    color: #7c8b95;
    font-size: 0.9rem;
}

/* Radio button styles for modal */
.radio-group[b-b4w6ggteyg] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.radio-option[b-b4w6ggteyg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
}

.radio-option:hover .radio-circle[b-b4w6ggteyg] {
    border-color: #ff6b3c;
}

.radio-circle[b-b4w6ggteyg] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
    flex-shrink: 0;
}

.radio-circle.checked[b-b4w6ggteyg] {
    border-color: #ff6b3c;
    background: #ff6b3c;
}

.radio-circle.checked[b-b4w6ggteyg]::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Modal styles */
.modal-backdrop[b-b4w6ggteyg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-dialog[b-b4w6ggteyg] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header[b-b4w6ggteyg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h4[b-b4w6ggteyg] {
    margin: 0;
    font-size: 1.25rem;
    color: #212529;
}

.modal-header .btn-close[b-b4w6ggteyg] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
    padding: 0;
}

.modal-header .btn-close:hover[b-b4w6ggteyg] {
    color: #212529;
}

.modal-body[b-b4w6ggteyg] {
    padding: 1.5rem;
}

.modal-body .form-group[b-b4w6ggteyg] {
    margin-bottom: 1rem;
}

.modal-body .form-label[b-b4w6ggteyg] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.modal-body .form-control[b-b4w6ggteyg] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.modal-body .form-control:focus[b-b4w6ggteyg] {
    outline: none;
    border-color: #ff6b3c;
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.1);
}

.item-id-display[b-b4w6ggteyg] {
    font-size: 0.875rem;
    color: #6c757d;
    padding: 0.5rem 0;
}

.modal-footer[b-b4w6ggteyg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

.modal-footer .btn-save[b-b4w6ggteyg] {
    background-color: #ff6b3c;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-footer .btn-save:hover[b-b4w6ggteyg] {
    background-color: #e55a2b;
}

.modal-footer .btn-save:disabled[b-b4w6ggteyg] {
    opacity: 0.65;
    cursor: not-allowed;
}

.modal-footer .btn-cancel[b-b4w6ggteyg] {
    background: white;
    color: #6c757d;
    border: 1px solid #dee2e6;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

.modal-footer .btn-cancel:hover[b-b4w6ggteyg] {
    background-color: #f8f9fa;
}

/* Import progress styles */
.import-progress[b-b4w6ggteyg] {
    text-align: center;
}

.progress-spinner[b-b4w6ggteyg] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.progress-status[b-b4w6ggteyg] {
    text-align: center;
}

.progress-message[b-b4w6ggteyg] {
    font-size: 1rem;
    color: #212529;
    margin-bottom: 1rem;
}

.progress-hint[b-b4w6ggteyg] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 1rem;
    margin-bottom: 0;
}

.progress-current[b-b4w6ggteyg] {
    font-size: 0.875rem;
    color: #495057;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Progress bar */
.progress-bar-container[b-b4w6ggteyg] {
    margin: 1rem 0;
}

.progress-bar-track[b-b4w6ggteyg] {
    height: 20px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill[b-b4w6ggteyg] {
    height: 100%;
    background: linear-gradient(90deg, #ff6b3c 0%, #ff8c5a 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
    min-width: 0;
}

.progress-bar-text[b-b4w6ggteyg] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
}

.progress-bar-text span:first-child[b-b4w6ggteyg] {
    font-weight: 500;
}

.progress-bar-text span:last-child[b-b4w6ggteyg] {
    color: #ff6b3c;
    font-weight: 600;
}

.progress-details[b-b4w6ggteyg] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 0.5rem;
}

.progress-stat[b-b4w6ggteyg] {
    font-size: 0.875rem;
    color: #495057;
}
/* /Components/Pages/ConfigureComponentDefinitions.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-9jrsjjgf4m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-9jrsjjgf4m] {
    transform: translateY(1px);
}

.panel-header-row[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-9jrsjjgf4m] {
    flex: 1;
}

.panel-header-actions h2[b-9jrsjjgf4m] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.panel-header-buttons[b-9jrsjjgf4m] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Component Manager container */
.component-manager-container[b-9jrsjjgf4m] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    background: #f8f9fa;
    margin: 0 1.5rem;
    border-radius: 4px;
}

/* Main Tabs (Components / Images) */
.main-tabs[b-9jrsjjgf4m] {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.main-tab[b-9jrsjjgf4m] {
    padding: 0.5rem 2rem;
    border: 1px solid #0d6efd;
    background: white;
    color: #0d6efd;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.main-tab:first-child[b-9jrsjjgf4m] {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.main-tab:last-child[b-9jrsjjgf4m] {
    border-radius: 0 4px 4px 0;
}

.main-tab:hover[b-9jrsjjgf4m] {
    background: #e7f1ff;
}

.main-tab.active[b-9jrsjjgf4m] {
    background: #0d6efd;
    color: white;
}

/* Components View */
.components-view[b-9jrsjjgf4m] {
    background: white;
    border-radius: 4px;
    padding: 1rem;
}

/* Search Panel - Animated */
.search-panel[b-9jrsjjgf4m] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-9jrsjjgf4m] {
    max-height: 300px;
    opacity: 1;
    margin-bottom: 1rem;
    padding: 1rem;
}

.search-panel-content[b-9jrsjjgf4m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-fields[b-9jrsjjgf4m] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-field[b-9jrsjjgf4m] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-9jrsjjgf4m] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-9jrsjjgf4m],
.search-field .form-select[b-9jrsjjgf4m] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-actions[b-9jrsjjgf4m] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-9jrsjjgf4m] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.component-toolbar[b-9jrsjjgf4m],
.images-toolbar[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.toolbar-buttons[b-9jrsjjgf4m] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-buttons .btn[b-9jrsjjgf4m] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-9jrsjjgf4m] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-9jrsjjgf4m],
.toolbar-buttons .btn-outline-primary.active[b-9jrsjjgf4m] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-danger[b-9jrsjjgf4m] {
    color: white;
    border-color: #8b3a3a;
    background-color: #8b3a3a;
}

.toolbar-buttons .btn-danger:hover[b-9jrsjjgf4m] {
    background-color: #6d2d2d;
    border-color: #6d2d2d;
}

.toolbar-buttons .btn-danger:disabled[b-9jrsjjgf4m] {
    opacity: 0.65;
}

.toolbar-buttons .btn-outline-warning[b-9jrsjjgf4m] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-9jrsjjgf4m] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-9jrsjjgf4m] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-9jrsjjgf4m] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-9jrsjjgf4m] {
    opacity: 0.5;
}

.pagination-info[b-9jrsjjgf4m] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Component Table */
.component-table[b-9jrsjjgf4m] {
    width: 100%;
    border-collapse: collapse;
}

.component-table thead th[b-9jrsjjgf4m] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

/* Sortable header styles */
.sortable-header[b-9jrsjjgf4m] {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.sortable-header:hover[b-9jrsjjgf4m] {
    color: #0d6efd;
}

.sort-indicator[b-9jrsjjgf4m] {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    color: #0d6efd;
}

.component-table tbody tr[b-9jrsjjgf4m] {
    border-bottom: 1px solid #f0f0f0;
}

.component-table tbody tr:hover[b-9jrsjjgf4m] {
    background-color: #f8f9fa;
}

.component-table tbody tr.table-active[b-9jrsjjgf4m] {
    background-color: #e7f1ff;
}

.component-table tbody td[b-9jrsjjgf4m] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.component-table tbody td a[b-9jrsjjgf4m] {
    color: #0d6efd;
    text-decoration: none;
}

.component-table tbody td a:hover[b-9jrsjjgf4m] {
    text-decoration: underline;
}

/* Images View */
.images-view[b-9jrsjjgf4m] {
    background: white;
    border-radius: 4px;
    padding: 1rem;
}

.images-label[b-9jrsjjgf4m] {
    margin-bottom: 1rem;
}

.label-badge[b-9jrsjjgf4m] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    color: #ff6b3c;
    font-size: 0.875rem;
    background: white;
}

/* Image Gallery Grid */
.image-gallery[b-9jrsjjgf4m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.image-card[b-9jrsjjgf4m] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.image-card:hover[b-9jrsjjgf4m] {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-card.selected[b-9jrsjjgf4m] {
    border-color: #0d6efd;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.image-container[b-9jrsjjgf4m] {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    overflow: hidden;
}

.image-container img[b-9jrsjjgf4m] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-info[b-9jrsjjgf4m] {
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
}

.image-name[b-9jrsjjgf4m],
.image-uin[b-9jrsjjgf4m] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.image-name span[b-9jrsjjgf4m],
.image-uin span[b-9jrsjjgf4m] {
    color: #ff6b3c;
}

.no-images[b-9jrsjjgf4m] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-gallery[b-9jrsjjgf4m] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .image-container[b-9jrsjjgf4m] {
        height: 140px;
    }

    .toolbar-buttons[b-9jrsjjgf4m] {
        flex-wrap: wrap;
    }
}

/* Clickable image styles */
.clickable-image[b-9jrsjjgf4m] {
    cursor: zoom-in !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.clickable-image:hover[b-9jrsjjgf4m] {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Lightbox Modal Styles */
.lightbox-backdrop[b-9jrsjjgf4m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: lightbox-fade-in-b-9jrsjjgf4m 0.2s ease;
}

@keyframes lightbox-fade-in-b-9jrsjjgf4m {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lightbox-container[b-9jrsjjgf4m] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image[b-9jrsjjgf4m] {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: lightbox-zoom-in-b-9jrsjjgf4m 0.3s ease;
}

@keyframes lightbox-zoom-in-b-9jrsjjgf4m {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close[b-9jrsjjgf4m] {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover[b-9jrsjjgf4m] {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.lightbox-caption[b-9jrsjjgf4m] {
    margin-top: 16px;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    max-width: 90vw;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.lightbox-uin[b-9jrsjjgf4m] {
    font-size: 0.875rem;
    color: #ff6b3c;
    margin-top: 4px;
}

/* Import Progress Modal Styles */
.import-progress-container[b-9jrsjjgf4m] {
    padding: 1rem 0;
}

.progress-bar-wrapper[b-9jrsjjgf4m] {
    width: 100%;
    height: 24px;
    background: #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill[b-9jrsjjgf4m] {
    height: 100%;
    background: linear-gradient(90deg, #ff6b3c, #ff8f66);
    border-radius: 12px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-bar-fill[b-9jrsjjgf4m]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: progress-shimmer-b-9jrsjjgf4m 2s infinite;
}

@keyframes progress-shimmer-b-9jrsjjgf4m {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-info[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.progress-text[b-9jrsjjgf4m] {
    color: #495057;
    font-weight: 500;
}

.progress-percent[b-9jrsjjgf4m] {
    color: #ff6b3c;
    font-weight: 600;
    font-size: 1.1rem;
}

.progress-current-item[b-9jrsjjgf4m] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-eta[b-9jrsjjgf4m] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #495057;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
    text-align: center;
}

/* Modal styles for import progress */
.modal-backdrop[b-9jrsjjgf4m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-9jrsjjgf4m] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: modal-slide-in-b-9jrsjjgf4m 0.3s ease;
}

@keyframes modal-slide-in-b-9jrsjjgf4m {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h4[b-9jrsjjgf4m] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
}

.modal-body[b-9jrsjjgf4m] {
    padding: 1.5rem;
}

.modal-footer[b-9jrsjjgf4m] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

.btn-close[b-9jrsjjgf4m] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.btn-close:hover[b-9jrsjjgf4m] {
    color: #000;
}

.btn-save[b-9jrsjjgf4m] {
    background: #ff6b3c;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-save:hover[b-9jrsjjgf4m] {
    background: #e55a2b;
}

/* Status message styles */
.status-message[b-9jrsjjgf4m] {
    margin: 0 1.5rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-message.success[b-9jrsjjgf4m] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error[b-9jrsjjgf4m] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.btn-close-status[b-9jrsjjgf4m] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.btn-close-status:hover[b-9jrsjjgf4m] {
    opacity: 1;
}

/* Import warnings and errors */
.import-warnings[b-9jrsjjgf4m],
.import-errors[b-9jrsjjgf4m] {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 4px;
}

.import-warnings[b-9jrsjjgf4m] {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

.import-errors[b-9jrsjjgf4m] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.import-warnings ul[b-9jrsjjgf4m],
.import-errors ul[b-9jrsjjgf4m] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
}

.error-text[b-9jrsjjgf4m] {
    color: #721c24;
}

/* Options Button Container - positions dropdown relative to button */
.options-button-container[b-9jrsjjgf4m] {
    position: relative;
    display: inline-block;
}

/* Options dropdown */
.options-dropdown-backdrop[b-9jrsjjgf4m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.options-dropdown[b-9jrsjjgf4m] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 220px;
}

.dropdown-item[b-9jrsjjgf4m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: #212529;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.dropdown-item:last-child[b-9jrsjjgf4m] {
    border-bottom: none;
}

.dropdown-item:hover[b-9jrsjjgf4m] {
    background: #f8f9fa;
}

.dropdown-item svg[b-9jrsjjgf4m] {
    flex-shrink: 0;
}

/* Edit/New Component Modal - Large */
.modal-dialog.modal-lg[b-9jrsjjgf4m] {
    max-width: 650px;
    width: 95%;
}

/* Modal Tabs */
.modal-tabs[b-9jrsjjgf4m] {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

.modal-tab[b-9jrsjjgf4m] {
    padding: 0.5rem 2rem;
    border: 1px solid #0d6efd;
    background: white;
    color: #0d6efd;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-tab:first-child[b-9jrsjjgf4m] {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.modal-tab:last-child[b-9jrsjjgf4m] {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.modal-tab:not(:first-child):not(:last-child)[b-9jrsjjgf4m] {
    border-left: none;
    border-right: none;
}

.modal-tab:hover[b-9jrsjjgf4m] {
    background: #e7f1ff;
}

.modal-tab.active[b-9jrsjjgf4m] {
    background: #0d6efd;
    color: white;
}

/* Modal Form */
.modal-form[b-9jrsjjgf4m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-form .form-group[b-9jrsjjgf4m] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.modal-form .form-label[b-9jrsjjgf4m] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    margin: 0;
}

.modal-form .form-control[b-9jrsjjgf4m] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.modal-form .form-control:focus[b-9jrsjjgf4m] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-form .form-select[b-9jrsjjgf4m] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
}

/* Radio Group */
.radio-group[b-9jrsjjgf4m] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.radio-label[b-9jrsjjgf4m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #212529;
}

.radio-label input[type="radio"][b-9jrsjjgf4m] {
    width: 18px;
    height: 18px;
    accent-color: #0d6efd;
    cursor: pointer;
}

/* File Upload Row */
.file-upload-row[b-9jrsjjgf4m] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.file-upload-row .file-input-display[b-9jrsjjgf4m] {
    flex: 1;
    background-color: #f8f9fa;
}

.btn-browse[b-9jrsjjgf4m] {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
}

.btn-browse:hover[b-9jrsjjgf4m] {
    background-color: #138496;
}

.btn-delete-image[b-9jrsjjgf4m] {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-image:hover[b-9jrsjjgf4m] {
    background-color: #0b5ed7;
}

.btn-delete-image:disabled[b-9jrsjjgf4m] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Scrap Reasons Section */
.scrap-reasons-section[b-9jrsjjgf4m] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.scrap-reasons-toolbar[b-9jrsjjgf4m] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0;
}

.scrap-reasons-toolbar .btn-sm[b-9jrsjjgf4m] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.scrap-reasons-toolbar .pagination-info[b-9jrsjjgf4m] {
    margin-left: auto;
    color: #6c757d;
}

.scrap-reasons-table[b-9jrsjjgf4m] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.scrap-reasons-table th[b-9jrsjjgf4m] {
    font-weight: 600;
    color: #495057;
    padding: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.scrap-reasons-table td[b-9jrsjjgf4m] {
    padding: 0.5rem;
    color: #212529;
}

/* Linked Suppliers Section */
.linked-suppliers-section[b-9jrsjjgf4m] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.linked-suppliers-toolbar[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.linked-suppliers-toolbar .toolbar-buttons[b-9jrsjjgf4m] {
    display: flex;
    gap: 0.5rem;
}

.linked-suppliers-toolbar .pagination-info[b-9jrsjjgf4m] {
    color: #6c757d;
    font-size: 0.8rem;
}

.linked-suppliers-table[b-9jrsjjgf4m] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.linked-suppliers-table th[b-9jrsjjgf4m] {
    font-weight: 600;
    color: #495057;
    padding: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.linked-suppliers-table td[b-9jrsjjgf4m] {
    padding: 0.5rem;
    color: #212529;
}

.linked-suppliers-table tr.table-active[b-9jrsjjgf4m] {
    background-color: #e7f1ff;
}

.linked-suppliers-table tr:hover[b-9jrsjjgf4m] {
    background-color: #f8f9fa;
}

/* Compact search panel for nested use in modal */
.search-panel-content.compact[b-9jrsjjgf4m] {
    padding: 0.5rem 0;
}

.search-panel-content.compact .search-fields[b-9jrsjjgf4m] {
    gap: 1rem;
}

.search-panel-content.compact .search-field .form-control[b-9jrsjjgf4m] {
    width: 120px;
}

/* Select Supplier Modal */
.select-supplier-modal[b-9jrsjjgf4m] {
    max-width: 900px;
    width: 95%;
}

.select-supplier-backdrop[b-9jrsjjgf4m] {
    z-index: 1100; /* Higher than the edit modal */
}

.select-supplier-toolbar[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.suppliers-select-table[b-9jrsjjgf4m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.suppliers-select-table thead th[b-9jrsjjgf4m] {
    font-weight: 600;
    color: #495057;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.suppliers-select-table tbody tr[b-9jrsjjgf4m] {
    border-bottom: 1px solid #f0f0f0;
}

.suppliers-select-table tbody tr:hover[b-9jrsjjgf4m] {
    background-color: #f8f9fa;
}

.suppliers-select-table tbody tr.table-active[b-9jrsjjgf4m] {
    background-color: #e7f1ff;
}

.suppliers-select-table tbody td[b-9jrsjjgf4m] {
    padding: 0.5rem;
    color: #212529;
    vertical-align: middle;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading container */
.loading-container[b-9jrsjjgf4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #6c757d;
}

/* Modal Footer Buttons */
.btn-cancel[b-9jrsjjgf4m] {
    background: white;
    color: #ff6b3c;
    border: 1px solid #ff6b3c;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-cancel:hover[b-9jrsjjgf4m] {
    background: #fff5f2;
}

/* Spinner in buttons */
.spinner-border-sm[b-9jrsjjgf4m] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.me-1[b-9jrsjjgf4m] {
    margin-right: 0.25rem;
}

/* Delete All armed state */
.btn-delete-armed[b-9jrsjjgf4m] {
    background: #dc2626 !important;
    color: white !important;
    border-color: #dc2626 !important;
    animation: pulse-red-b-9jrsjjgf4m 0.6s ease-in-out infinite alternate;
}

@keyframes pulse-red-b-9jrsjjgf4m {
    from {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    to {
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
    }
}

/* View Detail button */
.btn-view-detail[b-9jrsjjgf4m] {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-view-detail:hover[b-9jrsjjgf4m] {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Detail Modal Overlay */
.modal-overlay[b-9jrsjjgf4m] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

/* Detail Modal */
.detail-modal-dialog[b-9jrsjjgf4m] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 580px;
    max-height: 85vh;
    overflow-y: auto;
    animation: detailModalIn-b-9jrsjjgf4m 0.2s ease-out;
}

@keyframes detailModalIn-b-9jrsjjgf4m {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.detail-modal-header[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 12px 12px 0 0;
}

.detail-modal-header-content[b-9jrsjjgf4m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-modal-header h5[b-9jrsjjgf4m] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.detail-modal-close[b-9jrsjjgf4m] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
}

.detail-modal-close:hover[b-9jrsjjgf4m] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.detail-modal-body[b-9jrsjjgf4m] {
    padding: 1.25rem;
}

/* Component image */
.detail-image-container[b-9jrsjjgf4m] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.detail-image[b-9jrsjjgf4m] {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 4px;
}

.detail-title[b-9jrsjjgf4m] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #163a49;
    margin-bottom: 1rem;
}

/* Detail grid */
.detail-grid[b-9jrsjjgf4m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.detail-field[b-9jrsjjgf4m] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.detail-label[b-9jrsjjgf4m] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    font-weight: 600;
}

.detail-value[b-9jrsjjgf4m] {
    font-size: 0.875rem;
    color: #1e293b;
}

.detail-value-mono[b-9jrsjjgf4m] {
    font-family: monospace;
    font-weight: 600;
    color: #475569;
}

.detail-badge[b-9jrsjjgf4m] {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.detail-badge-yes[b-9jrsjjgf4m] {
    background: #dcfce7;
    color: #166534;
}

.detail-badge-no[b-9jrsjjgf4m] {
    background: #f1f5f9;
    color: #64748b;
}

/* Linked Suppliers */
.detail-section[b-9jrsjjgf4m] {
    margin-bottom: 1rem;
}

.detail-suppliers[b-9jrsjjgf4m] {
    margin-top: 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.detail-supplier-row[b-9jrsjjgf4m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
}

.detail-supplier-row:last-child[b-9jrsjjgf4m] {
    border-bottom: none;
}

.detail-supplier-name[b-9jrsjjgf4m] {
    color: #1e293b;
    font-weight: 500;
}

.detail-supplier-code[b-9jrsjjgf4m] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: monospace;
}
/* /Components/Pages/CreateNcr.razor.rz.scp.css */
/* Create NCR Container */
.create-ncr-container[b-cjwkovue71] {
    padding: 1.5rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Content Layout */
.create-ncr-content[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
    flex: 1;
}

/* Form Section */
.form-section[b-cjwkovue71] {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section-title[b-cjwkovue71] {
    font-size: 1rem;
    font-weight: 600;
    color: #003366;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

/* Form Groups */
.form-group[b-cjwkovue71] {
    margin-bottom: 1.25rem;
}

.form-group.half-width[b-cjwkovue71] {
    max-width: 50%;
}

.form-row[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-label[b-cjwkovue71] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #003366;
    margin-bottom: 0.5rem;
}

.form-label.required[b-cjwkovue71]::after {
    content: "";
    color: #c0392b;
}

.form-label.product-label[b-cjwkovue71] {
    color: #003366;
}

.form-control[b-cjwkovue71] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-cjwkovue71] {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
}

.textarea-large[b-cjwkovue71] {
    min-height: 80px;
    resize: vertical;
}

select.form-control[b-cjwkovue71] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    appearance: none;
}

.form-select[b-cjwkovue71] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    cursor: pointer;
}

.form-select:focus[b-cjwkovue71] {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
}

/* Radio Group */
.radio-group[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.radio-option[b-cjwkovue71] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover[b-cjwkovue71] {
    border-color: #003366;
}

.radio-option.selected[b-cjwkovue71] {
    border-color: #003366;
    background-color: rgba(0, 51, 102, 0.05);
}

.radio-option input[type="radio"][b-cjwkovue71] {
    display: none;
}

.radio-circle[b-cjwkovue71] {
    width: 16px;
    height: 16px;
    border: 2px solid #003366;
    border-radius: 50%;
    position: relative;
}

.radio-option.selected .radio-circle[b-cjwkovue71]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #003366;
    border-radius: 50%;
}

/* Parts Section */
.parts-header[b-cjwkovue71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.btn-link-orange[b-cjwkovue71] {
    background: none;
    border: none;
    color: #ff6b3c;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
}

.btn-link-orange:hover[b-cjwkovue71] {
    text-decoration: underline;
}

.parts-grid[b-cjwkovue71] {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.parts-grid-header[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 1fr 50px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.parts-col[b-cjwkovue71] {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.parts-grid-header .parts-col[b-cjwkovue71] {
    color: #333;
}

.parts-grid-header .parts-col:first-child[b-cjwkovue71] {
    border-right: 1px solid #ddd;
}

.parts-grid-row[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 1fr 50px;
    border-bottom: 1px solid #eee;
}

.parts-grid-row:last-child[b-cjwkovue71] {
    border-bottom: none;
}

.parts-grid-row .parts-col[b-cjwkovue71] {
    color: #555;
}

.parts-grid-row .parts-col:first-child[b-cjwkovue71] {
    border-right: 1px solid #eee;
}

/* Parts column action (remove button) */
.parts-col.parts-col-action[b-cjwkovue71] {
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.parts-grid-header .parts-col.parts-col-action[b-cjwkovue71] {
    border-left: none;
    border-right: none;
}

.parts-grid-row .parts-col.parts-col-action[b-cjwkovue71] {
    border-left: none;
    border-right: none;
}

.btn-remove-part[b-cjwkovue71] {
    background: none;
    border: 1px solid #c0392b;
    color: #c0392b;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
}

.btn-remove-part:hover[b-cjwkovue71] {
    background: #c0392b;
    color: white;
}

/* Evidence Section */
.evidence-section[b-cjwkovue71] {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

.evidence-title[b-cjwkovue71] {
    font-size: 1rem;
    font-weight: 600;
    color: #003366;
    margin: 0 0 1rem 0;
}

.evidence-dropzone[b-cjwkovue71] {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
}

.evidence-dropzone:hover[b-cjwkovue71] {
    border-color: #2563eb;
    background: #eff6ff;
}

.evidence-dropzone.drag-over[b-cjwkovue71] {
    border-color: #2563eb;
    background: #dbeafe;
    border-style: solid;
    transform: scale(1.005);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.evidence-dropzone-inner[b-cjwkovue71] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    gap: 0.5rem;
}

.evidence-upload-icon[b-cjwkovue71] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eff6ff;
    border: 2px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    margin-bottom: 0.25rem;
    transition: all 0.25s ease;
}

.evidence-dropzone:hover .evidence-upload-icon[b-cjwkovue71] {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
}

.evidence-dropzone.drag-over .evidence-upload-icon[b-cjwkovue71] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: translateY(-4px);
}

.evidence-upload-text[b-cjwkovue71] {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.evidence-browse-link[b-cjwkovue71] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.evidence-upload-subtext[b-cjwkovue71] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

/*
 * Completely hide the native file input rendered by Blazor's InputFile.
 * Uses the visually-hidden technique (not display:none) so that JS
 * can still programmatically trigger a click on the element.
 * ::deep is required because Blazor scoped CSS won't reach child elements.
 */
[b-cjwkovue71] .file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.dropzone-label[b-cjwkovue71] {
    font-size: 0.875rem;
    color: #666;
    cursor: pointer;
}

.dropzone-link[b-cjwkovue71] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
}

/* Upload Progress */
.upload-progress[b-cjwkovue71] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: #2563eb;
    font-weight: 500;
}

/* Upload Toast Messages */
.upload-toast[b-cjwkovue71] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.775rem;
    font-weight: 500;
    margin-top: 0.5rem;
    animation: toastSlideIn-b-cjwkovue71 0.3s ease;
}

.upload-toast.toast-success[b-cjwkovue71] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.upload-toast.toast-error[b-cjwkovue71] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@keyframes toastSlideIn-b-cjwkovue71 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Evidence file list (matching WorkflowStepEvidence style) ===== */

.evidence-files[b-cjwkovue71] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.evidence-file-row[b-cjwkovue71] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.evidence-file-row:hover[b-cjwkovue71] {
    background: #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.evidence-file-thumb[b-cjwkovue71] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-file-thumb img[b-cjwkovue71] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evidence-file-thumb-clickable[b-cjwkovue71] {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.evidence-file-thumb-clickable:hover[b-cjwkovue71] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.evidence-file-icon[b-cjwkovue71] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-file-info[b-cjwkovue71] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.evidence-file-name[b-cjwkovue71] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evidence-file-name-clickable[b-cjwkovue71] {
    cursor: pointer;
    color: #2563eb;
}

.evidence-file-name-clickable:hover[b-cjwkovue71] {
    text-decoration: underline;
}

.evidence-file-meta[b-cjwkovue71] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.evidence-file-actions[b-cjwkovue71] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.evidence-action-btn[b-cjwkovue71] {
    background: none;
    border: none;
    padding: 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.evidence-action-btn:hover[b-cjwkovue71] {
    background: #e2e8f0;
    color: #334155;
}

.evidence-action-delete:hover[b-cjwkovue71] {
    background: #fee2e2;
    color: #dc2626;
}

/* ===== Lightbox overlay ===== */

.evidence-lightbox-overlay[b-cjwkovue71] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: lightboxFadeIn-b-cjwkovue71 0.2s ease;
}

@keyframes lightboxFadeIn-b-cjwkovue71 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.evidence-lightbox-content[b-cjwkovue71] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.evidence-lightbox-close[b-cjwkovue71] {
    position: absolute;
    top: -40px;
    right: -8px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.15s;
}

.evidence-lightbox-close:hover[b-cjwkovue71] {
    background: rgba(255, 255, 255, 0.3);
}

.evidence-lightbox-image[b-cjwkovue71] {
    max-width: 85vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.evidence-lightbox-caption[b-cjwkovue71] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.evidence-lightbox-filename[b-cjwkovue71] {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.evidence-lightbox-meta[b-cjwkovue71] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

/* Footer */
.form-footer[b-cjwkovue71] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    margin-top: 1.5rem;
    position: sticky;
    bottom: 0;
    background: #f5f6fa;
}

/* Validation Errors */
.validation-errors[b-cjwkovue71] {
    width: 100%;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

.validation-error[b-cjwkovue71] {
    margin: 0;
    color: #b91c1c;
    font-size: 0.875rem;
}

.validation-error + .validation-error[b-cjwkovue71] {
    margin-top: 0.25rem;
}

.btn-cancel[b-cjwkovue71] {
    background: transparent;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    padding: 0.625rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-cjwkovue71] {
    background: #ff6b3c;
    color: white;
}

.btn-submit[b-cjwkovue71] {
    background: #ff6b3c;
    color: white;
    border: none;
    padding: 0.625rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-submit:hover[b-cjwkovue71] {
    background: #e55a2b;
}

.btn-submit:disabled[b-cjwkovue71],
.btn-cancel:disabled[b-cjwkovue71] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading */
.loading-indicator[b-cjwkovue71] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

/* Loading Progress Modal */
.modal-backdrop[b-cjwkovue71] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-cjwkovue71] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.modal-header[b-cjwkovue71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-cjwkovue71] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.modal-body[b-cjwkovue71] {
    padding: 1.5rem;
}

.loading-progress-container[b-cjwkovue71] {
    text-align: center;
    padding: 1rem 0;
}

.loading-progress-message[b-cjwkovue71] {
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
    margin-bottom: 1rem;
}

.loading-progress-bar-wrapper[b-cjwkovue71] {
    width: 100%;
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.loading-progress-bar-fill[b-cjwkovue71] {
    height: 100%;
    background: #0d9488;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.loading-progress-info-row[b-cjwkovue71] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.loading-progress-text[b-cjwkovue71] {
    font-size: 0.85rem;
    color: #495057;
}

.loading-progress-percent[b-cjwkovue71] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #163a49;
}

.loading-progress-spinner[b-cjwkovue71] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.loading-progress-hint[b-cjwkovue71] {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ===== Select Component Definition Modal ===== */

.select-part-modal[b-cjwkovue71] {
    max-width: 750px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.select-part-modal .modal-body[b-cjwkovue71] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* Column header / filter area */
.select-part-filters[b-cjwkovue71] {
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.select-part-filter-row[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 1fr 90px;
    border-bottom: 1px solid #eee;
}

.select-part-col-header[b-cjwkovue71] {
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-right: 1px solid #eee;
    background: #f8f9fa;
}

.select-part-col-header.sortable[b-cjwkovue71] {
    cursor: pointer;
    user-select: none;
}

.select-part-col-header.sortable:hover[b-cjwkovue71] {
    background: #e9ecef;
}

.select-part-col-header .sort-icon[b-cjwkovue71] {
    color: #ff6b3c;
    font-size: 0.8rem;
}

.select-part-col-header.action-col[b-cjwkovue71] {
    border-right: none;
}

.select-part-col-filter[b-cjwkovue71] {
    padding: 0.4rem 0.5rem;
    border-right: 1px solid #eee;
}

.select-part-col-filter.action-col[b-cjwkovue71] {
    border-right: none;
}

.filter-input-wrapper[b-cjwkovue71] {
    display: flex;
    align-items: center;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    overflow: hidden;
}

.filter-badge[b-cjwkovue71] {
    background: #fff;
    color: #ff6b3c;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.4rem;
    border-right: 1px solid #ff6b3c;
    line-height: 1;
    flex-shrink: 0;
}

.filter-input[b-cjwkovue71] {
    border: none;
    outline: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    width: 100%;
    min-width: 0;
}

/* Scrollable list area */
.select-part-list[b-cjwkovue71] {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 400px;
}

.select-part-row[b-cjwkovue71] {
    display: grid;
    grid-template-columns: 1fr 1fr 90px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s;
}

.select-part-row:hover[b-cjwkovue71] {
    background: #f8f9fa;
}

.select-part-row.already-added[b-cjwkovue71] {
    background: #f0fdf4;
}

.select-part-col[b-cjwkovue71] {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #333;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
}

.select-part-col.action-col[b-cjwkovue71] {
    border-right: none;
    justify-content: center;
}

.btn-add-part[b-cjwkovue71] {
    background: #fff;
    color: #ff6b3c;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-part:hover[b-cjwkovue71] {
    background: #ff6b3c;
    color: #fff;
}

.added-label[b-cjwkovue71] {
    color: #16a34a;
    font-size: 0.8rem;
    font-weight: 500;
}

.select-part-empty[b-cjwkovue71] {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Pagination */
.select-part-pagination[b-cjwkovue71] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

.select-part-pagination .pagination-info[b-cjwkovue71] {
    font-size: 0.8rem;
    color: #555;
    margin: 0 0.25rem;
}

.select-part-pagination .btn-link[b-cjwkovue71] {
    color: #003366;
    padding: 0.2rem;
}

.select-part-pagination .btn-link:disabled[b-cjwkovue71] {
    color: #ccc;
}

/* Loading inside modal */
.select-part-list .loading-container[b-cjwkovue71] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #666;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .create-ncr-content[b-cjwkovue71] {
        grid-template-columns: 1fr;
    }

    .evidence-section[b-cjwkovue71] {
        order: -1;
    }
}

.product-link[b-cjwkovue71] {
    color: #0d6efd;
    cursor: pointer;
}

.product-link:hover[b-cjwkovue71] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .form-row[b-cjwkovue71] {
        grid-template-columns: 1fr;
    }

    .radio-group[b-cjwkovue71] {
        grid-template-columns: 1fr;
    }

    .form-group.half-width[b-cjwkovue71] {
        max-width: 100%;
    }
}
/* /Components/Pages/CreatePublicNcr.razor.rz.scp.css */
/* Public NCR Page */
.public-ncr-page[b-l53x0w95by] {
    max-width: 800px;
    margin: 0 auto;
}

.public-ncr-title[b-l53x0w95by] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 1.5rem 0;
}

.public-ncr-card[b-l53x0w95by] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #e8eaf0;
}

/* Form Groups */
.form-group[b-l53x0w95by] {
    margin-bottom: 1.25rem;
}

.form-label[b-l53x0w95by] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.4rem;
}

.required-star[b-l53x0w95by] {
    color: #e74c3c;
    font-weight: 700;
}

.info-icon[b-l53x0w95by] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    cursor: help;
}

.form-control[b-l53x0w95by] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-control:focus[b-l53x0w95by] {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
}

.form-control[b-l53x0w95by]::placeholder {
    color: #aaa;
}

.form-textarea[b-l53x0w95by] {
    resize: vertical;
    min-height: 100px;
}

/* Add Product Information Button */
.btn-add-product[b-l53x0w95by] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.25rem;
}

.btn-add-product:hover[b-l53x0w95by] {
    color: #e55a2b;
}

.add-icon[b-l53x0w95by] {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Evidence Dropzone */
.evidence-dropzone[b-l53x0w95by] {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}

.evidence-dropzone.drag-over[b-l53x0w95by] {
    border-color: #ff6b3c;
    background-color: #fff8f5;
}

.dropzone-text[b-l53x0w95by] {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.dropzone-link[b-l53x0w95by] {
    color: #003366;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.dropzone-link:hover[b-l53x0w95by] {
    color: #ff6b3c;
}

.file-input[b-l53x0w95by],
.evidence-dropzone[b-l53x0w95by]  input[type="file"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

/* Upload Progress / Toast */
.upload-progress[b-l53x0w95by] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: #666;
}

.upload-toast[b-l53x0w95by] {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.toast-success[b-l53x0w95by] {
    background: #eafaf1;
    color: #27ae60;
    border: 1px solid #27ae60;
}

.toast-error[b-l53x0w95by] {
    background: #fef0ef;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

/* Evidence File List */
.evidence-files[b-l53x0w95by] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evidence-file-row[b-l53x0w95by] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.evidence-file-thumb[b-l53x0w95by] {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
}

.evidence-file-thumb img[b-l53x0w95by] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evidence-file-icon[b-l53x0w95by] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-file-info[b-l53x0w95by] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.evidence-file-name[b-l53x0w95by] {
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evidence-file-meta[b-l53x0w95by] {
    font-size: 0.75rem;
    color: #888;
}

.btn-remove-file[b-l53x0w95by] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.btn-remove-file:hover[b-l53x0w95by] {
    color: #e74c3c;
    background: #fee;
}

/* Validation Errors */
.validation-errors[b-l53x0w95by] {
    margin-top: 1rem;
}

.validation-error[b-l53x0w95by] {
    color: #e74c3c;
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

/* Form Footer */
.form-footer[b-l53x0w95by] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.btn-submit[b-l53x0w95by] {
    background-color: #e65100;
    color: white;
    border: none;
    padding: 0.75rem 2.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-submit:hover:not(:disabled)[b-l53x0w95by] {
    background-color: #bf4500;
}

.btn-submit:disabled[b-l53x0w95by] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Confirmation Modal */
.modal-backdrop[b-l53x0w95by] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-dialog[b-l53x0w95by] {
    background: white;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-l53x0w95by] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}

.modal-header h4[b-l53x0w95by] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.btn-close[b-l53x0w95by] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-l53x0w95by] {
    color: #333;
}

.modal-body[b-l53x0w95by] {
    padding: 1.25rem;
}

.modal-body p[b-l53x0w95by] {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-size: 0.95rem;
}

.confirm-note[b-l53x0w95by] {
    color: #666 !important;
    font-size: 0.85rem !important;
    font-style: italic;
}

.modal-footer[b-l53x0w95by] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #eee;
}

.btn-confirm[b-l53x0w95by] {
    background-color: #e65100;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.btn-confirm:hover[b-l53x0w95by] {
    background-color: #bf4500;
}

.btn-cancel-outline[b-l53x0w95by] {
    background: white;
    color: #e65100;
    border: 2px solid #e65100;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel-outline:hover[b-l53x0w95by] {
    background: #fff5f0;
}

/* Success State */
.submit-success[b-l53x0w95by] {
    text-align: center;
    padding: 2rem 1rem;
}

.success-icon[b-l53x0w95by] {
    margin-bottom: 1rem;
}

.submit-success h2[b-l53x0w95by] {
    color: #27ae60;
    font-size: 1.4rem;
    margin: 0 0 0.75rem 0;
}

.submit-success p[b-l53x0w95by] {
    color: #555;
    font-size: 0.95rem;
    margin: 0 0 0.5rem 0;
}

.submit-success .btn-submit[b-l53x0w95by] {
    margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 600px) {
    .public-ncr-card[b-l53x0w95by] {
        padding: 1.25rem;
    }

    .public-ncr-title[b-l53x0w95by] {
        font-size: 1.4rem;
    }
}

/* reCAPTCHA notice */
.recaptcha-notice[b-l53x0w95by] {
    text-align: center;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.recaptcha-notice a[b-l53x0w95by] {
    color: #6c757d;
    text-decoration: underline;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-page[b-hnllbw0ok7] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.btn-download[b-hnllbw0ok7] {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ff6b3c;
    background: #fff;
    border: 2px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download:hover[b-hnllbw0ok7] {
    background: #ff6b3c;
    color: #fff;
}

/* Filters Section */
.filters-section[b-hnllbw0ok7] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #ff6b3c, #0066cc) 1;
}

.filter-group[b-hnllbw0ok7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label[b-hnllbw0ok7] {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: capitalize;
}

.filter-group .form-control[b-hnllbw0ok7],
.filter-group .form-select[b-hnllbw0ok7] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
}

.filter-group .form-control:focus[b-hnllbw0ok7],
.filter-group .form-select:focus[b-hnllbw0ok7] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.date-input-wrapper[b-hnllbw0ok7] {
    position: relative;
    display: flex;
    align-items: center;
}

.date-input-wrapper input[b-hnllbw0ok7] {
    flex: 1;
    padding-right: 2.5rem;
}

.date-icon[b-hnllbw0ok7] {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #ff6b3c;
    border-radius: 4px;
    pointer-events: none;
}

.date-icon svg[b-hnllbw0ok7] {
    stroke: #fff;
}

/* Loading Container */
.loading-container[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Charts Section */
.charts-section[b-hnllbw0ok7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-card[b-hnllbw0ok7] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-title[b-hnllbw0ok7] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
}

.chart-container[b-hnllbw0ok7] {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-chart-data[b-hnllbw0ok7] {
    color: #6c757d;
    font-style: italic;
}

/* Bar Chart */
.bar-chart[b-hnllbw0ok7] {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
}

.chart-y-axis[b-hnllbw0ok7] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.5rem;
    border-right: 1px solid #dee2e6;
}

.y-label[b-hnllbw0ok7] {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: right;
    min-width: 20px;
}

.chart-bars[b-hnllbw0ok7] {
    display: flex;
    flex: 1;
    align-items: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.bar-wrapper[b-hnllbw0ok7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.bar[b-hnllbw0ok7] {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(to top, #0066cc, #4da6ff);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.bar-label[b-hnllbw0ok7] {
    font-size: 0.65rem;
    color: #6c757d;
    margin-top: 0.5rem;
    text-align: center;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Horizontal Bar Chart */
.bar-chart.horizontal[b-hnllbw0ok7] {
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.chart-content-horizontal[b-hnllbw0ok7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
}

.chart-bars-horizontal[b-hnllbw0ok7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
}

.bar-wrapper-horizontal[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.bar-label-horizontal[b-hnllbw0ok7] {
    font-size: 0.65rem;
    color: #6c757d;
    min-width: 55px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track-horizontal[b-hnllbw0ok7] {
    flex: 1;
    height: 18px;
    background: #f0f4f8;
    border-radius: 3px;
    overflow: hidden;
}

.bar-horizontal[b-hnllbw0ok7] {
    height: 100%;
    background: linear-gradient(to right, #0066cc, #4da6ff);
    border-radius: 3px;
    min-width: 3px;
    transition: width 0.3s ease;
}

.chart-x-axis[b-hnllbw0ok7] {
    display: flex;
    justify-content: space-between;
    padding-top: 0.35rem;
    border-top: 1px solid #dee2e6;
    font-size: 0.65rem;
    color: #6c757d;
    margin-left: 60px;
}

.axis-label[b-hnllbw0ok7] {
    margin-left: auto;
    font-style: italic;
    color: #0066cc;
}

/* Pie Chart */
.pie-chart-wrapper[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.pie-chart[b-hnllbw0ok7] {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.pie-slice[b-hnllbw0ok7] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.pie-legend[b-hnllbw0ok7] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    overflow: hidden;
}

.legend-item[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color[b-hnllbw0ok7] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-text[b-hnllbw0ok7] {
    font-size: 0.7rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table Section */
.table-section[b-hnllbw0ok7] {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.report-table[b-hnllbw0ok7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table thead th[b-hnllbw0ok7] {
    font-weight: 500;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}

.th-header[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
}

.th-header:hover[b-hnllbw0ok7] {
    color: #0d6efd;
}

.sort-indicator[b-hnllbw0ok7] {
    color: #264a60;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Table Body */
.report-table tbody tr[b-hnllbw0ok7] {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.report-table tbody tr:hover[b-hnllbw0ok7] {
    background-color: #e7f1ff;
}

.report-table tbody tr:active[b-hnllbw0ok7] {
    background-color: #d0e3ff;
}

.report-table tbody tr.selected[b-hnllbw0ok7] {
    background-color: #e7f1ff;
}

.report-table tbody td[b-hnllbw0ok7] {
    padding: 0.75rem;
    color: #212529;
    vertical-align: middle;
}

.report-table tbody td.component-name[b-hnllbw0ok7] {
    color: #0d6efd;
    font-weight: 500;
}

.report-table tbody td.no-data[b-hnllbw0ok7] {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

/* Status Badge */
.status-badge[b-hnllbw0ok7] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: capitalize;
}

.status-new[b-hnllbw0ok7] {
    background-color: #0d6efd;
    color: #fff;
}

.status-complete[b-hnllbw0ok7] {
    background-color: #198754;
    color: #fff;
}

.status-pending[b-hnllbw0ok7] {
    background-color: #ffc107;
    color: #212529;
}

.status-added[b-hnllbw0ok7] {
    background-color: #17a2b8;
    color: #fff;
}

.status-rejected[b-hnllbw0ok7] {
    background-color: #dc3545;
    color: #fff;
}

.status-default[b-hnllbw0ok7] {
    background-color: #6c757d;
    color: #fff;
}

/* Pagination */
.pagination-row[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.pagination-btn[b-hnllbw0ok7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-hnllbw0ok7] {
    color: #0d6efd;
}

.pagination-btn:disabled[b-hnllbw0ok7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-hnllbw0ok7] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Alert */
.alert[b-hnllbw0ok7] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-danger[b-hnllbw0ok7] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* Responsive */
@media (max-width: 1200px) {
    .charts-section[b-hnllbw0ok7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .filters-section[b-hnllbw0ok7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-page[b-hnllbw0ok7] {
        padding: 1rem;
    }

    .page-header[b-hnllbw0ok7] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .filters-section[b-hnllbw0ok7] {
        grid-template-columns: 1fr;
    }

    .charts-section[b-hnllbw0ok7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/DatabaseSizeEstimate.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-82wi0za6ul] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-82wi0za6ul] {
    transform: translateY(1px);
}

.panel-header-row[b-82wi0za6ul] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-82wi0za6ul] {
    flex: 1;
}

.panel-header-actions h2[b-82wi0za6ul] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

/* Database container */
.database-container[b-82wi0za6ul] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Info Banner */
.info-banner[b-82wi0za6ul] {
    background: #163a49;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Search Panel - Animated */
.search-panel[b-82wi0za6ul] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-82wi0za6ul] {
    max-height: 150px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-82wi0za6ul] {
    padding: 1.5rem;
}

.search-row[b-82wi0za6ul] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-field[b-82wi0za6ul] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.search-label[b-82wi0za6ul] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

.search-field .form-control[b-82wi0za6ul] {
    width: 180px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-82wi0za6ul] {
    border-color: #163a49;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(22, 58, 73, 0.25);
}

/* Toolbar */
.database-toolbar[b-82wi0za6ul] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.toolbar-buttons[b-82wi0za6ul] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-82wi0za6ul] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-82wi0za6ul] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-82wi0za6ul],
.toolbar-buttons .btn-outline-primary.active[b-82wi0za6ul] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-primary[b-82wi0za6ul] {
    color: white;
    background-color: #ff6b3c;
    border-color: #ff6b3c;
}

.toolbar-buttons .btn-primary:hover[b-82wi0za6ul] {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

/* Pagination */
.toolbar-pagination[b-82wi0za6ul] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn-link[b-82wi0za6ul] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.toolbar-pagination .btn-link:hover:not(:disabled)[b-82wi0za6ul] {
    color: #212529;
}

.toolbar-pagination .btn-link:disabled[b-82wi0za6ul] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-82wi0za6ul] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.table-container[b-82wi0za6ul] {
    overflow-x: auto;
}

.database-table[b-82wi0za6ul] {
    width: 100%;
    border-collapse: collapse;
}

.database-table thead th[b-82wi0za6ul] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.database-table thead th.text-right[b-82wi0za6ul] {
    text-align: right;
}

.database-table thead th.sortable[b-82wi0za6ul] {
    cursor: pointer;
    user-select: none;
}

.database-table thead th.sortable:hover[b-82wi0za6ul] {
    color: #163a49;
}

.sort-icon[b-82wi0za6ul] {
    margin-left: 0.25rem;
    vertical-align: middle;
}

.database-table tbody tr[b-82wi0za6ul] {
    border-bottom: 1px solid #f0f0f0;
}

.database-table tbody tr:hover[b-82wi0za6ul] {
    background-color: #f8f9fa;
}

.database-table tbody td[b-82wi0za6ul] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.database-table tbody td.text-right[b-82wi0za6ul] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.database-table tbody td a[b-82wi0za6ul] {
    color: #0d6efd;
    text-decoration: none;
}

.database-table tbody td a:hover[b-82wi0za6ul] {
    text-decoration: underline;
}

/* Summary Footer */
.summary-footer[b-82wi0za6ul] {
    margin-top: 1rem;
    border-top: 2px solid #dee2e6;
}

.summary-header[b-82wi0za6ul] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0.75rem 1rem;
    background: #4a9fc7;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

.summary-header span.text-right[b-82wi0za6ul] {
    text-align: right;
}

.summary-values[b-82wi0za6ul] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    background: #f8f9fa;
}

.summary-values span.text-right[b-82wi0za6ul] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 768px) {
    .database-toolbar[b-82wi0za6ul] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .toolbar-pagination[b-82wi0za6ul] {
        width: 100%;
        justify-content: flex-end;
    }

    .database-table[b-82wi0za6ul] {
        font-size: 0.8rem;
    }

    .summary-header[b-82wi0za6ul],
    .summary-values[b-82wi0za6ul] {
        grid-template-columns: repeat(5, minmax(80px, 1fr));
    }

    .search-row[b-82wi0za6ul] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-field .form-control[b-82wi0za6ul] {
        width: 100%;
    }
}
/* /Components/Pages/DataRestore.razor.rz.scp.css */
/* Data Restore page */
.data-restore-page[b-ba784drcyo] {
    padding: 1.5rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.dr-topbar[b-ba784drcyo] {
    margin-bottom: 1rem;
}

.back-link[b-ba784drcyo] {
    background: none;
    border: none;
    color: #0b5f8f;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.25rem 0;
}

.back-link:disabled[b-ba784drcyo] {
    opacity: 0.4;
    cursor: not-allowed;
}

.dr-header[b-ba784drcyo] {
    margin-bottom: 1.5rem;
}

.dr-header h2[b-ba784drcyo] {
    margin: 0;
    font-size: 1.75rem;
    color: #0b3f63;
    font-weight: 700;
}

.dr-subtitle[b-ba784drcyo] {
    color: #e87722;
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
}

.dr-section[b-ba784drcyo] {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.dr-section h3[b-ba784drcyo] {
    margin: 0 0 0.25rem 0;
    color: #0b3f63;
    font-size: 1.15rem;
    font-weight: 700;
}

.dr-section-subtitle[b-ba784drcyo] {
    color: #6b7785;
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

/* Connection-string editor */
.dr-conn-editor[b-ba784drcyo] {
    background: #f7f9fb;
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dr-conn-editor-header[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dr-conn-editor-row[b-ba784drcyo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dr-conn-input[b-ba784drcyo] {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    background: white;
}

.dr-conn-input:focus[b-ba784drcyo] {
    outline: none;
    border-color: #0b5f8f;
    box-shadow: 0 0 0 2px rgba(11, 95, 143, 0.15);
}

.dr-conn-input:disabled[b-ba784drcyo] {
    background: #e9ecef;
    cursor: not-allowed;
}

.dr-conn-editor-note[b-ba784drcyo] {
    color: #6b7785;
    font-size: 0.8rem;
}

.dr-conn-editor-note code[b-ba784drcyo] {
    background: #e9ecef;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* Pre-flight checklist */
.dr-checklist[b-ba784drcyo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dr-check[b-ba784drcyo] {
    display: grid;
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0.85rem;
    background: #f7f9fb;
    border-radius: 6px;
}

.dr-check-label[b-ba784drcyo] {
    font-weight: 600;
    color: #364152;
    font-size: 0.9rem;
}

.dr-check-value[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.dr-check-detail[b-ba784drcyo] {
    color: #6b7785;
    font-size: 0.85rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Host/DB names inside a check row: a clean, uniform slate chip (not the tiny red
   browser-default <code>), and allowed to wrap so long Azure hostnames never truncate. */
.dr-check-detail code[b-ba784drcyo] {
    background: #eef2f6;
    color: #334155;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    word-break: break-all;
}

/* Section header row: title block on the left, a section-wide action (Test all) on the right. */
.dr-section-head[b-ba784drcyo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.dr-section-head .dr-test-all[b-ba784drcyo] {
    flex: none;
    margin-top: 0.15rem;
}

/* Pills */
.dr-pill[b-ba784drcyo] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.dr-pill-ok[b-ba784drcyo]    { background: #d1f0db; color: #15803d; }
.dr-pill-err[b-ba784drcyo]   { background: #fadbd8; color: #b91c1c; }
.dr-pill-warn[b-ba784drcyo]  { background: #fde9c8; color: #b45309; }
.dr-pill-info[b-ba784drcyo]  { background: #cfe9fb; color: #0b5f8f; }
.dr-pill-muted[b-ba784drcyo] { background: #e9ecef; color: #6b7785; }

/* Buttons */
.dr-btn[b-ba784drcyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dr-btn:disabled[b-ba784drcyo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dr-btn-primary[b-ba784drcyo] {
    background: #0b5f8f;
    color: white;
}

.dr-btn-primary:hover:not(:disabled)[b-ba784drcyo] {
    background: #0b3f63;
}

.dr-btn-secondary[b-ba784drcyo] {
    background: white;
    color: #0b5f8f;
    border-color: #cfd7df;
}

.dr-btn-secondary:hover:not(:disabled)[b-ba784drcyo] {
    border-color: #0b5f8f;
}

.dr-btn-rerun[b-ba784drcyo] {
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 0.78rem;
    line-height: 1.4;
}

.dr-btn-danger[b-ba784drcyo] {
    background: white;
    color: #b91c1c;
    border-color: #fadbd8;
}

.dr-btn-danger:hover:not(:disabled)[b-ba784drcyo] {
    background: #fadbd8;
}

.dr-btn-link[b-ba784drcyo] {
    background: none;
    color: #0b5f8f;
    border: none;
    padding: 0.25rem 0;
    text-decoration: underline;
    font-size: 0.875rem;
}

/* Run controls */
.dr-run-controls[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dr-error-banner[b-ba784drcyo] {
    color: #b91c1c;
    font-size: 0.875rem;
}

/* Progress bar */
.dr-progress-wrap[b-ba784drcyo] {
    margin-bottom: 0.75rem;
}

.dr-progress-bar[b-ba784drcyo] {
    background: #e9ecef;
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    position: relative;
}

.dr-progress-fill[b-ba784drcyo] {
    background: linear-gradient(90deg, #0b5f8f 0%, #2596de 100%);
    height: 100%;
    transition: width 0.3s ease;
}

.dr-progress-label[b-ba784drcyo] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: #364152;
}

.dr-muted[b-ba784drcyo] {
    color: #6b7785;
}

/* Phase / current */
.dr-phase-line[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dr-phase-pill[b-ba784drcyo] {
    background: #cfe9fb;
    color: #0b5f8f;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.dr-current-table[b-ba784drcyo] {
    color: #364152;
    font-size: 0.875rem;
}

.dr-current-table code[b-ba784drcyo] {
    background: #f1f3f5;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Stat tiles */
.dr-stat-grid[b-ba784drcyo] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.dr-stat[b-ba784drcyo] {
    background: #f7f9fb;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    text-align: center;
}

.dr-stat-label[b-ba784drcyo] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7785;
    margin-bottom: 0.2rem;
}

.dr-stat-value[b-ba784drcyo] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b3f63;
}

.dr-stat-err[b-ba784drcyo] {
    background: #fadbd8;
}

.dr-stat-err .dr-stat-value[b-ba784drcyo] {
    color: #b91c1c;
}

/* Log */
.dr-log[b-ba784drcyo] {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
}

.dr-log-header[b-ba784drcyo] {
    background: #f7f9fb;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #364152;
    border-bottom: 1px solid #e9ecef;
}

.dr-log-body[b-ba784drcyo] {
    background: #0b1623;
    color: #cdd6e0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    padding: 0.65rem 0.85rem;
    max-height: 320px;
    overflow-y: auto;
}

.dr-log-line[b-ba784drcyo] {
    display: flex;
    gap: 0.65rem;
    line-height: 1.45;
    word-break: break-word;
}

.dr-log-time[b-ba784drcyo] {
    color: #6b7785;
    flex-shrink: 0;
}

.dr-log-info[b-ba784drcyo]     { color: #cdd6e0; }
.dr-log-progress[b-ba784drcyo] { color: #9aa8b6; }
.dr-log-ok[b-ba784drcyo]       { color: #6ee7b7; }
.dr-log-failed[b-ba784drcyo]   { color: #fca5a5; }
.dr-log-error[b-ba784drcyo]    { color: #fca5a5; font-weight: 600; }

/* Results table */
.dr-summary[b-ba784drcyo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dr-summary-headline[b-ba784drcyo] {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
}

.dr-summary-ok[b-ba784drcyo] {
    background: #d1f0db;
    color: #15803d;
}

.dr-summary-err[b-ba784drcyo] {
    background: #fadbd8;
    color: #b91c1c;
}

.dr-results-table[b-ba784drcyo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.825rem;
}

.dr-results-table thead[b-ba784drcyo] {
    background: #f7f9fb;
}

.dr-results-table th[b-ba784drcyo],
.dr-results-table td[b-ba784drcyo] {
    text-align: left;
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid #e9ecef;
}

.dr-results-table th.num[b-ba784drcyo],
.dr-results-table td.num[b-ba784drcyo] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dr-results-table code[b-ba784drcyo] {
    background: #f1f3f5;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.dr-row-err[b-ba784drcyo] {
    background: #fef5f5;
}

/* Responsive */
@media (max-width: 899px) {
    .dr-check[b-ba784drcyo] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .dr-stat-grid[b-ba784drcyo] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 499px) {
    .dr-stat-grid[b-ba784drcyo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.spinner-border[b-ba784drcyo] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dr-spin-b-ba784drcyo 0.75s linear infinite;
}

.spinner-border-sm[b-ba784drcyo] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 2px;
}

@keyframes dr-spin-b-ba784drcyo {
    to { transform: rotate(360deg); }
}

/* ---- Live indicator pip ---- */
.dr-live-pip[b-ba784drcyo] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 0.5rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    vertical-align: middle;
    animation: dr-pulse-b-ba784drcyo 1.4s ease-out infinite;
}

@keyframes dr-pulse-b-ba784drcyo {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---- Phase dots ---- */
.dr-phase-dots[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0.5rem 0 1rem;
}

.dr-phase-dot[b-ba784drcyo] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.dr-phase-dot-pending[b-ba784drcyo] {
    background: #e2e8f0;
    color: #64748b;
}

.dr-phase-dot-done[b-ba784drcyo] {
    background: #0b5f8f;
    color: #fff;
}

.dr-phase-dot-current[b-ba784drcyo] {
    background: #fbbf24;
    color: #1e293b;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25);
    animation: dr-pulse-amber-b-ba784drcyo 2s ease-in-out infinite;
}

@keyframes dr-pulse-amber-b-ba784drcyo {
    0%, 100% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.10); }
}

.dr-phase-link[b-ba784drcyo] {
    flex: 1;
    height: 3px;
    background: #e2e8f0;
    transition: background 0.3s;
}

.dr-phase-link-done[b-ba784drcyo] {
    background: #0b5f8f;
}

.dr-phase-caption[b-ba784drcyo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #fbbf24;
    background: rgba(251, 191, 36, 0.06);
    border-radius: 0 6px 6px 0;
}

.dr-phase-caption-title[b-ba784drcyo] {
    font-weight: 700;
    color: #0b5f8f;
    font-size: 0.9rem;
}

.dr-phase-caption-detail[b-ba784drcyo] {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.35;
}

.dr-phase-dot[b-ba784drcyo] {
    cursor: help;
}

/* ---- Viz row: gauge + sparkline ---- */
.dr-viz-row[b-ba784drcyo] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: stretch;
    margin: 0.75rem 0 1rem;
}

@media (max-width: 720px) {
    .dr-viz-row[b-ba784drcyo] {
        grid-template-columns: 1fr;
    }
}

.dr-gauge[b-ba784drcyo] {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    border-radius: 14px;
    padding: 1rem 1.25rem 0.75rem;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.dr-gauge svg[b-ba784drcyo] {
    display: block;
    overflow: visible;
}

.dr-gauge svg line[stroke="#fbbf24"][b-ba784drcyo] {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-box: fill-box;
    transform-origin: 120px 120px;
}

.dr-gauge svg path[stroke^="url"][b-ba784drcyo] {
    transition: d 0.3s ease-out;
}

.dr-gauge-readout[b-ba784drcyo] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #f1f5f9;
}

.dr-gauge-value[b-ba784drcyo] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: -0.02em;
}

.dr-gauge-unit[b-ba784drcyo] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---- Sparkline card ---- */
.dr-sparkline-card[b-ba784drcyo] {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    border-radius: 14px;
    padding: 1rem 1.25rem 0.75rem;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.dr-sparkline-head[b-ba784drcyo] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dr-sparkline-title[b-ba784drcyo] {
    color: #94a3b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.dr-sparkline-stats[b-ba784drcyo] {
    display: flex;
    gap: 1rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #f1f5f9;
    font-size: 0.85rem;
}

.dr-sparkline-stats strong[b-ba784drcyo] {
    color: #fbbf24;
    font-weight: 700;
}

.dr-sparkline-svg[b-ba784drcyo] {
    flex: 1;
    width: 100%;
    min-height: 100px;
    height: 100px;
}

.dr-sparkline-axis[b-ba784drcyo] {
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.7rem;
    color: #64748b;
}

/* ---- Pulse on the Inserted counter ---- */
.dr-stat-value[b-ba784drcyo] {
    transition: color 0.3s ease;
}

/* ===== How-it-works: header trigger + modal ===== */
.dr-header-titlerow[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.dr-info-btn[b-ba784drcyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid #cfd7df;
    border-radius: 999px;
    background: #f3f8fb;
    color: #0b5f8f;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dr-info-btn:hover[b-ba784drcyo] {
    background: #e3f1f9;
    border-color: #0b5f8f;
    box-shadow: 0 1px 4px rgba(11, 95, 143, 0.18);
}

.dr-modal-backdrop[b-ba784drcyo] {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 50, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    z-index: 1050;
    animation: dr-fade-in-b-ba784drcyo 0.15s ease;
}

@keyframes dr-fade-in-b-ba784drcyo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dr-modal[b-ba784drcyo] {
    background: #fff;
    border-radius: 14px;
    width: min(860px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: dr-modal-pop-b-ba784drcyo 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dr-modal-pop-b-ba784drcyo {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.dr-modal-head[b-ba784drcyo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, #0b5f8f 0%, #0b3f63 100%);
    color: #fff;
}

.dr-modal-title[b-ba784drcyo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dr-modal-title h3[b-ba784drcyo] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.dr-modal-close[b-ba784drcyo] {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dr-modal-close:hover[b-ba784drcyo] {
    background: rgba(255, 255, 255, 0.28);
}

.dr-modal-body[b-ba784drcyo] {
    padding: 1.3rem 1.4rem;
    overflow-y: auto;
}

.dr-modal-lead[b-ba784drcyo] {
    margin: 0 0 1.2rem;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.55;
}

.dr-concept-grid[b-ba784drcyo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.6rem;
}

.dr-concept[b-ba784drcyo] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #e6edf2;
    border-radius: 10px;
    background: #fafcfe;
}

.dr-concept-icon[b-ba784drcyo] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dr-concept-icon-blue[b-ba784drcyo]   { background: #e3f1f9; color: #0b5f8f; }
.dr-concept-icon-green[b-ba784drcyo]  { background: #e4f5ec; color: #15803d; }
.dr-concept-icon-amber[b-ba784drcyo]  { background: #fdf2dc; color: #b45309; }
.dr-concept-icon-violet[b-ba784drcyo] { background: #efe9fb; color: #6d28d9; }

.dr-concept-text h4[b-ba784drcyo] {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    color: #0b3f63;
    font-weight: 700;
}

.dr-concept-text p[b-ba784drcyo] {
    margin: 0;
    font-size: 0.83rem;
    color: #5b6b7a;
    line-height: 1.45;
}

.dr-phases-heading[b-ba784drcyo] {
    margin: 0 0 0.8rem;
    font-size: 1.05rem;
    color: #0b3f63;
    font-weight: 700;
}

.dr-phase-cards[b-ba784drcyo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

.dr-phase-card[b-ba784drcyo] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e6edf2;
    border-left: 3px solid #0b5f8f;
    border-radius: 8px;
    background: #fff;
}

.dr-phase-card-num[b-ba784drcyo] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0b5f8f;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dr-phase-card-icon[b-ba784drcyo] {
    flex: 0 0 auto;
    color: #0b5f8f;
    display: inline-flex;
    align-items: center;
    padding-top: 1px;
}

.dr-phase-card-text h5[b-ba784drcyo] {
    margin: 0 0 0.15rem;
    font-size: 0.88rem;
    color: #0b3f63;
    font-weight: 700;
}

.dr-phase-card-text p[b-ba784drcyo] {
    margin: 0;
    font-size: 0.79rem;
    color: #5b6b7a;
    line-height: 1.4;
}

.dr-modal-foot[b-ba784drcyo] {
    padding: 0.9rem 1.4rem;
    border-top: 1px solid #eef2f5;
    display: flex;
    justify-content: flex-end;
    background: #fafcfe;
}

@media (max-width: 640px) {
    .dr-concept-grid[b-ba784drcyo],
    .dr-phase-cards[b-ba784drcyo] {
        grid-template-columns: 1fr;
    }
}

/* ===== Preview / verification / history ===== */
.dr-preview[b-ba784drcyo] {
    margin-top: 1rem;
}

.dr-preview-head[b-ba784drcyo] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #334155;
}

.dr-preview-table[b-ba784drcyo],
.dr-verify-table[b-ba784drcyo],
.dr-history-table[b-ba784drcyo] {
    margin-top: 0.25rem;
}

.dr-preview-table tbody tr.dr-muted td[b-ba784drcyo] {
    color: #9aa7b4;
}

.dr-verify-summary[b-ba784drcyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.5rem;
}

/* Amber highlight for verification rows that need a look */
.dr-results-table tr.dr-row-warn[b-ba784drcyo] {
    background: #fef9ec;
}

/* Slowest-table marker in the per-table breakdown */
.dr-slowest[b-ba784drcyo] {
    color: #b45309;
    font-weight: 600;
}

/* ===== Drop-all-tables modal ===== */
.dr-modal-head-danger[b-ba784drcyo] {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
}

.dr-modal-danger[b-ba784drcyo] {
    border: 1px solid #f3c4c4;
}

.dr-drop-warning[b-ba784drcyo] {
    margin: 0 0 1.2rem;
    padding: 0.6rem 0.8rem;
    background: #fdecec;
    border-left: 3px solid #b91c1c;
    border-radius: 6px;
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.9rem;
}

.dr-drop-confirm[b-ba784drcyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0 0.2rem;
}

.dr-btn-drop[b-ba784drcyo] {
    min-width: 240px;
    justify-content: center;
    font-weight: 700;
}

.dr-drop-dots[b-ba784drcyo] {
    display: inline-flex;
    gap: 0.5rem;
}

.dr-drop-dot[b-ba784drcyo] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e6c4c4;
    transition: background 0.15s ease, transform 0.15s ease;
}

.dr-drop-dot-on[b-ba784drcyo] {
    background: #b91c1c;
    transform: scale(1.15);
}

/* Smooth tachometer-style needle sweep between rate updates */
.dr-needle[b-ba784drcyo] {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Two buttons in a checklist row's action column */
.dr-check-actions[b-ba784drcyo] {
    display: inline-flex;
    gap: 0.5rem;
    justify-self: end;
}

/* Collapsible raw-connection editor, revealed by the row's Edit button */
.dr-check-edit[b-ba784drcyo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.1rem 0.85rem 0.5rem;
    margin-top: -0.35rem;
}

/* Resume toggle next to the Run button */
.dr-resume-toggle[b-ba784drcyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.dr-resume-toggle input[b-ba784drcyo] {
    cursor: pointer;
}

/* Live activity chip on the throughput card — names the current step */
.dr-activity-chip[b-ba784drcyo] {
    margin-left: 0.5rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Background step (no row throughput) — amber, pulsing */
.dr-activity-processing[b-ba784drcyo] {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    animation: dr-processing-pulse-b-ba784drcyo 1.1s ease-in-out infinite;
}

/* Actively copying rows — green, steady */
.dr-activity-copying[b-ba784drcyo] {
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
}

@keyframes dr-processing-pulse-b-ba784drcyo {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ===== Step-by-step guide modal ===== */
.dr-guide-steps[b-ba784drcyo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dr-guide-step[b-ba784drcyo] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #e6edf2;
    border-left: 3px solid #0b5f8f;
    border-radius: 8px;
    background: #fafcfe;
}

.dr-guide-step-num[b-ba784drcyo] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0b5f8f;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dr-guide-step-text h4[b-ba784drcyo] {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    color: #0b3f63;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dr-guide-step-text p[b-ba784drcyo] {
    margin: 0;
    font-size: 0.86rem;
    color: #5b6b7a;
    line-height: 1.5;
}

.dr-guide-optional[b-ba784drcyo] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    background: #fdf2dc;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

/* Live "Verified" stat tile */
.dr-stat-warn[b-ba784drcyo] {
    background: #fef9ec;
}

.dr-verified-ok[b-ba784drcyo] {
    color: #15803d;
    font-weight: 700;
}

/* Post-drop success note in the pre-flight section */
.dr-drop-note[b-ba784drcyo] {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: #e4f5ec;
    border-left: 3px solid #15803d;
    border-radius: 6px;
    color: #14532d;
    font-size: 0.9rem;
}
/* /Components/Pages/Device.razor.rz.scp.css */
/* Device Page Container */
.device-container[b-pmjrhfzzea] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f7fa;
    position: relative;
}

/* Header */
.device-header[b-pmjrhfzzea] {
    padding: 2rem 1.5rem 1rem;
    text-align: center;
}

.device-title[b-pmjrhfzzea] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0;
}

.device-subtitle[b-pmjrhfzzea] {
    margin: 0.6rem auto 0;
    color: #4b5563;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.45;
    max-width: 680px;
}

.device-subtitle strong[b-pmjrhfzzea] {
    color: #1e3a5f;
    font-weight: 700;
}

/* Main Content */
.device-content[b-pmjrhfzzea] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
}

/* ID Card Container */
.id-card-container[b-pmjrhfzzea] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.id-card[b-pmjrhfzzea] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

.id-card-tappable[b-pmjrhfzzea] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.id-card-tappable:hover[b-pmjrhfzzea],
.id-card-tappable:focus-visible[b-pmjrhfzzea] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(30, 58, 95, 0.18);
    outline: none;
}

.id-card-tappable:active[b-pmjrhfzzea] {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.12);
}

.id-card-camera-badge[b-pmjrhfzzea] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4a90d9 0%, #3a7bc8 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
    animation: camera-pulse-b-pmjrhfzzea 2s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes camera-pulse-b-pmjrhfzzea {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
    }
    50% {
        box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4), 0 0 0 8px rgba(74, 144, 217, 0.12);
    }
}

.id-card-inner[b-pmjrhfzzea] {
    width: 160px;
    height: 220px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Decorative pattern on card */
.id-card-inner[b-pmjrhfzzea]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.03) 10px,
        rgba(255, 255, 255, 0.03) 20px
    );
    pointer-events: none;
}

.id-card-header[b-pmjrhfzzea] {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.id-card-dot[b-pmjrhfzzea] {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.id-card-body[b-pmjrhfzzea] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.id-card-avatar[b-pmjrhfzzea] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-question[b-pmjrhfzzea] {
    font-size: 24px;
    color: white;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Orange badge on avatar */
.id-card-avatar[b-pmjrhfzzea]::after {
    content: '?';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background: #ff6b3c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.id-card-lines[b-pmjrhfzzea] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 0 8px;
}

.id-card-line[b-pmjrhfzzea] {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.id-card-line.short[b-pmjrhfzzea] {
    width: 60%;
}

.id-card-barcode[b-pmjrhfzzea] {
    margin-top: auto;
    background: white;
    border-radius: 4px;
    padding: 8px;
}

.barcode-lines[b-pmjrhfzzea] {
    display: flex;
    gap: 1px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.barcode-line[b-pmjrhfzzea] {
    height: 100%;
    background: #1e3a5f;
}

.id-card-scanner-icon[b-pmjrhfzzea] {
    position: absolute;
    bottom: -8px;
    left: 16px;
    background: #f5f7fa;
    padding: 4px;
    border-radius: 4px;
    color: #6b7280;
}

/* Bottom Bar */
.device-bottom-bar[b-pmjrhfzzea] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
}

.device-bottom-bar > *[b-pmjrhfzzea] {
    pointer-events: auto;
}

/* Download Circle */
.download-circle[b-pmjrhfzzea] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ffb4a2 0%, #ffc8ba 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 107, 60, 0.3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: -30px;
    margin-left: -30px;
    flex-shrink: 0;
    z-index: 1;
}

.download-circle:hover[b-pmjrhfzzea] {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(255, 107, 60, 0.4);
}

.download-circle svg[b-pmjrhfzzea] {
    color: white;
    width: 40px;
    height: 40px;
}

/* Barcode Input - Centered on the viewport, under the card image */
.barcode-input-container[b-pmjrhfzzea] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 440px;
    z-index: 10;
    pointer-events: auto;
}

.barcode-label[b-pmjrhfzzea] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a5f;
    letter-spacing: 0.01em;
}

.barcode-input-wrap[b-pmjrhfzzea] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.barcode-input-wrap:focus-within[b-pmjrhfzzea] {
    border-color: #4a90d9;
    box-shadow: 0 6px 20px rgba(74, 144, 217, 0.18), 0 0 0 4px rgba(74, 144, 217, 0.12);
}

.barcode-input-icon[b-pmjrhfzzea] {
    color: #4a90d9;
    margin: 0 10px 0 14px;
    flex-shrink: 0;
}

.barcode-input[b-pmjrhfzzea] {
    flex: 1;
    padding: 16px 4px;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: 0.05em;
    min-width: 0;
}

.barcode-input[b-pmjrhfzzea]::placeholder {
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0;
}

.barcode-input:focus[b-pmjrhfzzea] {
    outline: none;
}

.barcode-input-wrap:has(.barcode-input.error)[b-pmjrhfzzea] {
    border-color: #dc3545;
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.18);
}

.barcode-input-camera[b-pmjrhfzzea] {
    background: transparent;
    border: none;
    padding: 10px 14px 10px 10px;
    margin-right: 4px;
    border-radius: 10px;
    color: #4a90d9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.barcode-input-camera:hover[b-pmjrhfzzea] {
    background: #eef4fb;
}

.barcode-input-camera:active[b-pmjrhfzzea] {
    transform: scale(0.95);
}

.barcode-input-camera:disabled[b-pmjrhfzzea] {
    opacity: 0.4;
    cursor: not-allowed;
}

.barcode-error[b-pmjrhfzzea] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc3545;
    margin-top: 2px;
    padding: 0 4px;
}

/* Floating Action Button Container */
.fab-container[b-pmjrhfzzea] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 1;
}

/* FAB Menu */
.fab-menu[b-pmjrhfzzea] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fab-menu.open[b-pmjrhfzzea] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Individual FAB Items */
.fab-item[b-pmjrhfzzea] {
    width: 48px;
    height: 48px;
    background: #4a90d9;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.fab-item:hover[b-pmjrhfzzea] {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(74, 144, 217, 0.5);
    background: #3a7bc8;
}

.fab-item.with-label[b-pmjrhfzzea] {
    width: auto;
    border-radius: 24px;
    padding: 0 16px 0 12px;
    gap: 8px;
}

.fab-label[b-pmjrhfzzea] {
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    background: #4b5563;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    margin-right: 8px;
}

/* Main FAB Button */
.fab-main[b-pmjrhfzzea] {
    width: 56px;
    height: 56px;
    background: #e85a4f;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 16px rgba(232, 90, 79, 0.4);
    transition: transform 0.3s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-radius 0.3s ease;
    position: relative;
}

.fab-main:hover[b-pmjrhfzzea] {
    box-shadow: 0 6px 20px rgba(232, 90, 79, 0.5);
}

.fab-main.open[b-pmjrhfzzea] {
    border-radius: 28px;
    padding: 0 20px 0 12px;
    width: auto;
}

.fab-main.open .fab-label[b-pmjrhfzzea] {
    background: #4b5563;
    margin-right: 8px;
}

.fab-main .fab-icon[b-pmjrhfzzea] {
    transition: transform 0.3s ease;
}

.fab-main.open .fab-icon[b-pmjrhfzzea] {
    transform: rotate(90deg);
}

/* Animation delays for staggered appearance */
.fab-menu.open .fab-item:nth-child(1)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.05s;
}

.fab-menu.open .fab-item:nth-child(2)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.1s;
}

.fab-menu.open .fab-item:nth-child(3)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.15s;
}

.fab-menu.open .fab-item:nth-child(4)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.2s;
}

.fab-menu.open .fab-item:nth-child(5)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.25s;
}

.fab-menu.open .fab-item:nth-child(6)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.3s;
}

.fab-menu.open .fab-item:nth-child(7)[b-pmjrhfzzea] {
    animation: fabItemIn-b-pmjrhfzzea 0.3s ease forwards;
    animation-delay: 0.35s;
}

@keyframes fabItemIn-b-pmjrhfzzea {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Timer button active state */
.fab-item.active[b-pmjrhfzzea] {
    background: #28a745;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.fab-item.active:hover[b-pmjrhfzzea] {
    background: #218838;
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.5);
}

/* Timer Modal */
.modal-overlay[b-pmjrhfzzea] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.timer-modal[b-pmjrhfzzea] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.timer-modal-icon[b-pmjrhfzzea] {
    margin-bottom: 1rem;
}

.timer-modal-title[b-pmjrhfzzea] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 1rem 0;
}

.timer-modal-message[b-pmjrhfzzea] {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.btn-timer-ok[b-pmjrhfzzea] {
    padding: 0.75rem 2.5rem;
    background: #4a90d9;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-timer-ok:hover[b-pmjrhfzzea] {
    background: #3a7bc8;
}

/* Scanner Modal */
.scanner-overlay[b-pmjrhfzzea] {
    background: rgba(0, 0, 0, 0.75);
}

.scanner-modal[b-pmjrhfzzea] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.scanner-modal-header[b-pmjrhfzzea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.scanner-modal-header h3[b-pmjrhfzzea] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e3a5f;
}

.scanner-close[b-pmjrhfzzea] {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-close:hover[b-pmjrhfzzea] {
    background: #f1f5f9;
    color: #1e3a5f;
}

.scanner-modal-body[b-pmjrhfzzea] {
    padding: 1rem 1.25rem 0;
}

.scanner-hint[b-pmjrhfzzea] {
    margin: 0 0 0.75rem;
    color: #475569;
    font-size: 0.95rem;
    text-align: center;
}

.scanner-error[b-pmjrhfzzea] {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.scanner-stage[b-pmjrhfzzea] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

/* Keeps the <video> element in the DOM (so ZXing can bind to it) while visually hidden. */
.scanner-stage.scanner-stage-offscreen[b-pmjrhfzzea] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    aspect-ratio: auto;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.scanner-video[b-pmjrhfzzea] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scanner-frame[b-pmjrhfzzea] {
    position: absolute;
    inset: 18% 8%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.scanner-modal-footer[b-pmjrhfzzea] {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.btn-scanner-cancel[b-pmjrhfzzea],
.btn-scanner-change[b-pmjrhfzzea] {
    padding: 0.65rem 1.6rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-scanner-cancel[b-pmjrhfzzea] {
    background: #e5e7eb;
    color: #1e3a5f;
}

.btn-scanner-cancel:hover[b-pmjrhfzzea] {
    background: #cbd5e1;
}

.btn-scanner-change[b-pmjrhfzzea] {
    background: transparent;
    color: #4a90d9;
    border: 1px solid #cbd5e1;
}

.btn-scanner-change:hover[b-pmjrhfzzea] {
    background: #eef4fb;
    border-color: #4a90d9;
}

/* Loading state */
.scanner-loading[b-pmjrhfzzea] {
    padding: 2rem 0.5rem;
    text-align: center;
    color: #475569;
}

.scanner-loading p[b-pmjrhfzzea] {
    margin: 0.75rem 0 0;
    font-size: 1rem;
}

.scanner-spinner[b-pmjrhfzzea] {
    width: 38px;
    height: 38px;
    border: 3px solid #e5e7eb;
    border-top-color: #4a90d9;
    border-radius: 50%;
    margin: 0 auto;
    animation: scanner-spin-b-pmjrhfzzea 0.9s linear infinite;
}

@keyframes scanner-spin-b-pmjrhfzzea {
    to {
        transform: rotate(360deg);
    }
}

/* Camera picker */
.scanner-camera-picker[b-pmjrhfzzea] {
    padding: 0.25rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scanner-picker-title[b-pmjrhfzzea] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e3a5f;
    text-align: center;
}

.scanner-picker-empty[b-pmjrhfzzea] {
    margin: 0;
    color: #64748b;
    text-align: center;
    font-size: 0.95rem;
}

.scanner-camera-option[b-pmjrhfzzea] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: white;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #1e3a5f;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.08s ease;
}

.scanner-camera-option:hover[b-pmjrhfzzea] {
    border-color: #4a90d9;
    background: #f8fbff;
}

.scanner-camera-option:active[b-pmjrhfzzea] {
    transform: scale(0.99);
}

.scanner-camera-option svg[b-pmjrhfzzea] {
    color: #4a90d9;
    flex-shrink: 0;
}

.scanner-picker-footnote[b-pmjrhfzzea] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .device-bottom-bar[b-pmjrhfzzea] {
        padding: 1rem;
    }

    .download-circle[b-pmjrhfzzea] {
        width: 80px;
        height: 80px;
        margin-bottom: -20px;
        margin-left: -20px;
    }

    .download-circle svg[b-pmjrhfzzea] {
        width: 28px;
        height: 28px;
    }

    .barcode-input-container[b-pmjrhfzzea] {
        left: 50%;
        margin: 0 1rem;
        max-width: calc(100vw - 2rem);
    }

    .barcode-input[b-pmjrhfzzea] {
        font-size: 1.2rem;
        padding: 14px 4px;
    }

    .id-card-camera-badge[b-pmjrhfzzea] {
        width: 36px;
        height: 36px;
    }

    .scanner-modal[b-pmjrhfzzea] {
        max-width: 100%;
        border-radius: 12px;
    }
}
/* /Components/Pages/DeviceAccount.razor.rz.scp.css */
.back-link[b-xjd2c0byjt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-xjd2c0byjt] {
    transform: translateY(1px);
}

.panel-header-row[b-xjd2c0byjt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-xjd2c0byjt] {
    flex: 1;
}

.panel-header-actions h2[b-xjd2c0byjt] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-xjd2c0byjt] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-buttons[b-xjd2c0byjt] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Device Account container */
.device-account-container[b-xjd2c0byjt] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Status message */
.status-message[b-xjd2c0byjt] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-message.success[b-xjd2c0byjt] {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.status-message.error[b-xjd2c0byjt] {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.status-message.warning[b-xjd2c0byjt] {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
}

.btn-close-status[b-xjd2c0byjt] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.btn-close-status:hover[b-xjd2c0byjt] {
    opacity: 1;
}

/* Search Panel - Animated */
.search-panel[b-xjd2c0byjt] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-xjd2c0byjt] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-xjd2c0byjt] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-xjd2c0byjt] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-xjd2c0byjt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-xjd2c0byjt] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-xjd2c0byjt] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-xjd2c0byjt] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-xjd2c0byjt] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-xjd2c0byjt] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.device-account-toolbar[b-xjd2c0byjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-xjd2c0byjt] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-xjd2c0byjt] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-xjd2c0byjt] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-xjd2c0byjt],
.toolbar-buttons .btn-outline-primary.active[b-xjd2c0byjt] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-xjd2c0byjt] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-xjd2c0byjt] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-xjd2c0byjt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-xjd2c0byjt] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-xjd2c0byjt] {
    opacity: 0.5;
}

.pagination-info[b-xjd2c0byjt] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.device-account-table[b-xjd2c0byjt] {
    width: 100%;
    border-collapse: collapse;
}

.device-account-table thead th[b-xjd2c0byjt] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.device-account-table tbody tr[b-xjd2c0byjt] {
    border-bottom: 1px solid #f0f0f0;
}

.device-account-table tbody tr:hover[b-xjd2c0byjt] {
    background-color: #f8f9fa;
}

.device-account-table tbody tr.table-active[b-xjd2c0byjt] {
    background-color: #e7f1ff;
}

.device-account-table tbody td[b-xjd2c0byjt] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

/* Modal styles */
.modal-backdrop[b-xjd2c0byjt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-xjd2c0byjt] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 450px;
    max-width: 90%;
}

.modal-dialog.modal-lg[b-xjd2c0byjt] {
    min-width: 550px;
    max-width: 600px;
}

.modal-header[b-xjd2c0byjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h4[b-xjd2c0byjt] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
}

.btn-close[b-xjd2c0byjt] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-xjd2c0byjt] {
    color: #000;
}

.modal-body[b-xjd2c0byjt] {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* Form rows in modal */
.form-row[b-xjd2c0byjt] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.form-row .form-label[b-xjd2c0byjt] {
    min-width: 130px;
    font-weight: 500;
    color: #212529;
    margin: 0;
    text-align: left;
}

.form-row .form-control[b-xjd2c0byjt],
.form-row .form-select[b-xjd2c0byjt] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.95rem;
    background-color: white;
}

.form-row .form-control:focus[b-xjd2c0byjt],
.form-row .form-select:focus[b-xjd2c0byjt] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Radio button group */
.radio-group[b-xjd2c0byjt] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.radio-option[b-xjd2c0byjt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #212529;
}

.radio-option input[type="radio"][b-xjd2c0byjt] {
    display: none;
}

.radio-circle[b-xjd2c0byjt] {
    width: 20px;
    height: 20px;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
}

.radio-circle.checked[b-xjd2c0byjt] {
    background: #0d6efd;
}

.radio-circle.checked[b-xjd2c0byjt]::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Password input with toggle */
.password-input-group[b-xjd2c0byjt] {
    display: flex;
    flex: 1;
    position: relative;
}

.password-input-group .form-control[b-xjd2c0byjt] {
    flex: 1;
    padding-right: 40px;
}

.password-toggle[b-xjd2c0byjt] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover[b-xjd2c0byjt] {
    color: #495057;
}

.modal-footer[b-xjd2c0byjt] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

.modal-footer .btn-success[b-xjd2c0byjt] {
    background-color: #198754;
    border-color: #198754;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
}

.modal-footer .btn-success:hover[b-xjd2c0byjt] {
    background-color: #157347;
    border-color: #146c43;
}

.modal-footer .btn-outline-danger[b-xjd2c0byjt] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
}

.modal-footer .btn-outline-danger:hover[b-xjd2c0byjt] {
    background-color: #ff6b3c;
    color: white;
}
/* /Components/Pages/DeviceSelectComponent.razor.rz.scp.css */
/* Select Component Page Container */
.select-component-container[b-4r25tkhnx4] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding: 1rem;
}

/* Back Bar */
.back-bar[b-4r25tkhnx4] {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-link[b-4r25tkhnx4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #ff6b3c;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: opacity 0.2s ease;
}

.back-link:hover[b-4r25tkhnx4] {
    opacity: 0.8;
}

/* Inactivity Timer Display */
.inactivity-timer-display[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ffb74d;
    border-radius: 20px;
    color: #e65100;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: pulse-timer-b-4r25tkhnx4 2s ease-in-out infinite;
}

.inactivity-timer-display svg[b-4r25tkhnx4] {
    color: #e65100;
    flex-shrink: 0;
}

@keyframes pulse-timer-b-4r25tkhnx4 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Page Header */
.page-header[b-4r25tkhnx4] {
    margin-bottom: 1.5rem;
}

.page-title[b-4r25tkhnx4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 0.5rem 0;
}

.area-title[b-4r25tkhnx4] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0;
}

/* Tab Container - Segmented button style to match old app */
.tab-container[b-4r25tkhnx4] {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.tab-button[b-4r25tkhnx4] {
    flex: 1;
    padding: 0.625rem 1.5rem;
    border: none;
    background: white;
    color: #1e3a5f;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tab-button:first-child[b-4r25tkhnx4] {
    border-right: 1px solid #d1d5db;
}

.tab-button:hover:not(.active)[b-4r25tkhnx4] {
    background: #f9fafb;
}

.tab-button.active[b-4r25tkhnx4] {
    background: white;
    color: #1e3a5f;
    border-bottom: 2px solid #1e3a5f;
}

/* Loading Container */
.loading-container[b-4r25tkhnx4] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

/* Component Grid */
.component-grid[b-4r25tkhnx4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Component Card */
.component-card[b-4r25tkhnx4] {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.component-card:hover[b-4r25tkhnx4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* A card that can neither drill down nor be reported has no click action — don't invite a tap. */
.component-card.non-interactive[b-4r25tkhnx4] {
    cursor: default;
}

.component-card.non-interactive:hover[b-4r25tkhnx4] {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.component-uin[b-4r25tkhnx4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ff6b3c;
    text-transform: uppercase;
}

.component-title[b-4r25tkhnx4] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e3a5f;
    line-height: 1.3;
    /* Reserve two lines so single- and double-line titles keep the image (and everything
       below it) at the same height across a row. */
    min-height: 2.6em;
}

.component-image[b-4r25tkhnx4] {
    height: 120px;
    background: #f5f7fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Never let the fixed-height image shrink when a card is taller than its row peers. */
    flex-shrink: 0;
}

.component-image img[b-4r25tkhnx4] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.component-image.no-image[b-4r25tkhnx4] {
    color: #d1d5db;
}

.component-actions[b-4r25tkhnx4] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    /* Pin the buttons to the bottom of the (equal-height) card so they line up across a row
       regardless of how many lines the title wraps to. */
    margin-top: auto;
}

/* Search Part Button */
.search-part-button[b-4r25tkhnx4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #4a90d9;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-part-button:hover[b-4r25tkhnx4] {
    background: #3a7bc8;
}

/* Report Item Button */
.report-item-button[b-4r25tkhnx4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #ff6b3c;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.report-item-button:hover[b-4r25tkhnx4] {
    background: #e85a2c;
}

/* No Components */
.no-components[b-4r25tkhnx4] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

/* Search Container - Match old app styling */
.search-container[b-4r25tkhnx4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-panel[b-4r25tkhnx4] {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.search-label[b-4r25tkhnx4] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e3a5f;
    text-align: center;
    margin-bottom: 0.75rem;
}

.search-input-group[b-4r25tkhnx4] {
    display: flex;
    gap: 0.5rem;
}

.search-input[b-4r25tkhnx4] {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus[b-4r25tkhnx4] {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
}

.search-input[b-4r25tkhnx4]::placeholder {
    color: #9ca3af;
}

/* Hide search button for cleaner look matching old app */
.search-button[b-4r25tkhnx4] {
    padding: 0.75rem 1.25rem;
    background: #4a90d9;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: none; /* Hidden by default to match old app minimal style */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

/* Modal Overlay */
.modal-overlay[b-4r25tkhnx4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* Modal Content */
.modal-content[b-4r25tkhnx4] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.modal-title[b-4r25tkhnx4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 1.5rem 0;
}

.modal-uin[b-4r25tkhnx4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ff6b3c;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.modal-component-title[b-4r25tkhnx4] {
    font-size: 1rem;
    font-weight: 500;
    color: #1e3a5f;
    margin-bottom: 1.5rem;
}

/* Amount Section */
.amount-section[b-4r25tkhnx4] {
    margin-bottom: 1.5rem;
}

.amount-label[b-4r25tkhnx4] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.amount-input-group[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.amount-button[b-4r25tkhnx4] {
    width: 40px;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.amount-button:hover:not(:disabled)[b-4r25tkhnx4] {
    background: #f5f7fa;
    border-color: #9ca3af;
}

.amount-button:disabled[b-4r25tkhnx4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.amount-input[b-4r25tkhnx4] {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e3a5f;
}

.amount-input:focus[b-4r25tkhnx4] {
    outline: none;
    border-color: #4a90d9;
}

/* Hide number input spinners */
.amount-input[b-4r25tkhnx4]::-webkit-outer-spin-button,
.amount-input[b-4r25tkhnx4]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amount-input[type=number][b-4r25tkhnx4] {
    -moz-appearance: textfield;
}

/* Unit-of-measure hint shown when the selected UIN has a conversion factor */
.amount-unit[b-4r25tkhnx4] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.amount-base-equivalent[b-4r25tkhnx4] {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Select Button */
.select-button[b-4r25tkhnx4] {
    width: 100%;
    padding: 0.875rem;
    background: #ff6b3c;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.select-button:hover:not(:disabled)[b-4r25tkhnx4] {
    background: #e85a2c;
}

.select-button:disabled[b-4r25tkhnx4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Define Cause Modal */
.define-cause-modal[b-4r25tkhnx4] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.define-cause-back[b-4r25tkhnx4] {
    margin-bottom: 1rem;
}

.define-cause-title[b-4r25tkhnx4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 1.5rem 0;
}

.no-suppliers-text[b-4r25tkhnx4] {
    color: #64748b;
    font-size: 0.95rem;
    text-align: center;
    margin: 1rem 0 0 0;
}

/* Scrap Reasons List */
.scrap-reasons-list[b-4r25tkhnx4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.scrap-reason-item[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.scrap-reason-item:hover[b-4r25tkhnx4] {
    background: #f9fafb;
}

.scrap-reason-item.selected[b-4r25tkhnx4] {
    background: #eff6ff;
    border-color: #4a90d9;
}

/* Other Text Accordion - placed below the scrap reasons list */
.other-text-accordion[b-4r25tkhnx4] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-bottom 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
}

.other-text-accordion.expanded[b-4r25tkhnx4] {
    max-height: 180px;
    opacity: 1;
    margin-bottom: 1rem;
}

.other-text-content[b-4r25tkhnx4] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
}

.other-text-label[b-4r25tkhnx4] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

.other-text-input[b-4r25tkhnx4] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    min-height: 70px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.other-text-input:focus[b-4r25tkhnx4] {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
}

.other-text-input[b-4r25tkhnx4]::placeholder {
    color: #9ca3af;
}

.other-text-counter[b-4r25tkhnx4] {
    text-align: right;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.radio-circle[b-4r25tkhnx4] {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.radio-circle.checked[b-4r25tkhnx4] {
    border-color: #4a90d9;
}

.radio-inner[b-4r25tkhnx4] {
    width: 10px;
    height: 10px;
    background: #4a90d9;
    border-radius: 50%;
}

.scrap-reason-name[b-4r25tkhnx4] {
    font-size: 0.9rem;
    color: #1e3a5f;
}

.no-scrap-reasons[b-4r25tkhnx4] {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

/* Print Multi Label Section */
.print-multi-label-section[b-4r25tkhnx4] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.print-multi-label-title[b-4r25tkhnx4] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e3a5f;
    margin-bottom: 0.75rem;
}

.print-multi-label-options[b-4r25tkhnx4] {
    display: flex;
    gap: 1.5rem;
}

.radio-option[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4b5563;
}

/* Define Cause Actions */
.define-cause-actions[b-4r25tkhnx4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.start-again-button[b-4r25tkhnx4] {
    padding: 0.75rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.start-again-button:hover[b-4r25tkhnx4] {
    background: #f9fafb;
}

.report-another-button[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #4a90d9;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.report-another-button:hover[b-4r25tkhnx4] {
    background: #3a7bc8;
}

.confirm-close-button[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #28a745;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.confirm-close-button:hover:not(:disabled)[b-4r25tkhnx4] {
    background: #218838;
}

.confirm-close-button:disabled[b-4r25tkhnx4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* SAP Transaction Modal */
.sap-transaction-modal[b-4r25tkhnx4] {
    text-align: center;
    max-width: 450px;
}

.sap-icon[b-4r25tkhnx4] {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.sap-modal-title[b-4r25tkhnx4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0 0 1rem 0;
}

.sap-modal-message[b-4r25tkhnx4] {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.sap-report-info[b-4r25tkhnx4] {
    font-size: 0.9rem;
    color: #6b7280;
    background: #f9fafb;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0 0 1.25rem 0;
}

/* SAP Results Details */
.sap-results-details[b-4r25tkhnx4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.sap-result-item[b-4r25tkhnx4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.sap-result-item.success[b-4r25tkhnx4] {
    border-color: #d1fae5;
    background: #f0fdf4;
}

.sap-result-item.error[b-4r25tkhnx4] {
    border-color: #fecaca;
    background: #fef2f2;
}

.sap-result-label[b-4r25tkhnx4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
}

.sap-result-value[b-4r25tkhnx4] {
    font-size: 0.85rem;
}

.sap-idoc[b-4r25tkhnx4] {
    font-family: 'Consolas', 'Monaco', monospace;
    color: #059669;
    font-weight: 500;
}

.sap-error-text[b-4r25tkhnx4] {
    color: #dc2626;
    font-weight: 500;
}

.sap-modal-actions[b-4r25tkhnx4] {
    display: flex;
    justify-content: center;
}

.btn-sap-ok[b-4r25tkhnx4] {
    padding: 0.75rem 2.5rem;
    background: #28a745;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-sap-ok:hover[b-4r25tkhnx4] {
    background: #218838;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .component-grid[b-4r25tkhnx4] {
        grid-template-columns: 1fr;
    }

    .define-cause-actions[b-4r25tkhnx4] {
        flex-direction: column;
    }
}
/* /Components/Pages/Documentation.razor.rz.scp.css */
.documentation-page[b-e7zjnjfxos] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.doc-selector-container[b-e7zjnjfxos] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 4rem 2rem;
    min-height: 400px;
}

.doc-selector-card[b-e7zjnjfxos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 280px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 2rem;
}

.doc-selector-card:hover[b-e7zjnjfxos] {
    border-color: #2563eb;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
    transform: translateY(-4px);
}

.doc-selector-logo[b-e7zjnjfxos] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.doc-selector-logo img[b-e7zjnjfxos] {
    max-width: 220px;
    max-height: 160px;
    object-fit: contain;
}

.doc-selector-name[b-e7zjnjfxos] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #334155;
    margin-top: 1rem;
}
/* /Components/Pages/DocumentationCompany.razor.rz.scp.css */
.doc-company-page[b-w34rx2snzj] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* ===== Search Bar ===== */
.doc-search-bar[b-w34rx2snzj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 1rem 0 0 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.doc-search-bar:focus-within[b-w34rx2snzj] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.doc-search-input[b-w34rx2snzj] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: #334155;
    background: transparent;
}

.doc-search-input[b-w34rx2snzj]::placeholder {
    color: #94a3b8;
}

.doc-search-clear[b-w34rx2snzj] {
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.doc-search-clear:hover[b-w34rx2snzj] {
    color: #475569;
}

/* ===== Card Grid ===== */
.doc-card-grid[b-w34rx2snzj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0;
}

.doc-card[b-w34rx2snzj] {
    position: relative;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.doc-card:hover[b-w34rx2snzj] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* ===== Card Preview ===== */
.doc-card-preview[b-w34rx2snzj] {
    height: 200px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.doc-card-preview img[b-w34rx2snzj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PDF card preview - clean icon style */
.doc-card-pdf-preview[b-w34rx2snzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.doc-card-pdf-icon-wrapper[b-w34rx2snzj] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-card-pdf-badge[b-w34rx2snzj] {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

.doc-card-pdf-name[b-w34rx2snzj] {
    font-size: 0.75rem;
    color: #94a3b8;
    max-width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-card-file-icon[b-w34rx2snzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
}

.doc-card-pdf-label[b-w34rx2snzj] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e74c3c;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ===== Card Info ===== */
.doc-card-info[b-w34rx2snzj] {
    padding: 1rem;
}

.doc-card-title[b-w34rx2snzj] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-card-description[b-w34rx2snzj] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.doc-card-meta[b-w34rx2snzj] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94a3b8;
}

.doc-card-meta span[b-w34rx2snzj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* ===== Card Actions (hover overlay) ===== */
.doc-card-actions[b-w34rx2snzj] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 4px;
    z-index: 10;
}

.doc-card:hover .doc-card-actions[b-w34rx2snzj] {
    display: flex;
}

.doc-card-action-btn[b-w34rx2snzj] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: all 0.15s ease;
}

.doc-card-action-btn:hover[b-w34rx2snzj] {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.doc-card-action-delete:hover[b-w34rx2snzj] {
    color: #dc3545;
}

/* ===== Empty State ===== */
.doc-empty-state[b-w34rx2snzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #94a3b8;
    gap: 1rem;
}

.doc-empty-state p[b-w34rx2snzj] {
    font-size: 1rem;
    margin: 0;
}

/* ===== Upload Dropzone ===== */
.doc-dropzone[b-w34rx2snzj] {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
    min-height: 120px;
}

.doc-dropzone:hover[b-w34rx2snzj] {
    border-color: #2563eb;
    background: #eff6ff;
}

.doc-dropzone.drag-over[b-w34rx2snzj] {
    border-color: #2563eb;
    background: #dbeafe;
    border-style: solid;
}

.doc-dropzone.has-file[b-w34rx2snzj] {
    border-color: #10b981;
    background: #f0fdf4;
    border-style: solid;
}

.doc-dropzone-inner[b-w34rx2snzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 0.25rem;
    color: #64748b;
    text-align: center;
}

.doc-dropzone-inner p[b-w34rx2snzj] {
    margin: 0;
    font-size: 0.9rem;
}

.doc-browse-link[b-w34rx2snzj] {
    color: #2563eb;
    font-weight: 500;
    cursor: pointer;
}

.doc-dropzone-subtext[b-w34rx2snzj] {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
}

.doc-dropzone-file[b-w34rx2snzj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    font-size: 0.9rem;
    color: #334155;
}

.doc-dropzone-clear[b-w34rx2snzj] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

.doc-dropzone-clear:hover[b-w34rx2snzj] {
    color: #dc3545;
}

/* InputFile is hidden via inline style to avoid scoped CSS issues with Blazor components */

/* ===== File Viewer Lightbox ===== */
.doc-viewer-backdrop[b-w34rx2snzj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.doc-viewer-container[b-w34rx2snzj] {
    background: #fff;
    border-radius: 8px;
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.doc-viewer-header[b-w34rx2snzj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #f8f9fa;
}

.doc-viewer-title[b-w34rx2snzj] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.doc-viewer-title span:first-child[b-w34rx2snzj] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-viewer-filename[b-w34rx2snzj] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.doc-viewer-actions[b-w34rx2snzj] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.doc-viewer-btn[b-w34rx2snzj] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: all 0.15s ease;
    text-decoration: none;
}

.doc-viewer-btn:hover[b-w34rx2snzj] {
    background: #e9ecef;
    color: #1e293b;
}

.doc-viewer-content[b-w34rx2snzj] {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.doc-viewer-iframe[b-w34rx2snzj] {
    width: 100%;
    height: 100%;
    border: none;
}

.doc-viewer-image[b-w34rx2snzj] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Custom thumbnail on card preview */
.doc-card-thumbnail[b-w34rx2snzj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnail upload controls in modals */
.form-hint[b-w34rx2snzj] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 0.5rem;
}

.thumbnail-upload-btn[b-w34rx2snzj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f8f9fa;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.thumbnail-upload-btn:hover[b-w34rx2snzj] {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

.thumbnail-preview-row[b-w34rx2snzj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
}

.thumbnail-preview-row.thumbnail-removed[b-w34rx2snzj] {
    opacity: 0.6;
    border-style: dashed;
}

.thumbnail-preview-img[b-w34rx2snzj] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.thumbnail-preview-info[b-w34rx2snzj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #495057;
}
/* /Components/Pages/EmailConfiguration.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-md9tt6jzny] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-md9tt6jzny] {
    transform: translateY(1px);
}

.panel-header-row[b-md9tt6jzny] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-md9tt6jzny] {
    flex: 1;
}

.panel-header-actions h2[b-md9tt6jzny] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-md9tt6jzny] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-test[b-md9tt6jzny] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.panel-header-test .btn-outline-success[b-md9tt6jzny] {
    color: #198754;
    border: 1px solid #198754;
    background: white;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
}

.panel-header-test .btn-outline-success:hover[b-md9tt6jzny] {
    color: white;
    background: #198754;
}

.test-result[b-md9tt6jzny] {
    font-size: 0.85rem;
    max-width: 400px;
}

.test-success[b-md9tt6jzny] {
    color: #198754;
}

.test-error[b-md9tt6jzny] {
    color: #dc3545;
}

/* Container */
.email-config-container[b-md9tt6jzny] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* ===== Modal ===== */
.modal-backdrop[b-md9tt6jzny] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-md9tt6jzny] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    animation: modalSlideIn-b-md9tt6jzny 0.2s ease-out;
}

.modal-wide[b-md9tt6jzny] {
    max-width: 540px;
}

@keyframes modalSlideIn-b-md9tt6jzny {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-md9tt6jzny] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal-title[b-md9tt6jzny] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.btn-close[b-md9tt6jzny] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
}

.btn-close:hover[b-md9tt6jzny] {
    color: #475569;
}

.modal-body[b-md9tt6jzny] {
    padding: 1.5rem;
}

/* ===== Wizard Tabs ===== */
.modal-wizard-tabs[b-md9tt6jzny] {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}

.wizard-tab[b-md9tt6jzny] {
    flex: 1;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: default;
    transition: all 0.15s;
}

.wizard-tab.active[b-md9tt6jzny] {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: white;
}

.wizard-tab.completed[b-md9tt6jzny] {
    color: #64748b;
    cursor: pointer;
}

.wizard-tab.completed:hover[b-md9tt6jzny] {
    color: #2563eb;
    background: #f0f4ff;
}

/* ===== Form Fields ===== */
.modal-section-title[b-md9tt6jzny] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.modal-section-description[b-md9tt6jzny] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.form-group[b-md9tt6jzny] {
    margin-bottom: 1rem;
}

.form-label[b-md9tt6jzny] {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
}

.form-label .required[b-md9tt6jzny] {
    color: #e74c3c;
}

.form-control[b-md9tt6jzny] {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1e293b;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus[b-md9tt6jzny] {
    border-color: #2563eb;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control[b-md9tt6jzny]::placeholder {
    color: #94a3b8;
}

/* Password field */
.password-input-wrapper[b-md9tt6jzny] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-control[b-md9tt6jzny] {
    padding-right: 2.5rem;
}

.password-toggle[b-md9tt6jzny] {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.password-toggle:hover[b-md9tt6jzny] {
    color: #475569;
}

/* Checkbox rows */
.form-check-row[b-md9tt6jzny] {
    margin-bottom: 0.75rem;
}

.form-check-label[b-md9tt6jzny] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #1e293b;
    cursor: pointer;
}

.form-check-input[b-md9tt6jzny] {
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
    cursor: pointer;
}

/* ===== Settings Action Bar ===== */
.settings-action-bar[b-md9tt6jzny] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.btn-settings-action[b-md9tt6jzny] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid #2563eb;
    border-radius: 6px;
    background: white;
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-settings-action:hover[b-md9tt6jzny] {
    background: #eff6ff;
}

.btn-settings-danger[b-md9tt6jzny] {
    border-color: #dc2626;
    color: #dc2626;
}

.btn-settings-danger:hover[b-md9tt6jzny] {
    background: #fef2f2;
}

/* ===== Modal Footer ===== */
.modal-footer[b-md9tt6jzny] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.modal-footer-split[b-md9tt6jzny] {
    justify-content: space-between;
}

.btn-cancel[b-md9tt6jzny] {
    background-color: white;
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel:hover[b-md9tt6jzny] {
    background-color: #f1f5f9;
    color: #334155;
    border-color: #94a3b8;
}

.btn-primary-blue[b-md9tt6jzny] {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-primary-blue:hover:not(:disabled)[b-md9tt6jzny] {
    background-color: #1d4ed8;
}

.btn-primary-blue:disabled[b-md9tt6jzny] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Alerts ===== */
.alert[b-md9tt6jzny] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.alert-danger[b-md9tt6jzny] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.mt-3[b-md9tt6jzny] {
    margin-top: 1rem;
}

/* ===== Search Panel ===== */
.search-panel[b-md9tt6jzny] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-md9tt6jzny] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-md9tt6jzny] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-md9tt6jzny] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-md9tt6jzny] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-md9tt6jzny] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-md9tt6jzny] {
    width: 200px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.search-actions[b-md9tt6jzny] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-md9tt6jzny] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* ===== Toolbar ===== */
.email-config-toolbar[b-md9tt6jzny] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-md9tt6jzny] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-md9tt6jzny] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-md9tt6jzny] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-md9tt6jzny],
.toolbar-buttons .btn-outline-primary.active[b-md9tt6jzny] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-primary:disabled[b-md9tt6jzny] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toolbar-buttons .btn-outline-primary:disabled:hover[b-md9tt6jzny] {
    color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning[b-md9tt6jzny] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-md9tt6jzny] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning:disabled[b-md9tt6jzny] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toolbar-buttons .btn-outline-warning:disabled:hover[b-md9tt6jzny] {
    color: #ff6b3c;
    background: white;
}

.toolbar-pagination[b-md9tt6jzny] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-md9tt6jzny] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
    cursor: pointer;
}

.toolbar-pagination .btn:disabled[b-md9tt6jzny] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-md9tt6jzny] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* ===== Table ===== */
.email-config-table[b-md9tt6jzny] {
    width: 100%;
    border-collapse: collapse;
}

.email-config-table thead th[b-md9tt6jzny] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.email-config-table tbody tr[b-md9tt6jzny] {
    border-bottom: 1px solid #f0f0f0;
}

.email-config-table tbody tr:hover[b-md9tt6jzny] {
    background-color: #f8f9fa;
}

.email-config-table tbody tr.table-active[b-md9tt6jzny] {
    background-color: #e7f1ff;
}

.email-config-table tbody td[b-md9tt6jzny] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

/* Badges */
.badge-active[b-md9tt6jzny] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
}

.badge-inactive[b-md9tt6jzny] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
}

/* Utility */
.text-center[b-md9tt6jzny] {
    text-align: center;
}

.text-muted[b-md9tt6jzny] {
    color: #6c757d;
}

.p-4[b-md9tt6jzny] {
    padding: 1.5rem;
}

.spinner-border-sm[b-md9tt6jzny] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.me-1[b-md9tt6jzny] {
    margin-right: 0.25rem;
}

.btn-outline-danger[b-md9tt6jzny] {
    color: #ff6b3c;
    border: 1px solid #ff6b3c;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-outline-danger:hover[b-md9tt6jzny] {
    color: white;
    background-color: #ff6b3c;
}

/* OAuth success banner */
.oauth-success-banner[b-md9tt6jzny] {
    background-color: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Client ID row */
.client-id-row[b-md9tt6jzny] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.client-id-row .form-control[b-md9tt6jzny] {
    flex: 1;
    background-color: #f8f9fa;
    color: #6c757d;
}

.btn-edit-config[b-md9tt6jzny] {
    border: none;
    background: none;
    color: #2563eb;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
}

.btn-edit-config:hover[b-md9tt6jzny] {
    text-decoration: underline;
}

/* Re-authorize button */
.btn-reauthorize[b-md9tt6jzny] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #16a34a;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 1.25rem;
    transition: background-color 0.15s;
}

.btn-reauthorize:hover[b-md9tt6jzny] {
    background-color: #15803d;
}

/* Narrow modal for warning dialogs */
.modal-narrow[b-md9tt6jzny] {
    max-width: 420px;
}

/* Passbolt icon in password field */
.passbolt-icon[b-md9tt6jzny] {
    color: #94a3b8;
}

.passbolt-icon:hover[b-md9tt6jzny] {
    color: #64748b;
}

/* Toggle switch for enable/disable */
.toggle-switch[b-md9tt6jzny] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.toggle-switch input[b-md9tt6jzny] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-md9tt6jzny] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 20px;
}

.toggle-slider[b-md9tt6jzny]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider[b-md9tt6jzny] {
    background-color: #0d9488;
}

.toggle-switch input:checked + .toggle-slider[b-md9tt6jzny]:before {
    transform: translateX(16px);
}

.toggle-switch input:focus + .toggle-slider[b-md9tt6jzny] {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}
/* /Components/Pages/EmailTemplates.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-q7b9fsh6nd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-q7b9fsh6nd] {
    transform: translateY(1px);
}

.panel-header-row[b-q7b9fsh6nd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-left h2[b-q7b9fsh6nd] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-q7b9fsh6nd] {
    color: #7c8b95;
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.btn-outline-options[b-q7b9fsh6nd] {
    color: #ff6b3c;
    border: 1px solid #ff6b3c;
    background: white;
    padding: 0.4rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-outline-options:hover[b-q7b9fsh6nd] {
    color: white;
    background-color: #ff6b3c;
}

/* Container */
.email-templates-container[b-q7b9fsh6nd] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.loading-container[b-q7b9fsh6nd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: #6c757d;
}

/* Search Panel */
.search-panel[b-q7b9fsh6nd] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-q7b9fsh6nd] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-q7b9fsh6nd] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-q7b9fsh6nd] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-q7b9fsh6nd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-q7b9fsh6nd] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-q7b9fsh6nd] {
    width: 180px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-q7b9fsh6nd] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-q7b9fsh6nd] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-q7b9fsh6nd] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.templates-toolbar[b-q7b9fsh6nd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-q7b9fsh6nd] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-q7b9fsh6nd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.375rem 0.85rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.toolbar-buttons .btn-outline-primary[b-q7b9fsh6nd] {
    color: #0d6efd;
    border-color: #0d6efd;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-q7b9fsh6nd],
.toolbar-buttons .btn-outline-primary.active[b-q7b9fsh6nd] {
    color: white;
    background-color: #0d6efd;
}

.toolbar-buttons .btn-outline-success[b-q7b9fsh6nd] {
    color: #198754;
    border-color: #198754;
    background: white;
}

.toolbar-buttons .btn-outline-success:hover[b-q7b9fsh6nd] {
    color: white;
    background-color: #198754;
}

.toolbar-buttons .btn-outline-danger[b-q7b9fsh6nd] {
    color: #dc3545;
    border-color: #dc3545;
    background: white;
}

.toolbar-buttons .btn-outline-danger:hover[b-q7b9fsh6nd] {
    color: white;
    background-color: #dc3545;
}

.toolbar-buttons .btn-outline-warning[b-q7b9fsh6nd] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-q7b9fsh6nd] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn:disabled[b-q7b9fsh6nd] {
    opacity: 0.5;
    cursor: default;
}

.toolbar-pagination[b-q7b9fsh6nd] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-q7b9fsh6nd] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-q7b9fsh6nd] {
    opacity: 0.5;
}

.pagination-info[b-q7b9fsh6nd] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.templates-table[b-q7b9fsh6nd] {
    width: 100%;
    border-collapse: collapse;
}

.templates-table thead th[b-q7b9fsh6nd] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.templates-table thead th.sortable[b-q7b9fsh6nd] {
    cursor: pointer;
    user-select: none;
}

.templates-table thead th.sortable:hover[b-q7b9fsh6nd] {
    background-color: #f8f9fa;
}

.sort-indicator[b-q7b9fsh6nd] {
    margin-left: 0.35rem;
    font-size: 0.65rem;
}

.templates-table tbody tr[b-q7b9fsh6nd] {
    border-bottom: 1px solid #f0f0f0;
}

.templates-table tbody tr:hover[b-q7b9fsh6nd] {
    background-color: #f8f9fa;
}

.templates-table tbody tr.table-active[b-q7b9fsh6nd] {
    background-color: #e7f1ff;
}

.templates-table tbody td[b-q7b9fsh6nd] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

/* Modal */
.modal-overlay[b-q7b9fsh6nd] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog[b-q7b9fsh6nd] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 900px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
}

.modal-fullheight[b-q7b9fsh6nd] {
    max-height: 90vh;
}

.modal-header[b-q7b9fsh6nd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 3px solid #2563eb;
    flex-shrink: 0;
}

.modal-title[b-q7b9fsh6nd] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-title-name[b-q7b9fsh6nd] {
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 1rem;
}

.btn-close[b-q7b9fsh6nd] {
    border: none;
    background: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

.btn-close:hover[b-q7b9fsh6nd] {
    color: #475569;
}

.modal-body[b-q7b9fsh6nd] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer[b-q7b9fsh6nd] {
    display: flex;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.modal-footer-split[b-q7b9fsh6nd] {
    justify-content: space-between;
}

/* Form elements */
.form-group[b-q7b9fsh6nd] {
    margin-bottom: 1rem;
}

.form-label[b-q7b9fsh6nd] {
    display: block;
    font-size: 0.85rem;
    color: #334155;
    margin-bottom: 0.3rem;
}

.fw-bold[b-q7b9fsh6nd] {
    font-weight: 600;
}

.form-control[b-q7b9fsh6nd] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #1e293b;
}

.form-control:focus[b-q7b9fsh6nd] {
    border-color: #2563eb;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.form-control-half[b-q7b9fsh6nd] {
    max-width: 50%;
}

.form-hint[b-q7b9fsh6nd] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    line-height: 1.5;
}

.required[b-q7b9fsh6nd] {
    color: #dc2626;
}

/* Link toggle */
.btn-link-toggle[b-q7b9fsh6nd] {
    border: none;
    background: none;
    color: #2563eb;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0.5rem;
}

.btn-link-toggle:hover[b-q7b9fsh6nd] {
    text-decoration: underline;
}

.toccbcc-fields[b-q7b9fsh6nd] {
    padding: 0.75rem 0;
}

/* Radio groups */
.radio-group[b-q7b9fsh6nd] {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

.radio-label[b-q7b9fsh6nd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #1e293b;
    cursor: pointer;
}

.radio-label input[type="radio"][b-q7b9fsh6nd] {
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
}

/* Section titles */
.section-title[b-q7b9fsh6nd] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 1.25rem 0 0.75rem 0;
}

/* Content tabs */
.content-tabs[b-q7b9fsh6nd] {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1rem;
}

.content-tab[b-q7b9fsh6nd] {
    border: none;
    background: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.content-tab:hover[b-q7b9fsh6nd] {
    color: #1e293b;
}

.content-tab.active[b-q7b9fsh6nd] {
    color: #1e293b;
    font-weight: 600;
    border-bottom-color: #1e293b;
}

.content-tab-body[b-q7b9fsh6nd] {
    padding: 0.5rem 0;
}

.html-editor[b-q7b9fsh6nd] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Buttons */
.btn-primary-blue[b-q7b9fsh6nd] {
    background: #2563eb;
    color: white;
    border: 1px solid #2563eb;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-primary-blue:hover[b-q7b9fsh6nd] {
    background: #1d4ed8;
}

.btn-cancel[b-q7b9fsh6nd] {
    background: white;
    color: #2563eb;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-cancel:hover[b-q7b9fsh6nd] {
    background: #f8fafc;
}

.form-check-label[b-q7b9fsh6nd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #1e293b;
    cursor: pointer;
}

.form-check-input[b-q7b9fsh6nd] {
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
}

/* ===== Email Preview ===== */
.email-preview-frame[b-q7b9fsh6nd] {
    width: 100%;
    min-height: 500px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
}

/* ===== Placeholder Table ===== */
.placeholder-table[b-q7b9fsh6nd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.placeholder-table th[b-q7b9fsh6nd] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.placeholder-table td[b-q7b9fsh6nd] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.placeholder-table tr:hover td[b-q7b9fsh6nd] {
    background: #f8fafc;
}

.placeholder-token[b-q7b9fsh6nd] {
    background: #f0f4ff;
    color: #1a3a5c;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.82rem;
    cursor: pointer;
    user-select: all;
    white-space: nowrap;
}

.placeholder-token:hover[b-q7b9fsh6nd] {
    background: #dbeafe;
}

.source-cell[b-q7b9fsh6nd] {
    color: #64748b;
    font-size: 0.82rem;
}

.btn-delete-sm[b-q7b9fsh6nd] {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    opacity: 0.6;
}

.btn-delete-sm:hover[b-q7b9fsh6nd] {
    opacity: 1;
}

/* ===== Add Placeholder Form ===== */
.placeholder-add-form[b-q7b9fsh6nd] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
}

.placeholder-add-row[b-q7b9fsh6nd] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.placeholder-add-actions[b-q7b9fsh6nd] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.btn-sm[b-q7b9fsh6nd] {
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
}
/* /Components/Pages/Employee.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-e584f63892] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-e584f63892] {
    transform: translateY(1px);
}

.panel-header-row[b-e584f63892] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    position: relative;
}

.panel-header-actions[b-e584f63892] {
    flex: 1;
}

.panel-header-actions h2[b-e584f63892] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-e584f63892] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-buttons[b-e584f63892] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Options Button Container - ensures dropdown appears below button */
.options-button-container[b-e584f63892] {
    position: relative;
}

/* Options Dropdown */
.options-dropdown-backdrop[b-e584f63892] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.options-dropdown[b-e584f63892] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 180px;
}

.dropdown-item[b-e584f63892] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: #212529;
}

.dropdown-item:hover[b-e584f63892] {
    background: #f8f9fa;
}

.dropdown-item svg[b-e584f63892] {
    flex-shrink: 0;
}

/* Modal */
.modal-backdrop[b-e584f63892] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.modal-dialog[b-e584f63892] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1055;
    width: 100%;
    max-width: 600px;
}

.modal-content[b-e584f63892] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-header[b-e584f63892] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-e584f63892] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.btn-close[b-e584f63892] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
}

.btn-close[b-e584f63892]::before {
    content: '�';
}

.modal-body[b-e584f63892] {
    padding: 1.5rem;
}

.modal-body .form-group[b-e584f63892] {
    margin-bottom: 1rem;
}

.modal-body .form-label[b-e584f63892] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #212529;
}

.modal-body .form-control[b-e584f63892] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-body .form-control:focus[b-e584f63892] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-body .form-select[b-e584f63892] {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    appearance: none;
}

.modal-body .radio-group[b-e584f63892] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.modal-body .radio-option[b-e584f63892] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.modal-body .radio-circle[b-e584f63892] {
    width: 18px;
    height: 18px;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-body .radio-circle.checked[b-e584f63892] {
    background-color: #0d6efd;
}

.modal-body .radio-circle.checked[b-e584f63892]::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}

.modal-footer[b-e584f63892] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Save button - green solid */
.modal-footer .btn-save[b-e584f63892] {
    background-color: #28a745;
    border: 1px solid #28a745;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-save:hover[b-e584f63892] {
    background-color: #218838;
    border-color: #1e7e34;
}

.modal-footer .btn-save:disabled[b-e584f63892] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Cancel button - orange/coral outlined */
.modal-footer .btn-cancel[b-e584f63892] {
    background-color: white;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.modal-footer .btn-cancel:hover[b-e584f63892] {
    background-color: #ff6b3c;
    color: white;
}

.alert[b-e584f63892] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

.alert-danger[b-e584f63892] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.mt-3[b-e584f63892] {
    margin-top: 1rem;
}

.json-preview[b-e584f63892] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.75rem;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Employees container */
.employees-container[b-e584f63892] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-e584f63892] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-e584f63892] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-e584f63892] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-e584f63892] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-e584f63892] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-e584f63892] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-e584f63892] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-e584f63892] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-e584f63892] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-e584f63892] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.employees-toolbar[b-e584f63892] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-e584f63892] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-e584f63892] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-e584f63892] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-e584f63892],
.toolbar-buttons .btn-outline-primary.active[b-e584f63892] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-e584f63892] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-e584f63892] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-e584f63892] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-e584f63892] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-e584f63892] {
    opacity: 0.5;
}

.pagination-info[b-e584f63892] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.employees-table[b-e584f63892] {
    width: 100%;
    border-collapse: collapse;
}

.employees-table thead th[b-e584f63892] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.employees-table tbody tr[b-e584f63892] {
    border-bottom: 1px solid #f0f0f0;
}

.employees-table tbody tr:hover[b-e584f63892] {
    background-color: #f8f9fa;
}

.employees-table tbody tr.table-active[b-e584f63892] {
    background-color: #e7f1ff;
}

.employees-table tbody td[b-e584f63892] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.employees-table tbody td a[b-e584f63892] {
    color: #0d6efd;
    text-decoration: none;
}

.employees-table tbody td a:hover[b-e584f63892] {
    text-decoration: underline;
}
/* /Components/Pages/EntraComplete.razor.rz.scp.css */
.entra-status[b-fe02khprpk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    color: #555;
    font-size: 0.95rem;
}

.entra-spinner[b-fe02khprpk] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #0078d4;
    border-radius: 50%;
    animation: entra-spin-b-fe02khprpk 0.8s linear infinite;
}

@keyframes entra-spin-b-fe02khprpk {
    to { transform: rotate(360deg); }
}

.entra-error[b-fe02khprpk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
    text-align: center;
}

.entra-error h3[b-fe02khprpk] {
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.entra-error p[b-fe02khprpk] {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
/* Feedback Page Styles */
.feedback-page[b-vvt0dzensc] {
    max-width: 100%;
    padding: 0 1.5rem;
}

.feedback-header[b-vvt0dzensc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #163a49;
}

.feedback-header h2[b-vvt0dzensc] {
    margin: 0;
    font-size: 1.5rem;
    color: #163a49;
    font-weight: 700;
}

/* Form card */
.feedback-form-card[b-vvt0dzensc] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.form-row[b-vvt0dzensc] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0;
}

.form-row .form-group[b-vvt0dzensc] {
    flex: 1;
}

.form-group[b-vvt0dzensc] {
    margin-bottom: 1rem;
}

.form-group label[b-vvt0dzensc] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

.required[b-vvt0dzensc] {
    color: #dc2626;
}

.form-group select[b-vvt0dzensc],
.form-group input[b-vvt0dzensc],
.form-group textarea[b-vvt0dzensc] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: white;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group select:focus[b-vvt0dzensc],
.form-group input:focus[b-vvt0dzensc],
.form-group textarea:focus[b-vvt0dzensc] {
    outline: none;
    border-color: #ff6b3c;
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.2);
}

.form-group textarea[b-vvt0dzensc] {
    resize: vertical;
    min-height: 120px;
}

.form-actions[b-vvt0dzensc] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.btn-submit[b-vvt0dzensc] {
    padding: 0.625rem 2rem;
    background: #ff6b3c;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit:hover:not(:disabled)[b-vvt0dzensc] {
    background: #e55a2d;
}

.btn-submit:disabled[b-vvt0dzensc] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success message */
.feedback-success[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    color: #166534;
    font-weight: 500;
}

.btn-new-feedback[b-vvt0dzensc] {
    margin-left: auto;
    padding: 0.375rem 1rem;
    background: white;
    color: #16a34a;
    border: 1px solid #16a34a;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-new-feedback:hover[b-vvt0dzensc] {
    background: #f0fdf4;
}

/* Error message */
.feedback-error[b-vvt0dzensc] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    margin-bottom: 1rem;
    color: #dc2626;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Admin section */
.feedback-admin-section[b-vvt0dzensc] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #163a49;
}

.feedback-admin-header[b-vvt0dzensc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.feedback-admin-header h3[b-vvt0dzensc] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
    font-weight: 700;
}

.btn-refresh[b-vvt0dzensc] {
    padding: 0.375rem 1rem;
    background: white;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh:hover[b-vvt0dzensc] {
    background: #fff5f0;
}

.feedback-admin-actions[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export-pdf[b-vvt0dzensc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 1rem;
    background: #163a49;
    color: white;
    border: 2px solid #163a49;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export-pdf:hover:not(:disabled)[b-vvt0dzensc] {
    background: #1f5066;
    border-color: #1f5066;
}

.btn-export-pdf:disabled[b-vvt0dzensc] {
    opacity: 0.6;
    cursor: default;
}

.btn-export-pdf svg[b-vvt0dzensc] {
    flex-shrink: 0;
}

.feedback-filters[b-vvt0dzensc] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.feedback-filter-group[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.feedback-filter-group label[b-vvt0dzensc] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.feedback-filter-group select[b-vvt0dzensc],
.feedback-filter-group input[type="search"][b-vvt0dzensc] {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    color: #1e293b;
}

.feedback-filter-group select[b-vvt0dzensc] {
    cursor: pointer;
}

.feedback-filter-search input[type="search"][b-vvt0dzensc] {
    min-width: 240px;
}

.feedback-empty-text[b-vvt0dzensc] {
    color: #9ca3af;
    font-size: 0.95rem;
    text-align: center;
    padding: 2rem;
}

/* Feedback table */
.feedback-table-container[b-vvt0dzensc] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.feedback-table[b-vvt0dzensc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.feedback-table thead th[b-vvt0dzensc] {
    background: #f9fafb;
    padding: 0.75rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.feedback-table tbody tr[b-vvt0dzensc] {
    transition: background-color 0.15s ease;
}

.feedback-table tbody tr:hover[b-vvt0dzensc] {
    background: #f9fafb;
}

.feedback-table td[b-vvt0dzensc] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.feedback-table .col-date[b-vvt0dzensc] {
    white-space: nowrap;
    width: 140px;
}

.feedback-table .col-description[b-vvt0dzensc] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-table td select[b-vvt0dzensc] {
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8rem;
    background: white;
}

/* Priority badges */
.priority-badge[b-vvt0dzensc] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-low[b-vvt0dzensc] {
    background: #dbeafe;
    color: #1e40af;
}

.priority-medium[b-vvt0dzensc] {
    background: #fef3c7;
    color: #92400e;
}

.priority-high[b-vvt0dzensc] {
    background: #fee2e2;
    color: #991b1b;
}

/* Status badges */
.status-badge[b-vvt0dzensc] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge-open[b-vvt0dzensc] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge-in-review[b-vvt0dzensc] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge-in-progress[b-vvt0dzensc] {
    background: #e0e7ff;
    color: #3730a3;
}

.status-badge-closed[b-vvt0dzensc] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge-backlog[b-vvt0dzensc] {
    background: #ede9fe;
    color: #5b21b6;
}

/* ========== File Upload (Evidence Pattern) ========== */
.evidence-container[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef0f4;
}

.evidence-header[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.evidence-title[b-vvt0dzensc] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
}

.evidence-add-link[b-vvt0dzensc] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    transition: color 0.15s ease;
    user-select: none;
}

.evidence-add-link:hover[b-vvt0dzensc] {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.evidence-upload-section[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: evidenceSlideIn-b-vvt0dzensc 0.2s ease-out;
}

@keyframes evidenceSlideIn-b-vvt0dzensc {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.evidence-dropzone[b-vvt0dzensc] {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
}

.evidence-dropzone:hover[b-vvt0dzensc] {
    border-color: #2563eb;
    background: #eff6ff;
}

.evidence-dropzone.drag-over[b-vvt0dzensc] {
    border-color: #2563eb;
    background: #dbeafe;
    border-style: solid;
    transform: scale(1.003);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.evidence-dropzone-inner[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    gap: 0.35rem;
    pointer-events: none;
}

.evidence-upload-icon[b-vvt0dzensc] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eff6ff;
    border: 2px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    margin-bottom: 0.15rem;
    transition: all 0.25s ease;
}

.evidence-dropzone:hover .evidence-upload-icon[b-vvt0dzensc] {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
}

.evidence-dropzone.drag-over .evidence-upload-icon[b-vvt0dzensc] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: translateY(-3px);
}

.evidence-upload-text[b-vvt0dzensc] {
    font-size: 0.825rem;
    color: #475569;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.evidence-browse-link[b-vvt0dzensc] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    pointer-events: auto;
    cursor: pointer;
}

.evidence-upload-subtext[b-vvt0dzensc] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

[b-vvt0dzensc] .evidence-input-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.evidence-progress-bar[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.evidence-progress-track[b-vvt0dzensc] {
    flex: 1;
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.evidence-progress-fill[b-vvt0dzensc] {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px;
    animation: evidenceProgressIndeterminate-b-vvt0dzensc 1.5s ease-in-out infinite;
    width: 40%;
}

@keyframes evidenceProgressIndeterminate-b-vvt0dzensc {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

.evidence-progress-text[b-vvt0dzensc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
}

.evidence-toast[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.775rem;
    font-weight: 500;
    animation: evidenceSlideIn-b-vvt0dzensc 0.3s ease;
}

.evidence-toast.toast-success[b-vvt0dzensc] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.evidence-toast.toast-error[b-vvt0dzensc] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.evidence-files[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.evidence-file-row[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    background: #fff;
    transition: all 0.15s ease;
    margin-bottom: 0.35rem;
}

.evidence-file-row:hover[b-vvt0dzensc] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.evidence-file-thumb[b-vvt0dzensc] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-file-thumb img[b-vvt0dzensc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evidence-file-icon[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.evidence-file-info[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.evidence-file-name[b-vvt0dzensc] {
    font-size: 0.825rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evidence-file-meta[b-vvt0dzensc] {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.evidence-file-actions[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.evidence-action-btn[b-vvt0dzensc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    padding: 0;
}

.evidence-action-btn:hover[b-vvt0dzensc] {
    background: #e2e8f0;
    color: #1e293b;
}

.evidence-action-delete:hover[b-vvt0dzensc] {
    background: #fee2e2;
    color: #dc2626;
}

.evidence-file-thumb-clickable[b-vvt0dzensc] {
    cursor: pointer;
    transition: all 0.15s ease;
}

.evidence-file-thumb-clickable:hover[b-vvt0dzensc] {
    box-shadow: 0 0 0 2px #2563eb;
}

/* Lightbox */
.evidence-lightbox-overlay[b-vvt0dzensc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: lightboxFadeIn-b-vvt0dzensc 0.2s ease-out;
    backdrop-filter: blur(4px);
}

@keyframes lightboxFadeIn-b-vvt0dzensc {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.evidence-lightbox-content[b-vvt0dzensc] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    animation: lightboxScaleIn-b-vvt0dzensc 0.25s ease-out;
}

@keyframes lightboxScaleIn-b-vvt0dzensc {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.evidence-lightbox-image[b-vvt0dzensc] {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background: #fff;
}

.evidence-lightbox-close[b-vvt0dzensc] {
    position: absolute;
    top: -44px;
    right: -4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.evidence-lightbox-close:hover[b-vvt0dzensc] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Admin files */
.admin-files-cell[b-vvt0dzensc] {
    padding: 0.5rem 0.75rem !important;
    background: #f9fafb;
}

.file-count-link[b-vvt0dzensc] {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.no-files[b-vvt0dzensc] {
    color: #9ca3af;
}

@media (max-width: 768px) {
    .form-row[b-vvt0dzensc] {
        flex-direction: column;
        gap: 0;
    }

    .evidence-dropzone-inner[b-vvt0dzensc] {
        padding: 1.25rem 0.75rem;
    }

    .evidence-file-thumb[b-vvt0dzensc] {
        width: 40px;
        height: 40px;
    }
}

/* ===== Collapsible Form ===== */
.feedback-form-collapse-header[b-vvt0dzensc] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    margin-bottom: 0;
}

.feedback-form-collapse-header:hover[b-vvt0dzensc] {
    background: #f0f4f8;
}

.feedback-form-collapse-title[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #163a49;
}

.feedback-form-chevron[b-vvt0dzensc] {
    transition: transform 0.25s ease;
    color: #64748b;
}

.feedback-form-chevron.open[b-vvt0dzensc] {
    transform: rotate(180deg);
}

.feedback-form-card[b-vvt0dzensc] {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease, border-width 0.3s ease;
    opacity: 1;
}

.feedback-form-card.collapsed[b-vvt0dzensc] {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
}

/* ===== Feedback Detail Modal ===== */
.feedback-row-clickable[b-vvt0dzensc] {
    cursor: pointer;
}

.feedback-row-clickable:hover[b-vvt0dzensc] {
    background: #f0f9ff !important;
}

.fb-modal-overlay[b-vvt0dzensc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.fb-modal-dialog[b-vvt0dzensc] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 620px;
    max-height: 85vh;
    overflow-y: auto;
    animation: fbModalIn-b-vvt0dzensc 0.2s ease-out;
}

@keyframes fbModalIn-b-vvt0dzensc {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fb-modal-header[b-vvt0dzensc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fb-modal-header-content[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fb-modal-header h5[b-vvt0dzensc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.fb-modal-close[b-vvt0dzensc] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
}

.fb-modal-close:hover[b-vvt0dzensc] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.fb-modal-body[b-vvt0dzensc] {
    padding: 1.25rem;
}

.fb-detail-title[b-vvt0dzensc] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #163a49;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.fb-detail-badges[b-vvt0dzensc] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.fb-detail-category-badge[b-vvt0dzensc] {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}

.fb-detail-grid[b-vvt0dzensc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.fb-detail-field[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fb-detail-label[b-vvt0dzensc] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    font-weight: 600;
}

.fb-detail-value[b-vvt0dzensc] {
    font-size: 0.875rem;
    color: #1e293b;
}

.fb-detail-section[b-vvt0dzensc] {
    margin-bottom: 1rem;
}

.fb-detail-description[b-vvt0dzensc] {
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.7;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    white-space: pre-wrap;
}

/* Attachments in detail modal */
.fb-detail-files[b-vvt0dzensc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.fb-detail-file-thumb[b-vvt0dzensc] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.fb-detail-file-thumb:hover[b-vvt0dzensc] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fb-detail-file-link[b-vvt0dzensc] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #3b82f6;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background 0.15s;
}

.fb-detail-file-link:hover[b-vvt0dzensc] {
    background: #eff6ff;
}

/* ===== Comments ===== */
.fb-comment-count-badge[b-vvt0dzensc] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.fb-comments-empty[b-vvt0dzensc] {
    font-size: 0.825rem;
    color: #94a3b8;
    font-style: italic;
    margin-top: 0.4rem;
}

.fb-comments-list[b-vvt0dzensc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
    margin-bottom: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.fb-comment[b-vvt0dzensc] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
}

.fb-comment-meta[b-vvt0dzensc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.fb-comment-author[b-vvt0dzensc] {
    font-weight: 600;
    color: #1e293b;
}

.fb-comment-date[b-vvt0dzensc] {
    color: #94a3b8;
}

.fb-comment-text[b-vvt0dzensc] {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
}

.fb-comment-form[b-vvt0dzensc] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fb-comment-form textarea[b-vvt0dzensc] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    background: white;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
}

.fb-comment-form textarea:focus[b-vvt0dzensc] {
    outline: none;
    border-color: #ff6b3c;
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.2);
}

.fb-comment-form-actions[b-vvt0dzensc] {
    display: flex;
    justify-content: flex-end;
}

/* Comment attachment styles */
.comment-attachment-area[b-vvt0dzensc] {
    margin-top: 0.5rem;
}

.comment-attach-link[b-vvt0dzensc] {
    color: #ff6b3c;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.comment-attach-link:hover[b-vvt0dzensc] {
    color: #e55a2b;
    text-decoration: underline;
}

.comment-upload-section[b-vvt0dzensc] {
    margin: 0.5rem 0;
}

.comment-file-input[b-vvt0dzensc] {
    display: block;
    font-size: 0.85rem;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.comment-upload-status[b-vvt0dzensc] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.comment-upload-message[b-vvt0dzensc] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.comment-upload-message.success[b-vvt0dzensc] {
    color: #16a34a;
    background: #f0fdf4;
}

.comment-upload-message.error[b-vvt0dzensc] {
    color: #dc2626;
    background: #fef2f2;
}

.comment-staged-files[b-vvt0dzensc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.comment-staged-file[b-vvt0dzensc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.8rem;
}

.comment-staged-thumb[b-vvt0dzensc] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.comment-staged-name[b-vvt0dzensc] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
}

.comment-remove-file[b-vvt0dzensc] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 1.1rem;
    line-height: 1;
}

.comment-remove-file:hover[b-vvt0dzensc] {
    color: #dc2626;
}

/* Comment attachment display */
.fb-comment-attachments[b-vvt0dzensc] {
    margin-top: 0.5rem;
}

.fb-comment-files[b-vvt0dzensc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fb-comment-file-thumb[b-vvt0dzensc] {
    max-width: 200px;
    max-height: 150px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.fb-comment-file-thumb:hover[b-vvt0dzensc] {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Page padding */
.dashboard[b-m5o4u0ex2f] {
    padding: 1.5rem 1.25rem;
    background-color: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.dashboard-header[b-m5o4u0ex2f] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.dashboard-header h2[b-m5o4u0ex2f] {
    margin: 0;
    font-size: 1.5rem;
    color: #0b3f63;
}

.dashboard-body[b-m5o4u0ex2f] {
}

.section[b-m5o4u0ex2f] {
    margin-bottom: 2rem;
}

.section + .section[b-m5o4u0ex2f] {
    margin-top: 1.5rem;
}

.section-title[b-m5o4u0ex2f] {
    margin: 0 0 0.75rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0b3f63;
}

/* Card rows — each row is a simple flex container with exactly 4 slots */
.card-row[b-m5o4u0ex2f] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-row > *[b-m5o4u0ex2f] {
    flex: 1 1 0;
    min-width: 0;
}

/* Invisible placeholder to keep partial rows aligned */
.card-placeholder[b-m5o4u0ex2f] {
    visibility: hidden;
}

/* Card */
.card[b-m5o4u0ex2f] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid #e9ecef;
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.card:hover[b-m5o4u0ex2f] {
    border-color: var(--accent);
    box-shadow: 0 8px 24px var(--accent-shadow);
    transform: translateY(-4px);
}

.card:focus[b-m5o4u0ex2f] {
    outline: 2px solid var(--accent-shadow);
    outline-offset: 2px;
}

/* Top half: pale blue area */
.card-top[b-m5o4u0ex2f] {
    background-color: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    position: relative;
}

.card-top[b-m5o4u0ex2f]::after {
    content: "";
    position: absolute;
    left: -20%;
    top: -10%;
    width: 140%;
    height: 140%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
    transform: rotate(-6deg);
    pointer-events: none;
}

.card-icon svg[b-m5o4u0ex2f] {
    width: 48px;
    height: 48px;
    color: var(--accent);
    stroke: currentColor;
    fill: none;
}

.card-icon svg *[b-m5o4u0ex2f],
.card-icon svg use[b-m5o4u0ex2f] {
    stroke: currentColor !important;
    fill: none !important;
}

.card-icon-img[b-m5o4u0ex2f] {
    width: 48px;
    height: 48px;
    display: block;
}

.card-icon-mask[b-m5o4u0ex2f] {
    width: 48px;
    height: 48px;
    display: block;
    background-color: var(--mask-color, var(--accent));
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Card body */
.card-body[b-m5o4u0ex2f] {
    padding: 1rem;
    background: white;
    flex: 1;
}

.card-meta[b-m5o4u0ex2f] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa8b6;
    margin-bottom: 0.35rem;
    min-height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-title[b-m5o4u0ex2f] {
    font-size: 1.25rem;
    color: var(--accent);
    font-weight: 700;
}

.card-link[b-m5o4u0ex2f] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Responsive */
@media (max-width: 1199px) {
    .card-row[b-m5o4u0ex2f] {
        flex-wrap: wrap;
    }

    .card-row > *[b-m5o4u0ex2f] {
        flex: 1 1 calc(33.333% - 0.75rem);
    }

    .card-placeholder[b-m5o4u0ex2f] {
        display: none;
    }
}

@media (max-width: 899px) {
    .card-row > *[b-m5o4u0ex2f] {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 599px) {
    .card-row > *[b-m5o4u0ex2f] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/ImportPartsCsv.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-nkrqm7ses4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-nkrqm7ses4] {
    transform: translateY(1px);
}

.panel-header-row[b-nkrqm7ses4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-nkrqm7ses4] {
    flex: 1;
}

.panel-header-actions h2[b-nkrqm7ses4] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

/* Import container */
.import-container[b-nkrqm7ses4] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Toolbar */
.import-toolbar[b-nkrqm7ses4] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-nkrqm7ses4] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-buttons .btn[b-nkrqm7ses4] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

/* Upload CSV button - matching the orange filled style */
.toolbar-buttons .btn-upload-csv[b-nkrqm7ses4] {
    color: white;
    border: 1px solid #ff6b3c;
    background: #ff6b3c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-buttons .btn-upload-csv:hover[b-nkrqm7ses4] {
    color: white;
    background-color: #e55a2b;
    border-color: #e55a2b;
}

.toolbar-buttons .btn-outline-warning[b-nkrqm7ses4] {
    color: white;
    border-color: #ff6b3c;
    background: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning:hover[b-nkrqm7ses4] {
    color: white;
    background-color: #e55a2b;
    border-color: #e55a2b;
}

/* Upload button with hidden input */
.upload-btn[b-nkrqm7ses4] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white !important;
    background-color: #ff6b3c !important;
    border-color: #ff6b3c !important;
    border: 1px solid #ff6b3c !important;
}

.upload-btn input[type="file"][b-nkrqm7ses4] {
    display: none;
}

.upload-btn:hover[b-nkrqm7ses4] {
    color: white !important;
    background-color: #e55a2b !important;
    border-color: #e55a2b !important;
}

.upload-btn:disabled[b-nkrqm7ses4] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Progress bar */
.import-progress[b-nkrqm7ses4] {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.progress-info[b-nkrqm7ses4] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
}

.progress[b-nkrqm7ses4] {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-nkrqm7ses4] {
    height: 100%;
    background-color: #ff6b3c;
    transition: width 0.3s ease;
}

/* Alert messages */
.alert[b-nkrqm7ses4] {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.alert-success[b-nkrqm7ses4] {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.alert-warning[b-nkrqm7ses4] {
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    color: #664d03;
}

.alert-dismissible[b-nkrqm7ses4] {
    position: relative;
    padding-right: 3rem;
}

.btn-close[b-nkrqm7ses4] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
}

.btn-close:hover[b-nkrqm7ses4] {
    opacity: 1;
}

.btn-close[b-nkrqm7ses4]::before {
    content: '�';
    font-size: 1.25rem;
    font-weight: bold;
}

/* Loading indicator */
.loading-indicator[b-nkrqm7ses4] {
    display: flex;
    align-items: center;
    padding: 2rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.spinner-border-sm[b-nkrqm7ses4] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* No data message */
.no-data[b-nkrqm7ses4] {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
}

.no-data p[b-nkrqm7ses4] {
    margin: 0.5rem 0;
}

/* Date sections */
.date-sections[b-nkrqm7ses4] {
    margin-bottom: 1rem;
}

.date-section[b-nkrqm7ses4] {
    border-bottom: 1px solid #e9ecef;
}

.date-section-header[b-nkrqm7ses4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: #212529;
    text-align: left;
}

.date-section-header:hover[b-nkrqm7ses4] {
    background-color: #f8f9fa;
}

.date-section-header .chevron[b-nkrqm7ses4] {
    transition: transform 0.2s ease;
    color: #6c757d;
}

.date-section-header .chevron.expanded[b-nkrqm7ses4] {
    transform: rotate(90deg);
}

/* Batch stats in header */
.batch-stats[b-nkrqm7ses4] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.stat-badge[b-nkrqm7ses4] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.stat-total[b-nkrqm7ses4] {
    background-color: #e9ecef;
    color: #495057;
}

.stat-mapped[b-nkrqm7ses4] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.stat-error[b-nkrqm7ses4] {
    background-color: #f8d7da;
    color: #842029;
}

.date-section-content[b-nkrqm7ses4] {
    padding: 1rem 0;
    overflow-x: auto;
}

/* Import Table */
.import-table[b-nkrqm7ses4] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 1200px;
}

/* Header row with column titles */
.import-table thead tr.header-labels th[b-nkrqm7ses4] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: none;
}

.column-header[b-nkrqm7ses4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.column-title[b-nkrqm7ses4] {
    flex: 1;
}

.sort-btn[b-nkrqm7ses4] {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: #0d6efd;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.sort-btn:hover[b-nkrqm7ses4],
.sort-btn.active[b-nkrqm7ses4] {
    opacity: 1;
}

/* Header row with filter inputs */
.import-table thead tr.header-filters th[b-nkrqm7ses4] {
    padding: 0.25rem 0.5rem 0.75rem 0.5rem;
    border-bottom: 2px solid #dee2e6;
}

.filter-input-wrapper[b-nkrqm7ses4] {
    display: flex;
    align-items: center;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    min-width: 70px;
}

.filter-icon[b-nkrqm7ses4] {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    min-width: 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-filter .filter-icon[b-nkrqm7ses4] {
    background: #ff6b3c;
}

.number-filter .filter-icon[b-nkrqm7ses4] {
    background: #ff6b3c;
}

.date-filter .filter-icon[b-nkrqm7ses4] {
    background: #ff6b3c;
}

.date-filter .filter-icon svg[b-nkrqm7ses4] {
    stroke: white;
}

.filter-input[b-nkrqm7ses4] {
    flex: 1;
    border: none;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    outline: none;
    min-width: 0;
    width: 100%;
}

.filter-input:focus[b-nkrqm7ses4] {
    outline: none;
}

/* Select filter */
.select-filter[b-nkrqm7ses4] {
    border: 1px solid #dee2e6;
}

.filter-select[b-nkrqm7ses4] {
    flex: 1;
    border: none;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    outline: none;
    min-width: 0;
    width: 100%;
    background: white;
    cursor: pointer;
}

.filter-select:focus[b-nkrqm7ses4] {
    outline: none;
}

/* Table body */
.import-table tbody tr[b-nkrqm7ses4] {
    border-bottom: 1px solid #f0f0f0;
}

.import-table tbody tr:hover[b-nkrqm7ses4] {
    background-color: #f8f9fa;
}

.import-table tbody td[b-nkrqm7ses4] {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
    white-space: nowrap;
}

/* Row status colors */
.import-table tbody tr.row-error[b-nkrqm7ses4] {
    background-color: #fff5f5;
}

.import-table tbody tr.row-error:hover[b-nkrqm7ses4] {
    background-color: #ffecec;
}

.import-table tbody tr.row-pending[b-nkrqm7ses4] {
    background-color: #fffbeb;
}

.import-table tbody tr.row-pending:hover[b-nkrqm7ses4] {
    background-color: #fff8e0;
}

/* Status badges */
.status-badge[b-nkrqm7ses4] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-mapped[b-nkrqm7ses4] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.status-pending[b-nkrqm7ses4] {
    background-color: #fff3cd;
    color: #664d03;
}

.status-error[b-nkrqm7ses4] {
    background-color: #f8d7da;
    color: #842029;
}

/* Error tooltip */
.error-tooltip[b-nkrqm7ses4] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    cursor: help;
}

/* UIN cell */
.uin-cell[b-nkrqm7ses4] {
    font-family: monospace;
    font-size: 0.8rem;
}

/* Pagination */
.pagination-container[b-nkrqm7ses4] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
}

.toolbar-pagination[b-nkrqm7ses4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-nkrqm7ses4] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.toolbar-pagination .btn:hover:not(:disabled)[b-nkrqm7ses4] {
    color: #212529;
}

.toolbar-pagination .btn:disabled[b-nkrqm7ses4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-nkrqm7ses4] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Spinner animation */
.spinner-border[b-nkrqm7ses4] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-nkrqm7ses4 0.75s linear infinite;
}

@keyframes spinner-border-b-nkrqm7ses4 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .import-table[b-nkrqm7ses4] {
        font-size: 0.8rem;
    }

    .filter-input-wrapper[b-nkrqm7ses4] {
        min-width: 60px;
    }

    .toolbar-buttons[b-nkrqm7ses4] {
        flex-wrap: wrap;
    }

    .batch-stats[b-nkrqm7ses4] {
        display: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login styles live in wwwroot/css/auth.css so the ForgotPassword and
   ResetPassword pages can share them. Razor-scoped CSS is per-component
   and doesn't bleed across files. */
/* /Components/Pages/ManageCatalogueComponents.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-rt6mi54gpe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-rt6mi54gpe] {
    transform: translateY(1px);
}

.panel-header-row[b-rt6mi54gpe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-rt6mi54gpe] {
    flex: 1;
}

.panel-header-actions h2[b-rt6mi54gpe] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.panel-header-actions .muted[b-rt6mi54gpe] {
    color: #7c8b95;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.text-success[b-rt6mi54gpe] {
    color: #198754;
}

.text-warning[b-rt6mi54gpe] {
    color: #fd7e14;
}

.panel-header-buttons[b-rt6mi54gpe] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.btn-outline-success[b-rt6mi54gpe] {
    color: #198754;
    border: 1px solid #198754;
    background: white;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline-success:hover:not(:disabled)[b-rt6mi54gpe] {
    color: white;
    background-color: #198754;
}

.btn-outline-success:disabled[b-rt6mi54gpe] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Main container - two column layout */
.catalogue-components-container[b-rt6mi54gpe] {
    display: flex;
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
    min-height: calc(100vh - 180px);
}

/* Left Panel: Component List */
.component-list-panel[b-rt6mi54gpe] {
    width: fit-content;
    min-width: 300px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
}

.btn-new-component[b-rt6mi54gpe] {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ff6b3c;
    background: white;
    border: 2px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.btn-new-component:hover[b-rt6mi54gpe] {
    background: #ff6b3c;
    color: white;
}

.component-list[b-rt6mi54gpe] {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.loading-indicator[b-rt6mi54gpe] {
    padding: 2rem 1rem;
    text-align: center;
    color: #7c8b95;
    font-size: 0.875rem;
}

/* Tree view item styles */
.component-list-item[b-rt6mi54gpe] {
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: #163a49;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.component-list-item:hover[b-rt6mi54gpe] {
    background-color: rgba(0, 0, 0, 0.05);
}

.component-list-item.selected[b-rt6mi54gpe] {
    font-weight: 700;
    background-color: rgba(22, 58, 73, 0.12);
}

/* Expand/collapse icon */
.expand-icon[b-rt6mi54gpe] {
    font-size: 0.6rem;
    color: #163a49;
    cursor: pointer;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.expand-icon:hover[b-rt6mi54gpe] {
    color: #ff6b3c;
}

.expand-icon-placeholder[b-rt6mi54gpe] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.component-title[b-rt6mi54gpe] {
    flex: 1;
}

.no-components[b-rt6mi54gpe] {
    padding: 2rem 1rem;
    text-align: center;
    color: #7c8b95;
    font-size: 0.875rem;
}

/* Right Panel: Component Details */
.component-details-panel[b-rt6mi54gpe] {
    flex: 1;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.component-details-header[b-rt6mi54gpe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.component-details-header h3[b-rt6mi54gpe] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #163a49;
}

.component-details-actions[b-rt6mi54gpe] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.component-details-actions .btn[b-rt6mi54gpe] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.component-details-actions .btn-danger[b-rt6mi54gpe] {
    color: white;
    background-color: #ff6b3c;
    border-color: #ff6b3c;
}

.component-details-actions .btn-outline-primary[b-rt6mi54gpe] {
    color: #163a49;
    border-color: #163a49;
    background: white;
}

.component-details-actions .btn-outline-primary:hover[b-rt6mi54gpe] {
    background: #163a49;
    color: white;
}

.component-details-content[b-rt6mi54gpe] {
    display: flex;
    gap: 2rem;
    flex: 1;
}

/* Image Section */
.component-image-section[b-rt6mi54gpe] {
    width: 300px;
    flex-shrink: 0;
}

.component-image[b-rt6mi54gpe] {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    background: #f8f9fa;
}

.no-image-placeholder[b-rt6mi54gpe] {
    width: 300px;
    height: 300px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c8b95;
    font-size: 0.875rem;
}

/* Info Section */
.component-info-section[b-rt6mi54gpe] {
    flex: 1;
}

.info-row[b-rt6mi54gpe] {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child[b-rt6mi54gpe] {
    border-bottom: none;
}

.info-label[b-rt6mi54gpe] {
    font-weight: 600;
    color: #163a49;
    width: 180px;
    flex-shrink: 0;
}

.info-value[b-rt6mi54gpe] {
    color: #495057;
}

.no-selection[b-rt6mi54gpe] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #7c8b95;
    font-size: 1rem;
}

/* Modal styles */
.modal-backdrop[b-rt6mi54gpe] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-dialog[b-rt6mi54gpe] {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header[b-rt6mi54gpe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h4[b-rt6mi54gpe] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
}

.modal-body[b-rt6mi54gpe] {
    padding: 1.5rem;
}

.modal-footer[b-rt6mi54gpe] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-close[b-rt6mi54gpe] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
}

.btn-close:hover[b-rt6mi54gpe] {
    color: #163a49;
}

/* Clickable image styles */
.clickable-image[b-rt6mi54gpe] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-image:hover[b-rt6mi54gpe] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Lightbox Modal Styles */
[b-rt6mi54gpe] .lightbox-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: lightbox-fade-in-b-rt6mi54gpe 0.2s ease;
}

@keyframes lightbox-fade-in-b-rt6mi54gpe {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

[b-rt6mi54gpe] .lightbox-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-rt6mi54gpe] .lightbox-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: lightbox-zoom-in-b-rt6mi54gpe 0.3s ease;
}

@keyframes lightbox-zoom-in-b-rt6mi54gpe {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

[b-rt6mi54gpe] .lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rt6mi54gpe] .lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

[b-rt6mi54gpe] .lightbox-caption {
    margin-top: 16px;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    max-width: 90vw;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

/* Search Mode Styles in Modal */
.modal-dialog-large[b-rt6mi54gpe] {
    max-width: 650px;
}

.search-section[b-rt6mi54gpe] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.search-fields-row[b-rt6mi54gpe] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.search-field[b-rt6mi54gpe] {
    flex: 1;
    min-width: 180px;
}

.search-field .form-label[b-rt6mi54gpe] {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: #163a49;
    font-size: 0.875rem;
}

.search-field .form-control[b-rt6mi54gpe] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.875rem;
}

.search-field .form-control:focus[b-rt6mi54gpe] {
    outline: none;
    border-color: #163a49;
    box-shadow: 0 0 0 2px rgba(22, 58, 73, 0.15);
}

.search-buttons[b-rt6mi54gpe] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 1px; /* Align with inputs */
}

.btn-search[b-rt6mi54gpe] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background-color: #198754;
    border: 1px solid #198754;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.btn-search:hover:not(:disabled)[b-rt6mi54gpe] {
    background-color: #157347;
    border-color: #146c43;
}

.btn-search:disabled[b-rt6mi54gpe] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-reset[b-rt6mi54gpe] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ff6b3c;
    background-color: white;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-reset:hover[b-rt6mi54gpe] {
    background-color: #fff5f2;
}

/* Search Results Section */
.search-results-section[b-rt6mi54gpe] {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

.search-results-header[b-rt6mi54gpe] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.625rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.search-results-pagination[b-rt6mi54gpe] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-pagination[b-rt6mi54gpe] {
    width: 28px;
    height: 28px;
    padding: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-pagination:hover:not(:disabled)[b-rt6mi54gpe] {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.btn-pagination:disabled[b-rt6mi54gpe] {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.btn-pagination svg[b-rt6mi54gpe] {
    stroke: #495057;
    width: 12px;
    height: 12px;
}

.pagination-info[b-rt6mi54gpe] {
    font-size: 0.8rem;
    color: #6c757d;
    padding: 0 0.75rem;
    white-space: nowrap;
}

/* Search Results Table */
.search-results-table-container[b-rt6mi54gpe] {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
}

.search-loading[b-rt6mi54gpe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.no-results[b-rt6mi54gpe] {
    padding: 3rem 1.5rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

.search-results-table[b-rt6mi54gpe] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.search-results-table thead[b-rt6mi54gpe] {
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.search-results-table th[b-rt6mi54gpe] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    color: #163a49;
    border-bottom: 2px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    background-color: white;
}

/* Column widths */
.search-results-table th:nth-child(1)[b-rt6mi54gpe],
.search-results-table td:nth-child(1)[b-rt6mi54gpe] {
    width: 55%;
}

.search-results-table th:nth-child(2)[b-rt6mi54gpe],
.search-results-table td:nth-child(2)[b-rt6mi54gpe] {
    width: 25%;
}

.search-results-table th:nth-child(3)[b-rt6mi54gpe],
.search-results-table td:nth-child(3)[b-rt6mi54gpe] {
    width: 20%;
    text-align: right;
}

.search-results-table td[b-rt6mi54gpe] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #495057;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results-table td:nth-child(3)[b-rt6mi54gpe] {
    text-align: right;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}

.search-results-table tbody tr[b-rt6mi54gpe] {
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.search-results-table tbody tr:hover[b-rt6mi54gpe] {
    background-color: #f8f9fa;
}

.search-results-table tbody tr.selected[b-rt6mi54gpe] {
    background-color: #e8f4fd;
}

.search-results-table tbody tr.selected:hover[b-rt6mi54gpe] {
    background-color: #d9edfc;
}

.search-results-table tbody tr.selected td[b-rt6mi54gpe] {
    color: #163a49;
    font-weight: 500;
}

/* Modal Footer adjustments for search mode */
.modal-footer[b-rt6mi54gpe] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: #fafbfc;
}

/* Select Button */
.btn-select[b-rt6mi54gpe] {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background-color: #198754;
    border: 1px solid #198754;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-select:hover:not(:disabled)[b-rt6mi54gpe] {
    background-color: #157347;
    border-color: #146c43;
}

.btn-select:disabled[b-rt6mi54gpe] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-cancel[b-rt6mi54gpe] {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel:hover[b-rt6mi54gpe] {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

/* Save button styling */
.btn-save[b-rt6mi54gpe] {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background-color: #198754;
    border: 1px solid #198754;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-save:hover[b-rt6mi54gpe] {
    background-color: #157347;
    border-color: #146c43;
}
/* /Components/Pages/ManufacturedSource.razor.rz.scp.css */
.back-link[b-yk02qkjyee] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-yk02qkjyee] {
    transform: translateY(1px);
}

.panel-header-row[b-yk02qkjyee] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-yk02qkjyee] {
    flex: 1;
}

.panel-header-actions h2[b-yk02qkjyee] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-yk02qkjyee] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-buttons[b-yk02qkjyee] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Manufactured Source container */
.manufactured-source-container[b-yk02qkjyee] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-yk02qkjyee] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-yk02qkjyee] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-yk02qkjyee] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-yk02qkjyee] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-yk02qkjyee] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-yk02qkjyee] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-yk02qkjyee] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-yk02qkjyee] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-yk02qkjyee] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-yk02qkjyee] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.manufactured-source-toolbar[b-yk02qkjyee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-yk02qkjyee] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-yk02qkjyee] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-yk02qkjyee] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-yk02qkjyee],
.toolbar-buttons .btn-outline-primary.active[b-yk02qkjyee] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-yk02qkjyee] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-yk02qkjyee] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-yk02qkjyee] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-yk02qkjyee] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-yk02qkjyee] {
    opacity: 0.5;
}

.pagination-info[b-yk02qkjyee] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.manufactured-source-table[b-yk02qkjyee] {
    width: 100%;
    border-collapse: collapse;
}

.manufactured-source-table thead th[b-yk02qkjyee] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.manufactured-source-table tbody tr[b-yk02qkjyee] {
    border-bottom: 1px solid #f0f0f0;
}

.manufactured-source-table tbody tr:hover[b-yk02qkjyee] {
    background-color: #f8f9fa;
}

.manufactured-source-table tbody tr.table-active[b-yk02qkjyee] {
    background-color: #e7f1ff;
}

.manufactured-source-table tbody td[b-yk02qkjyee] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

/* Modal styles */
.modal-backdrop[b-yk02qkjyee] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-yk02qkjyee] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 450px;
    max-width: 90%;
}

.modal-header[b-yk02qkjyee] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h4[b-yk02qkjyee] {
    margin: 0;
    font-size: 1.25rem;
    color: #163a49;
}

.btn-close[b-yk02qkjyee] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-yk02qkjyee] {
    color: #000;
}

.modal-body[b-yk02qkjyee] {
    padding: 1.5rem;
}

.modal-body .form-label[b-yk02qkjyee] {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
}

.modal-body .form-control[b-yk02qkjyee] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    font-size: 0.95rem;
}

.modal-body .form-control:focus[b-yk02qkjyee] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-footer[b-yk02qkjyee] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

.modal-footer .btn-success[b-yk02qkjyee] {
    background-color: #198754;
    border-color: #198754;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
}

.modal-footer .btn-success:hover[b-yk02qkjyee] {
    background-color: #157347;
    border-color: #146c43;
}

.modal-footer .btn-outline-danger[b-yk02qkjyee] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
}

.modal-footer .btn-outline-danger:hover[b-yk02qkjyee] {
    background-color: #ff6b3c;
    color: white;
}
/* /Components/Pages/NcrAllData.razor.rz.scp.css */
/* Site Filter */
.site-filter-row[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.site-filter[b-7p1or5s51b] {
    flex-shrink: 0;
}

.site-dropdown-wrapper[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border-radius: 25px;
    padding: 0.3rem 0.75rem 0.3rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s;
}

.site-dropdown-wrapper:focus-within[b-7p1or5s51b] {
    border-color: #003366;
}

.site-icon[b-7p1or5s51b] {
    color: #003366;
    flex-shrink: 0;
}

.site-select[b-7p1or5s51b] {
    border: none;
    background: transparent;
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    padding: 0.35rem 1.5rem 0.35rem 0.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    min-width: 140px;
}

.site-select:focus[b-7p1or5s51b] {
    outline: none;
}

.site-select option[b-7p1or5s51b] {
    font-weight: 400;
}

/* Column Chooser */
.col-chooser-th[b-7p1or5s51b] {
    width: 40px;
    min-width: 40px;
    padding: 0.4rem !important;
    vertical-align: top;
    background: #f8f9fa;
    border-bottom: 2px solid #eee;
}

.col-chooser-td[b-7p1or5s51b] {
    width: 40px;
    min-width: 40px;
    padding: 0.4rem !important;
}

.col-chooser-wrapper[b-7p1or5s51b] {
    position: relative;
    display: flex;
    justify-content: center;
}

.col-chooser-btn[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.col-chooser-btn:hover[b-7p1or5s51b] {
    background: #f0f0f0;
    border-color: #ff6b3c;
    color: #ff6b3c;
}

.col-chooser-overlay[b-7p1or5s51b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.col-chooser-popover[b-7p1or5s51b] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 0.5rem 0;
}

.col-chooser-list[b-7p1or5s51b] {
    display: flex;
    flex-direction: column;
}

.col-chooser-item[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.col-chooser-item:hover[b-7p1or5s51b] {
    background: #f8f9fa;
}

.col-chooser-item input[type="checkbox"][b-7p1or5s51b] {
    width: 16px;
    height: 16px;
    accent-color: #ff6b3c;
    cursor: pointer;
    flex-shrink: 0;
}

.col-chooser-item span[b-7p1or5s51b] {
    user-select: none;
}

/* NCR All Data Container */
.ncr-alldata-container[b-7p1or5s51b] {
    padding: 1.5rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.btn-create-ncr[b-7p1or5s51b] {
    background-color: #ff6b3c;
    color: white;
    border: 2px solid #ff6b3c;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-create-ncr:hover[b-7p1or5s51b] {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

/* Loading */
.loading-indicator[b-7p1or5s51b] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

/* Match the rounded-rectangle style of the Create NCR button so all
   primary actions in the header share the same visual rhythm. */
.btn-export-excel[b-7p1or5s51b] {
    background-color: #1a7a3a;
    color: white;
    border: 2px solid #1a7a3a;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-export-excel:hover[b-7p1or5s51b] {
    background-color: #15612e;
    border-color: #15612e;
}

.btn-export-excel:disabled[b-7p1or5s51b] {
    opacity: 0.6;
    cursor: not-allowed;
}

.export-scope-toggle[b-7p1or5s51b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    color: #444;
}

.export-scope-label[b-7p1or5s51b] {
    line-height: 1;
}

.toggle-switch[b-7p1or5s51b] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch input[b-7p1or5s51b] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-7p1or5s51b] {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 22px;
    transition: background 0.25s ease;
}

.toggle-slider[b-7p1or5s51b]::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider[b-7p1or5s51b] {
    background: #1a7a3a;
}

.toggle-switch input:checked + .toggle-slider[b-7p1or5s51b]::before {
    transform: translateX(18px);
}

.btn-reset-dashboard[b-7p1or5s51b] {
    background: none;
    border: none;
    color: #ff6b3c;
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 500;
}

.btn-reset-dashboard:hover[b-7p1or5s51b] {
    text-decoration: underline;
}

/* Top horizontal scrollbar — mirrors the grid's scroll so the user doesn't
   have to scroll to the bottom of the page to find the native scrollbar. */
.data-grid-top-scroll[b-7p1or5s51b] {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin-bottom: 4px;
}

.data-grid-top-scroll-inner[b-7p1or5s51b] {
    height: 1px;
}

/* Data Grid */
.data-grid-container[b-7p1or5s51b] {
    background: white;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ncr-alldata-grid[b-7p1or5s51b] {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
}

.ncr-alldata-grid th[b-7p1or5s51b] {
    background: #f8f9fa;
    padding: 0.6rem 1rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    border-bottom: 2px solid #eee;
    position: relative;
    vertical-align: top;
}

/* Drag-to-reorder header cells. The grab cursor is the affordance; .dragging
   dims the source while .drop-target shows where the drop will land. */
.ncr-alldata-grid th.draggable-th[b-7p1or5s51b] {
    cursor: grab;
}

.ncr-alldata-grid th.draggable-th:active[b-7p1or5s51b] {
    cursor: grabbing;
}

.ncr-alldata-grid th.dragging[b-7p1or5s51b] {
    opacity: 0.45;
}

.ncr-alldata-grid th.drop-target[b-7p1or5s51b] {
    box-shadow: inset 4px 0 0 #ff6b3c;
}

.th-content[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.sort-btn[b-7p1or5s51b] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem;
    color: #ff6b3c;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
}

.sort-btn:hover[b-7p1or5s51b],
.sort-btn.active[b-7p1or5s51b] {
    opacity: 1;
}

/* Filter inputs in header */
.filter-input[b-7p1or5s51b] {
    width: 100%;
}

.filter-input-wrapper[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    overflow: hidden;
    background: white;
}

.filter-input-wrapper .filter-icon[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #ff6b3c;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
}

.filter-input-wrapper .form-control[b-7p1or5s51b] {
    border: none;
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    height: 28px;
    box-shadow: none;
    outline: none;
}

.filter-input-wrapper .form-control:focus[b-7p1or5s51b] {
    box-shadow: none;
    outline: none;
}

/* Date filter */
.date-filter[b-7p1or5s51b] {
    display: flex;
    align-items: center;
}

.date-picker-btn[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #ff6b3c;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
}

.date-picker-btn:hover[b-7p1or5s51b] {
    background: #e55a2b;
}

.date-picker-btn svg[b-7p1or5s51b] {
    stroke: white;
}

/* Filter select (for status dropdown) */
.filter-select[b-7p1or5s51b] {
    border: 1px solid #ff6b3c !important;
    border-radius: 4px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
    height: 28px !important;
    background: white;
    color: #333;
    cursor: pointer;
}

.filter-select:focus[b-7p1or5s51b] {
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.2) !important;
    outline: none !important;
}

/* Clear button inside filter */
.filter-clear-btn[b-7p1or5s51b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #ff6b3c;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
}

.filter-clear-btn:hover[b-7p1or5s51b] {
    background: #e55a2b;
}

.filter-clear-btn svg[b-7p1or5s51b] {
    stroke: white;
}

/* Table body */
.ncr-alldata-grid td[b-7p1or5s51b] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    font-size: 0.875rem;
    color: #555;
    vertical-align: middle;
}

.ncr-alldata-grid tbody tr[b-7p1or5s51b] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.ncr-alldata-grid tbody tr:hover[b-7p1or5s51b] {
    background-color: #f8f9fa;
}

/* No data */
.no-data[b-7p1or5s51b] {
    text-align: center;
    color: #888;
    padding: 2rem 1rem !important;
}

/* Status Badges — same palette as NcrDetail */
.status-badge[b-7p1or5s51b] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.status-triage[b-7p1or5s51b] {
    background-color: #B6193F;
}

.status-initial-containment[b-7p1or5s51b] {
    background-color: #FB4E13;
}

.status-supplier-containment[b-7p1or5s51b] {
    background-color: #FAB600;
    color: #333;
}

.status-root-cause[b-7p1or5s51b] {
    background-color: #F4E11D;
    color: #333;
}

.status-corrective-action[b-7p1or5s51b] {
    background-color: #C1D530;
    color: #333;
}

.status-verification[b-7p1or5s51b] {
    background-color: #0058A5;
}

.status-review[b-7p1or5s51b] {
    background-color: #12A1BF;
}

.status-closed[b-7p1or5s51b] {
    background-color: #009667;
}

.status-rejected[b-7p1or5s51b] {
    background-color: #575756;
}

.status-requires-info[b-7p1or5s51b] {
    background-color: #AEAEAC;
    color: #333;
}

.status-default[b-7p1or5s51b] {
    background-color: #95a5a6;
}

/* RPN Badges */
.rpn-badge[b-7p1or5s51b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

.rpn-red[b-7p1or5s51b] {
    background-color: #C31622;
}

.rpn-orange[b-7p1or5s51b] {
    background-color: #D48425;
}

.rpn-yellow[b-7p1or5s51b] {
    background-color: #ECCD21;
    color: #333;
}

.rpn-zero[b-7p1or5s51b] {
    background-color: #ECCD21;
    color: #333;
}

/* Pagination */
.pagination-container[b-7p1or5s51b] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 0.25rem;
}

.pagination-container .btn[b-7p1or5s51b] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.pagination-container .btn:hover:not(:disabled)[b-7p1or5s51b] {
    color: #212529;
}

.pagination-container .btn:disabled[b-7p1or5s51b] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-7p1or5s51b] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Detail of Issue cell - truncate long text */
.detail-of-issue-cell[b-7p1or5s51b] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Assigned Badges */
.assigned-badge[b-7p1or5s51b] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.assigned-yes[b-7p1or5s51b] {
    background-color: #27ae60;
    color: white;
}

.assigned-no[b-7p1or5s51b] {
    background-color: #95a5a6;
    color: white;
}


@media (max-width: 768px) {
    .ncr-alldata-container[b-7p1or5s51b] {
        padding: 1rem;
    }
}
/* /Components/Pages/NcrDetail.razor.rz.scp.css */
/* NCR Detail Container */
.ncr-detail-container[b-9vgnbatqkn] {
    padding: 0 1.5rem 5rem;
    background: #f5f6fa;
    min-height: 100vh;
}

/* Loading & Not Found */
.loading-indicator[b-9vgnbatqkn] {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.not-found[b-9vgnbatqkn] {
    text-align: center;
    padding: 3rem;
}

.not-found h2[b-9vgnbatqkn] {
    color: #003366;
}

/* Header */
.ncr-detail-header[b-9vgnbatqkn] {
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* Duplicate NCR banner — top-right of the header, links to the original NCR. */
.ncr-duplicate-banner[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border: 1px solid #b9c9f0;
    background: #f4f7fe;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ncr-duplicate-banner:hover[b-9vgnbatqkn] {
    background: #eaf0fc;
    border-color: #94b0ea;
}

.ncr-duplicate-banner-text[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ncr-duplicate-banner-title[b-9vgnbatqkn] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e3a8a;
}

.ncr-duplicate-banner-sub[b-9vgnbatqkn] {
    font-size: 0.85rem;
    color: #3457a6;
}

.ncr-duplicate-banner-icon[b-9vgnbatqkn] {
    color: #1e3a8a;
    flex-shrink: 0;
}

.ncr-detail-header-left[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ncr-detail-title-row[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ncr-detail-title[b-9vgnbatqkn] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #003366;
    margin: 0;
}

.ncr-detail-subtitle[b-9vgnbatqkn] {
    font-size: 0.85rem;
    color: #666;
    font-weight: 400;
}

.ncr-link-icon[b-9vgnbatqkn] {
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.7;
}

.ncr-link-icon:hover[b-9vgnbatqkn] {
    opacity: 1;
}

/* Quality-Manager padlock to unlock a closed NCR for editing. */
.ncr-unlock-btn[b-9vgnbatqkn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Locked: neutral/orange — invites the unlock action. */
.ncr-unlock-btn.locked[b-9vgnbatqkn] {
    border: 1px solid #f0b079;
    background: #fff6ee;
    color: #b85c12;
}

.ncr-unlock-btn.locked:hover[b-9vgnbatqkn] {
    background: #ffe9d6;
    border-color: #e8954a;
}

/* Unlocked: green — signals edit mode is active. */
.ncr-unlock-btn.unlocked[b-9vgnbatqkn] {
    border: 1px solid #8fcf9f;
    background: #eef9f0;
    color: #1f7a3d;
}

.ncr-unlock-btn.unlocked:hover[b-9vgnbatqkn] {
    background: #ddf2e1;
    border-color: #5fb877;
}

/* Status Badges */
.status-badge[b-9vgnbatqkn] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
    width: fit-content;
}

.status-triage[b-9vgnbatqkn] {
    background-color: #B6193F;
}

.status-initial-containment[b-9vgnbatqkn] {
    background-color: #FB4E13;
}

.status-supplier-containment[b-9vgnbatqkn] {
    background-color: #FAB600;
    color: #333;
}

.status-root-cause[b-9vgnbatqkn] {
    background-color: #F4E11D;
    color: #333;
}

.status-corrective-action[b-9vgnbatqkn] {
    background-color: #C1D530;
    color: #333;
}

.status-verification[b-9vgnbatqkn] {
    background-color: #0058A5;
}

.status-review[b-9vgnbatqkn] {
    background-color: #12A1BF;
}

.status-closed[b-9vgnbatqkn] {
    background-color: #009667;
}

.status-rejected[b-9vgnbatqkn] {
    background-color: #575756;
}

.status-requires-info[b-9vgnbatqkn] {
    background-color: #AEAEAC;
    color: #333;
}

.status-default[b-9vgnbatqkn] {
    background-color: #95a5a6;
}

/* Meta Info */
.ncr-detail-meta[b-9vgnbatqkn] {
    display: flex;
    gap: 3rem;
}

.meta-item[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
}

.meta-label[b-9vgnbatqkn] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meta-value[b-9vgnbatqkn] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
}

/* Body Layout */
.ncr-detail-body[b-9vgnbatqkn] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
}

/* Main Content */
.ncr-detail-main[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
}

/* Tabs */
.ncr-detail-tabs[b-9vgnbatqkn] {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
    align-self: center;
}

.ncr-detail-tabs .tab-btn[b-9vgnbatqkn] {
    padding: 0.5rem 1.5rem;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid #dee2e6;
}

.ncr-detail-tabs .tab-btn:last-child[b-9vgnbatqkn] {
    border-right: none;
}

.ncr-detail-tabs .tab-btn:hover[b-9vgnbatqkn] {
    color: #003366;
    background: #f8f9fa;
}

.ncr-detail-tabs .tab-btn.active[b-9vgnbatqkn] {
    color: #003366;
    background: #fff;
    font-weight: 600;
    border-bottom: 2px solid #003366;
}

/* Tab Content */
.ncr-detail-tab-content[b-9vgnbatqkn] {
    min-height: 300px;
}

/* Footer */
.ncr-detail-footer[b-9vgnbatqkn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f6fa;
    z-index: 100;
    border-top: 1px solid #dde0e6;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.footer-left[b-9vgnbatqkn] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.footer-right[b-9vgnbatqkn] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-save[b-9vgnbatqkn] {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover[b-9vgnbatqkn] {
    background-color: #1d4ed8;
}

.btn-save:disabled[b-9vgnbatqkn] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-cancel-changes[b-9vgnbatqkn] {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel-changes:hover[b-9vgnbatqkn] {
    background-color: #c0392b;
}

.btn-cancel-changes:disabled[b-9vgnbatqkn] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Save feedback message */
.save-feedback[b-9vgnbatqkn] {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    animation: fadeIn-b-9vgnbatqkn 0.3s ease;
}

.save-success[b-9vgnbatqkn] {
    color: #198754;
    background-color: #d1e7dd;
}

.save-error[b-9vgnbatqkn] {
    color: #842029;
    background-color: #f8d7da;
}

@keyframes fadeIn-b-9vgnbatqkn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner for save button */
.spinner-border-sm[b-9vgnbatqkn] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.btn-requires-info[b-9vgnbatqkn] {
    background-color: transparent;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    padding: 0.45rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-requires-info:hover[b-9vgnbatqkn] {
    background-color: #ff6b3c;
    color: white;
}

.btn-reject[b-9vgnbatqkn] {
    background-color: transparent;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    padding: 0.45rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reject:hover[b-9vgnbatqkn] {
    background-color: #ff6b3c;
    color: white;
}

.btn-accept[b-9vgnbatqkn] {
    background-color: #ff6b3c;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-accept:hover:not(:disabled)[b-9vgnbatqkn] {
    background-color: #e55a2b;
}

.btn-accept:disabled[b-9vgnbatqkn] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #94a3b8;
}

.btn-close-ncr[b-9vgnbatqkn] {
    background-color: transparent;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    padding: 0.35rem 1.25rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close-ncr:hover[b-9vgnbatqkn] {
    background-color: #ff6b3c;
    color: white;
}

/* Closed NCR banner */
.footer-closed-banner[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #475569;
}

.closed-banner-icon[b-9vgnbatqkn] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.closed-banner-text[b-9vgnbatqkn] {
    font-weight: 500;
}

/* ===== Next-Step Assignment Modal ===== */
.modal-overlay[b-9vgnbatqkn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10000;
    animation: modalOverlayFadeIn-b-9vgnbatqkn 0.15s ease-out;
}

@keyframes modalOverlayFadeIn-b-9vgnbatqkn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.assign-modal[b-9vgnbatqkn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    overflow: hidden;
    animation: modalSlideIn-b-9vgnbatqkn 0.2s ease-out;
}

@keyframes modalSlideIn-b-9vgnbatqkn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.assign-modal-header[b-9vgnbatqkn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0.75rem;
    gap: 0.75rem;
}

.assign-modal-title[b-9vgnbatqkn] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}

.assign-modal-close[b-9vgnbatqkn] {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.assign-modal-close:hover[b-9vgnbatqkn] {
    color: #475569;
}

.assign-modal-role-tabs[b-9vgnbatqkn] {
    display: flex;
    border-bottom: 2px solid #f1f5f9;
    padding: 0;
    background: #f8fafc;
    overflow: hidden;
    flex-shrink: 0;
}

.assign-modal-role-tab[b-9vgnbatqkn] {
    flex: 1;
    padding: 0.6rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    margin-bottom: -2px;
}

.assign-modal-role-tab:hover[b-9vgnbatqkn] {
    color: #475569;
    background: #f0f4ff;
}

.assign-modal-role-tab.active[b-9vgnbatqkn] {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: #fff;
}

.assign-modal-subheader[b-9vgnbatqkn] {
    padding: 0.7rem 1.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.assign-modal-loading[b-9vgnbatqkn],
.assign-modal-empty[b-9vgnbatqkn] {
    padding: 2rem 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.assign-modal-list[b-9vgnbatqkn] {
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 400px;
}

.assign-modal-item[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.assign-modal-item:hover[b-9vgnbatqkn] {
    background-color: #f0f4ff;
}

.assign-modal-item:active[b-9vgnbatqkn] {
    background-color: #dbeafe;
}

.assign-modal-item + .assign-modal-item[b-9vgnbatqkn] {
    border-top: 1px solid #f1f5f9;
}

.assign-modal-item-name[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.assign-modal-task-count[b-9vgnbatqkn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    margin-left: auto;
}

.assign-modal-item-email[b-9vgnbatqkn] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.3;
}

/* Scrollbar styling for modal list */
.assign-modal-list[b-9vgnbatqkn]::-webkit-scrollbar {
    width: 6px;
}

.assign-modal-list[b-9vgnbatqkn]::-webkit-scrollbar-track {
    background: transparent;
}

.assign-modal-list[b-9vgnbatqkn]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.assign-modal-list[b-9vgnbatqkn]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 480px) {
    .assign-modal[b-9vgnbatqkn] {
        width: calc(100vw - 2rem);
    }
}

/* ===== Supplier Email Notification Modal ===== */
.supplier-email-modal[b-9vgnbatqkn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    overflow: hidden;
    animation: modalSlideIn-b-9vgnbatqkn 0.2s ease-out;
}

.supplier-email-modal-header[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.supplier-email-modal-title[b-9vgnbatqkn] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.supplier-email-modal-body[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    text-align: center;
    gap: 1rem;
}

.supplier-email-modal-icon[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eff6ff;
    flex-shrink: 0;
}

.supplier-email-modal-message[b-9vgnbatqkn] {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.supplier-email-modal-message strong[b-9vgnbatqkn] {
    color: #1e293b;
}

.supplier-email-modal-footer[b-9vgnbatqkn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.btn-cancel-modal[b-9vgnbatqkn] {
    background-color: transparent;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel-modal:hover[b-9vgnbatqkn] {
    background-color: #f1f5f9;
    color: #334155;
    border-color: #94a3b8;
}

.btn-confirm-modal[b-9vgnbatqkn] {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-confirm-modal:hover[b-9vgnbatqkn] {
    background-color: #1d4ed8;
}

@media (max-width: 480px) {
    .supplier-email-modal[b-9vgnbatqkn] {
        width: calc(100vw - 2rem);
    }
}

/* ===== Reject NCR Modal ===== */
.reject-modal[b-9vgnbatqkn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    overflow: visible;
    animation: modalSlideIn-b-9vgnbatqkn 0.2s ease-out;
}

.reject-modal-header[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.reject-modal-title[b-9vgnbatqkn] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.reject-modal-body[b-9vgnbatqkn] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow: visible;
}

.reject-modal-footer[b-9vgnbatqkn] {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.reject-field[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reject-field-label[b-9vgnbatqkn] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.reject-field-label .required[b-9vgnbatqkn] {
    color: #e74c3c;
}

.reject-radio-group[b-9vgnbatqkn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.reject-radio-option[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
    transition: all 0.15s;
    background: #fff;
}

.reject-radio-option:hover[b-9vgnbatqkn] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.reject-radio-option.selected[b-9vgnbatqkn] {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e293b;
    font-weight: 500;
}

.reject-radio-option input[type="radio"][b-9vgnbatqkn] {
    accent-color: #2563eb;
    margin: 0;
}

/* NCR Link Dropdown */
.reject-link-dropdown[b-9vgnbatqkn] {
    position: relative;
}

.reject-link-input-wrapper[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.reject-link-input[b-9vgnbatqkn] {
    flex: 1;
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    background: transparent;
}

.reject-link-clear[b-9vgnbatqkn],
.reject-link-toggle[b-9vgnbatqkn] {
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.reject-link-clear:hover[b-9vgnbatqkn],
.reject-link-toggle:hover[b-9vgnbatqkn] {
    color: #475569;
}

.reject-link-options[b-9vgnbatqkn] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 10002;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.reject-link-option[b-9vgnbatqkn] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #1e293b;
    transition: background 0.1s;
}

.reject-link-option:hover[b-9vgnbatqkn] {
    background: #f0f4ff;
}

.reject-link-option.selected[b-9vgnbatqkn] {
    background: #dbeafe;
    font-weight: 500;
    color: #2563eb;
}

.reject-link-option.disabled[b-9vgnbatqkn] {
    color: #94a3b8;
    cursor: default;
    font-style: italic;
}

.reject-link-options[b-9vgnbatqkn]::-webkit-scrollbar {
    width: 6px;
}

.reject-link-options[b-9vgnbatqkn]::-webkit-scrollbar-track {
    background: transparent;
}

.reject-link-options[b-9vgnbatqkn]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Comment input */
.reject-comment-input[b-9vgnbatqkn] {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}

.reject-comment-input:focus[b-9vgnbatqkn] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.reject-comment-input[b-9vgnbatqkn]::placeholder {
    color: #94a3b8;
}

/* Validation error */
.reject-validation-error[b-9vgnbatqkn] {
    font-size: 0.8rem;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

@media (max-width: 480px) {
    .reject-modal[b-9vgnbatqkn] {
        width: calc(100vw - 2rem);
    }
}

/* ===== Requires Further Information Modal ===== */
.further-info-modal[b-9vgnbatqkn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    overflow: hidden;
    animation: modalSlideIn-b-9vgnbatqkn 0.2s ease-out;
}

.further-info-modal-header[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #fef3e2 0%, #fff7ed 100%);
}

.further-info-modal-header-content[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.further-info-modal-icon[b-9vgnbatqkn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(230, 126, 34, 0.12);
    flex-shrink: 0;
}

.further-info-modal-title[b-9vgnbatqkn] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.further-info-modal-body[b-9vgnbatqkn] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.further-info-modal-description[b-9vgnbatqkn] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #e67e22;
}

.further-info-modal-description strong[b-9vgnbatqkn] {
    color: #1e293b;
}

.further-info-field[b-9vgnbatqkn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.further-info-field-label[b-9vgnbatqkn] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.further-info-field-label .required[b-9vgnbatqkn] {
    color: #e74c3c;
}

.further-info-comment-input[b-9vgnbatqkn] {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 120px;
}

.further-info-comment-input:focus[b-9vgnbatqkn] {
    border-color: #e67e22;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}

.further-info-comment-input[b-9vgnbatqkn]::placeholder {
    color: #94a3b8;
}

.further-info-validation-error[b-9vgnbatqkn] {
    font-size: 0.8rem;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.further-info-modal-footer[b-9vgnbatqkn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.btn-further-info-submit[b-9vgnbatqkn] {
    display: inline-flex;
    align-items: center;
    background-color: #e67e22;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-further-info-submit:hover:not(:disabled)[b-9vgnbatqkn] {
    background-color: #d35400;
}

.btn-further-info-submit:disabled[b-9vgnbatqkn] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .further-info-modal[b-9vgnbatqkn] {
        width: calc(100vw - 2rem);
    }
}
/* /Components/Pages/NcrDetailAttachmentsTab.razor.rz.scp.css */
/* ========== Attachments Container ========== */
.attachments-container[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 0.5rem 0;
}

/* ========== Upload Section ========== */
.upload-section[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.upload-section-header[b-od0kc61t91] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upload-section-title[b-od0kc61t91] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.upload-section-badge[b-od0kc61t91] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
}

/* ========== Dropzone ========== */
.upload-dropzone[b-od0kc61t91] {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
}

.upload-dropzone:hover[b-od0kc61t91] {
    border-color: #2563eb;
    background: #eff6ff;
}

.upload-dropzone.drag-over[b-od0kc61t91] {
    border-color: #2563eb;
    background: #dbeafe;
    border-style: solid;
    transform: scale(1.005);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.upload-dropzone-inner[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    gap: 0.5rem;
}

.upload-icon-circle[b-od0kc61t91] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eff6ff;
    border: 2px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    margin-bottom: 0.25rem;
    transition: all 0.25s ease;
}

.upload-dropzone:hover .upload-icon-circle[b-od0kc61t91] {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
}

.upload-dropzone.drag-over .upload-icon-circle[b-od0kc61t91] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: translateY(-4px);
}

.upload-text[b-od0kc61t91] {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.upload-browse-link[b-od0kc61t91] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.upload-subtext[b-od0kc61t91] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

/*
 * Completely hide the native file input.
 * Drag-and-drop is handled by JS interop that forwards dropped files
 * to this input. Click-to-browse is triggered programmatically.
 */
[b-od0kc61t91] .upload-input-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========== Upload Progress ========== */
.upload-progress-bar[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.upload-progress-track[b-od0kc61t91] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress-fill[b-od0kc61t91] {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px;
    animation: progressIndeterminate-b-od0kc61t91 1.5s ease-in-out infinite;
    width: 40%;
}

@keyframes progressIndeterminate-b-od0kc61t91 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

.upload-progress-text[b-od0kc61t91] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
}

/* ========== Upload Toast ========== */
.upload-toast[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.825rem;
    font-weight: 500;
    animation: toastSlideIn-b-od0kc61t91 0.3s ease;
}

.toast-success[b-od0kc61t91] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.toast-error[b-od0kc61t91] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@keyframes toastSlideIn-b-od0kc61t91 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Section Headers ========== */
.attachments-section[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attachments-section-header[b-od0kc61t91] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eef0f4;
}

.attachments-section-title[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.attachments-count-badge[b-od0kc61t91] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border-radius: 11px;
}

/* ========== Uploaded Images Grid ========== */
.uploaded-images-grid[b-od0kc61t91] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.uploaded-image-card[b-od0kc61t91] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.uploaded-image-card:hover[b-od0kc61t91] {
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.uploaded-image-wrapper[b-od0kc61t91] {
    position: relative;
    overflow: hidden;
}

.uploaded-image-wrapper img[b-od0kc61t91] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.uploaded-image-card:hover .uploaded-image-wrapper img[b-od0kc61t91] {
    transform: scale(1.05);
}

.uploaded-image-overlay[b-od0kc61t91] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.uploaded-image-card:hover .uploaded-image-overlay[b-od0kc61t91] {
    opacity: 1;
}

.uploaded-image-info[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.65rem;
}

.uploaded-image-name[b-od0kc61t91] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uploaded-image-status[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: #10b981;
}

/* ========== Attachment Cards (Existing) ========== */
.attachment-grid[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-card[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.attachment-card:hover[b-od0kc61t91] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.attachment-card-icon[b-od0kc61t91] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attachment-card-body[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.attachment-card-name[b-od0kc61t91] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-card-meta[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.attachment-ext-badge[b-od0kc61t91] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 3px;
    text-transform: uppercase;
}

/* ========== Empty State ========== */
.empty-state[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: #fafbfc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
}

.empty-state-icon[b-od0kc61t91] {
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.empty-state-text[b-od0kc61t91] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.2rem;
}

.empty-state-subtext[b-od0kc61t91] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

/* ========== Workflow Step Evidence Groups ========== */
.evidence-step-group[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.evidence-step-label[b-od0kc61t91] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.evidence-step-name[b-od0kc61t91] {
    font-size: 0.825rem;
    font-weight: 700;
    color: #1e293b;
}

.evidence-step-count[b-od0kc61t91] {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
}

.evidence-file-actions-inline[b-od0kc61t91] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.evidence-action-btn-inline[b-od0kc61t91] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.evidence-action-btn-inline:hover[b-od0kc61t91] {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

/* ========== Clickable attachment cards ========== */
.attachment-card-clickable[b-od0kc61t91] {
    cursor: pointer;
}

.attachment-card-clickable:hover[b-od0kc61t91] {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.attachment-card-name-clickable[b-od0kc61t91] {
    color: #2563eb;
}

.attachment-card-clickable:hover .attachment-card-name-clickable[b-od0kc61t91] {
    text-decoration: underline;
}

/* ========== Lightbox overlay ========== */
.attachments-lightbox-overlay[b-od0kc61t91] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: attachmentsLightboxFadeIn-b-od0kc61t91 0.2s ease;
}

@keyframes attachmentsLightboxFadeIn-b-od0kc61t91 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.attachments-lightbox-content[b-od0kc61t91] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.attachments-lightbox-close[b-od0kc61t91] {
    position: absolute;
    top: -40px;
    right: -8px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.15s;
}

.attachments-lightbox-close:hover[b-od0kc61t91] {
    background: rgba(255, 255, 255, 0.3);
}

.attachments-lightbox-image[b-od0kc61t91] {
    max-width: 85vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.attachments-lightbox-caption[b-od0kc61t91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.attachments-lightbox-filename[b-od0kc61t91] {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

.attachments-lightbox-meta[b-od0kc61t91] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .uploaded-images-grid[b-od0kc61t91] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .upload-dropzone-inner[b-od0kc61t91] {
        padding: 2rem 1rem;
    }
}

/* ===== Delete confirmation modal ===== */
.attach-confirm-overlay[b-od0kc61t91] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1050;
    animation: attachFadeIn-b-od0kc61t91 0.15s ease-out;
}

.attach-confirm-modal[b-od0kc61t91] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 1051;
    animation: attachModalIn-b-od0kc61t91 0.2s ease-out;
    overflow: hidden;
}

@keyframes attachFadeIn-b-od0kc61t91 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes attachModalIn-b-od0kc61t91 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.attach-confirm-header[b-od0kc61t91] {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
    color: #fff;
}

.attach-confirm-header h3[b-od0kc61t91] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.attach-confirm-body[b-od0kc61t91] {
    padding: 1.25rem;
    color: #1e293b;
}

.attach-confirm-body p[b-od0kc61t91] {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.attach-confirm-filename[b-od0kc61t91] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem !important;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    word-break: break-all;
    color: #0f172a;
}

.attach-confirm-warning[b-od0kc61t91] {
    color: #991b1b;
    font-weight: 500;
    margin-top: 0.5rem !important;
}

.attach-confirm-footer[b-od0kc61t91] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.attach-confirm-danger[b-od0kc61t91] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.attach-confirm-danger:hover:not(:disabled)[b-od0kc61t91] {
    background: #b91c1c;
    border-color: #b91c1c;
}
/* /Components/Pages/NcrDetailAuditLogTab.razor.rz.scp.css */
/* Audit Log */
.audit-log-container[b-2uggr3mdpm] {
    overflow-x: auto;
}

.audit-log-table[b-2uggr3mdpm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.audit-log-table thead th[b-2uggr3mdpm] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: #4a4a4a;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.audit-col-header[b-2uggr3mdpm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.audit-sort-icon[b-2uggr3mdpm] {
    color: #2563eb;
    font-size: 0.75rem;
    cursor: pointer;
}

.audit-filter-row td[b-2uggr3mdpm] {
    padding: 0.35rem 0.5rem;
}

.audit-filter-input[b-2uggr3mdpm] {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1.5px solid #ff8c42;
    border-radius: 4px;
    font-size: 0.8rem;
    outline: none;
    background: #fff;
}

.audit-filter-input:focus[b-2uggr3mdpm] {
    border-color: #ff6b3c;
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.15);
}

.audit-filter-cell[b-2uggr3mdpm] {
    display: flex;
    gap: 0.25rem;
}

.filter-eq[b-2uggr3mdpm] {
    flex: 1;
}

.filter-date[b-2uggr3mdpm] {
    width: 36px;
    padding: 0.3rem 0.25rem;
}

.filter-text[b-2uggr3mdpm] {
    /* inherits from .audit-filter-input */
}

.audit-log-table tbody td[b-2uggr3mdpm] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: top;
}

.audit-log-table tbody tr:hover[b-2uggr3mdpm] {
    background: #f8f9fa;
}

.audit-pagination[b-2uggr3mdpm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid #eef0f4;
    margin-top: 0.5rem;
}

.audit-page-btn[b-2uggr3mdpm] {
    background: none;
    border: none;
    cursor: pointer;
    color: #2563eb;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
}

.audit-page-btn:disabled[b-2uggr3mdpm] {
    color: #ccc;
    cursor: default;
}

.audit-page-info[b-2uggr3mdpm] {
    font-size: 0.8rem;
    color: #666;
}

/* Text helpers */
.text-muted[b-2uggr3mdpm] {
    color: #999;
}

.text-center[b-2uggr3mdpm] {
    text-align: center;
}
/* /Components/Pages/NcrDetailSidebar.razor.rz.scp.css */
/* Sidebar */
.ncr-detail-sidebar[b-la9j3vk4zj] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1rem;
}

.sidebar-card[b-la9j3vk4zj] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 1.25rem;
}

.sidebar-card-title[b-la9j3vk4zj] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 1rem 0;
}

/* Comments */
.comment-input-area[b-la9j3vk4zj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.comment-textarea[b-la9j3vk4zj] {
    resize: vertical;
    min-height: 60px;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.85rem;
}

.comment-textarea:focus[b-la9j3vk4zj] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.btn-submit-comment[b-la9j3vk4zj] {
    align-self: flex-start;
    background-color: transparent;
    color: #ff6b3c;
    border: 1.5px solid #ff6b3c;
    padding: 0.3rem 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-submit-comment:hover[b-la9j3vk4zj] {
    background-color: #ff6b3c;
    color: white;
}

.comments-list[b-la9j3vk4zj] {
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
}

.no-items[b-la9j3vk4zj] {
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
    color: #999;
}

/* Timeline */
.timeline[b-la9j3vk4zj] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0.25rem;
}

.timeline-item[b-la9j3vk4zj] {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.timeline-item[b-la9j3vk4zj]::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item.timeline-item-completed[b-la9j3vk4zj]::before {
    background: #22c55e;
}

.timeline-item:last-child[b-la9j3vk4zj]::before {
    display: none;
}

.timeline-dot[b-la9j3vk4zj] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    background: #2563eb;
    margin-top: 2px;
    z-index: 1;
    transition: background-color 0.3s ease;
}

.timeline-dot.completed[b-la9j3vk4zj] {
    background: #22c55e;
}

.timeline-dot.returned[b-la9j3vk4zj] {
    background: #f97316;
}

.timeline-dot.active[b-la9j3vk4zj] {
    background: #2563eb;
}

.timeline-dot.pending[b-la9j3vk4zj] {
    background: #94a3b8;
}

.timeline-item.timeline-item-returned[b-la9j3vk4zj]::before {
    background: #f97316;
}

.timeline-content[b-la9j3vk4zj] {
    display: flex;
    flex-direction: column;
}

.timeline-status[b-la9j3vk4zj] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
}

.timeline-date[b-la9j3vk4zj] {
    font-size: 0.8rem;
    color: #888;
}

.timeline-assignee[b-la9j3vk4zj] {
    font-size: 0.8rem;
    color: #888;
}

.timeline-comment[b-la9j3vk4zj] {
    font-size: 0.78rem;
    color: #666;
    font-style: italic;
    margin-top: 0.15rem;
}

/* Text helpers */
.text-muted[b-la9j3vk4zj] {
    color: #999;
}

/* Comments */
.comment-header[b-la9j3vk4zj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-author[b-la9j3vk4zj] {
    font-weight: 700;
    color: #2563eb;
    font-size: 0.9rem;
}

.btn-edit-comment[b-la9j3vk4zj] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    opacity: 0;
}

.comment-item:hover .btn-edit-comment[b-la9j3vk4zj] {
    opacity: 1;
}

.btn-edit-comment:hover[b-la9j3vk4zj] {
    color: #2563eb;
    background: #f1f5f9;
}

.comment-message[b-la9j3vk4zj] {
    font-size: 0.85rem;
    color: #333;
    margin: 0.15rem 0;
}

.comment-meta[b-la9j3vk4zj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comment-date[b-la9j3vk4zj] {
    font-size: 0.78rem;
    color: #999;
}

.comment-edited[b-la9j3vk4zj] {
    font-size: 0.72rem;
    color: #b0b0b0;
    font-style: italic;
}

.comment-edit-textarea[b-la9j3vk4zj] {
    font-size: 0.85rem;
    min-height: 60px;
    margin: 0.25rem 0;
    resize: vertical;
}

.comment-edit-actions[b-la9j3vk4zj] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.btn-comment-save[b-la9j3vk4zj] {
    background: #198754;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-comment-save:hover:not(:disabled)[b-la9j3vk4zj] {
    background: #157347;
}

.btn-comment-save:disabled[b-la9j3vk4zj] {
    opacity: 0.5;
}

.btn-comment-cancel[b-la9j3vk4zj] {
    background: none;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-comment-cancel:hover[b-la9j3vk4zj] {
    background: #f8fafc;
}

.btn-comment-delete[b-la9j3vk4zj] {
    background: none;
    color: #dc3545;
    border: 1px solid #f5c2c7;
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
    margin-left: auto;
}

.btn-comment-delete:hover[b-la9j3vk4zj] {
    background: #f8d7da;
}

.comment-item hr[b-la9j3vk4zj] {
    border: none;
    border-top: 1px solid #eee;
    margin: 0.5rem 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .ncr-detail-sidebar[b-la9j3vk4zj] {
        order: -1;
        position: static;
    }
}
/* /Components/Pages/NcrDetailSubmissionTab.razor.rz.scp.css */
/* Detail Sections */
.detail-section[b-kwfck2ffy0] {
    border-bottom: 1px solid #eef0f4;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section:last-child[b-kwfck2ffy0] {
    border-bottom: none;
    margin-bottom: 0;
}

.section-header-row[b-kwfck2ffy0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
    border-radius: 4px;
}

.section-header-row:hover[b-kwfck2ffy0] {
    background-color: #f8f9fc;
}

.section-title[b-kwfck2ffy0] {
    font-size: 1rem;
    font-weight: 600;
    color: #2563eb;
    margin: 0;
}

.chevron[b-kwfck2ffy0] {
    font-size: 0.75rem;
    color: #2563eb;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
}

.chevron.expanded[b-kwfck2ffy0] {
    transform: rotate(0deg);
}

.section-content[b-kwfck2ffy0] {
    padding: 0.75rem 0.5rem 1.25rem;
    animation: slideDown-b-kwfck2ffy0 0.2s ease-out;
}

@keyframes slideDown-b-kwfck2ffy0 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Fields */
.form-grid-2[b-kwfck2ffy0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-field[b-kwfck2ffy0] {
    display: flex;
    flex-direction: column;
}

.form-field.full-width[b-kwfck2ffy0] {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.field-label[b-kwfck2ffy0] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 0.35rem;
}

.field-value[b-kwfck2ffy0] {
    font-size: 0.875rem;
    color: #333;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.field-value-multiline[b-kwfck2ffy0] {
    white-space: pre-wrap;
    word-wrap: break-word;
    align-items: flex-start;
    min-height: 80px;
    padding: 0.6rem 0.75rem;
    line-height: 1.5;
}

.field-value-select[b-kwfck2ffy0] {
    justify-content: space-between;
    cursor: default;
}

.select-arrow[b-kwfck2ffy0] {
    color: #999;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* NCR Type Toggle */
.ncr-type-toggle[b-kwfck2ffy0] {
    display: flex;
    gap: 0;
    margin-bottom: 0.5rem;
}

.type-option[b-kwfck2ffy0] {
    flex: 1;
    padding: 0.5rem 1rem;
    text-align: center;
    border: 1px solid #d5dce6;
    font-size: 0.875rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: default;
    background: #fff;
}

.type-option:first-child[b-kwfck2ffy0] {
    border-radius: 4px 0 0 4px;
}

.type-option:last-child[b-kwfck2ffy0] {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.type-option.selected[b-kwfck2ffy0] {
    border-color: #2563eb;
    color: #2563eb;
    font-weight: 500;
    background: #f0f4ff;
}

.radio-indicator[b-kwfck2ffy0] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: inline-block;
    flex-shrink: 0;
}

.radio-indicator.checked[b-kwfck2ffy0] {
    border-color: #2563eb;
    background: radial-gradient(#2563eb 40%, transparent 45%);
}

/* Responsive */
@media (max-width: 768px) {
    .form-grid-2[b-kwfck2ffy0] {
        grid-template-columns: 1fr;
    }
}

/* Expand-all sections toggle (mirrors Triage tab) */
.submission-expand-toggle[b-kwfck2ffy0] {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0 0.5rem;
}

.expand-toggle-label[b-kwfck2ffy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.expand-toggle-text[b-kwfck2ffy0] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.expand-toggle-switch[b-kwfck2ffy0] {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: #cbd5e1;
    border-radius: 9px;
    transition: background 0.2s;
    cursor: pointer;
}

.expand-toggle-switch.on[b-kwfck2ffy0] {
    background: #3b82f6;
}

.expand-toggle-knob[b-kwfck2ffy0] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.expand-toggle-switch.on .expand-toggle-knob[b-kwfck2ffy0] {
    transform: translateX(14px);
}
/* /Components/Pages/NcrDetailWorkflowTab.razor.rz.scp.css */
/* Workflow Container */
.workflow-container[b-hskiju94mt] {
    padding: 0.5rem 0;
}

/* Triage expand-all toggle */
.triage-expand-toggle[b-hskiju94mt] {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0 0.5rem;
}

.expand-toggle-label[b-hskiju94mt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.expand-toggle-text[b-hskiju94mt] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.expand-toggle-switch[b-hskiju94mt] {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: #cbd5e1;
    border-radius: 9px;
    transition: background 0.2s;
    cursor: pointer;
}

.expand-toggle-switch.on[b-hskiju94mt] {
    background: #3b82f6;
}

.expand-toggle-knob[b-hskiju94mt] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.expand-toggle-switch.on .expand-toggle-knob[b-hskiju94mt] {
    transform: translateX(14px);
}

/* SLA Info Bar */
.sla-info-bar[b-hskiju94mt] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.sla-info-btn[b-hskiju94mt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.sla-info-btn:hover[b-hskiju94mt] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

/* SLA Info Modal */
.sla-modal-overlay[b-hskiju94mt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.sla-modal-dialog[b-hskiju94mt] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    animation: slaModalIn-b-hskiju94mt 0.2s ease-out;
}

@keyframes slaModalIn-b-hskiju94mt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sla-modal-header[b-hskiju94mt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: white;
}

.sla-modal-header-content[b-hskiju94mt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sla-modal-header h5[b-hskiju94mt] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sla-modal-close[b-hskiju94mt] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
}

.sla-modal-close:hover[b-hskiju94mt] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.sla-modal-body[b-hskiju94mt] {
    padding: 1.25rem;
}

.sla-modal-description[b-hskiju94mt] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

/* SLA Rules Table */
.sla-rules-table[b-hskiju94mt] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.sla-rules-table thead th[b-hskiju94mt] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #64748b;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
}

.sla-rules-table tbody tr[b-hskiju94mt] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.sla-rules-table tbody tr:hover[b-hskiju94mt] {
    background: #f8fafc;
}

.sla-rules-table tbody tr.sla-current-severity[b-hskiju94mt] {
    background: #eff6ff;
}

.sla-rules-table tbody td[b-hskiju94mt] {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #1e293b;
}

.sla-score-cell[b-hskiju94mt] {
    font-weight: 600;
    color: #475569;
}

.sla-days-cell[b-hskiju94mt] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.sla-days-value[b-hskiju94mt] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #163a49;
}

.sla-days-label[b-hskiju94mt] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.sla-days-none[b-hskiju94mt] {
    font-size: 0.8rem;
    color: #cbd5e1;
    font-style: italic;
}

.sla-current-badge[b-hskiju94mt] {
    display: inline-block;
    font-size: 0.6rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    background: #3b82f6;
    color: white;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.sla-status-active[b-hskiju94mt] {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: #dcfce7;
    color: #166534;
    font-weight: 500;
}

.sla-status-inactive[b-hskiju94mt] {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: #f1f5f9;
    color: #94a3b8;
    font-weight: 500;
}

/* Current NCR SLA Info */
.sla-current-info[b-hskiju94mt] {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.sla-current-info.sla-overdue[b-hskiju94mt] {
    background: #fef2f2;
    border-color: #fecaca;
}

.sla-current-info-label[b-hskiju94mt] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.sla-current-info-date[b-hskiju94mt] {
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
}

.sla-overdue .sla-current-info-date[b-hskiju94mt] {
    color: #dc2626;
}

.sla-overdue-warning[b-hskiju94mt] {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
    background: #dc2626;
    color: white;
}

.workflow-step[b-hskiju94mt] {
    position: relative;
}

.workflow-step-header[b-hskiju94mt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    transition: box-shadow 0.15s;
}

.workflow-step-header:hover[b-hskiju94mt] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.workflow-step-left[b-hskiju94mt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    flex: 1;
}

.workflow-step-number[b-hskiju94mt] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #bec5cf;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.workflow-step-number.active[b-hskiju94mt] {
    background: #10b981;
}

.workflow-step-number.assigned[b-hskiju94mt] {
    background: #2563eb;
}

.workflow-step-number.completed[b-hskiju94mt] {
    background: #10b981;
}

.workflow-step-title[b-hskiju94mt] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.workflow-step-right[b-hskiju94mt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    font-size: 0.85rem;
}

.workflow-date-text[b-hskiju94mt] {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}

.workflow-date-text.overdue[b-hskiju94mt] {
    color: #dc2626;
    font-weight: 600;
}

/* ========== Assignee Button (inline in header) ========== */
.workflow-assignee-wrapper[b-hskiju94mt] {
    display: inline-block;
}

.workflow-assignee-btn[b-hskiju94mt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    font-family: inherit;
    color: #1a1a2e;
    white-space: nowrap;
}

.workflow-assignee-btn:hover[b-hskiju94mt] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.workflow-assignee-btn:disabled[b-hskiju94mt] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.workflow-assignee-icon[b-hskiju94mt] {
    font-size: 1rem;
    line-height: 1;
}

.workflow-assignee-text[b-hskiju94mt] {
    font-weight: 500;
    color: #334155;
}

.workflow-assignee-text.unassigned[b-hskiju94mt] {
    color: #94a3b8;
    font-style: italic;
}

.workflow-assignee-caret[b-hskiju94mt] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-left: 0.1rem;
}

/* ========== Fixed overlay + panel (rendered outside workflow-container) ========== */
.assignee-overlay[b-hskiju94mt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: transparent;
}

.assignee-panel[b-hskiju94mt] {
    position: fixed;
    width: 320px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    padding: 0;
    animation: panelFadeIn-b-hskiju94mt 0.15s ease-out;
}

@keyframes panelFadeIn-b-hskiju94mt {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Assignee Role Tabs ========== */
.assignee-role-tabs[b-hskiju94mt] {
    display: flex;
    border-bottom: 2px solid #f1f5f9;
    padding: 0;
    background: #f8fafc;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    flex-shrink: 0;
}

.assignee-role-tab[b-hskiju94mt] {
    flex: 1;
    padding: 0.55rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    margin-bottom: -2px;
}

.assignee-role-tab:hover[b-hskiju94mt] {
    color: #475569;
    background: #f0f4ff;
}

.assignee-role-tab.active[b-hskiju94mt] {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: #fff;
}

.assignee-unassign-option[b-hskiju94mt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.assignee-unassign-option:hover[b-hskiju94mt] {
    background-color: #fef2f2;
    color: #dc2626;
}

.assignee-unassign-icon[b-hskiju94mt] {
    font-size: 0.75rem;
    font-weight: 600;
}

.assignee-panel-header[b-hskiju94mt] {
    padding: 0.7rem 1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.assignee-panel-loading[b-hskiju94mt],
.assignee-panel-empty[b-hskiju94mt] {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.assignee-panel-list[b-hskiju94mt] {
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.assignee-panel-item[b-hskiju94mt] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.assignee-panel-item:hover[b-hskiju94mt] {
    background-color: #f0f4ff;
}

.assignee-panel-item:active[b-hskiju94mt] {
    background-color: #dbeafe;
}

.assignee-panel-item + .assignee-panel-item[b-hskiju94mt] {
    border-top: 1px solid #f1f5f9;
}

.assignee-panel-name[b-hskiju94mt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.assignee-task-count[b-hskiju94mt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    margin-left: auto;
}

.assignee-panel-email[b-hskiju94mt] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.3;
}

/* Scrollbar styling */
.assignee-panel-list[b-hskiju94mt]::-webkit-scrollbar {
    width: 6px;
}

.assignee-panel-list[b-hskiju94mt]::-webkit-scrollbar-track {
    background: transparent;
}

.assignee-panel-list[b-hskiju94mt]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.assignee-panel-list[b-hskiju94mt]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ========== Chevron ========== */
.workflow-chevron[b-hskiju94mt] {
    font-size: 0.85rem;
    color: #999;
    transition: transform 0.2s;
    margin-left: 0.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

.workflow-chevron:hover[b-hskiju94mt] {
    color: #666;
}

.workflow-chevron.expanded[b-hskiju94mt] {
    transform: rotate(180deg);
}

/* ========== Step Content ========== */
.workflow-step-content[b-hskiju94mt] {
    padding: 0.75rem 1.25rem 0.75rem 3.5rem;
    background: #fafbfc;
    border: 1px solid #eef0f4;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -4px;
}

/* ========== Connector ========== */
.workflow-connector[b-hskiju94mt] {
    display: flex;
    justify-content: flex-start;
    padding-left: 2.3rem;
    height: 24px;
}

.workflow-connector-line[b-hskiju94mt] {
    width: 2px;
    height: 100%;
    background: #dee2e6;
}

.workflow-connector-line.active[b-hskiju94mt] {
    background: #10b981;
}

.workflow-connector-line.assigned[b-hskiju94mt] {
    background: #2563eb;
}

/* ========== Manager-Only Badge & Read-Only Restrictions ========== */
.workflow-manager-badge[b-hskiju94mt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.workflow-readonly-notice[b-hskiju94mt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 0.825rem;
    color: #92400e;
    margin-bottom: 0.75rem;
}

/* Unlocked-for-editing variant: green, signals the closed NCR is editable. */
.workflow-readonly-notice.workflow-unlocked-notice[b-hskiju94mt] {
    background: #eef9f0;
    border-color: #8fcf9f;
    color: #1f7a3d;
}

/* Responsive */
@media (max-width: 768px) {
    .assignee-panel[b-hskiju94mt] {
        width: 260px;
    }
}
/* /Components/Pages/NcrDetailWorkflowTriage.razor.rz.scp.css */
/* Detail Sections */
.detail-section[b-5jiwgphgne] {
    border-bottom: 1px solid #eef0f4;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section:last-child[b-5jiwgphgne] {
    border-bottom: none;
    margin-bottom: 0;
}

.detail-section fieldset[b-5jiwgphgne] {
    border: none;
    margin: 0;
    padding: 0;
    min-inline-size: auto;
}

.section-header-row[b-5jiwgphgne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
    border-radius: 4px;
}

.section-header-row:hover[b-5jiwgphgne] {
    background-color: #f8f9fc;
}

.section-title[b-5jiwgphgne] {
    font-size: 1rem;
    font-weight: 600;
    color: #2563eb;
    margin: 0;
}

.chevron[b-5jiwgphgne] {
    font-size: 0.75rem;
    color: #2563eb;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
}

.chevron.expanded[b-5jiwgphgne] {
    transform: rotate(0deg);
}

.section-content[b-5jiwgphgne] {
    padding: 0.75rem 0.5rem 1.25rem;
    animation: slideDown-b-5jiwgphgne 0.2s ease-out;
}

@keyframes slideDown-b-5jiwgphgne {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Fields */
.form-grid-2[b-5jiwgphgne] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-field[b-5jiwgphgne] {
    display: flex;
    flex-direction: column;
}

.form-field.full-width[b-5jiwgphgne] {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.field-label[b-5jiwgphgne] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 0.35rem;
}

.field-value[b-5jiwgphgne] {
    font-size: 0.875rem;
    color: #333;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.field-value-multiline[b-5jiwgphgne] {
    white-space: pre-wrap;
    word-wrap: break-word;
    align-items: flex-start;
    min-height: 80px;
    padding: 0.6rem 0.75rem;
    line-height: 1.5;
}

.field-value-select[b-5jiwgphgne] {
    justify-content: space-between;
    cursor: default;
}

.select-arrow[b-5jiwgphgne] {
    color: #999;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

/* Field Input Styles */
.field-input[b-5jiwgphgne] {
    font-size: 0.875rem;
    color: #333;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 4px;
    min-height: 38px;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}

.field-input:focus[b-5jiwgphgne] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.field-input-multiline[b-5jiwgphgne] {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* Select Dropdown Styling */
select.field-input[b-5jiwgphgne] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
}

select.field-input:focus[b-5jiwgphgne] {
    cursor: pointer;
}

/* NCR Type Toggle */
.ncr-type-toggle[b-5jiwgphgne] {
    display: flex;
    gap: 0;
    margin-bottom: 0.5rem;
}

.type-option[b-5jiwgphgne] {
    flex: 1;
    padding: 0.5rem 1rem;
    text-align: center;
    border: 1px solid #d5dce6;
    font-size: 0.875rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    background: #fff;
    font-family: inherit;
    transition: all 0.15s ease;
}

.type-option:first-child[b-5jiwgphgne] {
    border-radius: 4px 0 0 4px;
}

.type-option:last-child[b-5jiwgphgne] {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.type-option:hover[b-5jiwgphgne] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.type-option.selected[b-5jiwgphgne] {
    border-color: #2563eb;
    color: #2563eb;
    font-weight: 500;
    background: #f0f4ff;
}

.radio-indicator[b-5jiwgphgne] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: inline-block;
    flex-shrink: 0;
}

.radio-indicator.checked[b-5jiwgphgne] {
    border-color: #2563eb;
    background: radial-gradient(#2563eb 40%, transparent 45%);
}

/* Parts Table */
.parts-table[b-5jiwgphgne] {
    border: 1px solid #d5dce6;
    border-radius: 4px;
    overflow: hidden;
}

.parts-table-header[b-5jiwgphgne] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f8fafc;
    border-bottom: 1px solid #d5dce6;
}

.parts-table-header .parts-table-col[b-5jiwgphgne] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.parts-sort-icon[b-5jiwgphgne] {
    font-size: 0.85rem;
    color: #2563eb;
    cursor: pointer;
}

.parts-table-row[b-5jiwgphgne] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #eef0f4;
}

.parts-table-row:last-child[b-5jiwgphgne] {
    border-bottom: none;
}

.parts-table-row .parts-table-col[b-5jiwgphgne] {
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    color: #333;
}

.parts-table-empty .parts-table-col[b-5jiwgphgne] {
    padding: 0.75rem;
    font-size: 0.85rem;
}

.parts-name-link[b-5jiwgphgne] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.parts-name-link:hover[b-5jiwgphgne] {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .form-grid-2[b-5jiwgphgne] {
        grid-template-columns: 1fr;
    }

    .parts-table-header[b-5jiwgphgne],
    .parts-table-row[b-5jiwgphgne] {
        grid-template-columns: 1fr;
    }
}

/* ===== Triage Part edit (QualityManager) ===== */

.parts-label-row[b-5jiwgphgne] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.parts-add-remove-link[b-5jiwgphgne] {
    background: none;
    border: none;
    color: #ff6b3c;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
}

.parts-add-remove-link:hover[b-5jiwgphgne] {
    text-decoration: underline;
}

.parts-table-with-actions .parts-table-header[b-5jiwgphgne],
.parts-table-with-actions .parts-table-row[b-5jiwgphgne] {
    grid-template-columns: 1fr 2fr 48px;
}

.parts-action-col[b-5jiwgphgne] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.parts-remove-btn[b-5jiwgphgne] {
    background: none;
    border: none;
    color: #ff6b3c;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.parts-remove-btn:hover[b-5jiwgphgne] {
    background: #fff0eb;
}

/* ===== Select Part modal (replicated from CreateNcr) ===== */

.select-part-modal[b-5jiwgphgne] {
    max-width: 750px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.select-part-modal .modal-body[b-5jiwgphgne] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.select-part-filters[b-5jiwgphgne] {
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.select-part-filter-row[b-5jiwgphgne] {
    display: grid;
    grid-template-columns: 1fr 1fr 90px;
    border-bottom: 1px solid #eee;
}

.select-part-col-header[b-5jiwgphgne] {
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-right: 1px solid #eee;
    background: #f8f9fa;
}

.select-part-col-header.sortable[b-5jiwgphgne] {
    cursor: pointer;
    user-select: none;
}

.select-part-col-header.sortable:hover[b-5jiwgphgne] {
    background: #e9ecef;
}

.select-part-col-header .sort-icon[b-5jiwgphgne] {
    color: #ff6b3c;
    font-size: 0.8rem;
}

.select-part-col-header.action-col[b-5jiwgphgne] {
    border-right: none;
}

.select-part-col-filter[b-5jiwgphgne] {
    padding: 0.4rem 0.5rem;
    border-right: 1px solid #eee;
}

.select-part-col-filter.action-col[b-5jiwgphgne] {
    border-right: none;
}

.filter-input-wrapper[b-5jiwgphgne] {
    display: flex;
    align-items: center;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    overflow: hidden;
}

.filter-badge[b-5jiwgphgne] {
    background: #fff;
    color: #ff6b3c;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.4rem;
    border-right: 1px solid #ff6b3c;
    line-height: 1;
    flex-shrink: 0;
}

.filter-input[b-5jiwgphgne] {
    border: none;
    outline: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    width: 100%;
    min-width: 0;
}

.select-part-list[b-5jiwgphgne] {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 400px;
}

.select-part-row[b-5jiwgphgne] {
    display: grid;
    grid-template-columns: 1fr 1fr 90px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s;
}

.select-part-row:hover[b-5jiwgphgne] {
    background: #f8f9fa;
}

.select-part-row.already-added[b-5jiwgphgne] {
    background: #f0fdf4;
}

.select-part-col[b-5jiwgphgne] {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #333;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
}

.select-part-col.action-col[b-5jiwgphgne] {
    border-right: none;
    justify-content: center;
}

.btn-add-part[b-5jiwgphgne] {
    background: #fff;
    color: #ff6b3c;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-part:hover[b-5jiwgphgne] {
    background: #ff6b3c;
    color: #fff;
}

.added-label[b-5jiwgphgne] {
    color: #16a34a;
    font-size: 0.8rem;
    font-weight: 500;
}

.select-part-empty[b-5jiwgphgne] {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

.select-part-pagination[b-5jiwgphgne] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

.select-part-pagination .pagination-info[b-5jiwgphgne] {
    font-size: 0.8rem;
    color: #555;
    margin: 0 0.25rem;
}

.select-part-pagination .btn-link[b-5jiwgphgne] {
    color: #003366;
    padding: 0.2rem;
}

.select-part-pagination .btn-link:disabled[b-5jiwgphgne] {
    color: #ccc;
}

.select-part-list .loading-container[b-5jiwgphgne] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #666;
    font-size: 0.9rem;
}
/* /Components/Pages/NcrMasterData.razor.rz.scp.css */
.ncr-master-data-page[b-zwgh1ngik1] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* Filter dropdown */
.filter-dropdown-container[b-zwgh1ngik1] {
    max-width: 300px;
    min-width: 200px;
}

.filter-dropdown[b-zwgh1ngik1] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    color: #212529;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.filter-dropdown:focus[b-zwgh1ngik1] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* NCR Master Data container */
.ncr-master-data-container[b-zwgh1ngik1] {
    padding: 0;
}

/* Search Panel - Animated */
.search-panel[b-zwgh1ngik1] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-zwgh1ngik1] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-zwgh1ngik1] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-zwgh1ngik1] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-zwgh1ngik1] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-zwgh1ngik1] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-zwgh1ngik1] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-zwgh1ngik1] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-zwgh1ngik1] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-zwgh1ngik1] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.ncr-master-data-toolbar[b-zwgh1ngik1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-zwgh1ngik1] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-zwgh1ngik1] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-zwgh1ngik1] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-zwgh1ngik1],
.toolbar-buttons .btn-outline-primary.active[b-zwgh1ngik1] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-danger[b-zwgh1ngik1] {
    color: white;
    border-color: #8b3a3a;
    background-color: #8b3a3a;
}

.toolbar-buttons .btn-danger:hover[b-zwgh1ngik1] {
    background-color: #6d2d2d;
    border-color: #6d2d2d;
}

.toolbar-buttons .btn-danger:disabled[b-zwgh1ngik1] {
    background-color: #8b3a3a;
    border-color: #8b3a3a;
    opacity: 0.65;
}

/* Import CSV Button */
.btn-import-csv[b-zwgh1ngik1] {
    background-color: #0d9488;
    border: 1px solid #0d9488;
    color: white;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
}

.btn-import-csv:hover[b-zwgh1ngik1] {
    background-color: #0f766e;
    border-color: #0f766e;
}

/* Loading Indicator */
.loading-indicator[b-zwgh1ngik1] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Status Message */
.status-message[b-zwgh1ngik1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.status-message.success[b-zwgh1ngik1] {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-message.error[b-zwgh1ngik1] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.btn-close-status[b-zwgh1ngik1] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.btn-close-status:hover[b-zwgh1ngik1] {
    opacity: 1;
}

/* Import Errors */
.import-errors[b-zwgh1ngik1] {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.import-errors ul[b-zwgh1ngik1] {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
}

.import-errors li[b-zwgh1ngik1] {
    margin-bottom: 0.25rem;
}

.error-text[b-zwgh1ngik1] {
    color: #991b1b;
    font-size: 0.8rem;
}

.toolbar-pagination[b-zwgh1ngik1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-zwgh1ngik1] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-zwgh1ngik1] {
    opacity: 0.5;
}

.pagination-info[b-zwgh1ngik1] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.ncr-master-data-table[b-zwgh1ngik1] {
    width: 100%;
    border-collapse: collapse;
}

.ncr-master-data-table thead th[b-zwgh1ngik1] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.ncr-master-data-table thead th.sortable[b-zwgh1ngik1] {
    cursor: pointer;
    user-select: none;
}

.ncr-master-data-table thead th.sortable:hover[b-zwgh1ngik1] {
    background-color: #f8f9fa;
}

.sort-indicator[b-zwgh1ngik1] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
}

.ncr-master-data-table tbody tr[b-zwgh1ngik1] {
    border-bottom: 1px solid #f0f0f0;
}

.ncr-master-data-table tbody tr:hover[b-zwgh1ngik1] {
    background-color: #f8f9fa;
}

.ncr-master-data-table tbody tr.table-active[b-zwgh1ngik1] {
    background-color: #e7f1ff;
}

.ncr-master-data-table tbody td[b-zwgh1ngik1] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.ncr-master-data-table tbody td a[b-zwgh1ngik1] {
    color: #0d6efd;
    text-decoration: none;
}

.ncr-master-data-table tbody td a:hover[b-zwgh1ngik1] {
    text-decoration: underline;
}

/* Modal Styles */
.modal-backdrop[b-zwgh1ngik1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5rem;
    z-index: 1050;
    overflow-y: auto;
}

.modal-dialog[b-zwgh1ngik1] {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
}

.modal-header[b-zwgh1ngik1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.modal-header h4[b-zwgh1ngik1] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.modal-header .btn-close[b-zwgh1ngik1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-header .btn-close:hover[b-zwgh1ngik1] {
    color: #212529;
}

.modal-body[b-zwgh1ngik1] {
    padding: 1.5rem;
}

.modal-footer[b-zwgh1ngik1] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}

/* Form Styles in Modal */
.form-row[b-zwgh1ngik1] {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.form-row:last-child[b-zwgh1ngik1] {
    margin-bottom: 0;
}

.form-row .form-label[b-zwgh1ngik1] {
    width: 80px;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    margin: 0;
}

.form-row .form-control[b-zwgh1ngik1] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 2px solid #0d6efd;
    border-radius: 4px;
}

.form-row .form-control:focus[b-zwgh1ngik1] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Form Select Dropdown in Modal */
.form-row .form-select[b-zwgh1ngik1] {
    flex: 1;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    color: #212529;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-row .form-select:focus[b-zwgh1ngik1] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Radio Group */
.radio-group[b-zwgh1ngik1] {
    display: flex;
    gap: 1.5rem;
    flex: 1;
}

.radio-label[b-zwgh1ngik1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #212529;
    cursor: pointer;
}

.radio-label input[type="radio"][b-zwgh1ngik1] {
    width: 18px;
    height: 18px;
    accent-color: #0d6efd;
    cursor: pointer;
}

/* Modal Buttons */
.modal-footer .btn-save[b-zwgh1ngik1] {
    background-color: #0d9488;
    border-color: #0d9488;
    color: white;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.modal-footer .btn-save:hover[b-zwgh1ngik1] {
    background-color: #0f766e;
    border-color: #0f766e;
}

.modal-footer .btn-cancel[b-zwgh1ngik1] {
    background-color: #f3f4f6;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.modal-footer .btn-cancel:hover[b-zwgh1ngik1] {
    background-color: #fff5f2;
}

/* Responsive */
@media (max-width: 768px) {
    .panel-header-row[b-zwgh1ngik1] {
        flex-direction: column;
    }

    .filter-dropdown-container[b-zwgh1ngik1] {
        max-width: 100%;
    }

    .ncr-master-data-toolbar[b-zwgh1ngik1] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .search-panel-content[b-zwgh1ngik1] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-fields[b-zwgh1ngik1] {
        flex-direction: column;
    }

    .search-field[b-zwgh1ngik1] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-field .form-control[b-zwgh1ngik1] {
        width: 100%;
    }

    .search-actions[b-zwgh1ngik1] {
        justify-content: flex-end;
    }

    .modal-dialog[b-zwgh1ngik1] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .form-row[b-zwgh1ngik1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-row .form-label[b-zwgh1ngik1] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-row .form-control[b-zwgh1ngik1] {
        width: 100%;
    }
}

/* Detail Of Issue Configuration Form */
.doi-config-form-container[b-zwgh1ngik1] {
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 2rem;
    margin-top: 1rem;
}

.doi-config-form[b-zwgh1ngik1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.doi-form-row[b-zwgh1ngik1] {
    display: flex;
    gap: 2rem;
}

.doi-form-row .doi-form-field[b-zwgh1ngik1] {
    flex: 1;
}

.doi-form-field[b-zwgh1ngik1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.doi-form-field .form-label[b-zwgh1ngik1] {
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.doi-form-field .form-control[b-zwgh1ngik1] {
    padding: 0.625rem 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
}

.doi-form-field .form-control:focus[b-zwgh1ngik1] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.doi-form-field .form-textarea[b-zwgh1ngik1] {
    min-height: 120px;
    resize: vertical;
}

.doi-form-field .form-textarea[b-zwgh1ngik1]::placeholder {
    color: #6c757d;
}

.doi-form-actions[b-zwgh1ngik1] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
}

.doi-form-actions .btn-save[b-zwgh1ngik1] {
    background-color: #198754;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
}

.doi-form-actions .btn-save:hover[b-zwgh1ngik1] {
    background-color: #157347;
}

.doi-form-actions .btn-cancel[b-zwgh1ngik1] {
    background-color: white;
    color: #198754;
    border: 1px solid #198754;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
}

.doi-form-actions .btn-cancel:hover[b-zwgh1ngik1] {
    background-color: #f8f9fa;
}

@media (max-width: 768px) {
    .doi-form-row[b-zwgh1ngik1] {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Reference Warning */
.reference-warning[b-zwgh1ngik1] {
    width: 100%;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    background-color: #fef3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 0.825rem;
    line-height: 1.5;
}

.reference-warning strong[b-zwgh1ngik1] {
    font-weight: 600;
}

/* Reference info banner inside edit modal */
.modal-reference-info[b-zwgh1ngik1] {
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    background-color: #cfe2ff;
    color: #084298;
    border: 1px solid #b6d4fe;
    border-radius: 4px;
    font-size: 0.825rem;
    line-height: 1.5;
}
/* /Components/Pages/NcrOverview.razor.rz.scp.css */
/* NCR Overview Container */
.ncr-overview-container[b-w6mrqrqdos] {
    padding: 1.5rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.btn-powerbi[b-w6mrqrqdos] {
    background-color: transparent;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-powerbi:hover[b-w6mrqrqdos] {
    background-color: #ff6b3c;
    color: white;
}

.btn-create-ncr[b-w6mrqrqdos] {
    background-color: #ff6b3c;
    color: white;
    border: 2px solid #ff6b3c;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-create-ncr:hover[b-w6mrqrqdos] {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

.btn-toggle-charts[b-w6mrqrqdos] {
    background-color: transparent;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-toggle-charts:hover[b-w6mrqrqdos] {
    background-color: #ff6b3c;
    color: white;
}

/* Site Filter + Tab Filters Row */
.site-and-tabs-row[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.site-filter[b-w6mrqrqdos] {
    flex-shrink: 0;
}

.site-dropdown-wrapper[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border-radius: 25px;
    padding: 0.3rem 0.75rem 0.3rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s;
}

.site-dropdown-wrapper:focus-within[b-w6mrqrqdos] {
    border-color: #003366;
}

.site-icon[b-w6mrqrqdos] {
    color: #003366;
    flex-shrink: 0;
}

.site-select[b-w6mrqrqdos] {
    border: none;
    background: transparent;
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    padding: 0.35rem 1.5rem 0.35rem 0.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    min-width: 140px;
}

.site-select:focus[b-w6mrqrqdos] {
    outline: none;
}

.site-select option[b-w6mrqrqdos] {
    font-weight: 400;
}

/* Tab Filters */
.tab-filters-wrapper[b-w6mrqrqdos] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex: 1;
}

.tab-filters[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 0;
    background: white;
    border-radius: 25px;
    padding: 0.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tab-btn[b-w6mrqrqdos] {
    padding: 0.5rem 1.5rem;
    border: none;
    background: transparent;
    color: #666;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
}

.tab-btn:hover[b-w6mrqrqdos] {
    background: #f0f0f0;
}

.tab-btn.active[b-w6mrqrqdos] {
    background: #003366;
    color: white;
}

.btn-reset[b-w6mrqrqdos] {
    background: none;
    border: none;
    color: #ff6b3c;
    font-size: 0.875rem;
    cursor: pointer;
    position: absolute;
    right: 0;
}

/* Charts Section */
.charts-section[b-w6mrqrqdos] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.chart-loading[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #64748b;
    font-size: 0.9rem;
}

.chart-card[b-w6mrqrqdos] {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.chart-title[b-w6mrqrqdos] {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 1rem 0;
}

.chart-content[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.pie-chart-container[b-w6mrqrqdos] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
    aspect-ratio: 1;
}

.pie-chart[b-w6mrqrqdos] {
    width: 100%;
    height: 100%;
}

.chart-legend[b-w6mrqrqdos] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.legend-item[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color[b-w6mrqrqdos] {
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    display: block;
}

.legend-label[b-w6mrqrqdos] {
    color: #555;
    white-space: nowrap;
}

/* Bar Chart */
.bar-chart-content[b-w6mrqrqdos] {
    flex-direction: column;
}

.bar-chart-container[b-w6mrqrqdos] {
    display: flex;
    align-items: flex-end;
    height: 200px;
    position: relative;
    padding-left: 40px;
    width: 100%;
}

.bar-chart-y-axis[b-w6mrqrqdos] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #888;
    text-align: right;
    width: 30px;
}

.bar-chart-area[b-w6mrqrqdos] {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    height: 180px;
    padding-bottom: 20px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-left: 10px;
    padding-right: 10px;
    flex: 1;
    width: 100%;
}

.bar-wrapper[b-w6mrqrqdos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.bar[b-w6mrqrqdos] {
    width: 100%;
    max-width: 80px;
    min-height: 4px;
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: height 0.3s ease;
}

.bar-value[b-w6mrqrqdos] {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding-top: 4px;
}

.bar-label[b-w6mrqrqdos] {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #666;
}

.bar-chart-y-label[b-w6mrqrqdos] {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: rotate(-90deg) translateX(-50%);
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
}

.bar-chart-x-label[b-w6mrqrqdos] {
    text-align: center;
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.5rem;
}

/* Data Grid */
.data-grid-container[b-w6mrqrqdos] {
    background: white;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ncr-data-grid[b-w6mrqrqdos] {
    width: 100%;
    border-collapse: collapse;
}

/* NCR No. column — kept narrow (~half its natural width) since values are short.
   width:1% + nowrap shrinks the column to its content in an auto-layout table, and
   capping the filter input stops the header filter from forcing it wide. */
.ncr-data-grid th.col-ncrnumber[b-w6mrqrqdos],
.ncr-data-grid td.col-ncrnumber[b-w6mrqrqdos] {
    width: 1%;
    white-space: nowrap;
}

.ncr-data-grid th.col-ncrnumber .cf-control[b-w6mrqrqdos] {
    max-width: 70px;
}

.ncr-data-grid th[b-w6mrqrqdos] {
    background: #f8f9fa;
    padding: 0.6rem 1rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    border-bottom: 2px solid #eee;
    position: relative;
    vertical-align: top;
}

.th-content[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.sort-btn[b-w6mrqrqdos] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem;
    color: #ff6b3c;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
}

.sort-btn:hover[b-w6mrqrqdos],
.sort-btn.active[b-w6mrqrqdos] {
    opacity: 1;
}

/* Descending sort flips the icon so the active direction is visible */
.sort-btn.active.desc svg[b-w6mrqrqdos] {
    transform: scaleY(-1);
}

/* Filter inputs in header */
.filter-input[b-w6mrqrqdos] {
    width: 100%;
}

.filter-input-wrapper[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    overflow: hidden;
    background: white;
}

.filter-input-wrapper .filter-icon[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #ff6b3c;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
}

.filter-input-wrapper .form-control[b-w6mrqrqdos] {
    border: none;
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    height: 28px;
    box-shadow: none;
    outline: none;
}

.filter-input-wrapper .form-control:focus[b-w6mrqrqdos] {
    box-shadow: none;
    outline: none;
}

/* Date filter */
.date-filter[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
}

.date-picker-btn[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #ff6b3c;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
}

.date-picker-btn:hover[b-w6mrqrqdos] {
    background: #e55a2b;
}

.date-picker-btn svg[b-w6mrqrqdos] {
    stroke: white;
}

/* Filter select (for status dropdown) */
.filter-select[b-w6mrqrqdos] {
    border: 1px solid #ff6b3c !important;
    border-radius: 4px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
    height: 28px !important;
    background: white;
    color: #333;
    cursor: pointer;
    width: 100%;
}

.filter-select:focus[b-w6mrqrqdos] {
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.2) !important;
    outline: none !important;
}

.filter-control[b-w6mrqrqdos] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    font-size: 0.8rem;
}

.filter-control:focus[b-w6mrqrqdos] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.2);
}

.ncr-data-grid td[b-w6mrqrqdos] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    font-size: 0.875rem;
    color: #555;
}

.ncr-data-grid tbody tr[b-w6mrqrqdos] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.ncr-data-grid tbody tr:hover[b-w6mrqrqdos] {
    background-color: #f8f9fa;
}

.no-data[b-w6mrqrqdos] {
    text-align: center;
    color: #888;
    padding: 2rem 1rem !important;
}

/* Pagination */
.pagination-container[b-w6mrqrqdos] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 0.25rem;
}

.pagination-container .btn[b-w6mrqrqdos] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.pagination-container .btn:hover:not(:disabled)[b-w6mrqrqdos] {
    color: #212529;
}

.pagination-container .btn:disabled[b-w6mrqrqdos] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-w6mrqrqdos] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Status Badges */
.status-badge[b-w6mrqrqdos] {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.status-triage[b-w6mrqrqdos] {
    background-color: #B6193F;
}

.status-initial-containment[b-w6mrqrqdos] {
    background-color: #FB4E13;
}

.status-supplier-containment[b-w6mrqrqdos] {
    background-color: #FAB600;
    color: #333;
}

.status-root-cause[b-w6mrqrqdos] {
    background-color: #F4E11D;
    color: #333;
}

.status-corrective-action[b-w6mrqrqdos] {
    background-color: #C1D530;
    color: #333;
}

.status-verification[b-w6mrqrqdos] {
    background-color: #0058A5;
}

.status-review[b-w6mrqrqdos] {
    background-color: #12A1BF;
}

.status-closed[b-w6mrqrqdos] {
    background-color: #009667;
}

.status-rejected[b-w6mrqrqdos] {
    background-color: #575756;
}

.status-requires-info[b-w6mrqrqdos] {
    background-color: #AEAEAC;
    color: #333;
}

.status-default[b-w6mrqrqdos] {
    background-color: #95a5a6;
}

/* RPN Badges */
.rpn-badge[b-w6mrqrqdos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

.rpn-red[b-w6mrqrqdos] {
    background-color: #C31622;
}

.rpn-orange[b-w6mrqrqdos] {
    background-color: #D48425;
}

.rpn-yellow[b-w6mrqrqdos] {
    background-color: #ECCD21;
    color: #333;
}

.rpn-zero[b-w6mrqrqdos] {
    background-color: #ECCD21;
    color: #333;
}

/* Responsive */
@media (max-width: 1200px) {
    .charts-section[b-w6mrqrqdos] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .charts-section[b-w6mrqrqdos] {
        grid-template-columns: 1fr;
    }

    .ncr-header[b-w6mrqrqdos] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .site-and-tabs-row[b-w6mrqrqdos] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .tab-filters-wrapper[b-w6mrqrqdos] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .tab-filters[b-w6mrqrqdos] {
        flex-wrap: wrap;
    }
}

/* Column Chooser */
.col-chooser-th[b-w6mrqrqdos] {
    width: 40px;
    min-width: 40px;
    padding: 0.4rem !important;
    vertical-align: top;
    background: #f8f9fa;
    border-bottom: 2px solid #eee;
}

.col-chooser-td[b-w6mrqrqdos] {
    width: 40px;
    min-width: 40px;
    padding: 0.4rem !important;
}

.col-chooser-wrapper[b-w6mrqrqdos] {
    position: relative;
    display: flex;
    justify-content: center;
}

.col-chooser-btn[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.col-chooser-btn:hover[b-w6mrqrqdos] {
    background: #f0f0f0;
    border-color: #ff6b3c;
    color: #ff6b3c;
}

.col-chooser-overlay[b-w6mrqrqdos] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.col-chooser-popover[b-w6mrqrqdos] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 0.5rem 0;
}

.col-chooser-list[b-w6mrqrqdos] {
    display: flex;
    flex-direction: column;
}

.col-chooser-item[b-w6mrqrqdos] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.col-chooser-item:hover[b-w6mrqrqdos] {
    background: #f8f9fa;
}

.col-chooser-item input[type="checkbox"][b-w6mrqrqdos] {
    width: 16px;
    height: 16px;
    accent-color: #ff6b3c;
    cursor: pointer;
    flex-shrink: 0;
}

.col-chooser-item span[b-w6mrqrqdos] {
    user-select: none;
}

/* Close button for column chooser (optional) */
.col-chooser-close[b-w6mrqrqdos] {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: #ff6b3c;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.col-chooser-close:hover[b-w6mrqrqdos] {
    background: #e55a2b;
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* Notifications Page Styles */
.notifications-page[b-t2txx5cmz7] {
    max-width: 1200px;
    margin: 0 auto;
}

.notifications-header[b-t2txx5cmz7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #163a49;
}

.notifications-header h2[b-t2txx5cmz7] {
    margin: 0;
    font-size: 1.5rem;
    color: #163a49;
    font-weight: 700;
}

.btn-mark-all-read[b-t2txx5cmz7] {
    padding: 0.5rem 1.25rem;
    background: white;
    color: #ff6b3c;
    border: 2px solid #ff6b3c;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mark-all-read:hover:not(:disabled)[b-t2txx5cmz7] {
    background: #fff5f0;
}

.btn-mark-all-read:disabled[b-t2txx5cmz7] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Action buttons */
.notifications-actions[b-t2txx5cmz7] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-action[b-t2txx5cmz7] {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid;
}

.btn-open[b-t2txx5cmz7] {
    background: #ff6b3c;
    color: white;
    border-color: #ff6b3c;
}

.btn-open:hover[b-t2txx5cmz7] {
    background: #e55a2d;
    border-color: #e55a2d;
}

.btn-mark-read[b-t2txx5cmz7],
.btn-mark-unread[b-t2txx5cmz7] {
    background: white;
    color: #ff6b3c;
    border-color: #ff6b3c;
}

.btn-mark-read:hover[b-t2txx5cmz7],
.btn-mark-unread:hover[b-t2txx5cmz7] {
    background: #fff5f0;
}

/* Filter bar */
.notifications-filter-bar[b-t2txx5cmz7] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group[b-t2txx5cmz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label[b-t2txx5cmz7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.filter-group select[b-t2txx5cmz7],
.filter-group input[b-t2txx5cmz7] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.85rem;
    background: white;
    min-width: 120px;
}

.filter-group input[b-t2txx5cmz7] {
    min-width: 250px;
}

.filter-group select:focus[b-t2txx5cmz7],
.filter-group input:focus[b-t2txx5cmz7] {
    outline: none;
    border-color: #ff6b3c;
    box-shadow: 0 0 0 2px rgba(255, 107, 60, 0.2);
}

.btn-clear-filter[b-t2txx5cmz7] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.9rem;
    padding: 0.25rem 0.375rem;
    border-radius: 3px;
    line-height: 1;
}

.btn-clear-filter:hover[b-t2txx5cmz7] {
    color: #111827;
    background: #e5e7eb;
}

/* Loading */
.notifications-loading[b-t2txx5cmz7] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
    font-size: 0.95rem;
}

/* Empty state */
.notifications-empty[b-t2txx5cmz7] {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.notifications-empty svg[b-t2txx5cmz7] {
    margin-bottom: 1rem;
}

.notifications-empty p[b-t2txx5cmz7] {
    font-size: 1rem;
    margin: 0;
}

/* Table */
.notifications-table-container[b-t2txx5cmz7] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.notifications-table[b-t2txx5cmz7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.notifications-table thead th[b-t2txx5cmz7] {
    background: #f9fafb;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.notifications-table thead th:hover[b-t2txx5cmz7] {
    background: #f3f4f6;
}

.sort-arrow[b-t2txx5cmz7] {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: #ff6b3c;
}

.notifications-table tbody tr[b-t2txx5cmz7] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.notifications-table tbody tr:hover[b-t2txx5cmz7] {
    background: #f9fafb;
}

.notifications-table tbody tr.unread[b-t2txx5cmz7] {
    font-weight: 600;
}

.notifications-table tbody tr.read[b-t2txx5cmz7] {
    color: #6b7280;
}

.notifications-table tbody tr.selected[b-t2txx5cmz7] {
    background: #fff5f0 !important;
    outline: 2px solid #ff6b3c;
    outline-offset: -2px;
}

.notifications-table td[b-t2txx5cmz7] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.col-date[b-t2txx5cmz7] {
    width: 180px;
    white-space: nowrap;
}

.col-subject[b-t2txx5cmz7] {
    width: 150px;
}

.col-message[b-t2txx5cmz7] {
    min-width: 200px;
}

.col-read[b-t2txx5cmz7] {
    width: 80px;
    text-align: center;
}

@media (max-width: 768px) {
    .notifications-filter-bar[b-t2txx5cmz7] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-group input[b-t2txx5cmz7] {
        min-width: 180px;
    }

    .notifications-actions[b-t2txx5cmz7] {
        flex-wrap: wrap;
    }

    .col-date[b-t2txx5cmz7] {
        width: auto;
    }
}

/* ===== Feedback Detail Modal ===== */
.fb-modal-overlay[b-t2txx5cmz7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.fb-modal-dialog[b-t2txx5cmz7] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 620px;
    max-height: 85vh;
    overflow-y: auto;
    animation: fbModalIn-b-t2txx5cmz7 0.2s ease-out;
}

@keyframes fbModalIn-b-t2txx5cmz7 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fb-modal-header[b-t2txx5cmz7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fb-modal-header-content[b-t2txx5cmz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fb-modal-header h5[b-t2txx5cmz7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.fb-modal-close[b-t2txx5cmz7] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
}

.fb-modal-close:hover[b-t2txx5cmz7] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.fb-modal-body[b-t2txx5cmz7] {
    padding: 1.25rem;
}

.fb-detail-title[b-t2txx5cmz7] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #163a49;
    margin-bottom: 0.75rem;
}

.fb-detail-badges[b-t2txx5cmz7] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.fb-detail-category-badge[b-t2txx5cmz7] {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}

.priority-badge[b-t2txx5cmz7] {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
}

.priority-badge.priority-low[b-t2txx5cmz7] {
    background: #dcfce7;
    color: #166534;
}

.priority-badge.priority-medium[b-t2txx5cmz7] {
    background: #fef3c7;
    color: #92400e;
}

.priority-badge.priority-high[b-t2txx5cmz7] {
    background: #fecaca;
    color: #991b1b;
}

.status-badge[b-t2txx5cmz7] {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
}

.status-badge-open[b-t2txx5cmz7] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge-closed[b-t2txx5cmz7] {
    background: #f1f5f9;
    color: #64748b;
}

.status-badge-in-progress[b-t2txx5cmz7] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge-in-review[b-t2txx5cmz7] {
    background: #e0e7ff;
    color: #3730a3;
}

.fb-detail-grid[b-t2txx5cmz7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.fb-detail-field[b-t2txx5cmz7] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fb-detail-label[b-t2txx5cmz7] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    font-weight: 600;
}

.fb-detail-value[b-t2txx5cmz7] {
    font-size: 0.875rem;
    color: #1e293b;
}

.fb-detail-section[b-t2txx5cmz7] {
    margin-bottom: 1rem;
}

/* Attachments in feedback modal */
.fb-detail-files[b-t2txx5cmz7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.fb-detail-file-thumb[b-t2txx5cmz7] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.fb-detail-file-img-link[b-t2txx5cmz7] {
    display: inline-block;
}

.fb-detail-file-img-link:hover .fb-detail-file-thumb[b-t2txx5cmz7] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fb-detail-file-link[b-t2txx5cmz7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #3b82f6;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background 0.15s;
}

.fb-detail-file-link:hover[b-t2txx5cmz7] {
    background: #eff6ff;
}

/* Lightbox */
.lightbox-overlay[b-t2txx5cmz7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1060;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.lightbox-content[b-t2txx5cmz7] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.lightbox-image[b-t2txx5cmz7] {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.lightbox-close[b-t2txx5cmz7] {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.lightbox-close:hover[b-t2txx5cmz7] {
    opacity: 1;
}

.lightbox-caption[b-t2txx5cmz7] {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.fb-detail-file-img-link[b-t2txx5cmz7] {
    display: inline-block;
    cursor: pointer;
}

.fb-detail-description[b-t2txx5cmz7] {
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.7;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    white-space: pre-wrap;
}
/* /Components/Pages/PublicBarcodeTest.razor.rz.scp.css */
.bt-container[b-3bxsfpthfm] {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
}

.bt-container h1[b-3bxsfpthfm] {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
}

.bt-hint[b-3bxsfpthfm] {
    color: #555;
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.bt-warn[b-3bxsfpthfm] {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.9rem;
}

.bt-error[b-3bxsfpthfm] {
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    color: #842029;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.9rem;
}

.bt-controls[b-3bxsfpthfm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

.bt-btn[b-3bxsfpthfm] {
    border: 1px solid #ccc;
    background: #f8f9fa;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

.bt-btn:disabled[b-3bxsfpthfm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bt-btn-primary[b-3bxsfpthfm] {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.bt-btn-success[b-3bxsfpthfm] {
    background: #198754;
    color: #fff;
    border-color: #198754;
}

.bt-btn-danger[b-3bxsfpthfm] {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.bt-select[b-3bxsfpthfm] {
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    min-width: 220px;
}

.bt-stage[b-3bxsfpthfm] {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.bt-video[b-3bxsfpthfm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bt-overlay-frame[b-3bxsfpthfm] {
    position: absolute;
    inset: 15% 10%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.bt-result[b-3bxsfpthfm] {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.bt-result-label[b-3bxsfpthfm] {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bt-result-value[b-3bxsfpthfm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 0.25rem;
    word-break: break-all;
}

.bt-result-format[b-3bxsfpthfm],
.bt-result-count[b-3bxsfpthfm] {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #555;
}

.bt-log[b-3bxsfpthfm] {
    margin-top: 1.25rem;
}

.bt-log h3[b-3bxsfpthfm] {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.bt-log table[b-3bxsfpthfm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.bt-log th[b-3bxsfpthfm], .bt-log td[b-3bxsfpthfm] {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.bt-log th[b-3bxsfpthfm] {
    background: #f1f3f5;
    font-weight: 600;
}

.bt-log code[b-3bxsfpthfm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
}
/* /Components/Pages/PublicNcrStatus.razor.rz.scp.css */
/* Public NCR Status Page */
.public-status-page[b-9phpr4rkrw] {
    max-width: 800px;
    margin: 0 auto;
}

/* Loading */
.loading-container[b-9phpr4rkrw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: #666;
}

/* Not Found */
.not-found-card[b-9phpr4rkrw] {
    background: white;
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.not-found-card h2[b-9phpr4rkrw] {
    color: #333;
    margin: 0 0 0.5rem 0;
}

.not-found-card p[b-9phpr4rkrw] {
    color: #666;
    margin: 0;
}

/* NCR Header */
.ncr-number-title[b-9phpr4rkrw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #003366;
    margin: 0 0 0.5rem 0;
}

/* Status Badge */
.status-badge[b-9phpr4rkrw] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    margin-bottom: 2rem;
}

.badge-triage[b-9phpr4rkrw] {
    background-color: #c0392b;
}

.badge-initial-containment[b-9phpr4rkrw] {
    background-color: #e67e22;
}

.badge-supplier-containment[b-9phpr4rkrw] {
    background-color: #f39c12;
    color: #333;
}

.badge-root-cause[b-9phpr4rkrw] {
    background-color: #f1c40f;
    color: #333;
}

.badge-corrective-action[b-9phpr4rkrw] {
    background-color: #27ae60;
}

.badge-verification[b-9phpr4rkrw] {
    background-color: #2980b9;
}

.badge-review[b-9phpr4rkrw] {
    background-color: #1abc9c;
}

.badge-closed[b-9phpr4rkrw] {
    background-color: #7f8c8d;
}

.badge-default[b-9phpr4rkrw] {
    background-color: #95a5a6;
}

/* Workflow Timeline */
.workflow-timeline[b-9phpr4rkrw] {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 1.5rem;
}

.timeline-step[b-9phpr4rkrw] {
    position: relative;
}

.timeline-step-header[b-9phpr4rkrw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid #eef0f4;
    border-radius: 8px;
}

.timeline-step-number[b-9phpr4rkrw] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #bec5cf;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.timeline-step-number.active[b-9phpr4rkrw] {
    background: #2563eb;
}

.timeline-step-number.completed[b-9phpr4rkrw] {
    background: #10b981;
}

.timeline-step-title[b-9phpr4rkrw] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

/* Connector Line */
.timeline-connector[b-9phpr4rkrw] {
    display: flex;
    justify-content: flex-start;
    padding-left: 2.35rem;
    height: 28px;
}

.timeline-connector-line[b-9phpr4rkrw] {
    width: 2px;
    height: 100%;
    background: #dee2e6;
}

.timeline-connector-line.completed[b-9phpr4rkrw] {
    background: #10b981;
}

/* Responsive */
@media (max-width: 600px) {
    .workflow-timeline[b-9phpr4rkrw] {
        padding: 1rem;
    }

    .timeline-step-header[b-9phpr4rkrw] {
        padding: 0.75rem 1rem;
    }

    .ncr-number-title[b-9phpr4rkrw] {
        font-size: 1.3rem;
    }
}
/* /Components/Pages/QualityCheckDeviceSelector.razor.rz.scp.css */
/* Select Device Account Page */
.select-device-container[b-n518ktku9h] {
    padding: 1rem 1.5rem;
    min-height: 100vh;
    background-color: var(--page-bg, #f5f7f9);
}

/* Tabs */
.tab-container[b-n518ktku9h] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.tab-button[b-n518ktku9h] {
    padding: 0.5rem 1.5rem;
    border: 1px solid #dee2e6;
    background: white;
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.tab-button.active[b-n518ktku9h] {
    background: white;
    color: #333;
    border-color: #dee2e6;
}

.tab-button:hover:not(.active)[b-n518ktku9h] {
    background: #f8f9fa;
}

/* Loading Container */
.loading-container[b-n518ktku9h] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

/* Error Container */
.error-container[b-n518ktku9h] {
    padding: 2rem;
}

/* Device Account Cards Grid */
.device-account-grid[b-n518ktku9h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Device Account Card */
.device-account-card[b-n518ktku9h] {
    display: flex;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-height: 100px;
}

.device-account-card:hover[b-n518ktku9h] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.device-account-card:active[b-n518ktku9h] {
    transform: translateY(0);
}

/* Colour Strip */
.card-colour-strip[b-n518ktku9h] {
    width: 100px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Strip Icon */
.strip-icon[b-n518ktku9h] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.strip-icon svg[b-n518ktku9h] {
    color: inherit;
    stroke: currentColor;
}

.strip-icon-mask[b-n518ktku9h] {
    width: 32px;
    height: 32px;
    display: block;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Card Content */
.card-content[b-n518ktku9h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.25rem;
    gap: 0.25rem;
}

/* Card Details */
.card-details[b-n518ktku9h] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-meta[b-n518ktku9h] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa8b6;
    font-weight: 500;
}

.card-title[b-n518ktku9h] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e87722;
    line-height: 1.2;
}

/* No Accounts Message */
.no-accounts[b-n518ktku9h] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.no-accounts p[b-n518ktku9h] {
    margin: 0;
    font-size: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .device-account-grid[b-n518ktku9h] {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .card-colour-strip[b-n518ktku9h] {
        width: 80px;
        min-width: 80px;
    }

    .card-title[b-n518ktku9h] {
        font-size: 1.1rem;
    }
}

@media (min-width: 1200px) {
    .device-account-grid[b-n518ktku9h] {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
    }
}
/* /Components/Pages/QualityCheckItems.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-ddhiwvd0bt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-ddhiwvd0bt] {
    transform: translateY(1px);
}

.panel-header-row[b-ddhiwvd0bt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-ddhiwvd0bt] {
    flex: 1;
}

.panel-header-actions h2[b-ddhiwvd0bt] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

/* Quality container */
.quality-container[b-ddhiwvd0bt] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-ddhiwvd0bt] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-ddhiwvd0bt] {
    max-height: 400px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-ddhiwvd0bt] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-row[b-ddhiwvd0bt] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-field[b-ddhiwvd0bt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
}

.search-label[b-ddhiwvd0bt] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}

.search-field .form-control[b-ddhiwvd0bt] {
    width: 120px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-ddhiwvd0bt] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.date-input-wrapper[b-ddhiwvd0bt] {
    position: relative;
    display: flex;
    align-items: center;
}

.date-input-wrapper .form-control[b-ddhiwvd0bt] {
    padding-right: 2rem;
}

.date-icon[b-ddhiwvd0bt] {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
}

.date-icon svg[b-ddhiwvd0bt] {
    stroke: white;
}

.search-actions[b-ddhiwvd0bt] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    align-items: flex-end;
}

.search-actions .btn[b-ddhiwvd0bt] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.search-actions .btn-outline-primary[b-ddhiwvd0bt] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.search-actions .btn-outline-primary:hover[b-ddhiwvd0bt] {
    color: white;
    background-color: #ff6b3c;
}

.search-actions .btn-outline-secondary[b-ddhiwvd0bt] {
    color: #6c757d;
    border-color: #6c757d;
    background: white;
}

.search-actions .btn-outline-secondary:hover[b-ddhiwvd0bt] {
    color: white;
    background-color: #6c757d;
}

/* Toolbar */
.quality-toolbar[b-ddhiwvd0bt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-ddhiwvd0bt] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-ddhiwvd0bt] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-ddhiwvd0bt] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-ddhiwvd0bt],
.toolbar-buttons .btn-outline-primary.active[b-ddhiwvd0bt] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-ddhiwvd0bt] {
    color: white;
    border-color: #ff6b3c;
    background: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning:hover[b-ddhiwvd0bt] {
    color: white;
    background-color: #e55a2b;
    border-color: #e55a2b;
}

/* Pagination */
.toolbar-pagination[b-ddhiwvd0bt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-ddhiwvd0bt] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.toolbar-pagination .btn:hover:not(:disabled)[b-ddhiwvd0bt] {
    color: #212529;
}

.toolbar-pagination .btn:disabled[b-ddhiwvd0bt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-ddhiwvd0bt] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.table-responsive[b-ddhiwvd0bt] {
    overflow-x: auto;
}

.quality-table[b-ddhiwvd0bt] {
    width: 100%;
    border-collapse: collapse;
}

.quality-table thead th[b-ddhiwvd0bt] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.quality-table tbody tr[b-ddhiwvd0bt] {
    border-bottom: 1px solid #f0f0f0;
}

.quality-table tbody tr:hover[b-ddhiwvd0bt] {
    background-color: #f8f9fa;
}

.quality-table tbody td[b-ddhiwvd0bt] {
    padding: 0.75rem 0.75rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
    white-space: nowrap;
}

/* Let text-heavy columns wrap so they are never truncated */
.quality-table tbody td:nth-child(4)[b-ddhiwvd0bt], /* Component name */
.quality-table tbody td:nth-child(9)[b-ddhiwvd0bt], /* Manufactured source */
.quality-table tbody td:nth-child(10)[b-ddhiwvd0bt] { /* Assembled source */
    white-space: normal;
    word-break: break-word;
    min-width: 180px;
}

.quality-table tbody td a[b-ddhiwvd0bt] {
    color: #0d6efd;
    text-decoration: none;
}

.quality-table tbody td a:hover[b-ddhiwvd0bt] {
    text-decoration: underline;
}

/* Product cell with popover (UIN hover) */
.product-cell[b-ddhiwvd0bt] {
    position: relative;
    overflow: visible;
}

.product-link[b-ddhiwvd0bt] {
    color: #0d6efd;
    cursor: pointer;
}

.product-link:hover[b-ddhiwvd0bt] {
    text-decoration: underline;
}

/* Row selection */
.quality-table tbody tr.table-active[b-ddhiwvd0bt] {
    background-color: #e7f1ff;
}

/* Modal styles */
.modal-backdrop[b-ddhiwvd0bt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-ddhiwvd0bt] {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: visible;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

.modal-dialog.modal-lg[b-ddhiwvd0bt] {
    max-width: 620px;
}

.modal-header[b-ddhiwvd0bt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.modal-header h5[b-ddhiwvd0bt],
.modal-title[b-ddhiwvd0bt] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close[b-ddhiwvd0bt] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-ddhiwvd0bt] {
    color: #000;
}

.modal-body[b-ddhiwvd0bt] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body .form-group[b-ddhiwvd0bt] {
    margin-bottom: 1rem;
}

.modal-body .form-label[b-ddhiwvd0bt] {
    display: block;
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.modal-body .form-control[b-ddhiwvd0bt] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    box-sizing: border-box;
}

.modal-body .form-control:focus[b-ddhiwvd0bt] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-body .form-control[readonly][b-ddhiwvd0bt] {
    background-color: #e9ecef;
    opacity: 1;
}

.modal-body textarea.form-control[b-ddhiwvd0bt] {
    resize: vertical;
    min-height: 60px;
}

.modal-body .form-select[b-ddhiwvd0bt] {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    appearance: none;
    box-sizing: border-box;
}

.modal-body .form-select:focus[b-ddhiwvd0bt] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-footer[b-ddhiwvd0bt] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

.btn-save[b-ddhiwvd0bt] {
    background-color: #ff6b3c;
    border: 1px solid #ff6b3c;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.btn-save:hover[b-ddhiwvd0bt] {
    background-color: #e55a2d;
    border-color: #e55a2d;
}

.btn-save:disabled[b-ddhiwvd0bt] {
    background-color: #ffb099;
    border-color: #ffb099;
    cursor: not-allowed;
}

.btn-cancel[b-ddhiwvd0bt] {
    background-color: #6c757d;
    border: 1px solid #6c757d;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cancel:hover[b-ddhiwvd0bt] {
    background-color: #5c636a;
    border-color: #565e64;
}

/* Radio button group styles */
.radio-group[b-ddhiwvd0bt] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.radio-group-wrap[b-ddhiwvd0bt] {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.radio-label[b-ddhiwvd0bt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.radio-label input[type="radio"][b-ddhiwvd0bt] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
}

.radio-label input[type="radio"]:checked[b-ddhiwvd0bt]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #0d6efd;
    border-radius: 50%;
}

/* Alert styles */
.alert-danger[b-ddhiwvd0bt] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

/* Spinner */
.spinner-border-sm[b-ddhiwvd0bt] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Responsive */
@media (max-width: 768px) {
    .quality-toolbar[b-ddhiwvd0bt] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .toolbar-pagination[b-ddhiwvd0bt] {
        width: 100%;
        justify-content: flex-end;
    }

    .search-row[b-ddhiwvd0bt] {
        flex-direction: column;
    }

    .search-field .form-control[b-ddhiwvd0bt] {
        width: 100%;
    }

    .search-actions[b-ddhiwvd0bt] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .modal-dialog[b-ddhiwvd0bt] {
        width: 95%;
        max-height: 95vh;
    }

    .radio-group[b-ddhiwvd0bt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/QualityCheckReport.razor.rz.scp.css */
/* Quality Check Report Page */
.quality-report-page[b-u2vhysfl8u] {
    padding: 1.5rem;
    background-color: var(--page-bg, #f5f7f9);
    min-height: 100vh;
}

.quality-report-page .btn-download[b-u2vhysfl8u] {
    background: white;
    border: 2px solid #e87722;
    color: #e87722;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quality-report-page .btn-download:hover[b-u2vhysfl8u] {
    background: #e87722;
    color: white;
}

/* Filters Section */
.quality-report-page .filters-section[b-u2vhysfl8u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.quality-report-page .filter-group[b-u2vhysfl8u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.quality-report-page .filter-group label[b-u2vhysfl8u] {
    font-size: 0.85rem;
    color: #495057;
    font-weight: 500;
}

.quality-report-page .form-control[b-u2vhysfl8u],
.quality-report-page .form-select[b-u2vhysfl8u] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
}

.quality-report-page .date-input-wrapper[b-u2vhysfl8u] {
    position: relative;
    display: flex;
    align-items: center;
}

.quality-report-page .date-input-wrapper .form-control[b-u2vhysfl8u] {
    flex: 1;
    padding-right: 2.5rem;
}

.quality-report-page .date-picker-hidden[b-u2vhysfl8u] {
    position: absolute;
    right: 0.5rem;
    opacity: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.quality-report-page .date-picker-btn[b-u2vhysfl8u] {
    position: absolute;
    right: 0.5rem;
    background: #e87722;
    border: none;
    border-radius: 4px;
    padding: 0.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.quality-report-page .date-picker-btn svg[b-u2vhysfl8u] {
    stroke: white;
}

/* Charts Section */
.quality-report-page .charts-section[b-u2vhysfl8u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.quality-report-page .chart-card[b-u2vhysfl8u] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    min-height: 250px;
}

.quality-report-page .chart-card h3[b-u2vhysfl8u] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #0b3f63;
    font-weight: 600;
}

.quality-report-page .chart-placeholder[b-u2vhysfl8u] {
    height: calc(100% - 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality-report-page .no-data-chart[b-u2vhysfl8u] {
    color: #9aa8b6;
    font-size: 0.9rem;
}

/* Simple Bar Chart */
.quality-report-page .simple-bar-chart[b-u2vhysfl8u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 180px;
    width: 100%;
    padding: 0 0.5rem;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.quality-report-page .bar-item[b-u2vhysfl8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    max-width: 60px;
}

.quality-report-page .bar[b-u2vhysfl8u] {
    width: 24px;
    background: #0b5f8f;
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.quality-report-page .bar-label[b-u2vhysfl8u] {
    font-size: 0.7rem;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
}

.quality-report-page .bar-value[b-u2vhysfl8u] {
    font-size: 0.75rem;
    color: #0b3f63;
    font-weight: 600;
}

/* Horizontal Bar Chart */
.quality-report-page .simple-bar-chart.horizontal[b-u2vhysfl8u] {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border: none;
    height: auto;
    gap: 0.5rem;
}

.quality-report-page .bar-item-horizontal[b-u2vhysfl8u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quality-report-page .bar-item-horizontal .bar-label[b-u2vhysfl8u] {
    width: 100px;
    text-align: right;
    flex-shrink: 0;
}

.quality-report-page .bar-item-horizontal .bar-wrapper[b-u2vhysfl8u] {
    flex: 1;
    height: 20px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.quality-report-page .bar-item-horizontal .bar[b-u2vhysfl8u] {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #0b5f8f;
}

.quality-report-page .bar-item-horizontal .bar-value[b-u2vhysfl8u] {
    width: 50px;
    text-align: left;
}

/* Combined Value Display */
.quality-report-page .combined-value-display[b-u2vhysfl8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quality-report-page .total-label[b-u2vhysfl8u] {
    font-size: 0.9rem;
    color: #6c757d;
}

.quality-report-page .total-value[b-u2vhysfl8u] {
    font-size: 2rem;
    color: #0b3f63;
    font-weight: 700;
}

/* Table Section */
.quality-report-page .table-section[b-u2vhysfl8u] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.quality-report-page .report-table[b-u2vhysfl8u] {
    width: 100%;
    border-collapse: collapse;
}

.quality-report-page .report-table thead th[b-u2vhysfl8u] {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
}

.quality-report-page .th-content[b-u2vhysfl8u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quality-report-page .sort-btn[b-u2vhysfl8u] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.quality-report-page .sort-btn:hover[b-u2vhysfl8u] {
    opacity: 1;
}

.quality-report-page .report-table tbody td[b-u2vhysfl8u] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: #495057;
}

.quality-report-page .report-table tbody tr:hover[b-u2vhysfl8u] {
    background: #f8f9fa;
}

.quality-report-page .no-data[b-u2vhysfl8u] {
    text-align: center;
    color: #9aa8b6;
    padding: 2rem !important;
}

/* Pagination */
.quality-report-page .pagination-row[b-u2vhysfl8u] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.quality-report-page .pagination-btn[b-u2vhysfl8u] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quality-report-page .pagination-btn:hover:not(:disabled)[b-u2vhysfl8u] {
    background: #f0f0f0;
}

.quality-report-page .pagination-btn:disabled[b-u2vhysfl8u] {
    opacity: 0.5;
    cursor: not-allowed;
}

.quality-report-page .pagination-info[b-u2vhysfl8u] {
    font-size: 0.85rem;
    color: #6c757d;
    padding: 0 0.5rem;
}

/* Responsive */
@media (max-width: 1199px) {
    .quality-report-page .charts-section[b-u2vhysfl8u] {
        grid-template-columns: 1fr;
    }

    .quality-report-page .filters-section[b-u2vhysfl8u] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .quality-report-page .page-header[b-u2vhysfl8u] {
        flex-direction: column;
        gap: 1rem;
    }

    .quality-report-page .filters-section[b-u2vhysfl8u] {
        grid-template-columns: 1fr;
    }

    .quality-report-page .table-section[b-u2vhysfl8u] {
        overflow-x: auto;
    }
}
/* /Components/Pages/QualityControl.razor.rz.scp.css */
/* Quality Control Dashboard */
.quality-control-dashboard[b-pvju785bwy] {
    padding: 1.5rem 1.25rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--page-bg, #f5f7f9);
}

.quality-control-dashboard .dashboard-body[b-pvju785bwy] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 4vh 0 2rem 0;
}

/* Card Grid - Match Home page grid width */
.quality-control-dashboard .card-grid[b-pvju785bwy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 800px;
    width: 100%;
}

/* Base Card Styles - Match Home page */
.quality-control-dashboard .card[b-pvju785bwy] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    border: 2px solid #e9ecef;
    transition: all 0.25s ease;
}

.quality-control-dashboard .card:hover[b-pvju785bwy] {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 8px 24px var(--accent-shadow, rgba(37, 99, 235, 0.15));
    transform: translateY(-4px);
}

.quality-control-dashboard .card-link[b-pvju785bwy] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.quality-control-dashboard .card-link:focus[b-pvju785bwy] {
    outline: 2px solid var(--accent-shadow, rgba(11, 95, 143, 0.18));
    outline-offset: 2px;
}

/* Card Top (Blue background area) - Match Home page */
.quality-control-dashboard .card-top[b-pvju785bwy] {
    background-color: var(--accent-bg, #cfe9fb);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    position: relative;
}

.quality-control-dashboard .card-top[b-pvju785bwy]::after {
    content: "";
    position: absolute;
    left: -20%;
    top: -10%;
    width: 140%;
    height: 140%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
    transform: rotate(-6deg);
    pointer-events: none;
}

.quality-control-dashboard .card-icon[b-pvju785bwy] {
    z-index: 1;
}

.quality-control-dashboard .card-icon svg[b-pvju785bwy] {
    width: 48px;
    height: 48px;
    color: var(--accent, #0b5f8f);
    stroke: currentColor;
}

/* Card Body - Match Home page */
.quality-control-dashboard .card-body[b-pvju785bwy] {
    padding: 1rem;
    background: white;
    flex: 1;
}

.quality-control-dashboard .card-meta[b-pvju785bwy] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa8b6;
    margin-bottom: 0.35rem;
}

.quality-control-dashboard .card-title[b-pvju785bwy] {
    font-size: 1.25rem;
    color: var(--accent, #0b5f8f);
    font-weight: 700;
}

/* Outlined Action Cards - same style as regular cards */
.quality-control-dashboard .card-outlined[b-pvju785bwy] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    min-height: 140px;
    transition: all 0.25s ease;
}

.quality-control-dashboard .card-outlined:hover[b-pvju785bwy] {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 8px 24px var(--accent-shadow, rgba(37, 99, 235, 0.15));
    transform: translateY(-4px);
}

.quality-control-dashboard .card-outlined:focus[b-pvju785bwy] {
    outline: 2px solid var(--accent-shadow, rgba(37, 99, 235, 0.4));
    outline-offset: 2px;
}

.quality-control-dashboard .card-content-centered[b-pvju785bwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    height: 100%;
    gap: 0.75rem;
}

.quality-control-dashboard .card-icon-action[b-pvju785bwy] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality-control-dashboard .card-icon-action svg[b-pvju785bwy] {
    color: #e87722;
    stroke: currentColor;
}

.quality-control-dashboard .card-action-text[b-pvju785bwy] {
    font-size: 1rem;
    color: #e87722;
    font-weight: 600;
    text-align: center;
}

/* Responsive - Match Home page breakpoints */
@media (max-width: 599px) {
    .quality-control-dashboard .card-grid[b-pvju785bwy] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) {
    .quality-control-dashboard .card[b-pvju785bwy] {
        min-height: 200px;
    }
}

/* ========================================
   Barcode Scanner Modal Styles
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-pvju785bwy] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    animation: fadeIn-b-pvju785bwy 0.2s ease;
}

@keyframes fadeIn-b-pvju785bwy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content */
.barcode-scanner-modal[b-pvju785bwy] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 450px;
    margin: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: slideIn-b-pvju785bwy 0.3s ease;
}

@keyframes slideIn-b-pvju785bwy {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close Button */
.modal-close-btn[b-pvju785bwy] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    color: #6c757d;
    transition: all 0.2s;
}

.modal-close-btn:hover[b-pvju785bwy] {
    background: #f0f0f0;
    color: #333;
}

/* Scanner Graphic */
.scanner-graphic[b-pvju785bwy] {
    position: relative;
    width: 200px;
    height: 140px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Barcode Visual */
.barcode-visual[b-pvju785bwy] {
    position: relative;
    width: 160px;
    height: 100px;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.barcode-lines[b-pvju785bwy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    padding: 15px 10px;
}

.barcode-line[b-pvju785bwy] {
    height: 70px;
    background: #1a1a1a;
    border-radius: 1px;
}

/* Scanner Beam Animation */
.scanner-beam[b-pvju785bwy] {
    position: absolute;
    left: 5px;
    right: 5px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e87722, transparent);
    box-shadow: 0 0 10px #e87722, 0 0 20px rgba(232, 119, 34, 0.5);
    animation: scanBeam-b-pvju785bwy 2s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes scanBeam-b-pvju785bwy {
    0%, 100% {
        top: 10px;
    }
    50% {
        top: calc(100% - 13px);
    }
}

/* Scanner Frame Corners */
.scanner-frame[b-pvju785bwy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.corner[b-pvju785bwy] {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #e87722;
}

.corner.top-left[b-pvju785bwy] {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: 4px 0 0 0;
}

.corner.top-right[b-pvju785bwy] {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-radius: 0 4px 0 0;
}

.corner.bottom-left[b-pvju785bwy] {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 4px;
}

.corner.bottom-right[b-pvju785bwy] {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-radius: 0 0 4px 0;
}

/* Scanner Title */
.scanner-title[b-pvju785bwy] {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b3f63;
    margin: 0 0 0.5rem 0;
}

.scanner-subtitle[b-pvju785bwy] {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 1.5rem 0;
}

/* Scanner Input */
.scanner-input-container[b-pvju785bwy] {
    margin-bottom: 1.5rem;
}

.scanner-input-label[b-pvju785bwy] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0b3f63;
    margin-bottom: 0.5rem;
}

.scanner-input[b-pvju785bwy] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1.1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s;
    text-align: center;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.scanner-input:focus[b-pvju785bwy] {
    border-color: #e87722;
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.15);
}

.scanner-input.error[b-pvju785bwy] {
    border-color: #dc3545;
}

.scanner-input.error:focus[b-pvju785bwy] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.scanner-input[b-pvju785bwy]::placeholder {
    color: #adb5bd;
    letter-spacing: normal;
    font-family: inherit;
}

/* Scanner Error */
.scanner-error[b-pvju785bwy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 6px;
    color: #c53030;
    font-size: 0.85rem;
}

.scanner-error svg[b-pvju785bwy] {
    flex-shrink: 0;
}

/* Scanner Actions */
.scanner-actions[b-pvju785bwy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-scan-submit[b-pvju785bwy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: #e87722;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-scan-submit:hover:not(:disabled)[b-pvju785bwy] {
    background: #d16a1f;
}

.btn-scan-submit:disabled[b-pvju785bwy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-scan-submit svg[b-pvju785bwy] {
    width: 20px;
    height: 20px;
}

.btn-scan-cancel[b-pvju785bwy] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-scan-cancel:hover[b-pvju785bwy] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* Responsive */
@media (max-width: 480px) {
    .barcode-scanner-modal[b-pvju785bwy] {
        padding: 1.5rem;
        margin: 0.5rem;
    }

    .scanner-graphic[b-pvju785bwy] {
        width: 160px;
        height: 120px;
    }

    .barcode-visual[b-pvju785bwy] {
        width: 130px;
        height: 80px;
    }

    .barcode-lines[b-pvju785bwy] {
        padding: 10px 8px;
    }

    .barcode-line[b-pvju785bwy] {
        height: 50px;
    }
}
/* /Components/Pages/ReportDetail.razor.rz.scp.css */
/* Styles are defined in wwwroot/app.css under .report-detail-page */
/* This file is kept for CSS isolation compatibility */

/* Return to Supplier Options - Collapsible Section */
.return-to-supplier-options[b-g3upc0yq70] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
    opacity: 0;
    margin: 0;
}

.return-to-supplier-options.expanded[b-g3upc0yq70] {
    max-height: 400px;
    opacity: 1;
    margin-bottom: 1rem;
}

.return-to-supplier-content[b-g3upc0yq70] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #0d6efd;
    margin-top: 0.5rem;
}

.return-to-supplier-content .form-section[b-g3upc0yq70] {
    margin-bottom: 1rem;
}

.return-to-supplier-content .form-section:last-of-type[b-g3upc0yq70] {
    margin-bottom: 0;
}

.return-to-supplier-content .form-label[b-g3upc0yq70] {
    display: block;
    font-size: 0.875rem;
    color: #212529;
    margin-bottom: 0.4rem;
}

.return-to-supplier-content .form-label strong[b-g3upc0yq70] {
    font-weight: 600;
}

.return-to-supplier-content .amount-input[b-g3upc0yq70] {
    width: 120px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
}

.return-to-supplier-content .amount-input:focus[b-g3upc0yq70] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.return-to-supplier-content .form-select[b-g3upc0yq70] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.return-to-supplier-content .form-select:focus[b-g3upc0yq70] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Validation Error */
.validation-error[b-g3upc0yq70] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 4px;
    color: #842029;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.validation-error svg[b-g3upc0yq70] {
    flex-shrink: 0;
    stroke: #842029;
}

/* Existing Comments Display */
.existing-comments[b-g3upc0yq70] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

.comment-entry[b-g3upc0yq70] {
    padding: 0.5rem;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
    border-left: 3px solid #0d6efd;
}

.comment-entry:last-child[b-g3upc0yq70] {
    margin-bottom: 0;
}

/* Delete Confirmation Modal */
.modal-backdrop[b-g3upc0yq70] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.confirmation-modal[b-g3upc0yq70] {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.confirmation-modal h3[b-g3upc0yq70] {
    margin: 0 0 1rem 0;
    color: #dc3545;
    font-size: 1.25rem;
}

.confirmation-modal p[b-g3upc0yq70] {
    margin: 0 0 0.5rem 0;
    color: #212529;
}

.confirmation-modal .text-muted[b-g3upc0yq70] {
    color: #6c757d;
    font-size: 0.875rem;
}

.modal-buttons[b-g3upc0yq70] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.modal-buttons .btn-cancel[b-g3upc0yq70] {
    padding: 0.5rem 1rem;
    border: 1px solid #6c757d;
    background: #fff;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.modal-buttons .btn-cancel:hover[b-g3upc0yq70] {
    background: #f8f9fa;
}

.modal-buttons .btn-delete[b-g3upc0yq70] {
    padding: 0.5rem 1rem;
    border: none;
    background: #dc3545;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.modal-buttons .btn-delete:hover[b-g3upc0yq70] {
    background: #bb2d3b;
}

.modal-buttons .btn-delete:disabled[b-g3upc0yq70] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Read-only sections for Complete status */
.readonly-section[b-g3upc0yq70] {
    margin-bottom: 1rem;
}

.readonly-section .detail-label[b-g3upc0yq70] {
    display: block;
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0.25rem;
}

.readonly-section .detail-value[b-g3upc0yq70] {
    display: block;
    font-size: 0.95rem;
    color: #212529;
}

.readonly-section .detail-value.highlight[b-g3upc0yq70] {
    color: #0d6efd;
}

/* SAP Scrap Results Confirmation Modal */
.sap-results-modal[b-g3upc0yq70] {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: sapModalSlideIn-b-g3upc0yq70 0.3s ease-out;
}

@keyframes sapModalSlideIn-b-g3upc0yq70 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sap-results-header[b-g3upc0yq70] {
    text-align: center;
    padding: 1.5rem 1.5rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #e9ecef;
}

.sap-results-icon[b-g3upc0yq70] {
    margin-bottom: 0.75rem;
}

.sap-results-icon.success svg[b-g3upc0yq70] {
    stroke: #28a745;
}

.sap-results-icon.warning svg[b-g3upc0yq70] {
    stroke: #ffc107;
}

.sap-results-title[b-g3upc0yq70] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.sap-results-title.success[b-g3upc0yq70] {
    color: #28a745;
}

.sap-results-title.warning[b-g3upc0yq70] {
    color: #856404;
}

.sap-results-body[b-g3upc0yq70] {
    padding: 1.25rem 1.5rem;
}

.sap-results-summary[b-g3upc0yq70] {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.sap-results-summary p[b-g3upc0yq70] {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #495057;
}

.sap-results-details[b-g3upc0yq70] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sap-result-item[b-g3upc0yq70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.sap-result-item.success[b-g3upc0yq70] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.sap-result-item.error[b-g3upc0yq70] {
    background: #fef2f2;
    border-color: #fecaca;
}

.sap-result-label[b-g3upc0yq70] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

.sap-result-item.success .sap-result-label svg[b-g3upc0yq70] {
    stroke: #16a34a;
}

.sap-result-item.error .sap-result-label svg[b-g3upc0yq70] {
    stroke: #dc2626;
}

.sap-result-value[b-g3upc0yq70] {
    text-align: right;
}

.sap-idoc[b-g3upc0yq70] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    color: #16a34a;
    background: #dcfce7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.sap-error-text[b-g3upc0yq70] {
    font-size: 0.8rem;
    color: #dc2626;
    max-width: 200px;
    text-align: right;
}

.sap-results-footer[b-g3upc0yq70] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
    background: #f8f9fa;
}

.btn-sap-ok[b-g3upc0yq70] {
    padding: 0.625rem 2.5rem;
    border: none;
    background: linear-gradient(135deg, #0066cc 0%, #4da6ff 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.3);
}

.btn-sap-ok:hover[b-g3upc0yq70] {
    background: linear-gradient(135deg, #0052a3 0%, #3d8fd9 100%);
    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.4);
    transform: translateY(-1px);
}
/* /Components/Pages/ReportOverview.razor.rz.scp.css */
.report-overview-page[b-cdnvm8p8kb] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.product-cell[b-cdnvm8p8kb] {
    position: relative;
    overflow: visible;
}

.product-link[b-cdnvm8p8kb] {
    color: #0d6efd;
    cursor: pointer;
}

.product-link:hover[b-cdnvm8p8kb] {
    text-decoration: underline;
}

.header-filters[b-cdnvm8p8kb] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.filter-group[b-cdnvm8p8kb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group.rows-per-page[b-cdnvm8p8kb] {
    min-width: auto;
    width: auto;
}

.filter-group.rows-per-page select.form-select[b-cdnvm8p8kb] {
    min-width: 70px;
    width: 70px;
    padding: 0.375rem 1.75rem 0.375rem 0.5rem;
}

.filter-group.status-filter[b-cdnvm8p8kb] {
    min-width: 200px;
}

.filter-group label[b-cdnvm8p8kb] {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 500;
    text-align: right;
}

.filter-group .form-select[b-cdnvm8p8kb] {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.filter-group .form-select:focus[b-cdnvm8p8kb] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.status-filter-section[b-cdnvm8p8kb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 220px;
}

.status-filter-section label[b-cdnvm8p8kb] {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 500;
    text-align: right;
}

.status-filter-section .form-select[b-cdnvm8p8kb] {
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.status-filter-section .form-select:focus[b-cdnvm8p8kb] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.loading-container[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Table Section */
.table-section[b-cdnvm8p8kb] {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.report-table[b-cdnvm8p8kb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table thead th[b-cdnvm8p8kb] {
    font-weight: 500;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}

.th-header[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
    user-select: none;
}

.th-header:hover[b-cdnvm8p8kb] {
    color: #0d6efd;
}

.sort-indicator[b-cdnvm8p8kb] {
    color: #264a60;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Column Filters */
.column-filter[b-cdnvm8p8kb] {
    width: 100%;
    min-width: 80px;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: #fff;
}

.column-filter.wide[b-cdnvm8p8kb] {
    min-width: 180px;
}

.column-filter:focus[b-cdnvm8p8kb] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

.date-filter-wrapper[b-cdnvm8p8kb] {
    display: flex;
    align-items: stretch;
}

.date-filter-wrapper .column-filter[b-cdnvm8p8kb] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
}

.date-picker-btn[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    background: #ff6b3c;
    border: 1px solid #ff6b3c;
    border-left: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    color: #fff;
}

.date-picker-btn:hover[b-cdnvm8p8kb] {
    background: #e55a2b;
}

.date-picker-btn svg[b-cdnvm8p8kb] {
    stroke: #fff;
}

/* Table Body */
.report-table tbody tr[b-cdnvm8p8kb] {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.report-table tbody tr:hover[b-cdnvm8p8kb] {
    background-color: #e7f1ff;
}

.report-table tbody tr:active[b-cdnvm8p8kb] {
    background-color: #d0e3ff;
}

.report-table tbody tr.selected[b-cdnvm8p8kb] {
    background-color: #e7f1ff;
}

.report-table tbody td[b-cdnvm8p8kb] {
    padding: 0.75rem;
    color: #212529;
    vertical-align: middle;
}

.report-table tbody td.component-name[b-cdnvm8p8kb] {
    color: #0d6efd;
    font-weight: 500;
}

.report-table tbody td a[b-cdnvm8p8kb] {
    color: #0d6efd;
    text-decoration: none;
}

.report-table tbody td a:hover[b-cdnvm8p8kb] {
    text-decoration: underline;
}

.report-table tbody td.no-data[b-cdnvm8p8kb] {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

/* Status Badge */
.status-badge[b-cdnvm8p8kb] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: capitalize;
}

.status-new[b-cdnvm8p8kb] {
    background-color: #0d6efd;
    color: #fff;
}

.status-complete[b-cdnvm8p8kb] {
    background-color: #198754;
    color: #fff;
}

.status-pending[b-cdnvm8p8kb] {
    background-color: #ffc107;
    color: #212529;
}

.status-added[b-cdnvm8p8kb] {
    background-color: #17a2b8;
    color: #fff;
}

.status-rejected[b-cdnvm8p8kb] {
    background-color: #dc3545;
    color: #fff;
}

.status-default[b-cdnvm8p8kb] {
    background-color: #6c757d;
    color: #fff;
}

/* Pagination */
.pagination-row[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1.5rem;
}

.page-size-selector[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-size-selector label[b-cdnvm8p8kb] {
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
}

.page-size-selector .form-select[b-cdnvm8p8kb] {
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    min-width: 70px;
}

.page-size-selector .form-select:focus[b-cdnvm8p8kb] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

.pagination-controls[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
}

/* Area Cards Section */
.area-cards-section[b-cdnvm8p8kb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 1.5rem;
    background-color: #e8edf2;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.area-card[b-cdnvm8p8kb] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    min-height: 90px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.area-card:hover[b-cdnvm8p8kb] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.area-card-left[b-cdnvm8p8kb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    min-width: 85px;
    gap: 0.2rem;
}

.area-icon[b-cdnvm8p8kb] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.1rem;
}

.area-icon svg[b-cdnvm8p8kb] {
    width: 24px;
    height: 24px;
    color: inherit;
    stroke: currentColor;
}

/* Area icon image styles */
.area-icon-img[b-cdnvm8p8kb] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.area-icon-mask[b-cdnvm8p8kb] {
    width: 24px;
    height: 24px;
    display: block;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.area-count[b-cdnvm8p8kb] {
    font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.area-card-right[b-cdnvm8p8kb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.25rem;
    flex: 1;
    background: #fff;
}

.area-label[b-cdnvm8p8kb] {
    font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    color: #8b9ba3;
}

.area-name[b-cdnvm8p8kb] {
    font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Area Color Variants - Light pastel backgrounds matching the screenshot */

/* Blue - default and steel */
.area-blue .area-card-left[b-cdnvm8p8kb],
.area-steel .area-card-left[b-cdnvm8p8kb] {
    background-color: #c5e0f7;
    color: #0066cc;
}

.area-blue .area-card-right[b-cdnvm8p8kb],
.area-steel .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-blue .area-label[b-cdnvm8p8kb],
.area-steel .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-blue .area-name[b-cdnvm8p8kb],
.area-steel .area-name[b-cdnvm8p8kb] {
    color: #0066cc;
}

/* Green */
.area-green .area-card-left[b-cdnvm8p8kb] {
    background-color: #d4f5dc;
    color: #198754;
}

.area-green .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-green .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-green .area-name[b-cdnvm8p8kb] {
    color: #198754;
}

/* Orange / Peach */
.area-orange .area-card-left[b-cdnvm8p8kb] {
    background-color: #ffd9c7;
    color: #e65c00;
}

.area-orange .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-orange .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-orange .area-name[b-cdnvm8p8kb] {
    color: #e65c00;
}

/* Red */
.area-red .area-card-left[b-cdnvm8p8kb] {
    background-color: #f8d7da;
    color: #dc3545;
}

.area-red .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-red .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-red .area-name[b-cdnvm8p8kb] {
    color: #dc3545;
}

/* Purple */
.area-purple .area-card-left[b-cdnvm8p8kb] {
    background-color: #e2d9f3;
    color: #6f42c1;
}

.area-purple .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-purple .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-purple .area-name[b-cdnvm8p8kb] {
    color: #6f42c1;
}

/* Yellow */
.area-yellow .area-card-left[b-cdnvm8p8kb] {
    background-color: #fff3cd;
    color: #997404;
}

.area-yellow .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-yellow .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-yellow .area-name[b-cdnvm8p8kb] {
    color: #997404;
}

/* Grey */
.area-grey .area-card-left[b-cdnvm8p8kb] {
    background-color: #e9ecef;
    color: #6c757d;
}

.area-grey .area-card-right[b-cdnvm8p8kb] {
    background-color: #fff;
}

.area-grey .area-label[b-cdnvm8p8kb] {
    color: #8b9ba3;
}

.area-grey .area-name[b-cdnvm8p8kb] {
    color: #6c757d;
}

/* Alert */
.alert[b-cdnvm8p8kb] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-danger[b-cdnvm8p8kb] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* Responsive */
@media (max-width: 1400px) {
    .area-cards-section[b-cdnvm8p8kb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .area-cards-section[b-cdnvm8p8kb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .report-overview-page[b-cdnvm8p8kb] {
        padding: 1rem;
    }

    .page-header[b-cdnvm8p8kb] {
        flex-direction: column;
        gap: 1rem;
    }

    .status-filter-section[b-cdnvm8p8kb] {
        width: 100%;
    }

    .status-filter-section label[b-cdnvm8p8kb] {
        text-align: left;
    }

    .pagination-row[b-cdnvm8p8kb] {
        justify-content: center;
    }

    .area-cards-section[b-cdnvm8p8kb] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}
/* /Components/Pages/Requesters.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-snvxjopdc5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-snvxjopdc5] {
    transform: translateY(1px);
}

.panel-header-row[b-snvxjopdc5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-snvxjopdc5] {
    flex: 1;
}

.panel-header-actions h2[b-snvxjopdc5] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-snvxjopdc5] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

/* Requesters container */
.requesters-container[b-snvxjopdc5] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-snvxjopdc5] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-snvxjopdc5] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-snvxjopdc5] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-snvxjopdc5] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-snvxjopdc5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-snvxjopdc5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-snvxjopdc5] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-snvxjopdc5] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-snvxjopdc5] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-snvxjopdc5] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.requesters-toolbar[b-snvxjopdc5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-snvxjopdc5] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-snvxjopdc5] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-snvxjopdc5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-snvxjopdc5],
.toolbar-buttons .btn-outline-primary.active[b-snvxjopdc5] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-snvxjopdc5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-snvxjopdc5] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-snvxjopdc5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-snvxjopdc5] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-snvxjopdc5] {
    opacity: 0.5;
}

.pagination-info[b-snvxjopdc5] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.requesters-table[b-snvxjopdc5] {
    width: 100%;
    border-collapse: collapse;
}

.requesters-table thead th[b-snvxjopdc5] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.requesters-table thead th.sortable[b-snvxjopdc5] {
    cursor: pointer;
    user-select: none;
}

.requesters-table thead th.sortable:hover[b-snvxjopdc5] {
    background-color: #f8f9fa;
}

.sort-indicator[b-snvxjopdc5] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
}

.requesters-table tbody tr[b-snvxjopdc5] {
    border-bottom: 1px solid #f0f0f0;
}

.requesters-table tbody tr:hover[b-snvxjopdc5] {
    background-color: #f8f9fa;
}

.requesters-table tbody tr.table-active[b-snvxjopdc5] {
    background-color: #e7f1ff;
}

.requesters-table tbody td[b-snvxjopdc5] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.requesters-table tbody td a[b-snvxjopdc5] {
    color: #0d6efd;
    text-decoration: none;
}

.requesters-table tbody td a:hover[b-snvxjopdc5] {
    text-decoration: underline;
}

/* Modal */
.modal-overlay[b-snvxjopdc5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog[b-snvxjopdc5] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 440px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
}

.modal-dialog-wide[b-snvxjopdc5] {
    width: 520px;
}

.modal-header[b-snvxjopdc5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h5[b-snvxjopdc5] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #163a49;
}

.modal-close[b-snvxjopdc5] {
    border: none;
    background: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.modal-close:hover[b-snvxjopdc5] {
    color: #212529;
}

.modal-body[b-snvxjopdc5] {
    padding: 1.25rem;
}

.modal-body .form-group[b-snvxjopdc5] {
    margin-bottom: 1rem;
}

.modal-body .form-group label[b-snvxjopdc5] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.35rem;
}

.modal-body .form-control[b-snvxjopdc5] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.modal-body .form-control:focus[b-snvxjopdc5] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.modal-body .form-control[readonly][b-snvxjopdc5] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: default;
}

.modal-footer[b-snvxjopdc5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e9ecef;
}

.modal-footer .btn[b-snvxjopdc5] {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
}

.modal-footer .btn-primary[b-snvxjopdc5] {
    background: #0d6efd;
    color: white;
    border: 1px solid #0d6efd;
}

.modal-footer .btn-primary:hover[b-snvxjopdc5] {
    background: #0b5ed7;
}

.modal-footer .btn-warning[b-snvxjopdc5] {
    background: #ff6b3c;
    color: white;
    border: 1px solid #ff6b3c;
}

.modal-footer .btn-warning:hover[b-snvxjopdc5] {
    background: #e55a2d;
}

.modal-footer .btn-outline-secondary[b-snvxjopdc5] {
    background: white;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.modal-footer .btn-outline-secondary:hover[b-snvxjopdc5] {
    background: #f8f9fa;
}

/* Merge modal */
.merge-info[b-snvxjopdc5] {
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.merge-list[b-snvxjopdc5] {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-top: 0.75rem;
}

.merge-list-item[b-snvxjopdc5] {
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.1s;
}

.merge-list-item:last-child[b-snvxjopdc5] {
    border-bottom: none;
}

.merge-list-item:hover[b-snvxjopdc5] {
    background: #f0f4ff;
}

.merge-list-item.selected[b-snvxjopdc5] {
    background: #dbeafe;
}

.merge-list-name[b-snvxjopdc5] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
}

.merge-list-email[b-snvxjopdc5] {
    font-size: 0.8rem;
    color: #6c757d;
}

.merge-list-empty[b-snvxjopdc5] {
    padding: 1.5rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
}
/* /Components/Pages/SapApiTest.razor.rz.scp.css */
.sap-test-page[b-nxmr41rxzx] {
    padding: 1.5rem 2rem;
    background: #fff;
    min-height: 100%;
}

/* Back Link */
.panel-topbar[b-nxmr41rxzx] {
    margin-bottom: 1rem;
}

.back-link[b-nxmr41rxzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    color: #ff6b3c;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-link:hover[b-nxmr41rxzx] {
    background: #fff5f2;
    border-color: #ff6b3c;
}

/* Page Header */
.page-header[b-nxmr41rxzx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f0f4f8;
}

.header-content[b-nxmr41rxzx] {
    flex: 1;
}

.page-title[b-nxmr41rxzx] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #163a49;
}

.page-subtitle[b-nxmr41rxzx] {
    margin: 0;
    font-size: 0.95rem;
    color: #6c757d;
}

.header-icon[b-nxmr41rxzx] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e8f9 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header Icon Button */
.header-icon-btn[b-nxmr41rxzx] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e8f9 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-icon-btn:hover[b-nxmr41rxzx] {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
    background: linear-gradient(135deg, #d0e8f9 0%, #b8dcf5 100%);
}

.header-icon-btn:active[b-nxmr41rxzx] {
    transform: scale(0.98);
}

/* Action Cards Grid */
.action-cards[b-nxmr41rxzx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.action-card[b-nxmr41rxzx] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.action-card:hover[b-nxmr41rxzx] {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
    transform: translateY(-2px);
}

.card-header[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.card-icon[b-nxmr41rxzx] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon.connection[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #e8f9ee 0%, #d0f4dc 100%);
    color: #198754;
}

.card-icon.backflush[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #e8f4fd 0%, #d0e8f9 100%);
    color: #0066cc;
}

.card-icon.scrap[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #fff3e8 0%, #ffe8d0 100%);
    color: #ff6b3c;
}

.card-icon.post[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #f3e8ff 0%, #e8d0ff 100%);
    color: #6f42c1;
}

.card-title[b-nxmr41rxzx] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
}

.card-description[b-nxmr41rxzx] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.5;
    flex: 1;
}

/* Action Buttons */
.btn-action[b-nxmr41rxzx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-action:disabled[b-nxmr41rxzx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-connection[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    color: #fff;
}

.btn-connection:hover:not(:disabled)[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #146c43 0%, #1aa179 100%);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.btn-backflush[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #0066cc 0%, #4da6ff 100%);
    color: #fff;
}

.btn-backflush:hover:not(:disabled)[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #0052a3 0%, #3d94e6 100%);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-scrap[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #ff6b3c 0%, #ff8f6b 100%);
    color: #fff;
}

.btn-scrap:hover:not(:disabled)[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #e55a2b 0%, #ff7a52 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 60, 0.3);
}

.btn-post[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #6f42c1 0%, #9d7bd8 100%);
    color: #fff;
}

.btn-post:hover:not(:disabled)[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #5a35a0 0%, #8a68c5 100%);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

/* Status Message */
.status-message[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.status-message.success[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #e8f9ee 0%, #d4edda 100%);
    border: 1px solid #c3e6cb;
    color: #155724;
}

.status-message.error[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #fef0f0 0%, #f8d7da 100%);
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.status-icon[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-text[b-nxmr41rxzx] {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responses Section */
.responses-section[b-nxmr41rxzx] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;
}

.section-title[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #163a49;
}

.responses-grid[b-nxmr41rxzx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.response-card[b-nxmr41rxzx] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.response-item[b-nxmr41rxzx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.response-item.error[b-nxmr41rxzx] {
    grid-column: 1 / -1;
    background: #fff5f5;
    padding: 0.75rem;
    border-radius: 6px;
    border-left: 3px solid #dc3545;
}

.response-label[b-nxmr41rxzx] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.response-value[b-nxmr41rxzx] {
    font-size: 0.95rem;
    color: #212529;
    font-weight: 500;
}

.response-value.highlight[b-nxmr41rxzx] {
    color: #0066cc;
}

.response-value.code[b-nxmr41rxzx] {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    background: #f0f4f8;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Modal Backdrop */
.modal-backdrop[b-nxmr41rxzx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(2px);
}

/* Payload Modal */
.payload-modal[b-nxmr41rxzx] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-nxmr41rxzx 0.2s ease-out;
}

@keyframes modalSlideIn-b-nxmr41rxzx {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payload-modal .modal-header[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.payload-modal .modal-title[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #163a49;
}

.payload-modal .btn-close[b-nxmr41rxzx] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.payload-modal .btn-close:hover[b-nxmr41rxzx] {
    color: #dc3545;
}

.payload-modal .modal-body[b-nxmr41rxzx] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Payload Tabs */
.payload-tabs[b-nxmr41rxzx] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0;
}

.payload-tab[b-nxmr41rxzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.payload-tab:hover[b-nxmr41rxzx] {
    color: #0066cc;
    background: #f8fafc;
}

.payload-tab.active[b-nxmr41rxzx] {
    color: #0066cc;
    border-bottom-color: #0066cc;
    background: transparent;
}

/* Payload Content */
.payload-content[b-nxmr41rxzx] {
    background: #f8fafc;
    border-radius: 10px;
    padding: 1.25rem;
}

.payload-description[b-nxmr41rxzx] {
    margin-bottom: 1rem;
}

.payload-description strong[b-nxmr41rxzx] {
    display: block;
    font-size: 0.95rem;
    color: #163a49;
    margin-bottom: 0.25rem;
}

.payload-description p[b-nxmr41rxzx] {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
}

/* JSON Code Block */
.json-code[b-nxmr41rxzx] {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0;
    overflow-x: auto;
}

.json-code code[b-nxmr41rxzx] {
    color: #e2e8f0;
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    white-space: pre;
}

/* Spinner */
.spinner-border-sm[b-nxmr41rxzx] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* JSON Editor Styles */
.editor-container[b-nxmr41rxzx] {
    position: relative;
    margin-bottom: 0.75rem;
}

.json-editor[b-nxmr41rxzx] {
    display: block;
    width: 100%;
    min-height: 280px;
    max-height: 400px;
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    white-space: pre;
    overflow: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.json-editor[b-nxmr41rxzx]::placeholder {
    color: #64748b;
}

.json-editor:focus[b-nxmr41rxzx] {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.json-editor.error[b-nxmr41rxzx] {
    border-color: #dc3545;
}

.json-editor.error:focus[b-nxmr41rxzx] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Validation Error */
.validation-error[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 6px;
    color: #c53030;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Editor Action Buttons */
.editor-actions[b-nxmr41rxzx] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.btn-reset[b-nxmr41rxzx],
.btn-format[b-nxmr41rxzx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset[b-nxmr41rxzx] {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-reset:hover[b-nxmr41rxzx] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-reset:active[b-nxmr41rxzx] {
    transform: translateY(1px);
}

.btn-reset svg[b-nxmr41rxzx] {
    color: #94a3b8;
}

.btn-reset:hover svg[b-nxmr41rxzx] {
    color: #64748b;
}

.btn-format[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #0066cc 0%, #4da6ff 100%);
    border: none;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}

.btn-format:hover[b-nxmr41rxzx] {
    background: linear-gradient(135deg, #0052a3 0%, #3d94e6 100%);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.35);
    transform: translateY(-1px);
}

.btn-format:active[b-nxmr41rxzx] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 102, 204, 0.2);
}

/* Custom Payload Toggle */
.custom-payload-toggle[b-nxmr41rxzx] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e9ecef;
}

.toggle-container[b-nxmr41rxzx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-container input[type="checkbox"][b-nxmr41rxzx] {
    width: 18px;
    height: 18px;
    accent-color: #0066cc;
    cursor: pointer;
}

.toggle-label[b-nxmr41rxzx] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}

.toggle-hint[b-nxmr41rxzx] {
    display: block;
    margin-top: 0.5rem;
    margin-left: calc(18px + 0.75rem);
    font-size: 0.8rem;
    color: #0066cc;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .sap-test-page[b-nxmr41rxzx] {
        padding: 1rem;
    }

    .page-header[b-nxmr41rxzx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-icon[b-nxmr41rxzx] {
        display: none;
    }

    .action-cards[b-nxmr41rxzx] {
        grid-template-columns: 1fr;
    }

    .response-card[b-nxmr41rxzx] {
        grid-template-columns: 1fr;
    }

    .payload-modal[b-nxmr41rxzx] {
        width: 95%;
        max-height: 90vh;
    }

    .payload-tabs[b-nxmr41rxzx] {
        flex-wrap: wrap;
    }

    .payload-tab[b-nxmr41rxzx] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .json-editor[b-nxmr41rxzx] {
        min-height: 200px;
        font-size: 0.75rem;
    }

    .editor-actions[b-nxmr41rxzx] {
        flex-direction: column;
    }

    .btn-reset[b-nxmr41rxzx],
    .btn-format[b-nxmr41rxzx] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/SapTransactionsOverview.razor.rz.scp.css */
.back-link[b-odpghshf40] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-odpghshf40] {
    transform: translateY(1px);
}

.panel-header-row[b-odpghshf40] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-odpghshf40] {
    flex: 1;
}

.panel-header-actions h2[b-odpghshf40] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

/* SAP container */
.sap-container[b-odpghshf40] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Tab Navigation */
.sap-tabs[b-odpghshf40] {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.tab-btn[b-odpghshf40] {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover[b-odpghshf40] {
    color: #163a49;
}

.tab-btn.active[b-odpghshf40] {
    color: #163a49;
    font-weight: 500;
    border-bottom-color: #163a49;
}

/* Search Panel - Animated */
.search-panel[b-odpghshf40] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-odpghshf40] {
    max-height: 250px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-odpghshf40] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-row[b-odpghshf40] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-field[b-odpghshf40] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-odpghshf40] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-odpghshf40] {
    width: 120px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-odpghshf40] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Date field with picker button */
.date-field .date-input-wrapper[b-odpghshf40] {
    display: flex;
    align-items: center;
    gap: 0;
}

.date-field .form-control[b-odpghshf40] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 100px;
}

.date-picker-btn[b-odpghshf40] {
    padding: 0.375rem 0.5rem;
    border: 1px solid #ff6b3c;
    border-left: none;
    background: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-picker-btn:hover[b-odpghshf40] {
    background: #fff5f2;
}

.search-spacer[b-odpghshf40] {
    flex: 1;
}

.search-actions[b-odpghshf40] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.search-actions .btn[b-odpghshf40] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.sap-toolbar[b-odpghshf40] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 0;
}

.toolbar-buttons[b-odpghshf40] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-buttons .btn[b-odpghshf40] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-odpghshf40] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-odpghshf40],
.toolbar-buttons .btn-outline-primary.active[b-odpghshf40] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-success[b-odpghshf40] {
    color: white;
    border-color: #ff6b3c;
    background: #ff6b3c;
}

.toolbar-buttons .btn-success:hover[b-odpghshf40] {
    background-color: #e55a2b;
    border-color: #e55a2b;
}

.toolbar-buttons .btn-warning[b-odpghshf40] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-warning:hover[b-odpghshf40] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-odpghshf40] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-odpghshf40] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.toolbar-pagination .btn:hover:not(:disabled)[b-odpghshf40] {
    color: #212529;
}

.toolbar-pagination .btn:disabled[b-odpghshf40] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-odpghshf40] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.sap-table[b-odpghshf40] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.sap-table thead th[b-odpghshf40] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.sap-table thead th .column-title[b-odpghshf40] {
    margin-right: 0.25rem;
}

.sap-table thead th .sort-btn[b-odpghshf40] {
    padding: 0;
    border: none;
    background: none;
    color: #0d6efd;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    vertical-align: middle;
}

.sap-table thead th .sort-btn:hover[b-odpghshf40] {
    opacity: 1;
}

.sap-table tbody tr[b-odpghshf40] {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.sap-table tbody tr:hover[b-odpghshf40] {
    background-color: #f8f9fa;
}

.sap-table tbody tr.table-active[b-odpghshf40] {
    background-color: #e7f1ff;
}

.sap-table tbody td[b-odpghshf40] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

/* Link-styled cells */
.sap-table tbody td.link-cell[b-odpghshf40] {
    color: #0d6efd;
}

.sap-table tbody td.link-cell:hover[b-odpghshf40] {
    text-decoration: underline;
}

/* Status cells */
.sap-table tbody td.status-cell[b-odpghshf40] {
    color: #0d6efd;
}

.sap-table tbody td.status-completed[b-odpghshf40] {
    color: #0d6efd;
}

.sap-table tbody td.status-failed[b-odpghshf40] {
    color: #dc3545;
}

/* Product cell with popover */
.product-cell[b-odpghshf40] {
    position: relative;
    overflow: visible;
}

.product-link[b-odpghshf40] {
    color: #0d6efd;
    cursor: pointer;
}

.product-link:hover[b-odpghshf40] {
    text-decoration: underline;
}

/* Product Popover - Fixed positioning for floating effect */
.product-popover[b-odpghshf40] {
    position: fixed;
    z-index: 9999;
    width: 300px;
    max-width: 90vw;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: popover-fade-in-b-odpghshf40 0.15s ease-out;
    pointer-events: none;
}

@keyframes popover-fade-in-b-odpghshf40 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.popover-image[b-odpghshf40] {
    width: 100%;
    max-height: 180px;
    height: auto;
    object-fit: contain;
    background: #f8f9fa;
    display: block;
    border-bottom: 1px solid #e9ecef;
}

.popover-no-image[b-odpghshf40] {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 0.875rem;
    border-bottom: 1px solid #e9ecef;
}

.popover-details[b-odpghshf40] {
    padding: 0.75rem 1rem;
    background: white;
}

.popover-uin[b-odpghshf40] {
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 0.375rem;
}

.popover-uin strong[b-odpghshf40] {
    color: #163a49;
}

.popover-description[b-odpghshf40] {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.4;
    word-wrap: break-word;
}

.popover-description strong[b-odpghshf40] {
    color: #163a49;
}

/* Responsive */
@media (max-width: 1200px) {
    .sap-table[b-odpghshf40] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .sap-tabs[b-odpghshf40] {
        flex-wrap: wrap;
    }

    .tab-btn[b-odpghshf40] {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .search-panel-content[b-odpghshf40] {
        padding: 1rem;
    }

    .search-row[b-odpghshf40] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-field[b-odpghshf40] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-field .form-control[b-odpghshf40] {
        width: 100%;
    }

    .search-actions[b-odpghshf40] {
        margin-left: 0;
        justify-content: flex-end;
    }

    .toolbar-buttons[b-odpghshf40] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/ScrapReasons.razor.rz.scp.css */
.panel-topbar[b-vos8rtwr13] {
    background: linear-gradient(180deg, #f6fbff, #ffffff);
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid #e8eef2
}

.back-link[b-vos8rtwr13] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer
}

.back-link svg[b-vos8rtwr13] {
    transform: translateY(1px)
}

.panel-header-row[b-vos8rtwr13] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-vos8rtwr13] {
    flex: 1
}

.panel-header-actions h2[b-vos8rtwr13] {
    margin: 0;
    font-size: 2rem;
    color: #163a49
}

.muted[b-vos8rtwr13] {
    color: #7c8b95;
    margin-top: 0.5rem
}

.panel-header-buttons[b-vos8rtwr13] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start
}

/* Options Button Container - positions dropdown relative to button */
.options-button-container[b-vos8rtwr13] {
    position: relative;
    display: inline-block;
}

/* Options Dropdown */
.options-dropdown-backdrop[b-vos8rtwr13] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.options-dropdown[b-vos8rtwr13] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 200px;
}

.dropdown-item[b-vos8rtwr13] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: #212529;
}

.dropdown-item:hover[b-vos8rtwr13] {
    background: #f8f9fa;
}

.dropdown-item svg[b-vos8rtwr13] {
    flex-shrink: 0;
}

.scrap-container[b-vos8rtwr13] {
    display: flex;
    padding: 0 1.5rem 1.5rem 1.5rem
}

.areas[b-vos8rtwr13] {
    width: 280px;
    background: #fafafa;
    border-right: 1px solid #eee;
    padding: 1rem;
    margin-top: 1rem
}

.areas-title[b-vos8rtwr13] {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9aa8b6;
    margin-bottom: 0.5rem
}

.areas-list[b-vos8rtwr13] {
    padding: 0;
    margin: 0
}

.area-item[b-vos8rtwr13] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-radius: 3px;
    cursor: pointer
}

.area-item + .area-item[b-vos8rtwr13] {
    margin-top: 0.5rem
}

.area-item.active[b-vos8rtwr13] {
    background: #fff;
    box-shadow: inset 0 0 2px rgba(11, 95, 143, 0.06)
}

.area-name[b-vos8rtwr13] {
    font-weight: 600
}

.area-item .chev svg[b-vos8rtwr13] {
    display: block
}

.reasons[b-vos8rtwr13] {
    flex: 1;
    padding: 1rem
}

.reasons-actions[b-vos8rtwr13] {
    margin-bottom: 1rem
}

.reasons-table tr[b-vos8rtwr13] {
    border-bottom: 1px solid #eee
}

.reasons-table td[b-vos8rtwr13], .reasons-table th[b-vos8rtwr13] {
    padding: 1rem
}

/* Modal styles */
.modal-backdrop[b-vos8rtwr13] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.modal-dialog[b-vos8rtwr13] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1055;
    width: 100%;
    max-width: 600px;
}

.modal-content[b-vos8rtwr13] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-header[b-vos8rtwr13] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-vos8rtwr13] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-body[b-vos8rtwr13] {
    padding: 1.5rem;
}

.modal-footer[b-vos8rtwr13] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

.json-preview[b-vos8rtwr13] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.75rem;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* /Components/Pages/SupplierContactTypes.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-8ebl491hwy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-8ebl491hwy] {
    transform: translateY(1px);
}

.panel-header-row[b-8ebl491hwy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-8ebl491hwy] {
    flex: 1;
}

.panel-header-actions h2[b-8ebl491hwy] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-8ebl491hwy] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

/* Modal */
.modal-backdrop[b-8ebl491hwy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-8ebl491hwy] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.modal-header[b-8ebl491hwy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-8ebl491hwy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close[b-8ebl491hwy] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
    padding: 0;
}

.btn-close:hover[b-8ebl491hwy] {
    color: #000;
}

.modal-body[b-8ebl491hwy] {
    padding: 1.5rem;
}

.modal-body .form-group[b-8ebl491hwy] {
    margin-bottom: 1rem;
}

.modal-body .form-label[b-8ebl491hwy] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #212529;
}

.modal-body .form-control[b-8ebl491hwy] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-body .form-control:focus[b-8ebl491hwy] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-footer[b-8ebl491hwy] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Save button - green solid */
.modal-footer .btn-save[b-8ebl491hwy] {
    background-color: #28a745;
    border: 1px solid #28a745;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-save:hover[b-8ebl491hwy] {
    background-color: #218838;
    border-color: #1e7e34;
}

.modal-footer .btn-save:disabled[b-8ebl491hwy] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Cancel button - green outlined */
.modal-footer .btn-cancel[b-8ebl491hwy] {
    background-color: white;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.modal-footer .btn-cancel:hover[b-8ebl491hwy] {
    background-color: #ff6b3c;
    color: white;
}

.alert[b-8ebl491hwy] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

.alert-danger[b-8ebl491hwy] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.mt-3[b-8ebl491hwy] {
    margin-top: 1rem;
}

/* Contact Types container */
.contact-types-container[b-8ebl491hwy] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-8ebl491hwy] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-8ebl491hwy] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-8ebl491hwy] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-8ebl491hwy] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-8ebl491hwy] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-8ebl491hwy] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-8ebl491hwy] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-8ebl491hwy] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-8ebl491hwy] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-8ebl491hwy] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.contact-types-toolbar[b-8ebl491hwy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-8ebl491hwy] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-8ebl491hwy] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-8ebl491hwy] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-8ebl491hwy],
.toolbar-buttons .btn-outline-primary.active[b-8ebl491hwy] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-outline-warning[b-8ebl491hwy] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-8ebl491hwy] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-8ebl491hwy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-8ebl491hwy] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-8ebl491hwy] {
    opacity: 0.5;
}

.pagination-info[b-8ebl491hwy] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.contact-types-table[b-8ebl491hwy] {
    width: 100%;
    border-collapse: collapse;
}

.contact-types-table thead th[b-8ebl491hwy] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.contact-types-table tbody tr[b-8ebl491hwy] {
    border-bottom: 1px solid #f0f0f0;
}

.contact-types-table tbody tr:hover[b-8ebl491hwy] {
    background-color: #f8f9fa;
}

.contact-types-table tbody tr.table-active[b-8ebl491hwy] {
    background-color: #e7f1ff;
}

.contact-types-table tbody td[b-8ebl491hwy] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.text-center[b-8ebl491hwy] {
    text-align: center;
}

.text-muted[b-8ebl491hwy] {
    color: #6c757d;
}

.p-4[b-8ebl491hwy] {
    padding: 1.5rem;
}

.spinner-border-sm[b-8ebl491hwy] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.me-1[b-8ebl491hwy] {
    margin-right: 0.25rem;
}
/* /Components/Pages/SupplierDetail.razor.rz.scp.css */
/* Supplier Detail Page */
.supplier-detail-page[b-fx5uzvj2s5] {
    background: #fff;
    min-height: 100vh;
    font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Loading */
.supplier-detail-page .loading-container[b-fx5uzvj2s5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Back Link */
.supplier-detail-page .panel-topbar[b-fx5uzvj2s5] {
    padding: 1rem 1.5rem 0 1.5rem;
}

.supplier-detail-page .back-link[b-fx5uzvj2s5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.supplier-detail-page .back-link:hover[b-fx5uzvj2s5] {
    text-decoration: underline;
}

.supplier-detail-page .back-link svg[b-fx5uzvj2s5] {
    transform: translateY(1px);
}

/* Header Section */
.supplier-detail-page .supplier-header[b-fx5uzvj2s5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem;
    margin-bottom: 0.5rem;
}

.supplier-detail-page .header-left[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.supplier-detail-page .supplier-title[b-fx5uzvj2s5] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0056b3;
}

.supplier-detail-page .header-info-row[b-fx5uzvj2s5] {
    display: flex;
    gap: 3rem;
}

.supplier-detail-page .header-info-row .info-item[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.supplier-detail-page .header-info-row .info-label[b-fx5uzvj2s5] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #8b9ba3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.supplier-detail-page .header-info-row .info-value[b-fx5uzvj2s5] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
}

.supplier-detail-page .header-right[b-fx5uzvj2s5] {
    display: flex;
    align-items: flex-start;
}

.supplier-detail-page .btn-edit[b-fx5uzvj2s5] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ff6b3c;
    background: #fff;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-detail-page .btn-edit:hover[b-fx5uzvj2s5] {
    background: #fff5f2;
}

/* Tab Section */
.supplier-detail-page .tab-section[b-fx5uzvj2s5] {
    background: #f4f6f8;
    padding: 1.5rem 1.5rem 0 1.5rem;
}

.supplier-detail-page .tab-container[b-fx5uzvj2s5] {
    display: flex;
    justify-content: center;
    gap: 0;
}

.supplier-detail-page .tab-button[b-fx5uzvj2s5] {
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0d6efd;
    background: #fff;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-detail-page .tab-button:first-child[b-fx5uzvj2s5] {
    border-radius: 4px 0 0 4px;
}

.supplier-detail-page .tab-button:last-child[b-fx5uzvj2s5] {
    border-radius: 0 4px 4px 0;
}

.supplier-detail-page .tab-button:not(:last-child)[b-fx5uzvj2s5] {
    border-right: none;
}

.supplier-detail-page .tab-button:hover[b-fx5uzvj2s5] {
    background: #f8f9fa;
}

.supplier-detail-page .tab-button.active[b-fx5uzvj2s5] {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* Tab Content */
.supplier-detail-page .tab-content[b-fx5uzvj2s5] {
    background: #f4f6f8;
    padding: 1.5rem;
    min-height: 400px;
}

/* Details Content */
.supplier-detail-page .details-content[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Detail Card */
.supplier-detail-page .detail-card[b-fx5uzvj2s5] {
    background: #fff;
    border-radius: 4px;
    padding: 1.5rem 2rem;
    border-left: 4px solid #e9ecef;
}

.supplier-detail-page .detail-card .card-title[b-fx5uzvj2s5] {
    margin: 0 0 1.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
}

.supplier-detail-page .detail-grid[b-fx5uzvj2s5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.supplier-detail-page .detail-column[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.supplier-detail-page .detail-item[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.supplier-detail-page .detail-label[b-fx5uzvj2s5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
}

.supplier-detail-page .detail-value[b-fx5uzvj2s5] {
    font-size: 0.95rem;
    color: #212529;
}

.supplier-detail-page .detail-value.contact-name[b-fx5uzvj2s5] {
    color: #0d6efd;
}

.supplier-detail-page .email-link[b-fx5uzvj2s5] {
    color: #0d6efd;
    text-decoration: none;
}

.supplier-detail-page .email-link:hover[b-fx5uzvj2s5] {
    text-decoration: underline;
}

/* Address value - stacked lines */
.supplier-detail-page .address-value[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.95rem;
    color: #212529;
}

/* Placeholder Content */
.supplier-detail-page .placeholder-content[b-fx5uzvj2s5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #fff;
    border-radius: 4px;
}

.supplier-detail-page .placeholder-content .text-muted[b-fx5uzvj2s5] {
    color: #6c757d;
    font-size: 1rem;
}

/* Alert */
.supplier-detail-page .alert[b-fx5uzvj2s5] {
    margin: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

.supplier-detail-page .alert-danger[b-fx5uzvj2s5] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* Modal Styles */
.modal-backdrop[b-fx5uzvj2s5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-fx5uzvj2s5] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.modal-dialog.modal-lg[b-fx5uzvj2s5] {
    max-width: 800px;
}

.modal-header[b-fx5uzvj2s5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-fx5uzvj2s5] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close[b-fx5uzvj2s5] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
    padding: 0;
}

.btn-close:hover[b-fx5uzvj2s5] {
    color: #000;
}

.modal-body[b-fx5uzvj2s5] {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-body .form-group[b-fx5uzvj2s5] {
    margin-bottom: 1rem;
}

.modal-body .form-label[b-fx5uzvj2s5] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.modal-body .form-control[b-fx5uzvj2s5] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-body .form-control:focus[b-fx5uzvj2s5] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-body textarea.form-control[b-fx5uzvj2s5] {
    resize: vertical;
}

.modal-footer[b-fx5uzvj2s5] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Save button - blue solid */
.modal-footer .btn-save[b-fx5uzvj2s5] {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-save:hover[b-fx5uzvj2s5] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.modal-footer .btn-save:disabled[b-fx5uzvj2s5] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Cancel button - green outlined */
.modal-footer .btn-cancel[b-fx5uzvj2s5] {
    background-color: white;
    border: 1px solid #28a745;
    color: #28a745;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.modal-footer .btn-cancel:hover[b-fx5uzvj2s5] {
    background-color: #28a745;
    color: white;
}

.modal-body .alert[b-fx5uzvj2s5] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

.modal-body .alert-danger[b-fx5uzvj2s5] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.modal-body .mt-3[b-fx5uzvj2s5] {
    margin-top: 1rem;
}

.spinner-border-sm[b-fx5uzvj2s5] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.me-1[b-fx5uzvj2s5] {
    margin-right: 0.25rem;
}

/* Components Tab Styles */
.supplier-detail-page .components-content[b-fx5uzvj2s5] {
    background: #fff;
    border-radius: 4px;
    padding: 0;
}

.supplier-detail-page .components-toolbar[b-fx5uzvj2s5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 4px 4px 0 0;
}

.supplier-detail-page .components-toolbar .toolbar-buttons[b-fx5uzvj2s5] {
    display: flex;
    gap: 0.5rem;
}

.supplier-detail-page .components-toolbar .toolbar-buttons .btn[b-fx5uzvj2s5] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.supplier-detail-page .components-toolbar .toolbar-buttons .btn-outline-primary[b-fx5uzvj2s5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.supplier-detail-page .components-toolbar .toolbar-buttons .btn-outline-primary:hover[b-fx5uzvj2s5] {
    color: white;
    background-color: #ff6b3c;
}

.supplier-detail-page .components-toolbar .toolbar-buttons .btn-outline-warning[b-fx5uzvj2s5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.supplier-detail-page .components-toolbar .toolbar-buttons .btn-outline-warning:hover[b-fx5uzvj2s5] {
    color: white;
    background-color: #ff6b3c;
}

.supplier-detail-page .components-toolbar .toolbar-buttons .btn-outline-warning:disabled[b-fx5uzvj2s5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.supplier-detail-page .components-toolbar .toolbar-pagination[b-fx5uzvj2s5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.supplier-detail-page .components-toolbar .toolbar-pagination .btn[b-fx5uzvj2s5] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.supplier-detail-page .components-toolbar .toolbar-pagination .btn:disabled[b-fx5uzvj2s5] {
    opacity: 0.5;
}

.supplier-detail-page .components-toolbar .pagination-info[b-fx5uzvj2s5] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Components Search Panel */
.supplier-detail-page .search-panel[b-fx5uzvj2s5] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.supplier-detail-page .search-panel.open[b-fx5uzvj2s5] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.supplier-detail-page .search-panel-content[b-fx5uzvj2s5] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.supplier-detail-page .search-fields[b-fx5uzvj2s5] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.supplier-detail-page .search-field[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.supplier-detail-page .search-label[b-fx5uzvj2s5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.supplier-detail-page .search-field .form-control[b-fx5uzvj2s5] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.supplier-detail-page .search-field .form-control:focus[b-fx5uzvj2s5] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.supplier-detail-page .search-actions[b-fx5uzvj2s5] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.supplier-detail-page .search-actions .btn[b-fx5uzvj2s5] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.supplier-detail-page .search-actions .btn-outline-primary[b-fx5uzvj2s5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.supplier-detail-page .search-actions .btn-outline-primary:hover[b-fx5uzvj2s5] {
    color: white;
    background-color: #ff6b3c;
}

.supplier-detail-page .search-actions .btn-outline-secondary[b-fx5uzvj2s5] {
    color: #6c757d;
    border-color: #6c757d;
    background: white;
}

.supplier-detail-page .search-actions .btn-outline-secondary:hover[b-fx5uzvj2s5] {
    color: white;
    background-color: #6c757d;
}

/* Components Table */
.supplier-detail-page .components-table[b-fx5uzvj2s5] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.supplier-detail-page .components-table thead th[b-fx5uzvj2s5] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.supplier-detail-page .components-table thead th.text-end[b-fx5uzvj2s5] {
    text-align: right;
}

.supplier-detail-page .components-table tbody tr[b-fx5uzvj2s5] {
    border-bottom: 1px solid #f0f0f0;
}

.supplier-detail-page .components-table tbody tr:hover[b-fx5uzvj2s5] {
    background-color: #f8f9fa;
}

.supplier-detail-page .components-table tbody tr.table-active[b-fx5uzvj2s5] {
    background-color: #e7f1ff;
}

.supplier-detail-page .components-table tbody td[b-fx5uzvj2s5] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.supplier-detail-page .components-table tbody td.text-end[b-fx5uzvj2s5] {
    text-align: right;
}

.supplier-detail-page .components-table tbody td.text-center[b-fx5uzvj2s5] {
    text-align: center;
}

/* Select Component Modal */
.select-component-modal[b-fx5uzvj2s5] {
    max-width: 650px;
}

.select-component-modal .modal-body[b-fx5uzvj2s5] {
    padding: 1.5rem;
    max-height: 80vh;
    overflow-y: auto;
}

/* Search Section in Select Component Modal */
.select-component-search[b-fx5uzvj2s5] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.select-component-search .search-row[b-fx5uzvj2s5] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.select-component-search .search-field[b-fx5uzvj2s5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.select-component-search .search-label[b-fx5uzvj2s5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.select-component-search .search-field .form-control[b-fx5uzvj2s5] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.select-component-search .search-actions[b-fx5uzvj2s5] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.select-component-search .search-actions .btn[b-fx5uzvj2s5] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.select-component-search .search-actions .btn-outline-primary[b-fx5uzvj2s5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.select-component-search .search-actions .btn-outline-primary:hover[b-fx5uzvj2s5] {
    color: white;
    background-color: #ff6b3c;
}

.select-component-search .search-actions .btn-outline-secondary[b-fx5uzvj2s5] {
    color: #6c757d;
    border-color: #6c757d;
    background: white;
}

.select-component-search .search-actions .btn-outline-secondary:hover[b-fx5uzvj2s5] {
    color: white;
    background-color: #6c757d;
}

/* Toolbar in Select Component Modal */
.select-component-toolbar[b-fx5uzvj2s5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.select-component-toolbar .toolbar-buttons[b-fx5uzvj2s5] {
    display: flex;
    gap: 0.5rem;
}

.select-component-toolbar .toolbar-buttons .btn[b-fx5uzvj2s5] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.select-component-toolbar .toolbar-buttons .btn-outline-primary[b-fx5uzvj2s5] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.select-component-toolbar .toolbar-buttons .btn-outline-primary:hover:not(:disabled)[b-fx5uzvj2s5] {
    color: white;
    background-color: #ff6b3c;
}

.select-component-toolbar .toolbar-buttons .btn-outline-primary:disabled[b-fx5uzvj2s5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.select-component-toolbar .toolbar-pagination[b-fx5uzvj2s5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.select-component-toolbar .toolbar-pagination .btn[b-fx5uzvj2s5] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.select-component-toolbar .toolbar-pagination .btn:disabled[b-fx5uzvj2s5] {
    opacity: 0.5;
}

.select-component-toolbar .pagination-info[b-fx5uzvj2s5] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Alert Styles in Modal */
.select-component-modal .alert[b-fx5uzvj2s5] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.select-component-modal .alert-danger[b-fx5uzvj2s5] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.select-component-modal .alert-success[b-fx5uzvj2s5] {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.select-component-modal .mt-3[b-fx5uzvj2s5] {
    margin-top: 1rem;
}

/* Account Modal Tabs */
.account-modal-tabs[b-fx5uzvj2s5] {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #dee2e6;
}

.account-modal-tab[b-fx5uzvj2s5] {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.account-modal-tab:hover[b-fx5uzvj2s5] {
    color: #0d6efd;
}

.account-modal-tab.active[b-fx5uzvj2s5] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    font-weight: 600;
}

/* Create Account Form */
.create-account-form .form-group[b-fx5uzvj2s5] {
    margin-bottom: 1rem;
}

.create-account-form .form-label[b-fx5uzvj2s5] {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #212529;
}

.create-account-form .form-label .required[b-fx5uzvj2s5] {
    color: #dc3545;
}

.create-account-form .form-control[b-fx5uzvj2s5] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.create-account-form .form-control:focus[b-fx5uzvj2s5] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.create-account-form .form-control:disabled[b-fx5uzvj2s5] {
    background-color: #e9ecef;
    color: #6c757d;
}

.create-account-form .form-select[b-fx5uzvj2s5] {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    appearance: auto;
}

.create-account-form .checkbox-row[b-fx5uzvj2s5] {
    display: flex;
    gap: 2rem;
}

.create-account-form .checkbox-item[b-fx5uzvj2s5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.create-account-form .checkbox-item input[type="checkbox"][b-fx5uzvj2s5] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #0d6efd;
    cursor: pointer;
}

/* Inline modal footer within the tab content (for create form) */
.modal-footer-inline[b-fx5uzvj2s5] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid #dee2e6;
}

.modal-footer-inline .btn-save[b-fx5uzvj2s5] {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer-inline .btn-save:hover[b-fx5uzvj2s5] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.modal-footer-inline .btn-save:disabled[b-fx5uzvj2s5] {
    opacity: 0.65;
    cursor: not-allowed;
}

.modal-footer-inline .btn-cancel[b-fx5uzvj2s5] {
    background-color: white;
    border: 1px solid #28a745;
    color: #28a745;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.modal-footer-inline .btn-cancel:hover[b-fx5uzvj2s5] {
    background-color: #28a745;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .supplier-detail-page .supplier-header[b-fx5uzvj2s5] {
        flex-direction: column;
        gap: 1rem;
    }

    .supplier-detail-page .header-info-row[b-fx5uzvj2s5] {
        flex-direction: column;
        gap: 1rem;
    }

    .supplier-detail-page .detail-grid[b-fx5uzvj2s5] {
        grid-template-columns: 1fr;
    }

    .supplier-detail-page .tab-container[b-fx5uzvj2s5] {
        flex-wrap: wrap;
    }

    .supplier-detail-page .tab-button[b-fx5uzvj2s5] {
        flex: 1 1 auto;
        min-width: 100px;
    }

    .supplier-detail-page .tab-button:first-child[b-fx5uzvj2s5] {
        border-radius: 4px 4px 0 0;
    }

    .supplier-detail-page .tab-button:last-child[b-fx5uzvj2s5] {
        border-radius: 0 0 4px 4px;
    }

    .supplier-detail-page .tab-button:not(:last-child)[b-fx5uzvj2s5] {
        border-right: 1px solid #dee2e6;
        border-bottom: none;
    }

    .modal-dialog[b-fx5uzvj2s5] {
        width: 95%;
        margin: 1rem;
    }

    .modal-body[b-fx5uzvj2s5] {
        max-height: 60vh;
    }
}
/* /Components/Pages/SupplierManagement.razor.rz.scp.css */
/* Supplier Management Dashboard */
.supplier-management-dashboard[b-qw2usbvtq9] {
    padding: 1.5rem 1.25rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--page-bg, #f5f7f9);
}

.supplier-management-dashboard .dashboard-body[b-qw2usbvtq9] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

/* Card Grid - 3 columns for Quality Manager */
/* Card rows */
.supplier-management-dashboard .card-row[b-qw2usbvtq9] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.supplier-management-dashboard .card-row > *[b-qw2usbvtq9] {
    flex: 1 1 0;
    min-width: 0;
}

.supplier-management-dashboard .card-placeholder[b-qw2usbvtq9] {
    visibility: hidden;
}

/* Base Card Styles */
.supplier-management-dashboard .card[b-qw2usbvtq9] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    border: 2px solid #e9ecef;
    transition: all 0.25s ease;
}

.supplier-management-dashboard .card:hover[b-qw2usbvtq9] {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 8px 24px var(--accent-shadow, rgba(37, 99, 235, 0.15));
    transform: translateY(-4px);
}

.supplier-management-dashboard .card-link[b-qw2usbvtq9] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.supplier-management-dashboard .card-link:focus[b-qw2usbvtq9] {
    outline: 2px solid var(--accent-shadow, rgba(37, 99, 235, 0.4));
    outline-offset: 2px;
}

@media (max-width: 899px) {
    .supplier-management-dashboard .card-row[b-qw2usbvtq9] {
        flex-wrap: wrap;
    }

    .supplier-management-dashboard .card-row > *[b-qw2usbvtq9] {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .supplier-management-dashboard .card-placeholder[b-qw2usbvtq9] {
        display: none;
    }
}

@media (max-width: 599px) {
    .supplier-management-dashboard .card-row > *[b-qw2usbvtq9] {
        flex: 1 1 100%;
    }
}

/* Card Top (Blue background area) - Match Quality Control page */
.supplier-management-dashboard .card-top[b-qw2usbvtq9] {
    background-color: var(--accent-bg, #cfe9fb);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    position: relative;
}

.supplier-management-dashboard .card-top[b-qw2usbvtq9]::after {
    content: "";
    position: absolute;
    left: -20%;
    top: -10%;
    width: 140%;
    height: 140%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
    transform: rotate(-6deg);
    pointer-events: none;
}

.supplier-management-dashboard .card-icon[b-qw2usbvtq9] {
    z-index: 1;
}

.supplier-management-dashboard .card-icon svg[b-qw2usbvtq9] {
    width: 48px;
    height: 48px;
    color: var(--accent, #0b5f8f);
    stroke: currentColor;
}

/* Card Body - Match Quality Control page */
.supplier-management-dashboard .card-body[b-qw2usbvtq9] {
    padding: 1rem;
    background: white;
    flex: 1;
}

.supplier-management-dashboard .card-meta[b-qw2usbvtq9] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa8b6;
    margin-bottom: 0.35rem;
}

.supplier-management-dashboard .card-title[b-qw2usbvtq9] {
    font-size: 1.25rem;
    color: var(--accent, #0b5f8f);
    font-weight: 700;
}

/* Responsive breakpoints */
@media (max-width: 599px) {
    .supplier-management-dashboard .card-grid[b-qw2usbvtq9] {
        grid-template-columns: 1fr;
    }

    .supplier-management-dashboard .card-grid.operator-view[b-qw2usbvtq9] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .supplier-management-dashboard .card-grid[b-qw2usbvtq9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .supplier-management-dashboard .card[b-qw2usbvtq9] {
        min-height: 200px;
    }
}
/* /Components/Pages/SupplierPerformance.razor.rz.scp.css */
/* Supplier Performance Page */
.supplier-performance-page[b-2kag88omnf] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* Filters */
.supplier-performance-page .filters-section[b-2kag88omnf] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #ff6b3c, #0066cc) 1;
    align-items: start;
}

.supplier-performance-page .filter-group[b-2kag88omnf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.supplier-performance-page .filter-group label[b-2kag88omnf] {
    font-size: 0.85rem;
    color: #495057;
    font-weight: 500;
}

.supplier-performance-page .form-control[b-2kag88omnf],
.supplier-performance-page .form-select[b-2kag88omnf] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
}

.supplier-performance-page .form-control:focus[b-2kag88omnf],
.supplier-performance-page .form-select:focus[b-2kag88omnf] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.supplier-performance-page .date-input-wrapper[b-2kag88omnf] {
    position: relative;
    display: flex;
    align-items: center;
}

.supplier-performance-page .date-input-wrapper input[b-2kag88omnf] {
    flex: 1;
}

/* Checkbox filter group */
.supplier-performance-page .filter-group-checkbox[b-2kag88omnf] {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.supplier-performance-page .checkbox-label[b-2kag88omnf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #212529;
    cursor: pointer;
    font-weight: 500;
}

.supplier-performance-page .checkbox-label input[type="checkbox"][b-2kag88omnf] {
    width: 18px;
    height: 18px;
    accent-color: #ff6b3c;
    cursor: pointer;
}

.supplier-performance-page .filter-hint[b-2kag88omnf] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Loading */
.supplier-performance-page .loading-container[b-2kag88omnf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

.supplier-performance-page .no-data-message[b-2kag88omnf] {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

/* Chart Section */
.supplier-performance-page .chart-section[b-2kag88omnf] {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.supplier-performance-page .chart-title[b-2kag88omnf] {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0b3f63;
}

.supplier-performance-page .combo-chart-container[b-2kag88omnf] {
    width: 100%;
    overflow-x: auto;
}

.supplier-performance-page .performance-chart-svg[b-2kag88omnf] {
    width: 100%;
    min-width: 800px;
    height: auto;
}

/* Chart Legend */
.supplier-performance-page .chart-legend[b-2kag88omnf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    margin-top: 0.75rem;
}

.supplier-performance-page .legend-item[b-2kag88omnf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #495057;
}

.supplier-performance-page .legend-swatch[b-2kag88omnf] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: inline-block;
}

.supplier-performance-page .legend-line[b-2kag88omnf] {
    width: 20px;
    height: 3px;
    display: inline-block;
    border-radius: 2px;
}

.supplier-performance-page .legend-dot[b-2kag88omnf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: -6px;
}

/* Accordion Section */
.supplier-performance-page .accordion-section[b-2kag88omnf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.supplier-performance-page .accordion-headings[b-2kag88omnf] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr) 32px;
    gap: 0;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
}

.supplier-performance-page .accordion-heading[b-2kag88omnf] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0b3f63;
    text-align: center;
}

.supplier-performance-page .accordion-heading:first-child[b-2kag88omnf] {
    text-align: left;
}

.supplier-performance-page .accordion-heading-spacer[b-2kag88omnf] {
    width: 32px;
}

.supplier-performance-page .year-accordion[b-2kag88omnf] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-top: none;
}

.supplier-performance-page .year-accordion:first-child[b-2kag88omnf] {
    border-radius: 0;
}

.supplier-performance-page .year-accordion:last-child[b-2kag88omnf] {
    border-bottom: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
}

.supplier-performance-page .year-accordion:only-child[b-2kag88omnf] {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid #e9ecef;
}

.supplier-performance-page .year-header[b-2kag88omnf] {
    display: block;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.15s;
    user-select: none;
}

.supplier-performance-page .year-header:hover[b-2kag88omnf] {
    background-color: #f8f9fa;
}

.supplier-performance-page .year-summary[b-2kag88omnf] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr) 32px;
    gap: 0;
    align-items: center;
}

.supplier-performance-page .year-label[b-2kag88omnf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b3f63;
}

.supplier-performance-page .year-stat[b-2kag88omnf] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    text-align: center;
}

.supplier-performance-page .expand-icon[b-2kag88omnf] {
    transition: transform 0.2s;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supplier-performance-page .expand-icon.expanded[b-2kag88omnf] {
    transform: rotate(180deg);
}

/* Year Detail */
.supplier-performance-page .year-detail[b-2kag88omnf] {
    border-top: 1px solid #e9ecef;
    padding: 0;
}

.supplier-performance-page .detail-row[b-2kag88omnf] {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr) 32px;
    gap: 0;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.supplier-performance-page .detail-row:last-child[b-2kag88omnf] {
    border-bottom: none;
}

.supplier-performance-page .detail-row:hover[b-2kag88omnf] {
    background-color: #f8f9fa;
}

.supplier-performance-page .detail-cell[b-2kag88omnf] {
    font-size: 0.9rem;
    color: #212529;
    text-align: center;
}

.supplier-performance-page .detail-cell-spacer[b-2kag88omnf] {
    width: 32px;
}

.supplier-performance-page .month-name[b-2kag88omnf] {
    color: #0d6efd;
    font-weight: 500;
    text-align: left;
}

/* Responsive */
@media (max-width: 992px) {
    .supplier-performance-page .filters-section[b-2kag88omnf] {
        grid-template-columns: 1fr 1fr;
    }

    .supplier-performance-page .accordion-headings[b-2kag88omnf] {
        grid-template-columns: 60px repeat(7, 1fr) 32px;
        gap: 0;
    }

    .supplier-performance-page .year-summary[b-2kag88omnf] {
        grid-template-columns: 60px repeat(7, 1fr) 32px;
        gap: 0;
    }

    .supplier-performance-page .detail-row[b-2kag88omnf] {
        grid-template-columns: 60px repeat(7, 1fr) 32px;
        gap: 0;
    }
}

@media (max-width: 768px) {
    .supplier-performance-page[b-2kag88omnf] {
        padding: 1rem;
    }

    .supplier-performance-page .filters-section[b-2kag88omnf] {
        grid-template-columns: 1fr;
    }

    .supplier-performance-page .detail-row[b-2kag88omnf] {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/SupplierPerformanceMonthDetail.razor.rz.scp.css */
/* Supplier Performance Month Detail Page */
.sp-month-detail-page[b-rc74ojkseg] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* Summary Stats */
.sp-month-detail-page .month-stats-row[b-rc74ojkseg] {
    display: flex;
    gap: 2.5rem;
    padding: 1rem 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #ff6b3c, #0066cc) 1;
}

.sp-month-detail-page .month-stat[b-rc74ojkseg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sp-month-detail-page .stat-label[b-rc74ojkseg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-month-detail-page .stat-value[b-rc74ojkseg] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b3f63;
}

/* Tab Bar */
.sp-month-detail-page .month-tab-bar[b-rc74ojkseg] {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}

.sp-month-detail-page .month-tab[b-rc74ojkseg] {
    padding: 0.6rem 2.5rem;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.sp-month-detail-page .month-tab:first-child[b-rc74ojkseg] {
    border-radius: 6px 0 0 6px;
}

.sp-month-detail-page .month-tab:last-child[b-rc74ojkseg] {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.sp-month-detail-page .month-tab.active[b-rc74ojkseg] {
    background: #0b3f63;
    color: #fff;
    border-color: #0b3f63;
}

.sp-month-detail-page .month-tab:not(.active):hover[b-rc74ojkseg] {
    background: #f8f9fa;
}

/* Tab Content */
.sp-month-detail-page .month-tab-content[b-rc74ojkseg] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Search bar */
.sp-month-detail-page .sp-search-bar[b-rc74ojkseg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sp-month-detail-page .sp-search-icon[b-rc74ojkseg] {
    flex-shrink: 0;
}

.sp-month-detail-page .sp-search-input[b-rc74ojkseg] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: #212529;
    background: transparent;
}

.sp-month-detail-page .sp-search-input[b-rc74ojkseg]::placeholder {
    color: #adb5bd;
}

.sp-month-detail-page .sp-search-clear[b-rc74ojkseg] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.15rem;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.sp-month-detail-page .sp-search-clear:hover[b-rc74ojkseg] {
    background: #f1f3f5;
}

/* Sortable headers */
.sp-month-detail-page .month-detail-table .th-header[b-rc74ojkseg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    user-select: none;
}

.sp-month-detail-page .month-detail-table th.text-end .th-header[b-rc74ojkseg] {
    justify-content: flex-end;
}

.sp-month-detail-page .month-detail-table .th-header:hover[b-rc74ojkseg] {
    color: #0d6efd;
}

.sp-month-detail-page .month-detail-table .sort-indicator[b-rc74ojkseg] {
    display: inline-flex;
    align-items: center;
    color: #264a60;
}

/* Table */
.sp-month-detail-page .month-detail-table[b-rc74ojkseg] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.sp-month-detail-page .month-detail-table thead th[b-rc74ojkseg] {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.sp-month-detail-page .month-detail-table tbody td[b-rc74ojkseg] {
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.sp-month-detail-page .month-detail-table tbody tr:hover[b-rc74ojkseg] {
    background-color: #f8f9fa;
}

.sp-month-detail-page .month-detail-table tbody tr:last-child td[b-rc74ojkseg] {
    border-bottom: none;
}

/* Status Badges */
.sp-month-detail-page .badge-status[b-rc74ojkseg] {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.sp-month-detail-page .status-added-on-return[b-rc74ojkseg] {
    background: #0b3f63;
    color: #fff;
}

.sp-month-detail-page .status-complete[b-rc74ojkseg] {
    background: #198754;
    color: #fff;
}

.sp-month-detail-page .status-pending[b-rc74ojkseg] {
    background: #ffc107;
    color: #212529;
}

.sp-month-detail-page .status-return-complete[b-rc74ojkseg] {
    background: #198754;
    color: #fff;
}

/* Pagination */
.sp-month-detail-page .month-pagination-row[b-rc74ojkseg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e9ecef;
}

.sp-month-detail-page .pagination-info[b-rc74ojkseg] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Loading */
.sp-month-detail-page .loading-container[b-rc74ojkseg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 992px) {
    .sp-month-detail-page .month-stats-row[b-rc74ojkseg] {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .sp-month-detail-page[b-rc74ojkseg] {
        padding: 1rem;
    }

    .sp-month-detail-page .month-stats-row[b-rc74ojkseg] {
        gap: 1rem;
    }

    .sp-month-detail-page .month-tab[b-rc74ojkseg] {
        padding: 0.5rem 1.5rem;
        font-size: 0.85rem;
    }

    .sp-month-detail-page .month-detail-table[b-rc74ojkseg] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/SupplierReceipts.razor.rz.scp.css */
/* Supplier Receipts Page */
.supplier-receipts-page[b-sddwg3918y] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
    font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.supplier-receipts-page .btn-import[b-sddwg3918y] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ff6b3c;
    background: #fff;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-receipts-page .btn-import:hover[b-sddwg3918y] {
    background: #fff5f2;
}

.supplier-receipts-page .btn-recalculate[b-sddwg3918y] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-receipts-page .btn-recalculate:hover[b-sddwg3918y] {
    background: #f8f9fa;
}

/* Main Content - Split Layout */
.supplier-receipts-page .main-content[b-sddwg3918y] {
    display: flex;
    min-height: calc(100vh - 120px);
    border-top: 1px solid #e9ecef;
}

/* Left Sidebar */
.supplier-receipts-page .sidebar[b-sddwg3918y] {
    width: 380px;
    min-width: 380px;
    border-right: 1px solid #e9ecef;
    background: #fafbfc;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

.supplier-receipts-page .import-group-card[b-sddwg3918y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.supplier-receipts-page .import-group-card:hover[b-sddwg3918y] {
    background: #f0f4f8;
}

.supplier-receipts-page .import-group-card.active[b-sddwg3918y] {
    background: #163a49;
    color: #fff;
    border-left: 4px solid #ff6b3c;
}

.supplier-receipts-page .import-group-card.active .group-title[b-sddwg3918y] {
    color: #fff;
}

.supplier-receipts-page .import-group-card.active .group-date[b-sddwg3918y] {
    color: rgba(255, 255, 255, 0.7);
}

.supplier-receipts-page .import-group-card.active .group-arrow svg[b-sddwg3918y] {
    stroke: #ff6b3c;
}

.supplier-receipts-page .group-info[b-sddwg3918y] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.supplier-receipts-page .group-title[b-sddwg3918y] {
    font-size: 1rem;
    font-weight: 700;
    color: #163a49;
}

.supplier-receipts-page .group-date[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #6c757d;
}

.supplier-receipts-page .group-arrow[b-sddwg3918y] {
    flex-shrink: 0;
}

.supplier-receipts-page .group-arrow svg[b-sddwg3918y] {
    stroke: #ff6b3c;
}

.supplier-receipts-page .btn-load-more[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 1.5rem);
    margin: 0.75rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #0d6efd;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-receipts-page .btn-load-more:hover[b-sddwg3918y] {
    background: #f8f9fa;
}

.supplier-receipts-page .btn-load-more:disabled[b-sddwg3918y] {
    opacity: 0.5;
    cursor: not-allowed;
}

.supplier-receipts-page .no-data-sidebar[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

/* Right Content Area */
.supplier-receipts-page .content-area[b-sddwg3918y] {
    flex: 1;
    padding: 1.5rem;
    overflow-x: auto;
}

.supplier-receipts-page .no-selection[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Tab Container */
.supplier-receipts-page .tab-container[b-sddwg3918y] {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}

.supplier-receipts-page .tab-button[b-sddwg3918y] {
    padding: 0.6rem 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0d6efd;
    background: #fff;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-receipts-page .tab-button:first-child[b-sddwg3918y] {
    border-radius: 4px 0 0 4px;
}

.supplier-receipts-page .tab-button:last-child[b-sddwg3918y] {
    border-radius: 0 4px 4px 0;
}

.supplier-receipts-page .tab-button:not(:last-child)[b-sddwg3918y] {
    border-right: none;
}

.supplier-receipts-page .tab-button:hover[b-sddwg3918y] {
    background: #f8f9fa;
}

.supplier-receipts-page .tab-button.active[b-sddwg3918y] {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

/* Import Header */
.supplier-receipts-page .import-header[b-sddwg3918y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.supplier-receipts-page .import-title[b-sddwg3918y] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #163a49;
}

.supplier-receipts-page .btn-delete[b-sddwg3918y] {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #dc3545;
    background: #fff;
    border: 1px solid #dc3545;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-receipts-page .btn-delete:hover[b-sddwg3918y] {
    background: #fdf0f1;
}

/* Data Table */
.supplier-receipts-page .data-table-wrapper[b-sddwg3918y] {
    overflow-x: auto;
}

.supplier-receipts-page .data-table[b-sddwg3918y] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.875rem;
}

.supplier-receipts-page .data-table thead th[b-sddwg3918y] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
}

.supplier-receipts-page .data-table thead th.text-end[b-sddwg3918y] {
    text-align: right;
}

.supplier-receipts-page .th-content[b-sddwg3918y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-receipts-page .filter-btn[b-sddwg3918y] {
    background: none;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    padding: 2px 4px;
    cursor: pointer;
    color: #ff6b3c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.supplier-receipts-page .filter-btn:hover[b-sddwg3918y] {
    background: #fff5f2;
}

.supplier-receipts-page .filter-input[b-sddwg3918y] {
    margin-top: 0.4rem;
}

.supplier-receipts-page .filter-input .form-control[b-sddwg3918y] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    width: 100%;
    max-width: 120px;
}

.supplier-receipts-page .filter-input .form-control:focus[b-sddwg3918y] {
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(255, 107, 60, 0.25);
    border-color: #ff6b3c;
}

/* Filter input with operator dropdown */
.supplier-receipts-page .filter-input-with-op[b-sddwg3918y] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0;
    min-width: 120px;
}

.supplier-receipts-page .filter-op-select[b-sddwg3918y] {
    padding: 0.2rem 0.25rem;
    font-size: 0.8rem;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    color: #ff6b3c;
    background: #fff;
    cursor: pointer;
    min-width: 36px;
    height: 28px;
    flex-shrink: 0;
}

.supplier-receipts-page .filter-op-select:focus[b-sddwg3918y] {
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(255, 107, 60, 0.25);
    border-color: #ff6b3c;
}

.supplier-receipts-page .filter-input-with-op .form-control[b-sddwg3918y] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #ff6b3c;
    border-radius: 3px;
    width: 100%;
    max-width: 80px;
    height: 28px;
}

.supplier-receipts-page .th-content.justify-end[b-sddwg3918y] {
    justify-content: flex-end;
}

.supplier-receipts-page .data-table tbody tr[b-sddwg3918y] {
    border-bottom: 1px solid #f0f0f0;
}

.supplier-receipts-page .data-table tbody tr:hover[b-sddwg3918y] {
    background-color: #f8f9fa;
}

.supplier-receipts-page .data-table tbody td[b-sddwg3918y] {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #212529;
    vertical-align: middle;
}

.supplier-receipts-page .data-table tbody td.text-end[b-sddwg3918y] {
    text-align: right;
}

.supplier-receipts-page .data-table tbody td.text-center[b-sddwg3918y] {
    text-align: center;
}

/* Pagination */
.supplier-receipts-page .pagination-row[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.75rem 0;
}

.supplier-receipts-page .pagination-btn[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    border-radius: 3px;
}

.supplier-receipts-page .pagination-btn:hover:not(:disabled)[b-sddwg3918y] {
    background: #f0f0f0;
}

.supplier-receipts-page .pagination-btn:disabled[b-sddwg3918y] {
    opacity: 0.4;
    cursor: not-allowed;
}

.supplier-receipts-page .pagination-info[b-sddwg3918y] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Placeholder Content */
.supplier-receipts-page .placeholder-content[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Loading */
.supplier-receipts-page .loading-container[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Modal Styles (scoped) */
.supplier-receipts-page ~ .modal-backdrop[b-sddwg3918y],
:root .modal-backdrop[b-sddwg3918y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-sddwg3918y] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.modal-dialog-wide[b-sddwg3918y] {
    max-width: 700px;
}

.modal-header[b-sddwg3918y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-sddwg3918y] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close[b-sddwg3918y] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
    padding: 0;
}

.btn-close:hover[b-sddwg3918y] {
    color: #000;
}

.modal-body[b-sddwg3918y] {
    padding: 1.5rem;
}

.modal-body .form-group[b-sddwg3918y] {
    margin-bottom: 1.25rem;
}

.modal-body .form-label[b-sddwg3918y] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #212529;
}

.modal-body .form-control[b-sddwg3918y],
.modal-body .form-select[b-sddwg3918y] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-body .form-control:focus[b-sddwg3918y],
.modal-body .form-select:focus[b-sddwg3918y] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* File Input Wrapper */
.file-input-wrapper[b-sddwg3918y] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
}

.file-input-wrapper .file-name[b-sddwg3918y] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    color: #6c757d;
    background: #fff;
    border: none;
    min-height: 1.5em;
}

.file-input-wrapper .btn-browse[b-sddwg3918y] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ff6b3c;
    background: #fff;
    border: none;
    border-left: 1px solid #ff6b3c;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.file-input-wrapper .btn-browse:hover[b-sddwg3918y] {
    background: #fff5f2;
}

.btn-browse-multi[b-sddwg3918y] {
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #ff6b3c;
    background: #fff;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-browse-multi:hover[b-sddwg3918y] {
    background: #fff5f2;
}

.modal-footer[b-sddwg3918y] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Import button - teal/green solid */
.modal-footer .btn-import-action[b-sddwg3918y] {
    background-color: #0d9488;
    border: 1px solid #0d9488;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-import-action:hover[b-sddwg3918y] {
    background-color: #0f766e;
    border-color: #0f766e;
}

.modal-footer .btn-import-action:disabled[b-sddwg3918y] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Delete button - red solid */
.modal-footer .btn-delete-action[b-sddwg3918y] {
    background-color: #dc3545;
    border: 1px solid #dc3545;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-delete-action:hover[b-sddwg3918y] {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.modal-footer .btn-delete-action:disabled[b-sddwg3918y] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Cancel button - green outlined */
.modal-footer .btn-cancel[b-sddwg3918y] {
    background-color: white;
    border: 1px solid #28a745;
    color: #28a745;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.modal-footer .btn-cancel:hover[b-sddwg3918y] {
    background-color: #28a745;
    color: white;
}

/* Alert styles */
.alert[b-sddwg3918y] {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.alert-danger[b-sddwg3918y] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

.alert-success[b-sddwg3918y] {
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    color: #0f5132;
}

.mt-3[b-sddwg3918y] {
    margin-top: 1rem;
}

.mb-0[b-sddwg3918y] {
    margin-bottom: 0;
}

.text-muted[b-sddwg3918y] {
    color: #6c757d;
}

.spinner-border-sm[b-sddwg3918y] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.me-1[b-sddwg3918y] {
    margin-right: 0.25rem;
}

/* Responsive */
@media (max-width: 992px) {
    .supplier-receipts-page .main-content[b-sddwg3918y] {
        flex-direction: column;
    }

    .supplier-receipts-page .sidebar[b-sddwg3918y] {
        width: 100%;
        min-width: unset;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }

    .supplier-receipts-page .page-header[b-sddwg3918y] {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .modal-dialog[b-sddwg3918y] {
        width: 95%;
        margin: 1rem;
    }

    .supplier-receipts-page .import-header[b-sddwg3918y] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .supplier-receipts-page .tab-container[b-sddwg3918y] {
        flex-wrap: wrap;
    }

    .supplier-receipts-page .tab-button[b-sddwg3918y] {
        flex: 1 1 auto;
    }
}

/* Adjustments Tab */
.supplier-receipts-page .adjustments-title[b-sddwg3918y] {
    margin: 0 0 1.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #163a49;
}

.supplier-receipts-page .adjustments-toolbar[b-sddwg3918y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.supplier-receipts-page .adjustments-toolbar .toolbar-buttons[b-sddwg3918y] {
    display: flex;
    gap: 0.5rem;
}

.supplier-receipts-page .adjustments-toolbar .toolbar-pagination[b-sddwg3918y] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.supplier-receipts-page .adjustments-toolbar .toolbar-pagination .pagination-btn[b-sddwg3918y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    border-radius: 3px;
    flex-shrink: 0;
}

.supplier-receipts-page .adjustments-toolbar .toolbar-pagination .pagination-btn:hover:not(:disabled)[b-sddwg3918y] {
    background: #f0f0f0;
}

.supplier-receipts-page .adjustments-toolbar .toolbar-pagination .pagination-btn:disabled[b-sddwg3918y] {
    opacity: 0.4;
    cursor: not-allowed;
}

.supplier-receipts-page .adjustments-toolbar .toolbar-pagination .pagination-info[b-sddwg3918y] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0.5rem;
    white-space: nowrap;
}

.supplier-receipts-page .btn-adj-new[b-sddwg3918y],
.supplier-receipts-page .btn-adj-edit[b-sddwg3918y],
.supplier-receipts-page .btn-adj-delete[b-sddwg3918y] {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    color: #ff6b3c;
    transition: all 0.15s ease;
}

.supplier-receipts-page .btn-adj-new:hover[b-sddwg3918y],
.supplier-receipts-page .btn-adj-edit:hover[b-sddwg3918y],
.supplier-receipts-page .btn-adj-delete:hover[b-sddwg3918y] {
    background: #fff5f2;
}

.supplier-receipts-page .btn-adj-new:disabled[b-sddwg3918y],
.supplier-receipts-page .btn-adj-edit:disabled[b-sddwg3918y],
.supplier-receipts-page .btn-adj-delete:disabled[b-sddwg3918y] {
    opacity: 0.5;
    cursor: not-allowed;
}

.supplier-receipts-page .data-table tbody tr.selected-row[b-sddwg3918y] {
    background-color: #e8f4fd;
}

.supplier-receipts-page .data-table tbody tr.selected-row:hover[b-sddwg3918y] {
    background-color: #d6ecfa;
}

/* Adjustment Modal Info Row */
.adj-modal-info-row[b-sddwg3918y] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.adj-modal-info-item[b-sddwg3918y] {
    flex: 1;
}

.adj-modal-info-item .form-label[b-sddwg3918y] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 0.25rem;
}

.adj-modal-info-value[b-sddwg3918y] {
    font-size: 1rem;
    color: #212529;
    padding: 0.25rem 0;
}

/* Summary Tab */
.supplier-receipts-page .summary-header[b-sddwg3918y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.supplier-receipts-page .summary-title[b-sddwg3918y] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #163a49;
}

.supplier-receipts-page .btn-recalculate-summary[b-sddwg3918y] {
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #ff6b3c;
    background: #fff;
    border: 1px solid #ff6b3c;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-receipts-page .btn-recalculate-summary:hover[b-sddwg3918y] {
    background: #fff5f2;
}

.supplier-receipts-page .btn-recalculate-summary:disabled[b-sddwg3918y] {
    opacity: 0.5;
    cursor: not-allowed;
}

.supplier-receipts-page .mb-3[b-sddwg3918y] {
    margin-bottom: 1rem;
}

/* Import Progress Modal */
.import-progress-container[b-sddwg3918y] {
    text-align: center;
    padding: 1rem 0;
}

.import-progress-container .progress-message[b-sddwg3918y] {
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
    margin-bottom: 1rem;
}

.import-progress-container .progress-bar-wrapper[b-sddwg3918y] {
    width: 100%;
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.import-progress-container .progress-bar-fill[b-sddwg3918y] {
    height: 100%;
    background: #0d9488;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.import-progress-container .progress-info-row[b-sddwg3918y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.import-progress-container .progress-text[b-sddwg3918y] {
    font-size: 0.85rem;
    color: #495057;
}

.import-progress-container .progress-percent[b-sddwg3918y] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #163a49;
}

.import-progress-container .progress-current-item[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.import-progress-container .progress-spinner[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.import-progress-container .progress-hint[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Recalculate Progress Modal */
.recalculate-modal[b-sddwg3918y] {
    max-width: 600px;
}

.recalc-progress-container[b-sddwg3918y] {
    text-align: center;
    padding: 1rem 0;
}

.recalc-status-icon[b-sddwg3918y] {
    margin-bottom: 1rem;
}

.recalc-status-icon.success svg[b-sddwg3918y] {
    color: #0d9488;
}

.recalc-status-text[b-sddwg3918y] {
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
    margin-bottom: 1rem;
}

.recalc-status-text.success[b-sddwg3918y] {
    color: #0d9488;
}

.recalc-hint[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-bottom: 0;
}

.recalc-current-supplier[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    word-break: break-word;
}

.recalc-summary-stats[b-sddwg3918y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-radius: 6px;
    text-align: left;
}

.recalc-summary-stats.complete[b-sddwg3918y] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.recalc-stat[b-sddwg3918y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.recalc-stat-label[b-sddwg3918y] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recalc-stat-value[b-sddwg3918y] {
    font-size: 1rem;
    font-weight: 700;
    color: #163a49;
}

/* Top Suppliers Table in Recalculate Modal */
.recalc-top-suppliers[b-sddwg3918y] {
    margin-top: 1.25rem;
    text-align: left;
}

.recalc-top-title[b-sddwg3918y] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #163a49;
    margin-bottom: 0.5rem;
}

.recalc-top-table[b-sddwg3918y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.recalc-top-table thead th[b-sddwg3918y] {
    font-weight: 600;
    font-size: 0.75rem;
    color: #6c757d;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
}

.recalc-top-table thead th.text-end[b-sddwg3918y] {
    text-align: right;
}

.recalc-top-table tbody td[b-sddwg3918y] {
    padding: 0.35rem 0.5rem;
    color: #212529;
    border-bottom: 1px solid #f0f0f0;
}

.recalc-top-table tbody td.text-end[b-sddwg3918y] {
    text-align: right;
}

.recalc-progress-container .progress-bar-wrapper[b-sddwg3918y] {
    width: 100%;
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.recalc-progress-container .progress-bar-fill[b-sddwg3918y] {
    height: 100%;
    background: #0d9488;
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* Toggle Switch for Recalculate All Months */
.recalc-toggle-group[b-sddwg3918y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toggle-label[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    user-select: none;
}

.toggle-switch[b-sddwg3918y] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.toggle-switch input[b-sddwg3918y] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-sddwg3918y] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 20px;
}

.toggle-slider[b-sddwg3918y]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider[b-sddwg3918y] {
    background-color: #0d9488;
}

.toggle-switch input:checked + .toggle-slider[b-sddwg3918y]:before {
    transform: translateX(16px);
}

.toggle-switch input:focus + .toggle-slider[b-sddwg3918y] {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

/* Multi-month recalculate progress */
.recalc-multi-month-header[b-sddwg3918y] {
    margin-bottom: 0.5rem;
}

.recalc-multi-month-label[b-sddwg3918y] {
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.progress-bar-wrapper.multi-month[b-sddwg3918y] {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar-wrapper.multi-month .progress-bar-fill[b-sddwg3918y] {
    height: 100%;
    background: #163a49;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.recalc-current-month[b-sddwg3918y] {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0;
}

.recalc-divider[b-sddwg3918y] {
    margin: 0.75rem 0;
    border-color: #e9ecef;
}

/* Multi-file Import Modal */
.multi-import-upload-area[b-sddwg3918y] {
    margin-bottom: 1.25rem;
}

.multi-import-dropzone[b-sddwg3918y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #fafbfc;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.multi-import-dropzone:hover[b-sddwg3918y] {
    border-color: #ff6b3c;
    background: #fff5f2;
}

.multi-import-dropzone-text[b-sddwg3918y] {
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.multi-import-file-list[b-sddwg3918y] {
    margin-top: 1rem;
}

.multi-import-table[b-sddwg3918y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.multi-import-table thead th[b-sddwg3918y] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.5rem 0.5rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.multi-import-table tbody tr[b-sddwg3918y] {
    border-bottom: 1px solid #f0f0f0;
}

.multi-import-table tbody tr:hover[b-sddwg3918y] {
    background-color: #f8f9fa;
}

.multi-import-table tbody td[b-sddwg3918y] {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}

.multi-import-row-warning[b-sddwg3918y] {
    background-color: #fff3cd !important;
}

.multi-import-row-warning:hover[b-sddwg3918y] {
    background-color: #ffe9a0 !important;
}

.multi-import-filename[b-sddwg3918y] {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #212529;
    font-weight: 500;
}

.multi-import-select[b-sddwg3918y] {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
    min-width: 100px;
    height: auto !important;
}

.btn-remove-file[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.btn-remove-file:hover[b-sddwg3918y] {
    background: #fdf0f1;
}

.multi-import-count[b-sddwg3918y] {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
}

/* Placeholder Empty State (no receipts imported yet) */
.placeholder-empty-state[b-sddwg3918y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 1rem;
}

.placeholder-empty-icon[b-sddwg3918y] {
    margin-bottom: 1.25rem;
    opacity: 0.6;
}

.placeholder-empty-title[b-sddwg3918y] {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #163a49;
}

.placeholder-empty-text[b-sddwg3918y] {
    margin: 0 0 1.75rem 0;
    font-size: 0.9rem;
    color: #6c757d;
    max-width: 420px;
    line-height: 1.5;
}

.placeholder-empty-steps[b-sddwg3918y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
    max-width: 480px;
    width: 100%;
}

.placeholder-step[b-sddwg3918y] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.placeholder-step-number[b-sddwg3918y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: #0d9488;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

.placeholder-step-text[b-sddwg3918y] {
    font-size: 0.85rem;
    color: #495057;
    line-height: 1.5;
}

.placeholder-step-text strong[b-sddwg3918y] {
    color: #163a49;
}
/* /Components/Pages/SupplierReports.razor.rz.scp.css */
/* Supplier Performance Reports Page */
.supplier-reports-page[b-nyl4mrf4l6] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* Filters */
.supplier-reports-page .filters-section[b-nyl4mrf4l6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #ff6b3c, #0066cc) 1;
    align-items: start;
}

.supplier-reports-page .filter-group[b-nyl4mrf4l6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.supplier-reports-page .filter-group label[b-nyl4mrf4l6] {
    font-size: 0.85rem;
    color: #495057;
    font-weight: 500;
}

.supplier-reports-page .form-select[b-nyl4mrf4l6] {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
}

.supplier-reports-page .form-select:focus[b-nyl4mrf4l6] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Checkbox filter group */
.supplier-reports-page .filter-group-checkbox[b-nyl4mrf4l6] {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.supplier-reports-page .checkbox-label[b-nyl4mrf4l6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #212529;
    cursor: pointer;
    font-weight: 500;
}

.supplier-reports-page .checkbox-label input[type="checkbox"][b-nyl4mrf4l6] {
    width: 18px;
    height: 18px;
    accent-color: #ff6b3c;
    cursor: pointer;
}

.supplier-reports-page .filter-hint[b-nyl4mrf4l6] {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Loading */
.supplier-reports-page .loading-container[b-nyl4mrf4l6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

.supplier-reports-page .no-data-message[b-nyl4mrf4l6] {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

/* Chart Section */
.supplier-reports-page .chart-section[b-nyl4mrf4l6] {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.supplier-reports-page .chart-title[b-nyl4mrf4l6] {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0b3f63;
}

.supplier-reports-page .combo-chart-container[b-nyl4mrf4l6] {
    width: 100%;
    overflow-x: auto;
}

.supplier-reports-page .performance-chart-svg[b-nyl4mrf4l6] {
    width: 100%;
    min-width: 800px;
    height: auto;
}

/* Chart Legend */
.supplier-reports-page .chart-legend[b-nyl4mrf4l6] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.supplier-reports-page .legend-item[b-nyl4mrf4l6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #495057;
}

.supplier-reports-page .legend-swatch[b-nyl4mrf4l6] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: inline-block;
}

.supplier-reports-page .legend-line[b-nyl4mrf4l6] {
    width: 20px;
    height: 3px;
    display: inline-block;
    border-radius: 2px;
}

.supplier-reports-page .legend-dot[b-nyl4mrf4l6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: -6px;
}

/* Data Table */
.supplier-reports-page .table-section[b-nyl4mrf4l6] {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.supplier-reports-page .report-table[b-nyl4mrf4l6] {
    width: 100%;
    border-collapse: collapse;
}

.supplier-reports-page .report-table thead tr[b-nyl4mrf4l6] {
    border-bottom: 2px solid #dee2e6;
}

.supplier-reports-page .report-table thead th[b-nyl4mrf4l6] {
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-weight: 500;
    font-size: 0.85rem;
    color: #0b3f63;
    background: #f8f9fa;
}

.supplier-reports-page .th-content[b-nyl4mrf4l6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-reports-page .sort-btn[b-nyl4mrf4l6] {
    background: none;
    border: none;
    padding: 0.15rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.15s;
}

.supplier-reports-page .sort-btn:hover[b-nyl4mrf4l6] {
    background-color: #e9ecef;
}

.supplier-reports-page .th-view[b-nyl4mrf4l6] {
    width: 50px;
    text-align: center;
}

.supplier-reports-page .view-btn[b-nyl4mrf4l6] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s;
}

.supplier-reports-page .view-btn:hover[b-nyl4mrf4l6] {
    background-color: #fff5f2;
}

.supplier-reports-page .view-btn.active[b-nyl4mrf4l6] {
    background-color: #e6f9ee;
    border: 1px solid #2bae66;
}

.supplier-reports-page .view-btn.active:hover[b-nyl4mrf4l6] {
    background-color: #d4f4e2;
}

.supplier-reports-page .report-table tbody td[b-nyl4mrf4l6] {
    padding: 0.75rem 1.25rem;
    color: #212529;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
}

.supplier-reports-page .report-table tbody tr:last-child td[b-nyl4mrf4l6] {
    border-bottom: none;
}

.supplier-reports-page .report-table tbody tr:hover[b-nyl4mrf4l6] {
    background-color: #f8f9fa;
}

/* Responsive */
@media (max-width: 992px) {
    .supplier-reports-page .filters-section[b-nyl4mrf4l6] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .supplier-reports-page[b-nyl4mrf4l6] {
        padding: 1rem;
    }

    .supplier-reports-page .filters-section[b-nyl4mrf4l6] {
        grid-template-columns: 1fr;
    }

    .supplier-reports-page .report-table thead th[b-nyl4mrf4l6],
    .supplier-reports-page .report-table tbody td[b-nyl4mrf4l6] {
        padding: 0.5rem;
    }
}
/* /Components/Pages/SupplierReturns.razor.rz.scp.css */
/* Supplier Returns Page */
.supplier-returns-page[b-r6vev1ksy3] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

.btn-new[b-r6vev1ksy3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #ff6b3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-new:hover[b-r6vev1ksy3] {
    background-color: #e55a2b;
}

.btn-new .plus-icon[b-r6vev1ksy3] {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Tab Navigation */
.tab-navigation[b-r6vev1ksy3] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.tab-btn[b-r6vev1ksy3] {
    padding: 0.625rem 1.5rem;
    background: #fff;
    border: 1px solid #0b5f8f;
    color: #0b5f8f;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:first-child[b-r6vev1ksy3] {
    border-radius: 4px 0 0 4px;
}

.tab-btn:last-child[b-r6vev1ksy3] {
    border-radius: 0 4px 4px 0;
}

.tab-btn:not(:first-child):not(:last-child)[b-r6vev1ksy3] {
    border-left: none;
    border-right: none;
}

.tab-btn:hover[b-r6vev1ksy3] {
    background-color: #e7f3fa;
}

.tab-btn.active[b-r6vev1ksy3] {
    background-color: #0b5f8f;
    color: #fff;
}

/* Loading Container */
.loading-container[b-r6vev1ksy3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Alert */
.alert[b-r6vev1ksy3] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-danger[b-r6vev1ksy3] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* No Data Message */
.no-data-message[b-r6vev1ksy3] {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
    font-style: italic;
}

/* Supplier Accordions */
.supplier-accordions[b-r6vev1ksy3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.supplier-accordion[b-r6vev1ksy3] {
    border-bottom: 1px solid #e9ecef;
}

.supplier-accordion:first-child[b-r6vev1ksy3] {
    border-top: 1px solid #e9ecef;
}

.accordion-header[b-r6vev1ksy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.accordion-header:hover[b-r6vev1ksy3] {
    background-color: #f8f9fa;
}

.supplier-name[b-r6vev1ksy3] {
    font-size: 1rem;
    font-weight: 600;
    color: #0b5f8f;
}

.accordion-icon[b-r6vev1ksy3] {
    display: flex;
    align-items: center;
    color: #6c757d;
}

.accordion-icon svg[b-r6vev1ksy3] {
    stroke: currentColor;
}

/* Accordion Content */
.accordion-content[b-r6vev1ksy3] {
    padding: 0 0 1rem 0;
    background-color: #fff;
}

/* Returns Table */
.returns-table[b-r6vev1ksy3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.returns-table thead th[b-r6vev1ksy3] {
    font-weight: 500;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
    background-color: #f8f9fa;
}

.th-header[b-r6vev1ksy3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
}

.th-header:hover[b-r6vev1ksy3] {
    color: #0d6efd;
}

.sort-indicator[b-r6vev1ksy3] {
    color: #264a60;
    font-size: 0.85rem;
    font-weight: 600;
}

.returns-table tbody tr[b-r6vev1ksy3] {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

.returns-table tbody tr.clickable-row[b-r6vev1ksy3] {
    cursor: pointer;
}

.returns-table tbody tr:hover[b-r6vev1ksy3] {
    background-color: #e7f1ff;
}

.returns-table tbody tr:active[b-r6vev1ksy3] {
    background-color: #d0e3ff;
}

.returns-table tbody td[b-r6vev1ksy3] {
    padding: 0.875rem 1rem;
    color: #212529;
    vertical-align: middle;
}

.returns-table tbody td.component-name[b-r6vev1ksy3] {
    color: #0d6efd;
    font-weight: 500;
}

.actions-column[b-r6vev1ksy3] {
    width: 100px;
    text-align: right;
}

/* Status Badge */
.status-badge[b-r6vev1ksy3] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-pending[b-r6vev1ksy3] {
    background-color: #ff6b3c;
    color: #fff;
}

.status-new[b-r6vev1ksy3] {
    background-color: #0d6efd;
    color: #fff;
}

.status-notified[b-r6vev1ksy3] {
    background-color: #0b5f8f;
    color: #fff;
}

.status-active[b-r6vev1ksy3] {
    background-color: #0d6efd;
    color: #fff;
}

.status-complete[b-r6vev1ksy3] {
    background-color: #198754;
    color: #fff;
}

.status-added[b-r6vev1ksy3] {
    background-color: #0d6efd;
    color: #fff;
}

.status-default[b-r6vev1ksy3] {
    background-color: #6c757d;
    color: #fff;
}

/* Delete Button */
.btn-delete[b-r6vev1ksy3] {
    padding: 0.375rem 0.875rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover[b-r6vev1ksy3] {
    background-color: #ff6b3c;
    color: #fff;
}

.btn-delete:disabled[b-r6vev1ksy3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Styles */
.modal-backdrop[b-r6vev1ksy3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.confirmation-modal[b-r6vev1ksy3] {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.confirmation-modal h3[b-r6vev1ksy3] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: #163a49;
}

.confirmation-modal p[b-r6vev1ksy3] {
    margin: 0 0 0.5rem 0;
    color: #495057;
}

.confirmation-modal .text-muted[b-r6vev1ksy3] {
    color: #6c757d;
    font-size: 0.875rem;
}

.modal-buttons[b-r6vev1ksy3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-cancel[b-r6vev1ksy3] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #6c757d;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-r6vev1ksy3] {
    background-color: #f8f9fa;
}

.btn-confirm-delete[b-r6vev1ksy3] {
    padding: 0.5rem 1rem;
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm-delete:hover[b-r6vev1ksy3] {
    background-color: #c82333;
}

.btn-confirm-delete:disabled[b-r6vev1ksy3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner */
.spinner-border-sm[b-r6vev1ksy3] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.me-1[b-r6vev1ksy3] {
    margin-right: 0.25rem;
}

/* Select Supplier Modal */
.supplier-select-modal[b-r6vev1ksy3] {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.supplier-select-modal .modal-header[b-r6vev1ksy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.supplier-select-modal .modal-header h3[b-r6vev1ksy3] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close-modal[b-r6vev1ksy3] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.btn-close-modal:hover[b-r6vev1ksy3] {
    color: #333;
}

.supplier-select-modal .modal-body[b-r6vev1ksy3] {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.no-suppliers-message[b-r6vev1ksy3] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
}

.supplier-list[b-r6vev1ksy3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.supplier-list-item[b-r6vev1ksy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.supplier-list-item:last-child[b-r6vev1ksy3] {
    border-bottom: none;
}

.supplier-info[b-r6vev1ksy3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.supplier-title[b-r6vev1ksy3] {
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
}

.supplier-vendor-number[b-r6vev1ksy3] {
    font-size: 0.875rem;
    color: #6c757d;
}

.btn-select-supplier[b-r6vev1ksy3] {
    padding: 0.375rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-select-supplier:hover[b-r6vev1ksy3] {
    background-color: #ff6b3c;
    color: #fff;
}

.btn-select-supplier:disabled[b-r6vev1ksy3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .supplier-returns-page[b-r6vev1ksy3] {
        padding: 1rem;
    }

    .page-header[b-r6vev1ksy3] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .tab-navigation[b-r6vev1ksy3] {
        flex-direction: column;
        width: 100%;
    }

    .tab-btn[b-r6vev1ksy3] {
        border-radius: 4px !important;
        border: 1px solid #0b5f8f !important;
    }

    .returns-table[b-r6vev1ksy3] {
        font-size: 0.8rem;
    }

    .returns-table thead th[b-r6vev1ksy3],
    .returns-table tbody td[b-r6vev1ksy3] {
        padding: 0.5rem;
    }

    .supplier-select-modal[b-r6vev1ksy3] {
        width: 95%;
        max-height: 90vh;
    }
}
/* /Components/Pages/SupplierReturnTicket.razor.rz.scp.css */
/* Supplier Return Ticket Page */
.ticket-page[b-fqco2oaf24] {
    padding: 1.5rem 2rem;
    background: #fff;
    min-height: 100%;
}

/* Back Bar */
.back-bar[b-fqco2oaf24] {
    margin-bottom: 1rem;
}

.back-link[b-fqco2oaf24] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0b5f8f;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.back-link:hover[b-fqco2oaf24] {
    color: #0d6efd;
    text-decoration: underline;
}

.back-link svg[b-fqco2oaf24] {
    stroke: currentColor;
}

/* Loading Container */
.loading-container[b-fqco2oaf24] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: #6c757d;
}

/* Alert */
.alert[b-fqco2oaf24] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-danger[b-fqco2oaf24] {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}

/* Ticket Header Container */
.ticket-header-container[b-fqco2oaf24] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

/* Ticket Header */
.ticket-header[b-fqco2oaf24] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.supplier-title[b-fqco2oaf24] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0b5f8f;
    margin: 0;
}

.status-badge[b-fqco2oaf24] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: capitalize;
}

.status-new[b-fqco2oaf24] {
    background-color: #0d6efd;
    color: #fff;
}

.status-notified[b-fqco2oaf24] {
    background-color: #0b5f8f;
    color: #fff;
}

.status-active[b-fqco2oaf24] {
    background-color: #ff6b3c;
    color: #fff;
}

.status-complete[b-fqco2oaf24] {
    background-color: #198754;
    color: #fff;
}

.status-default[b-fqco2oaf24] {
    background-color: #6c757d;
    color: #fff;
}

/* Ticket Info Row */
.ticket-info-row[b-fqco2oaf24] {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.info-item[b-fqco2oaf24] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-fqco2oaf24] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-fqco2oaf24] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

/* Components Section */
.components-section[b-fqco2oaf24] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.section-title[b-fqco2oaf24] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #163a49;
    margin: 0 0 1rem 0;
}

/* Components Toolbar */
.components-toolbar[b-fqco2oaf24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.toolbar-left[b-fqco2oaf24],
.toolbar-right[b-fqco2oaf24] {
    display: flex;
    gap: 0.75rem;
}

.btn-export[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export:hover:not(:disabled)[b-fqco2oaf24] {
    background-color: #ff6b3c;
    color: #fff;
}

.btn-export:disabled[b-fqco2oaf24] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-add-component[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-component:hover[b-fqco2oaf24] {
    background-color: #ff6b3c;
    color: #fff;
}

/* Pagination Row */
.pagination-row[b-fqco2oaf24] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pagination-controls[b-fqco2oaf24] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-fqco2oaf24] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #6c757d;
}

.pagination-btn:hover:not(:disabled)[b-fqco2oaf24] {
    color: #0d6efd;
}

.pagination-btn:disabled[b-fqco2oaf24] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-fqco2oaf24] {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Edit Return Button */
.btn-edit-return[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-return:hover[b-fqco2oaf24] {
    background-color: #fff5f2;
}

/* Components Table */
.components-table[b-fqco2oaf24] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.875rem;
}

.components-table thead th[b-fqco2oaf24] {
    font-weight: 500;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
}

.components-table tbody tr[b-fqco2oaf24] {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.components-table tbody tr:hover[b-fqco2oaf24] {
    background-color: #e7f1ff;
}

.components-table tbody tr.selected[b-fqco2oaf24] {
    background-color: #d0e3ff;
}

.components-table tbody td[b-fqco2oaf24] {
    padding: 0.75rem 1rem;
    color: #212529;
}

.components-table .component-name[b-fqco2oaf24] {
    color: #0d6efd;
    font-weight: 500;
}

.components-table .no-data[b-fqco2oaf24] {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

/* Bottom Actions */
.bottom-actions[b-fqco2oaf24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.left-actions[b-fqco2oaf24],
.right-actions[b-fqco2oaf24] {
    display: flex;
    gap: 0.75rem;
}

.btn-notify[b-fqco2oaf24],
.btn-remove[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-notify:hover:not(:disabled)[b-fqco2oaf24],
.btn-remove:hover:not(:disabled)[b-fqco2oaf24] {
    background-color: #ff6b3c;
    color: #fff;
}

.btn-notify:disabled[b-fqco2oaf24],
.btn-remove:disabled[b-fqco2oaf24] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-finished[b-fqco2oaf24] {
    padding: 0.625rem 1.5rem;
    background-color: #198754;
    border: none;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-finished:hover:not(:disabled)[b-fqco2oaf24] {
    background-color: #157347;
}

.btn-finished:disabled[b-fqco2oaf24] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal Styles */
.modal-backdrop[b-fqco2oaf24] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* Add Component Modal */
.add-component-modal[b-fqco2oaf24] {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-component-modal .modal-header[b-fqco2oaf24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.add-component-modal .modal-header h3[b-fqco2oaf24] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close-modal[b-fqco2oaf24] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.btn-close-modal:hover[b-fqco2oaf24] {
    color: #333;
}

.add-component-modal .modal-body[b-fqco2oaf24] {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.btn-add-components-action[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-add-components-action:hover:not(:disabled)[b-fqco2oaf24] {
    background-color: #ff6b3c;
    color: #fff;
}

.btn-add-components-action:disabled[b-fqco2oaf24] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-pagination-row[b-fqco2oaf24] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.no-items-message[b-fqco2oaf24] {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
}

/* Available Items Table */
.available-items-table[b-fqco2oaf24] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.available-items-table thead th[b-fqco2oaf24] {
    font-weight: 500;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.available-items-table tbody tr[b-fqco2oaf24] {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.available-items-table tbody tr:hover[b-fqco2oaf24] {
    background-color: #f8f9fa;
}

.available-items-table tbody tr.selected[b-fqco2oaf24] {
    background-color: #e7f1ff;
}

.available-items-table tbody td[b-fqco2oaf24] {
    padding: 0.75rem 1rem;
    color: #212529;
}

.available-items-table .checkbox-col[b-fqco2oaf24] {
    width: 40px;
    text-align: center;
}

.available-items-table .component-name[b-fqco2oaf24] {
    color: #0d6efd;
    font-weight: 500;
}

/* Confirmation Modal */
.confirmation-modal[b-fqco2oaf24] {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.confirmation-modal h3[b-fqco2oaf24] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: #163a49;
}

.confirmation-modal p[b-fqco2oaf24] {
    margin: 0 0 0.5rem 0;
    color: #495057;
}

.confirmation-modal .text-muted[b-fqco2oaf24] {
    color: #6c757d;
    font-size: 0.875rem;
}

.modal-buttons[b-fqco2oaf24] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-cancel[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #6c757d;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-fqco2oaf24] {
    background-color: #f8f9fa;
}

.btn-confirm-delete[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-confirm-delete:hover:not(:disabled)[b-fqco2oaf24] {
    background-color: #c82333;
}

.btn-confirm-delete:disabled[b-fqco2oaf24] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner */
.spinner-border-sm[b-fqco2oaf24] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.me-1[b-fqco2oaf24] {
    margin-right: 0.25rem;
}

/* Options Dropdown */
.options-dropdown-container[b-fqco2oaf24] {
    position: relative;
}

.btn-options[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-options:hover[b-fqco2oaf24] {
    background-color: #fff5f2;
}

.options-dropdown-menu[b-fqco2oaf24] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.options-dropdown-menu .dropdown-item[b-fqco2oaf24] {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.875rem;
    color: #0b5f8f;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.options-dropdown-menu .dropdown-item:hover[b-fqco2oaf24] {
    background-color: #f8f9fa;
}

.options-dropdown-menu .dropdown-item:not(:last-child)[b-fqco2oaf24] {
    border-bottom: 1px solid #f0f0f0;
}

/* Responsive */
@media (max-width: 768px) {
    .ticket-page[b-fqco2oaf24] {
        padding: 1rem;
    }

    .ticket-header[b-fqco2oaf24] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ticket-info-row[b-fqco2oaf24] {
        flex-direction: column;
        gap: 1rem;
    }

    .components-toolbar[b-fqco2oaf24] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .bottom-actions[b-fqco2oaf24] {
        flex-direction: column;
        gap: 1rem;
    }

    .left-actions[b-fqco2oaf24],
    .right-actions[b-fqco2oaf24] {
        width: 100%;
    }

    .add-component-modal[b-fqco2oaf24] {
        width: 95%;
        max-height: 90vh;
    }
}

/* Warning Modal (Edit Return) */
.warning-modal[b-fqco2oaf24] {
    background: #fff;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.warning-modal-header[b-fqco2oaf24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.warning-modal-header h3[b-fqco2oaf24] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #163a49;
}

.warning-modal-body[b-fqco2oaf24] {
    padding: 1.5rem;
}

.warning-modal-body p[b-fqco2oaf24] {
    margin: 0;
    color: #495057;
    line-height: 1.5;
}

.warning-modal-footer[b-fqco2oaf24] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.btn-proceed[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background-color: #ffc107;
    border: 1px solid #ffc107;
    color: #212529;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-proceed:hover:not(:disabled)[b-fqco2oaf24] {
    background-color: #e0a800;
    border-color: #e0a800;
}

.btn-proceed:disabled[b-fqco2oaf24] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel-warning[b-fqco2oaf24] {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-warning:hover[b-fqco2oaf24] {
    background-color: #fff5f2;
}
/* /Components/Pages/Suppliers.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-qt1f05uvi2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-qt1f05uvi2] {
    transform: translateY(1px);
}

.panel-header-row[b-qt1f05uvi2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-qt1f05uvi2] {
    flex: 1;
}

.panel-header-actions h2[b-qt1f05uvi2] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-qt1f05uvi2] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

.panel-header-buttons[b-qt1f05uvi2] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Options Button Container - positions dropdown relative to button */
.options-button-container[b-qt1f05uvi2] {
    position: relative;
    display: inline-block;
}

/* Options Dropdown */
.options-dropdown-backdrop[b-qt1f05uvi2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.options-dropdown[b-qt1f05uvi2] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 200px;
}

.dropdown-item[b-qt1f05uvi2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    color: #212529;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.dropdown-item:last-child[b-qt1f05uvi2] {
    border-bottom: none;
}

.dropdown-item:hover[b-qt1f05uvi2] {
    background: #f8f9fa;
}

.dropdown-item svg[b-qt1f05uvi2] {
    flex-shrink: 0;
}

/* Modal */
.modal-backdrop[b-qt1f05uvi2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-dialog[b-qt1f05uvi2] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.modal-header[b-qt1f05uvi2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-qt1f05uvi2] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #163a49;
}

.btn-close[b-qt1f05uvi2] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
    padding: 0;
}

.btn-close:hover[b-qt1f05uvi2] {
    color: #000;
}

.modal-body[b-qt1f05uvi2] {
    padding: 1.5rem;
}

/* Modal body form controls */
.modal-body .mb-3[b-qt1f05uvi2] {
    position: relative;
}

.modal-body .form-label[b-qt1f05uvi2] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.modal-body .form-control[b-qt1f05uvi2] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Ensure InputFile is clickable */
.modal-body input[type="file"].form-control[b-qt1f05uvi2] {
    position: relative;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto !important;
}

.modal-footer[b-qt1f05uvi2] {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Save button - blue solid */
.modal-footer .btn-save[b-qt1f05uvi2] {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-save:hover[b-qt1f05uvi2] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.modal-footer .btn-save:disabled[b-qt1f05uvi2] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Cancel button - green outlined */
.modal-footer .btn-cancel[b-qt1f05uvi2] {
    background-color: white;
    border: 1px solid #28a745;
    color: #28a745;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.modal-footer .btn-cancel:hover[b-qt1f05uvi2] {
    background-color: #28a745;
    color: white;
}

.json-preview[b-qt1f05uvi2] {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    font-size: 0.75rem;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Suppliers container */
.suppliers-container[b-qt1f05uvi2] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-qt1f05uvi2] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-qt1f05uvi2] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-qt1f05uvi2] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-qt1f05uvi2] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-qt1f05uvi2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-qt1f05uvi2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-qt1f05uvi2] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-qt1f05uvi2] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-qt1f05uvi2] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-qt1f05uvi2] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.suppliers-toolbar[b-qt1f05uvi2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-qt1f05uvi2] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-qt1f05uvi2] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-qt1f05uvi2] {
    color: #0d6efd;
    border-color: #0d6efd;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-qt1f05uvi2],
.toolbar-buttons .btn-outline-primary.active[b-qt1f05uvi2] {
    color: white;
    background-color: #0d6efd;
}

.toolbar-buttons .btn-outline-warning[b-qt1f05uvi2] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-warning:hover[b-qt1f05uvi2] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-qt1f05uvi2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-qt1f05uvi2] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-qt1f05uvi2] {
    opacity: 0.5;
}

.pagination-info[b-qt1f05uvi2] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.suppliers-table[b-qt1f05uvi2] {
    width: 100%;
    border-collapse: collapse;
}

.suppliers-table thead th[b-qt1f05uvi2] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.suppliers-table tbody tr[b-qt1f05uvi2] {
    border-bottom: 1px solid #f0f0f0;
}

.suppliers-table tbody tr:hover[b-qt1f05uvi2] {
    background-color: #f8f9fa;
}

.suppliers-table tbody tr.table-active[b-qt1f05uvi2] {
    background-color: #e7f1ff;
}

.suppliers-table tbody td[b-qt1f05uvi2] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.suppliers-table tbody td a[b-qt1f05uvi2] {
    color: #0d6efd;
    text-decoration: none;
}

.suppliers-table tbody td a:hover[b-qt1f05uvi2] {
    text-decoration: underline;
}

/* View Detail button */
.btn-view-detail[b-qt1f05uvi2] {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-view-detail:hover[b-qt1f05uvi2] {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Supplier Detail Modal */
.supplier-detail-modal[b-qt1f05uvi2] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 580px;
    max-height: 85vh;
    overflow-y: auto;
    animation: sdModalIn-b-qt1f05uvi2 0.2s ease-out;
}

@keyframes sdModalIn-b-qt1f05uvi2 {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.sd-modal-header[b-qt1f05uvi2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 12px 12px 0 0;
}

.sd-modal-header-content[b-qt1f05uvi2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sd-modal-header h5[b-qt1f05uvi2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sd-modal-close[b-qt1f05uvi2] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
}

.sd-modal-close:hover[b-qt1f05uvi2] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.sd-modal-body[b-qt1f05uvi2] {
    padding: 1.25rem;
}

.sd-title[b-qt1f05uvi2] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #163a49;
    margin-bottom: 1rem;
}

.sd-section-title[b-qt1f05uvi2] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #163a49;
    margin: 1.25rem 0 0.5rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #e2e8f0;
}

.sd-grid[b-qt1f05uvi2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.sd-field[b-qt1f05uvi2] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sd-label[b-qt1f05uvi2] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94a3b8;
    font-weight: 600;
}

.sd-value[b-qt1f05uvi2] {
    font-size: 0.875rem;
    color: #1e293b;
}

.sd-mono[b-qt1f05uvi2] {
    font-family: monospace;
    font-weight: 600;
    color: #475569;
}

.sd-value a[b-qt1f05uvi2] {
    color: #3b82f6;
    text-decoration: none;
}

.sd-value a:hover[b-qt1f05uvi2] {
    text-decoration: underline;
}

.sd-address[b-qt1f05uvi2] {
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.6;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.4rem;
}
/* /Components/Pages/TaskMapping.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-tny5kx0u0h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-tny5kx0u0h] {
    transform: translateY(1px);
}

.panel-header-row[b-tny5kx0u0h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-tny5kx0u0h] {
    flex: 1;
}

.panel-header-actions h2[b-tny5kx0u0h] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.muted[b-tny5kx0u0h] {
    color: #7c8b95;
    margin-top: 0.5rem;
}

/* Task Mapping container */
.task-mapping-container[b-tny5kx0u0h] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Search Panel - Animated */
.search-panel[b-tny5kx0u0h] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin-bottom: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

.search-panel.open[b-tny5kx0u0h] {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem;
}

.search-panel-content[b-tny5kx0u0h] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.search-fields[b-tny5kx0u0h] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.search-field[b-tny5kx0u0h] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.search-label[b-tny5kx0u0h] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.search-field .form-control[b-tny5kx0u0h] {
    width: 150px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.search-field .form-control:focus[b-tny5kx0u0h] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-actions[b-tny5kx0u0h] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-actions .btn[b-tny5kx0u0h] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

/* Toolbar */
.task-mapping-toolbar[b-tny5kx0u0h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.toolbar-buttons[b-tny5kx0u0h] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-tny5kx0u0h] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-tny5kx0u0h] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-tny5kx0u0h],
.toolbar-buttons .btn-outline-primary.active[b-tny5kx0u0h] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-pagination[b-tny5kx0u0h] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-tny5kx0u0h] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-tny5kx0u0h] {
    opacity: 0.5;
}

.pagination-info[b-tny5kx0u0h] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.task-mapping-table[b-tny5kx0u0h] {
    width: 100%;
    border-collapse: collapse;
}

.task-mapping-table thead th[b-tny5kx0u0h] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.task-mapping-table thead th.sortable[b-tny5kx0u0h] {
    cursor: pointer;
    user-select: none;
}

.task-mapping-table thead th.sortable:hover[b-tny5kx0u0h] {
    background-color: #f8f9fa;
}

.sort-indicator[b-tny5kx0u0h] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
}

.task-mapping-table tbody tr[b-tny5kx0u0h] {
    border-bottom: 1px solid #f0f0f0;
}

.task-mapping-table tbody tr:hover[b-tny5kx0u0h] {
    background-color: #f8f9fa;
}

.task-mapping-table tbody tr.table-active[b-tny5kx0u0h] {
    background-color: #e7f1ff;
}

.task-mapping-table tbody td[b-tny5kx0u0h] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.task-mapping-table tbody td a[b-tny5kx0u0h] {
    color: #0d6efd;
    text-decoration: none;
}

.task-mapping-table tbody td a:hover[b-tny5kx0u0h] {
    text-decoration: underline;
}
/* /Components/Pages/UnmatchedVendors.razor.rz.scp.css */
.uv-page[b-wgkgng2wa6] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.back-link[b-wgkgng2wa6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #0b5f8f;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0;
}

.back-link:hover[b-wgkgng2wa6] {
    color: #094a6f;
    text-decoration: underline;
}

.uv-page h2[b-wgkgng2wa6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #163a49;
    margin: 0.5rem 0 0.25rem;
}

.uv-intro[b-wgkgng2wa6] {
    color: #6b7280;
    max-width: 820px;
}

.uv-toolbar[b-wgkgng2wa6] {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uv-toolbar input[b-wgkgng2wa6] {
    max-width: 320px;
}

.uv-checkbox[b-wgkgng2wa6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #374151;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.uv-count[b-wgkgng2wa6] {
    color: #6b7280;
}

.uv-table[b-wgkgng2wa6] {
    width: 100%;
    border-collapse: collapse;
}

.uv-table th[b-wgkgng2wa6] {
    padding: 8px;
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
    font-size: 0.85rem;
    color: #374151;
}

.uv-table td[b-wgkgng2wa6] {
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.uv-table tbody tr:hover[b-wgkgng2wa6] {
    background: #f9fafb;
}

.uv-num[b-wgkgng2wa6] {
    text-align: right;
    white-space: nowrap;
}

.uv-action[b-wgkgng2wa6] {
    width: 90px;
}
/* /Components/Pages/UpdatePublicNcr.razor.rz.scp.css */
/* Public NCR Update Page — inherits structure from CreatePublicNcr */
.public-ncr-page[b-7z02d59miy] {
    max-width: 800px;
    margin: 0 auto;
}

.public-ncr-title[b-7z02d59miy] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 1.5rem 0;
}

.public-ncr-card[b-7z02d59miy] {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #e8eaf0;
}

.form-group[b-7z02d59miy] {
    margin-bottom: 1.25rem;
}

.form-label[b-7z02d59miy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.4rem;
}

.required-star[b-7z02d59miy] {
    color: #e74c3c;
    font-weight: 700;
}

.info-icon[b-7z02d59miy] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    cursor: help;
}

.form-control[b-7z02d59miy] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-control:focus[b-7z02d59miy] {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
}

.form-control[b-7z02d59miy]::placeholder {
    color: #aaa;
}

.form-textarea[b-7z02d59miy] {
    resize: vertical;
    min-height: 100px;
}

.btn-add-product[b-7z02d59miy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #ff6b3c;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.25rem;
}

.btn-add-product:hover[b-7z02d59miy] {
    color: #e55a2b;
}

.add-icon[b-7z02d59miy] {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Evidence Dropzone */
.evidence-dropzone[b-7z02d59miy] {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}

.evidence-dropzone.drag-over[b-7z02d59miy] {
    border-color: #ff6b3c;
    background-color: #fff8f5;
}

.dropzone-text[b-7z02d59miy] {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.dropzone-link[b-7z02d59miy] {
    color: #003366;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.dropzone-link:hover[b-7z02d59miy] {
    color: #ff6b3c;
}

.file-input[b-7z02d59miy], .evidence-dropzone[b-7z02d59miy]  input[type="file"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

/* Upload Toast */
.upload-progress[b-7z02d59miy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: #666;
}

.upload-toast[b-7z02d59miy] {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.toast-success[b-7z02d59miy] {
    background: #eafaf1;
    color: #27ae60;
    border: 1px solid #27ae60;
}

.toast-error[b-7z02d59miy] {
    background: #fef0ef;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

/* Evidence File List */
.evidence-files[b-7z02d59miy] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evidence-file-row[b-7z02d59miy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.evidence-file-thumb[b-7z02d59miy] {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
}

.evidence-file-thumb img[b-7z02d59miy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evidence-file-icon[b-7z02d59miy] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-file-info[b-7z02d59miy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.evidence-file-name[b-7z02d59miy] {
    font-size: 0.85rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evidence-file-meta[b-7z02d59miy] {
    font-size: 0.75rem;
    color: #888;
}

.btn-remove-file[b-7z02d59miy] {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.btn-remove-file:hover[b-7z02d59miy] {
    color: #e74c3c;
    background: #fee;
}

/* Validation */
.validation-errors[b-7z02d59miy] {
    margin-top: 1rem;
}

.validation-error[b-7z02d59miy] {
    color: #e74c3c;
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

/* Footer */
.form-footer[b-7z02d59miy] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.btn-submit[b-7z02d59miy] {
    background-color: #e65100;
    color: white;
    border: none;
    padding: 0.75rem 2.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-submit:hover:not(:disabled)[b-7z02d59miy] {
    background-color: #bf4500;
}

.btn-submit:disabled[b-7z02d59miy] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Modal */
.modal-backdrop[b-7z02d59miy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-dialog[b-7z02d59miy] {
    background: white;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-7z02d59miy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}

.modal-header h4[b-7z02d59miy] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.btn-close[b-7z02d59miy] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover[b-7z02d59miy] {
    color: #333;
}

.modal-body[b-7z02d59miy] {
    padding: 1.25rem;
}

.modal-body p[b-7z02d59miy] {
    margin: 0 0 0.5rem;
    color: #333;
    font-size: 0.95rem;
}

.confirm-note[b-7z02d59miy] {
    color: #666 !important;
    font-size: 0.85rem !important;
    font-style: italic;
}

.modal-footer[b-7z02d59miy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #eee;
}

.btn-confirm[b-7z02d59miy] {
    background-color: #e65100;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.btn-confirm:hover[b-7z02d59miy] {
    background-color: #bf4500;
}

.btn-cancel-outline[b-7z02d59miy] {
    background: white;
    color: #e65100;
    border: 2px solid #e65100;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel-outline:hover[b-7z02d59miy] {
    background: #fff5f0;
}

/* Success State */
.submit-success[b-7z02d59miy] {
    text-align: center;
    padding: 2rem 1rem;
}

.success-icon[b-7z02d59miy] {
    margin-bottom: 1rem;
}

.submit-success h2[b-7z02d59miy] {
    color: #27ae60;
    font-size: 1.4rem;
    margin: 0 0 0.75rem;
}

.submit-success p[b-7z02d59miy] {
    color: #555;
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

/* Info Banner */
.info-banner[b-7z02d59miy] {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #1e40af;
    line-height: 1.5;
}

/* Existing Evidence (read-only) */
.existing-evidence-section[b-7z02d59miy] {
    margin-bottom: 1.25rem;
}

.existing-evidence-label[b-7z02d59miy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.existing-file-row[b-7z02d59miy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: #f1f5f9;
    border-radius: 4px;
    margin-bottom: 0.35rem;
    opacity: 0.85;
}

.existing-file-name[b-7z02d59miy] {
    font-size: 0.82rem;
    color: #475569;
}

/* reCAPTCHA notice */
.recaptcha-notice[b-7z02d59miy] {
    text-align: center;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.recaptcha-notice a[b-7z02d59miy] {
    color: #6c757d;
    text-decoration: underline;
}

/* Status card (for wrong-status / not found states) */
.status-card[b-7z02d59miy] {
    background: white;
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.status-card h2[b-7z02d59miy] {
    color: #64748b;
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}

.status-card p[b-7z02d59miy] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 600px) {
    .public-ncr-card[b-7z02d59miy] {
        padding: 1.25rem;
    }

    .public-ncr-title[b-7z02d59miy] {
        font-size: 1.4rem;
    }
}
/* /Components/Pages/UserManagement.razor.rz.scp.css */
.user-management-container[b-ltg7ixqol1] {
    padding: 1.5rem;
}

/* Header */
.page-header[b-ltg7ixqol1] {
    margin-bottom: 1.5rem;
}

.page-header h2[b-ltg7ixqol1] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #163a49;
    margin: 0 0 0.5rem 0;
}

.page-description[b-ltg7ixqol1] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}

/* Search Filters */
.search-filters[b-ltg7ixqol1] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #dee2e6;
}

.filter-row[b-ltg7ixqol1] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-field[b-ltg7ixqol1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-field label[b-ltg7ixqol1] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
}

.filter-field .form-control[b-ltg7ixqol1] {
    width: 140px;
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.filter-field .form-control:focus[b-ltg7ixqol1] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

.filter-actions[b-ltg7ixqol1] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.btn-search[b-ltg7ixqol1] {
    background: white;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-search:hover[b-ltg7ixqol1] {
    background: #e7f1ff;
}

.btn-reset[b-ltg7ixqol1] {
    background: white;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-reset:hover[b-ltg7ixqol1] {
    background: #e7f1ff;
}

/* Toolbar */
.toolbar[b-ltg7ixqol1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 0;
}

.toolbar-buttons[b-ltg7ixqol1] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-buttons .btn[b-ltg7ixqol1] {
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-new-user[b-ltg7ixqol1] {
    background-color: #0d9488;
    border-color: #0d9488;
    color: white;
}

.btn-new-user:hover[b-ltg7ixqol1] {
    background-color: #0f766e;
    border-color: #0f766e;
}

.btn-outline-action[b-ltg7ixqol1] {
    background: white;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
}

.btn-outline-action:hover[b-ltg7ixqol1] {
    background: #fff5f2;
}

.btn-outline-action:disabled[b-ltg7ixqol1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-delete[b-ltg7ixqol1] {
    background-color: #8b3a3a;
    border-color: #8b3a3a;
    color: white;
}

.btn-delete:hover[b-ltg7ixqol1] {
    background-color: #6d2d2d;
    border-color: #6d2d2d;
}

.btn-delete:disabled[b-ltg7ixqol1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-reset-email[b-ltg7ixqol1] {
    background-color: #0d9488;
    border: 1px solid #0d9488;
    color: white;
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
}

.btn-reset-email:hover:not(:disabled)[b-ltg7ixqol1] {
    background-color: #0f766e;
    border-color: #0f766e;
}

.btn-reset-email:disabled[b-ltg7ixqol1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading Indicator */
.loading-indicator[b-ltg7ixqol1] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Status Message */
.status-message[b-ltg7ixqol1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.status-message.success[b-ltg7ixqol1] {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-message.error[b-ltg7ixqol1] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.btn-close-status[b-ltg7ixqol1] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.btn-close-status:hover[b-ltg7ixqol1] {
    opacity: 1;
}

/* Import Errors */
.import-errors[b-ltg7ixqol1] {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.import-errors ul[b-ltg7ixqol1] {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
}

.import-errors li[b-ltg7ixqol1] {
    margin-bottom: 0.25rem;
}

.error-text[b-ltg7ixqol1] {
    color: #991b1b;
    font-size: 0.8rem;
}

/* Pagination */
.toolbar-pagination[b-ltg7ixqol1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-ltg7ixqol1] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
    background: none;
    border: none;
}

.toolbar-pagination .btn:hover:not(:disabled)[b-ltg7ixqol1] {
    color: #212529;
}

.toolbar-pagination .btn:disabled[b-ltg7ixqol1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-ltg7ixqol1] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.table-wrapper[b-ltg7ixqol1] {
    overflow-x: auto;
}

.users-table[b-ltg7ixqol1] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.users-table thead th[b-ltg7ixqol1] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.users-table thead th.sortable[b-ltg7ixqol1] {
    cursor: pointer;
    user-select: none;
}

.users-table thead th.sortable:hover[b-ltg7ixqol1] {
    background-color: #f8f9fa;
}

.sort-indicator[b-ltg7ixqol1] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
}

.users-table tbody tr[b-ltg7ixqol1] {
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.users-table tbody tr:hover[b-ltg7ixqol1] {
    background-color: #f8f9fa;
}

.users-table tbody tr.selected[b-ltg7ixqol1] {
    background-color: #e7f1ff;
}

.users-table tbody td[b-ltg7ixqol1] {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #212529;
    vertical-align: middle;
}

.users-table th.checkbox-col[b-ltg7ixqol1],
.users-table td.checkbox-col[b-ltg7ixqol1] {
    width: 1%;
    padding-right: 0.5rem;
    text-align: center;
    cursor: default;
}

.users-table .checkbox-col input[type="checkbox"][b-ltg7ixqol1] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.bulk-delete-list[b-ltg7ixqol1] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    background: #fafafa;
}

.bulk-delete-list ul[b-ltg7ixqol1] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
}

.users-table tbody td.link-cell[b-ltg7ixqol1] {
    color: #0d6efd;
}

/* Modal Styles */
.modal-backdrop[b-ltg7ixqol1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2rem;
    z-index: 1050;
    overflow-y: auto;
}

.modal-dialog[b-ltg7ixqol1] {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 2rem;
}

.modal-header[b-ltg7ixqol1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h4[b-ltg7ixqol1] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.modal-header .btn-close[b-ltg7ixqol1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-header .btn-close:hover[b-ltg7ixqol1] {
    color: #212529;
}

.modal-body[b-ltg7ixqol1] {
    padding: 1.5rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.modal-footer[b-ltg7ixqol1] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Form Styles in Modal */
.form-group[b-ltg7ixqol1] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-ltg7ixqol1] {
    margin-bottom: 0;
}

.form-group .form-label[b-ltg7ixqol1] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.form-group .form-control[b-ltg7ixqol1] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.form-group .form-control:focus[b-ltg7ixqol1] {
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

.form-group .form-control.password-field[b-ltg7ixqol1] {
    background-color: #163a49;
    color: white;
    border-color: #163a49;
}

.form-group .form-control.password-field[b-ltg7ixqol1]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Dropdown Select */
.dropdown-select[b-ltg7ixqol1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.dropdown-select:hover[b-ltg7ixqol1] {
    border-color: #adb5bd;
}

.dropdown-value[b-ltg7ixqol1] {
    color: #212529;
}

.dropdown-arrow[b-ltg7ixqol1] {
    color: #6c757d;
}

.dropdown-menu-custom[b-ltg7ixqol1] {
    position: absolute;
    width: calc(100% - 3rem);
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    margin-top: 0.25rem;
}

.dropdown-item-custom[b-ltg7ixqol1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #212529;
    cursor: pointer;
}

.dropdown-item-custom:hover[b-ltg7ixqol1] {
    background-color: #e7f1ff;
}

.dropdown-item-custom.selected[b-ltg7ixqol1] {
    background-color: #0d6efd;
    color: white;
}

.dropdown-item-custom input[type="checkbox"][b-ltg7ixqol1] {
    width: 16px;
    height: 16px;
    accent-color: #0d6efd;
}

/* Modal Buttons */
.modal-footer .btn-save[b-ltg7ixqol1] {
    background-color: #0d9488;
    border-color: #0d9488;
    color: white;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
}

.modal-footer .btn-save:hover[b-ltg7ixqol1] {
    background-color: #0f766e;
    border-color: #0f766e;
}

.modal-footer .btn-cancel[b-ltg7ixqol1] {
    background-color: white;
    border: 1px solid #ff6b3c;
    color: #ff6b3c;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
}

.modal-footer .btn-cancel:hover[b-ltg7ixqol1] {
    background-color: #fff5f2;
}

/* Responsive */
@media (max-width: 1200px) {
    .filter-row[b-ltg7ixqol1] {
        flex-wrap: wrap;
    }

    .filter-actions[b-ltg7ixqol1] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .user-management-container[b-ltg7ixqol1] {
        padding: 1rem;
    }

    .filter-field .form-control[b-ltg7ixqol1] {
        width: 100%;
    }

    .filter-field[b-ltg7ixqol1] {
        flex: 1;
        min-width: 120px;
    }

    .toolbar[b-ltg7ixqol1] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .toolbar-pagination[b-ltg7ixqol1] {
        align-self: flex-end;
    }

    .modal-dialog[b-ltg7ixqol1] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* Yes/No radio pattern (Active / Blocked in device mode) */
.radio-group[b-ltg7ixqol1] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.radio-option[b-ltg7ixqol1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #212529;
    user-select: none;
}

.radio-option.disabled[b-ltg7ixqol1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-circle[b-ltg7ixqol1] {
    width: 20px;
    height: 20px;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
}

.radio-circle.checked[b-ltg7ixqol1] {
    background: #0d6efd;
}

.radio-circle.checked[b-ltg7ixqol1]::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* /Components/Pages/UserThemeModal.razor.rz.scp.css */
.user-theme-overlay[b-x3f12k1jne] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1050;
    animation: utFadeIn-b-x3f12k1jne 0.15s ease-out;
}

.user-theme-modal[b-x3f12k1jne] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 95vw);
    max-height: 90vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: utModalIn-b-x3f12k1jne 0.2s ease-out;
}

@keyframes utFadeIn-b-x3f12k1jne {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes utModalIn-b-x3f12k1jne {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.user-theme-header[b-x3f12k1jne] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: #fff;
}

.user-theme-header h3[b-x3f12k1jne] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.user-theme-close[b-x3f12k1jne] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
}

.user-theme-close:hover[b-x3f12k1jne] {
    color: #fff;
}

.user-theme-body[b-x3f12k1jne] {
    padding: 1.25rem;
    overflow-y: auto;
}

.user-theme-intro[b-x3f12k1jne] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.user-theme-loading[b-x3f12k1jne] {
    text-align: center;
    color: #94a3b8;
    padding: 2rem;
}

.user-theme-field[b-x3f12k1jne] {
    margin-bottom: 1.25rem;
}

.user-theme-field > label[b-x3f12k1jne] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #475569;
    margin-bottom: 0.5rem;
}

/* Mode toggle */
.theme-mode-toggle[b-x3f12k1jne] {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.mode-option[b-x3f12k1jne] {
    padding: 0.5rem 1.25rem;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
    transition: background 0.15s, color 0.15s;
}

.mode-option.active[b-x3f12k1jne] {
    background: #163a49;
    color: #fff;
}

/* Colour swatches */
.colour-swatches[b-x3f12k1jne] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.colour-swatch[b-x3f12k1jne] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, border-color 0.15s;
}

.colour-swatch:hover[b-x3f12k1jne] {
    transform: scale(1.08);
}

.colour-swatch.selected[b-x3f12k1jne] {
    border-color: #1e293b;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e293b;
}

/* Card template grid */
.card-template-grid[b-x3f12k1jne],
.icon-style-grid[b-x3f12k1jne],
.nav-style-grid[b-x3f12k1jne],
.bg-swatch-grid[b-x3f12k1jne] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.card-template-option[b-x3f12k1jne],
.icon-style-option[b-x3f12k1jne] {
    padding: 0.65rem 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #475569;
    transition: all 0.15s;
}

.card-template-option:hover[b-x3f12k1jne],
.icon-style-option:hover[b-x3f12k1jne] {
    border-color: #94a3b8;
}

.card-template-option.selected[b-x3f12k1jne],
.icon-style-option.selected[b-x3f12k1jne] {
    border-color: #163a49;
    background: #f0f9ff;
    color: #163a49;
    font-weight: 600;
}

/* Nav-style swatch */
.nav-style-swatch[b-x3f12k1jne],
.bg-swatch[b-x3f12k1jne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    color: #475569;
    transition: border-color 0.15s;
}

.nav-style-swatch:hover[b-x3f12k1jne],
.bg-swatch:hover[b-x3f12k1jne] {
    border-color: #94a3b8;
}

.nav-style-swatch.selected[b-x3f12k1jne],
.bg-swatch.selected[b-x3f12k1jne] {
    border-color: #163a49;
    font-weight: 600;
    color: #163a49;
}

.nav-style-colour[b-x3f12k1jne] {
    width: 48px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.bg-swatch-colour[b-x3f12k1jne] {
    width: 48px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* Footer */
.user-theme-footer[b-x3f12k1jne] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.user-theme-footer-right[b-x3f12k1jne] {
    display: flex;
    gap: 0.5rem;
}

.btn-reset[b-x3f12k1jne] {
    padding: 0.5rem 0.9rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
}

.btn-reset:hover:not(:disabled)[b-x3f12k1jne] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

.btn-reset:disabled[b-x3f12k1jne] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel-modal[b-x3f12k1jne] {
    padding: 0.5rem 1.1rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-cancel-modal:hover:not(:disabled)[b-x3f12k1jne] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

.btn-cancel-modal:disabled[b-x3f12k1jne] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-confirm-modal[b-x3f12k1jne] {
    padding: 0.5rem 1.25rem;
    background: #163a49;
    border: 1px solid #163a49;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-confirm-modal:hover:not(:disabled)[b-x3f12k1jne] {
    background: #1e4d5f;
    border-color: #1e4d5f;
}

.btn-confirm-modal:disabled[b-x3f12k1jne] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/ViewPricingData.razor.rz.scp.css */
/* Panel header styles */
.back-link[b-2grgowxviy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.back-link svg[b-2grgowxviy] {
    transform: translateY(1px);
}

.panel-header-row[b-2grgowxviy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.panel-header-actions[b-2grgowxviy] {
    flex: 1;
}

.panel-header-actions h2[b-2grgowxviy] {
    margin: 0;
    font-size: 2rem;
    color: #163a49;
}

.panel-header-buttons[b-2grgowxviy] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.upload-btn[b-2grgowxviy] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.upload-btn svg[b-2grgowxviy] {
    flex-shrink: 0;
}

/* Pricing container */
.pricing-container[b-2grgowxviy] {
    padding: 1.5rem;
    background: #f8f9fa;
    margin: 0 1.5rem;
    border-radius: 4px;
}

/* Loading indicator */
.loading-indicator[b-2grgowxviy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: #6c757d;
}

/* Pricing Table */
.pricing-table[b-2grgowxviy] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: fixed;
}

/* Header row with column titles */
.pricing-table thead tr.header-labels th[b-2grgowxviy] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem 0.5rem 1rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: none;
}

.column-header[b-2grgowxviy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.column-title[b-2grgowxviy] {
    flex: 1;
}

.sort-btn[b-2grgowxviy] {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: #0d6efd;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.sort-btn:hover[b-2grgowxviy],
.sort-btn.active[b-2grgowxviy] {
    opacity: 1;
}

/* Header row with filter inputs */
.pricing-table thead tr.header-filters th[b-2grgowxviy] {
    padding: 0.25rem 1rem 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
}

.filter-input-wrapper[b-2grgowxviy] {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    background: white;
}

.filter-input-wrapper.text-filter[b-2grgowxviy] {
    border-color: #ff6b3c;
}

.filter-input-wrapper.number-filter[b-2grgowxviy] {
    border-color: #ff6b3c;
}

.filter-icon[b-2grgowxviy] {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    min-width: 28px;
    text-align: center;
}

.text-filter .filter-icon[b-2grgowxviy] {
    background: #ff6b3c;
}

.number-filter .filter-icon[b-2grgowxviy] {
    background: #ff6b3c;
}

.filter-input[b-2grgowxviy] {
    flex: 1;
    border: none;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    outline: none;
    min-width: 0;
}

.filter-input:focus[b-2grgowxviy] {
    outline: none;
}

/* Table body */
.pricing-table tbody tr[b-2grgowxviy] {
    border-bottom: 1px solid #f0f0f0;
}

.pricing-table tbody tr:hover[b-2grgowxviy] {
    background-color: #f8f9fa;
}

.pricing-table tbody tr.table-active[b-2grgowxviy] {
    background-color: #e7f1ff;
}

.pricing-table tbody td[b-2grgowxviy] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.pricing-table tbody td a[b-2grgowxviy] {
    color: #0d6efd;
    text-decoration: none;
}

.pricing-table tbody td a:hover[b-2grgowxviy] {
    text-decoration: underline;
}

.price-cell[b-2grgowxviy] {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* Column widths - updated for 4 columns */
.pricing-table th:nth-child(1)[b-2grgowxviy],
.pricing-table td:nth-child(1)[b-2grgowxviy] {
    width: 15%;
}

.pricing-table th:nth-child(2)[b-2grgowxviy],
.pricing-table td:nth-child(2)[b-2grgowxviy] {
    width: 45%;
}

.pricing-table th:nth-child(3)[b-2grgowxviy],
.pricing-table td:nth-child(3)[b-2grgowxviy] {
    width: 20%;
}

.pricing-table th:nth-child(4)[b-2grgowxviy],
.pricing-table td:nth-child(4)[b-2grgowxviy] {
    width: 20%;
}

/* Pagination */
.pagination-container[b-2grgowxviy] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0 0 0;
}

.toolbar-pagination[b-2grgowxviy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-info[b-2grgowxviy] {
    padding: 0 1rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Modal styles */
.modal-backdrop[b-2grgowxviy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.modal[b-2grgowxviy] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog[b-2grgowxviy] {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: auto;
}

.modal-dialog-centered[b-2grgowxviy] {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

.modal-content[b-2grgowxviy] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    outline: 0;
}

.modal-header[b-2grgowxviy] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

.modal-title[b-2grgowxviy] {
    margin-bottom: 0;
    line-height: 1.5;
}

.btn-close[b-2grgowxviy] {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
    cursor: pointer;
}

.btn-close:hover[b-2grgowxviy] {
    opacity: 0.75;
}

.modal-body[b-2grgowxviy] {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
}

.modal-footer[b-2grgowxviy] {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.5rem - 1px);
    border-bottom-left-radius: calc(0.5rem - 1px);
    gap: 0.5rem;
    pointer-events: auto;
}

.modal-footer > *[b-2grgowxviy] {
    margin: 0;
}

.modal-footer .btn[b-2grgowxviy] {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

/* Progress styles */
.progress-info[b-2grgowxviy] {
    text-align: center;
}

.progress-info p[b-2grgowxviy] {
    margin-bottom: 1rem;
    color: #6c757d;
}

.progress[b-2grgowxviy] {
    height: 1.5rem;
    border-radius: 0.5rem;
    background-color: #e9ecef;
}

.progress-bar[b-2grgowxviy] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    transition: width 0.3s ease;
}

/* Import result styles */
.import-summary[b-2grgowxviy] {
    font-size: 0.9rem;
}

.import-stats[b-2grgowxviy] {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.stat-item[b-2grgowxviy] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label[b-2grgowxviy] {
    font-size: 0.8rem;
    color: #6c757d;
}

.stat-value[b-2grgowxviy] {
    font-size: 1.5rem;
    font-weight: 600;
}

.import-warnings[b-2grgowxviy],
.import-errors[b-2grgowxviy] {
    max-height: 200px;
    overflow-y: auto;
}

.warning-list[b-2grgowxviy],
.error-list[b-2grgowxviy] {
    font-size: 0.8rem;
    padding: 0.5rem;
    background: #fff3cd;
    border-radius: 4px;
}

.error-list[b-2grgowxviy] {
    background: #f8d7da;
}

.warning-item[b-2grgowxviy],
.error-item[b-2grgowxviy] {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.warning-item:last-child[b-2grgowxviy],
.error-item:last-child[b-2grgowxviy] {
    border-bottom: none;
}

.warning-more[b-2grgowxviy],
.error-more[b-2grgowxviy] {
    font-style: italic;
    color: #6c757d;
    padding-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-table[b-2grgowxviy] {
        font-size: 0.8rem;
    }

    .filter-input-wrapper[b-2grgowxviy] {
        min-width: 80px;
    }

    .panel-header-row[b-2grgowxviy] {
        flex-direction: column;
    }

    .panel-header-buttons[b-2grgowxviy] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
.welcome-page[b-ytdg4fzzeg] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1.5rem;
}

.welcome-card[b-ytdg4fzzeg] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 2.5rem 2rem;
    max-width: 540px;
    width: 100%;
    text-align: center;
}

.welcome-icon[b-ytdg4fzzeg] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(255, 107, 60, 0.1);
    color: #ff6b3c;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-title[b-ytdg4fzzeg] {
    margin: 0 0 0.5rem;
    color: #1e3a5f;
    font-weight: 600;
}

.welcome-subtitle[b-ytdg4fzzeg] {
    margin: 0 0 1rem;
    color: #334155;
    font-size: 1rem;
}

.welcome-hint[b-ytdg4fzzeg] {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* /Components/Pages/WorkflowStepEvidence.razor.rz.scp.css */
/* ========== Evidence Container ========== */
.evidence-container[b-shw6jc0uqq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef0f4;
}

/* ========== Header (label + Add link) ========== */
.evidence-header[b-shw6jc0uqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.evidence-title[b-shw6jc0uqq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
}

.evidence-add-link[b-shw6jc0uqq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    transition: color 0.15s ease;
    user-select: none;
}

.evidence-add-link:hover[b-shw6jc0uqq] {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========== Upload Section ========== */
.evidence-upload-section[b-shw6jc0uqq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: evidenceSlideIn-b-shw6jc0uqq 0.2s ease-out;
}

@keyframes evidenceSlideIn-b-shw6jc0uqq {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Dropzone ========== */
.evidence-dropzone[b-shw6jc0uqq] {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #fafbfc;
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
}

.evidence-dropzone:hover[b-shw6jc0uqq] {
    border-color: #2563eb;
    background: #eff6ff;
}

.evidence-dropzone.drag-over[b-shw6jc0uqq] {
    border-color: #2563eb;
    background: #dbeafe;
    border-style: solid;
    transform: scale(1.003);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.evidence-dropzone-inner[b-shw6jc0uqq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    gap: 0.35rem;
    pointer-events: none;
}

.evidence-upload-icon[b-shw6jc0uqq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eff6ff;
    border: 2px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    margin-bottom: 0.15rem;
    transition: all 0.25s ease;
}

.evidence-dropzone:hover .evidence-upload-icon[b-shw6jc0uqq] {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
}

.evidence-dropzone.drag-over .evidence-upload-icon[b-shw6jc0uqq] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: translateY(-3px);
}

.evidence-upload-text[b-shw6jc0uqq] {
    font-size: 0.825rem;
    color: #475569;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.evidence-browse-link[b-shw6jc0uqq] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    pointer-events: auto;
    cursor: pointer;
}

.evidence-upload-subtext[b-shw6jc0uqq] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

/* Hidden file input */
[b-shw6jc0uqq] .evidence-input-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========== Progress Bar ========== */
.evidence-progress-bar[b-shw6jc0uqq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.evidence-progress-track[b-shw6jc0uqq] {
    flex: 1;
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.evidence-progress-fill[b-shw6jc0uqq] {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 3px;
    animation: evidenceProgressIndeterminate-b-shw6jc0uqq 1.5s ease-in-out infinite;
    width: 40%;
}

@keyframes evidenceProgressIndeterminate-b-shw6jc0uqq {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

.evidence-progress-text[b-shw6jc0uqq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    white-space: nowrap;
}

/* ========== Toast Messages ========== */
.evidence-toast[b-shw6jc0uqq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.775rem;
    font-weight: 500;
    animation: evidenceSlideIn-b-shw6jc0uqq 0.3s ease;
}

.evidence-toast.toast-success[b-shw6jc0uqq] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.evidence-toast.toast-error[b-shw6jc0uqq] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* ========== File List ========== */
.evidence-files[b-shw6jc0uqq] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.evidence-file-row[b-shw6jc0uqq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    background: #fff;
    transition: all 0.15s ease;
    margin-bottom: 0.35rem;
}

.evidence-file-row:hover[b-shw6jc0uqq] {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ========== File Thumbnail ========== */
.evidence-file-thumb[b-shw6jc0uqq] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evidence-file-thumb img[b-shw6jc0uqq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evidence-file-icon[b-shw6jc0uqq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ========== File Info ========== */
.evidence-file-info[b-shw6jc0uqq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.evidence-file-name[b-shw6jc0uqq] {
    font-size: 0.825rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evidence-file-meta[b-shw6jc0uqq] {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* ========== File Actions ========== */
.evidence-file-actions[b-shw6jc0uqq] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.evidence-action-btn[b-shw6jc0uqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    padding: 0;
}

.evidence-action-btn:hover[b-shw6jc0uqq] {
    background: #e2e8f0;
    color: #1e293b;
}

.evidence-action-delete:hover[b-shw6jc0uqq] {
    background: #fee2e2;
    color: #dc2626;
}

/* ========== Clickable thumbnails / filenames for images ========== */
.evidence-file-thumb-clickable[b-shw6jc0uqq] {
    cursor: pointer;
    transition: all 0.15s ease;
}

.evidence-file-thumb-clickable:hover[b-shw6jc0uqq] {
    box-shadow: 0 0 0 2px #2563eb;
    border-radius: 6px;
}

.evidence-file-name-clickable[b-shw6jc0uqq] {
    cursor: pointer;
    transition: color 0.15s ease;
}

.evidence-file-name-clickable:hover[b-shw6jc0uqq] {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========== Lightbox Overlay ========== */
.evidence-lightbox-overlay[b-shw6jc0uqq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: lightboxFadeIn-b-shw6jc0uqq 0.2s ease-out;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@keyframes lightboxFadeIn-b-shw6jc0uqq {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.evidence-lightbox-content[b-shw6jc0uqq] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    animation: lightboxScaleIn-b-shw6jc0uqq 0.25s ease-out;
}

@keyframes lightboxScaleIn-b-shw6jc0uqq {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.evidence-lightbox-image[b-shw6jc0uqq] {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
    background: #fff;
}

.evidence-lightbox-close[b-shw6jc0uqq] {
    position: absolute;
    top: -44px;
    right: -4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 1;
}

.evidence-lightbox-close:hover[b-shw6jc0uqq] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.evidence-lightbox-caption[b-shw6jc0uqq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.75rem;
    text-align: center;
}

.evidence-lightbox-filename[b-shw6jc0uqq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evidence-lightbox-meta[b-shw6jc0uqq] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .evidence-dropzone-inner[b-shw6jc0uqq] {
        padding: 1.25rem 0.75rem;
    }

    .evidence-file-thumb[b-shw6jc0uqq] {
        width: 40px;
        height: 40px;
    }

    .evidence-file-name[b-shw6jc0uqq] {
        font-size: 0.75rem;
    }

    .evidence-lightbox-overlay[b-shw6jc0uqq] {
        padding: 1rem;
    }

    .evidence-lightbox-image[b-shw6jc0uqq] {
        max-height: 70vh;
        border-radius: 8px;
    }

    .evidence-lightbox-close[b-shw6jc0uqq] {
        top: -40px;
        right: 0;
    }

    .evidence-lightbox-filename[b-shw6jc0uqq] {
        max-width: 85vw;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/WorkingDayCalendar.razor.rz.scp.css */
.working-day-calendar-page[b-bp223jymju] {
    padding: 1.5rem 2rem;
    background: var(--page-bg, #f5f6fa);
    min-height: 100vh;
}

/* Calendar container */
.calendar-container[b-bp223jymju] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    background: #f8f9fa;
    margin: 0;
    border-radius: 4px;
}

/* Fuzzy Search Bar */
.calendar-search-bar[b-bp223jymju] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding: 0.5rem 0.85rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.calendar-search-bar:focus-within[b-bp223jymju] {
    border-color: #ff6b3c;
    box-shadow: 0 0 0 3px rgba(255, 107, 60, 0.12);
}

.calendar-search-bar svg[b-bp223jymju] {
    flex-shrink: 0;
}

.calendar-search-input[b-bp223jymju] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: #1e293b;
    background: transparent;
}

.calendar-search-input[b-bp223jymju]::placeholder {
    color: #94a3b8;
}

.calendar-search-clear[b-bp223jymju] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}

.calendar-search-clear:hover[b-bp223jymju] {
    color: #ef4444;
}

/* Search Results */
.search-results-section[b-bp223jymju] {
    margin: 0 0 1.5rem 0;
    animation: slideDown-b-bp223jymju 0.2s ease-out;
}

.search-results-header[b-bp223jymju] {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.search-results-grid[b-bp223jymju] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.search-result-card[b-bp223jymju] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}

.search-result-card:hover[b-bp223jymju] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #ff6b3c;
}

.search-result-top[b-bp223jymju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.search-result-calendar[b-bp223jymju] {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.search-result-title[b-bp223jymju] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.search-result-desc[b-bp223jymju] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

.search-result-date[b-bp223jymju] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: #94a3b8;
}

.search-result-author[b-bp223jymju] {
    font-weight: 600;
    color: #64748b;
}

.search-results-empty[b-bp223jymju] {
    text-align: center;
    padding: 2rem 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.search-results-empty p[b-bp223jymju] {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
    color: #64748b;
}

/* Main Toolbar */
.calendar-toolbar[b-bp223jymju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.toolbar-buttons[b-bp223jymju] {
    display: flex;
    gap: 0.5rem;
}

.toolbar-buttons .btn[b-bp223jymju] {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.toolbar-buttons .btn-outline-primary[b-bp223jymju],
.toolbar-search-buttons .btn-outline-primary[b-bp223jymju] {
    color: #ff6b3c;
    border-color: #ff6b3c;
    background: white;
}

.toolbar-buttons .btn-outline-primary:hover[b-bp223jymju],
.toolbar-buttons .btn-outline-primary.active[b-bp223jymju],
.toolbar-search-buttons .btn-outline-primary:hover[b-bp223jymju] {
    color: white;
    background-color: #ff6b3c;
}

.toolbar-buttons .btn-danger[b-bp223jymju] {
    color: white;
    border-color: #8b3a3a;
    background-color: #8b3a3a;
}

.toolbar-buttons .btn-danger:hover[b-bp223jymju] {
    background-color: #6d2d2d;
    border-color: #6d2d2d;
}

.toolbar-buttons .btn-danger:disabled[b-bp223jymju] {
    opacity: 0.65;
}

.toolbar-pagination[b-bp223jymju] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.toolbar-pagination .btn[b-bp223jymju] {
    padding: 0.25rem 0.5rem;
    color: #6c757d;
}

.toolbar-pagination .btn:disabled[b-bp223jymju] {
    opacity: 0.5;
}

.pagination-info[b-bp223jymju] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0 0.5rem;
}

/* Table */
.calendar-table[b-bp223jymju] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.calendar-table thead th[b-bp223jymju] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    white-space: nowrap;
}

.calendar-table thead th.sortable[b-bp223jymju] {
    cursor: pointer;
    user-select: none;
}

.calendar-table thead th.sortable:hover[b-bp223jymju] {
    background-color: #f8f9fa;
}

.sort-indicator[b-bp223jymju] {
    margin-left: 0.5rem;
    font-size: 0.7rem;
}

.calendar-table tbody tr[b-bp223jymju] {
    border-bottom: 1px solid #f0f0f0;
}

.calendar-table tbody tr:hover[b-bp223jymju] {
    background-color: #f8f9fa;
}

.calendar-table tbody tr.table-active[b-bp223jymju] {
    background-color: #e9ecef;
}

.calendar-table tbody td[b-bp223jymju] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #212529;
    vertical-align: middle;
}

.calendar-table tbody td a[b-bp223jymju] {
    color: #0d6efd;
    text-decoration: none;
}

.calendar-table tbody td a:hover[b-bp223jymju] {
    text-decoration: underline;
}

/* Modal Styles */
.modal-overlay[b-bp223jymju] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* ===== Calendar View Section ===== */
.calendar-view-section[b-bp223jymju] {
    margin-top: 1.5rem;
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    animation: slideDown-b-bp223jymju 0.3s ease-out;
}

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

/* Company Logo */
.calendar-logo[b-bp223jymju] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.calendar-logo img[b-bp223jymju] {
    max-height: 60px;
    max-width: 250px;
    object-fit: contain;
}

.calendar-view-header[b-bp223jymju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-view-header h4[b-bp223jymju] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #163a49;
}

.year-nav[b-bp223jymju] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.year-nav .btn[b-bp223jymju] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: #ff6b3c;
    border-color: #ff6b3c;
}

.year-nav .btn:hover[b-bp223jymju] {
    background: #ff6b3c;
    color: white;
}

.year-label[b-bp223jymju] {
    font-weight: 600;
    font-size: 1rem;
    color: #163a49;
    min-width: 3rem;
    text-align: center;
}

/* Legend */
.calendar-legend[b-bp223jymju] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.legend-item[b-bp223jymju] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #495057;
}

.legend-swatch[b-bp223jymju] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.working-day-swatch[b-bp223jymju] {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
}

.weekend-swatch[b-bp223jymju] {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.public-holiday-swatch[b-bp223jymju] {
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.annual-holiday-swatch[b-bp223jymju] {
    background: #dcfce7;
    border: 1px solid #86efac;
}

.annualised-day-off-swatch[b-bp223jymju] {
    background: #fef9c3;
    border: 1px solid #fde047;
}

.short-day-swatch[b-bp223jymju] {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
}

.today-swatch[b-bp223jymju] {
    background: #e3f2fd;
    border: 2px solid #1976d2;
}

/* Stats Panel */
.calendar-stats-panel[b-bp223jymju] {
    margin-bottom: 1.25rem;
}

.stats-year-row[b-bp223jymju] {
    margin-bottom: 0.75rem;
}

.stats-block[b-bp223jymju] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.stats-block-title[b-bp223jymju] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #163a49;
    margin-bottom: 0.5rem;
}

.stats-row[b-bp223jymju] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.stats-hours-row[b-bp223jymju] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.stat[b-bp223jymju] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
}

.stat-val[b-bp223jymju] {
    font-size: 1rem;
    font-weight: 700;
    color: #163a49;
}

.stat-lbl[b-bp223jymju] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.stat-large[b-bp223jymju] {
    font-size: 1.15rem;
}

.stat-green[b-bp223jymju] {
    color: #16a34a;
}

.stat-red[b-bp223jymju] {
    color: #dc2626;
}

.stat-emerald[b-bp223jymju] {
    color: #059669;
}

.stat-amber[b-bp223jymju] {
    color: #d97706;
}

.stat-cyan[b-bp223jymju] {
    color: #0891b2;
}

/* Quarter accordion toggle */
.stats-quarter-accordion[b-bp223jymju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.75rem;
    transition: background 0.15s;
}

.stats-quarter-accordion:hover[b-bp223jymju] {
    background: #f0f4f8;
}

.stats-quarter-toggle-title[b-bp223jymju] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #163a49;
}

.stats-quarter-chevron[b-bp223jymju] {
    transition: transform 0.25s ease;
    color: #64748b;
}

.stats-quarter-chevron.open[b-bp223jymju] {
    transform: rotate(180deg);
}

/* Quarter row */
.stats-quarter-row[b-bp223jymju] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.stats-block-quarter[b-bp223jymju] {
    padding: 0.6rem 0.75rem;
}

.stats-block-quarter .stats-row[b-bp223jymju] {
    gap: 0.6rem;
}

.stats-block-quarter .stat-val[b-bp223jymju] {
    font-size: 0.85rem;
}

.stats-block-quarter .stat-lbl[b-bp223jymju] {
    font-size: 0.55rem;
}

.stats-block-quarter .stats-hours-row[b-bp223jymju] {
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .stats-quarter-row[b-bp223jymju] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-quarter-row[b-bp223jymju] {
        grid-template-columns: 1fr;
    }
}

/* Months Grid */
.months-grid[b-bp223jymju] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1200px) {
    .months-grid[b-bp223jymju] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .months-grid[b-bp223jymju] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .months-grid[b-bp223jymju] {
        grid-template-columns: 1fr;
    }
}

.month-card[b-bp223jymju] {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.75rem;
    background: #fafbfc;
}

.month-card-header[b-bp223jymju] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #163a49;
    text-align: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #ff6b3c;
}

.month-day-headers[b-bp223jymju] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.25rem;
}

.month-day-headers span[b-bp223jymju] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c757d;
    padding: 0.15rem 0;
}

.month-day-grid[b-bp223jymju] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.day-cell[b-bp223jymju] {
    text-align: center;
    font-size: 0.7rem;
    padding: 0.2rem 0;
    border-radius: 3px;
    cursor: default;
    line-height: 1.6;
    transition: transform 0.1s ease;
}

.day-cell:not(.empty):hover[b-bp223jymju] {
    transform: scale(1.2);
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.day-cell.empty[b-bp223jymju] {
    visibility: hidden;
}

.day-cell.working[b-bp223jymju] {
    background: #e8f5e9;
    color: #2e7d32;
}

.day-cell.weekend[b-bp223jymju] {
    background: #f5f5f5;
    color: #9e9e9e;
}

.day-cell.holiday[b-bp223jymju],
.day-cell.public-holiday[b-bp223jymju] {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 600;
}

.day-cell.annual-holiday[b-bp223jymju] {
    background: #dcfce7;
    color: #16a34a;
    font-weight: 600;
}

.day-cell.annualised-day-off[b-bp223jymju] {
    background: #fef9c3;
    color: #a16207;
    font-weight: 600;
}

.day-cell.short-day[b-bp223jymju] {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 600;
}

.day-cell.today[b-bp223jymju] {
    outline: 2px solid #1976d2;
    outline-offset: -1px;
    font-weight: 700;
}

/* ===== Day Detail Modal ===== */
.day-modal-dialog[b-bp223jymju] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    pointer-events: auto;
    animation: modalSlideIn-b-bp223jymju 0.25s ease-out;
}

@keyframes modalSlideIn-b-bp223jymju {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.day-modal-content[b-bp223jymju] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.day-modal-header[b-bp223jymju] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #163a49 0%, #1e4d5f 100%);
    color: white;
}

.day-modal-header-info[b-bp223jymju] {
    flex: 1;
}

.day-modal-title[b-bp223jymju] {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
}

.day-modal-badges[b-bp223jymju] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.day-badge[b-bp223jymju] {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
}

.day-badge-holiday[b-bp223jymju],
.day-badge-public-holiday[b-bp223jymju] {
    background: #ef4444;
    color: white;
}

.day-badge-annual-holiday[b-bp223jymju] {
    background: #16a34a;
    color: white;
}

.day-badge-annualised-day-off[b-bp223jymju] {
    background: #eab308;
    color: white;
}

.day-badge-short-day[b-bp223jymju] {
    background: #0ea5e9;
    color: white;
}

.day-badge-weekend[b-bp223jymju] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.day-badge-working[b-bp223jymju] {
    background: #10b981;
    color: white;
}

.day-badge-calendar[b-bp223jymju] {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.day-modal-close[b-bp223jymju] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.day-modal-close:hover[b-bp223jymju] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.day-modal-body[b-bp223jymju] {
    padding: 1.25rem 1.5rem;
}

/* Day Type Toggle Section */
.day-type-section[b-bp223jymju] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.day-type-label[b-bp223jymju] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    display: block;
    margin-bottom: 0.5rem;
}

.day-type-buttons[b-bp223jymju] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.day-type-btn[b-bp223jymju] {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 14px;
    border: 1.5px solid var(--btn-color);
    background: white;
    color: var(--btn-color);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}

.day-type-btn:hover[b-bp223jymju] {
    background: color-mix(in srgb, var(--btn-color) 10%, white);
}

.day-type-btn.active[b-bp223jymju] {
    background: var(--btn-color);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.day-type-desc-row[b-bp223jymju] {
    margin-top: 0.5rem;
}

.day-type-desc-input[b-bp223jymju] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: #1e293b;
    background: white;
}

.day-type-desc-input:focus[b-bp223jymju] {
    border-color: #ff6b3c;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 107, 60, 0.15);
}

/* Add Note Button */
.btn-add-note[b-bp223jymju] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1rem;
    width: 100%;
    justify-content: center;
}

.btn-add-note:hover[b-bp223jymju] {
    border-color: #ff6b3c;
    color: #ff6b3c;
    background: #fff7ed;
}

/* Note Form */
.note-form[b-bp223jymju] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: slideDown-b-bp223jymju 0.2s ease-out;
}

.note-form-title[b-bp223jymju] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #163a49;
}

.note-form-field[b-bp223jymju] {
    margin-bottom: 0.75rem;
}

.note-form-field label[b-bp223jymju] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.25rem;
}

.note-form-field .form-control[b-bp223jymju] {
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    background: white;
    color: #1e293b;
}

.note-form-field .form-control:focus[b-bp223jymju] {
    border-color: #ff6b3c;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 107, 60, 0.15);
}

.note-form-field textarea.form-control[b-bp223jymju] {
    resize: vertical;
    min-height: 60px;
}

/* Category Picker */
.category-picker[b-bp223jymju] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.category-chip[b-bp223jymju] {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 14px;
    border: 1.5px solid;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}

.category-chip:hover[b-bp223jymju] {
    opacity: 0.85;
    transform: translateY(-1px);
}

.category-chip.selected[b-bp223jymju] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.note-form-actions[b-bp223jymju] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-primary-save[b-bp223jymju] {
    background: #ff6b3c;
    border-color: #ff6b3c;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 0.35rem 1rem;
}

.btn-primary-save:hover[b-bp223jymju] {
    background: #e55a2d;
    border-color: #e55a2d;
    color: white;
}

/* Note Cards Grid */
.note-cards-grid[b-bp223jymju] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.note-card[b-bp223jymju] {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 4px solid;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    transition: box-shadow 0.2s, transform 0.15s;
    animation: noteSlideIn-b-bp223jymju 0.25s ease-out;
}

@keyframes noteSlideIn-b-bp223jymju {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-card:hover[b-bp223jymju] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.note-card-header[b-bp223jymju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.note-card-category[b-bp223jymju] {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.note-card-actions[b-bp223jymju] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.note-card:hover .note-card-actions[b-bp223jymju] {
    opacity: 1;
}

.note-action-btn[b-bp223jymju] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.note-action-btn:hover[b-bp223jymju] {
    color: #475569;
    background: #f1f5f9;
}

.note-action-delete:hover[b-bp223jymju] {
    color: #ef4444;
    background: #fef2f2;
}

.note-card-title[b-bp223jymju] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.note-card-description[b-bp223jymju] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.note-card-meta[b-bp223jymju] {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.note-card-author[b-bp223jymju] {
    font-weight: 600;
    color: #64748b;
}

/* Empty State */
.note-empty-state[b-bp223jymju] {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}

.note-empty-state p[b-bp223jymju] {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
    color: #64748b;
}

.note-empty-hint[b-bp223jymju] {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
}

/* Has-notes indicator dot on calendar cells */
.day-cell.has-notes[b-bp223jymju]::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: #6366f1;
    border-radius: 50%;
    margin: 0 auto -2px;
}

/* Delete Confirmation Mini-Modal */
.delete-confirm-dialog[b-bp223jymju] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1070;
    pointer-events: auto;
}

.delete-confirm-content[b-bp223jymju] {
    background: white;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    min-width: 320px;
    animation: modalSlideIn-b-bp223jymju 0.2s ease-out;
}

.delete-confirm-content h6[b-bp223jymju] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #163a49;
}

.delete-confirm-content p[b-bp223jymju] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1rem 0;
}

.delete-confirm-actions[b-bp223jymju] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* /Components/Shared/ColumnFilter.razor.rz.scp.css */
/* Column Filter Component */
.cf-input[b-a3kgoxvk72] {
    position: relative;
    width: 100%;
}

.cf-wrapper[b-a3kgoxvk72] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    height: 32px;
}

.cf-wrapper:focus-within[b-a3kgoxvk72] {
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

/* Operator button */
.cf-operator-btn[b-a3kgoxvk72] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 100%;
    border: none;
    border-right: 1px solid #e0e0e0;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 6px;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.cf-operator-btn:hover[b-a3kgoxvk72] {
    background: #e9ecef;
}

/* Operator color classes */
.cf-op-text[b-a3kgoxvk72] {
    color: #ff6b3c;
}

.cf-op-number[b-a3kgoxvk72] {
    color: #ff6b3c;
}

.cf-op-date[b-a3kgoxvk72] {
    color: #ff6b3c;
}

/* Filter input */
.cf-control[b-a3kgoxvk72] {
    flex: 1;
    border: none;
    outline: none;
    height: 100%;
    padding: 0 8px;
    font-size: 0.8rem;
    min-width: 0;
    background: transparent;
}

.cf-control:disabled[b-a3kgoxvk72] {
    background: #f5f5f5;
    color: #aaa;
}

.cf-control[b-a3kgoxvk72]::placeholder {
    color: #bbb;
}

/* Between inputs */
.cf-between-input[b-a3kgoxvk72] {
    flex: 1;
    min-width: 0;
}

.cf-between-input + .cf-between-input[b-a3kgoxvk72] {
    border-left: 1px solid #e0e0e0;
}

/* Select filter */
.cf-select[b-a3kgoxvk72] {
    width: 100%;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
    background: white;
    cursor: pointer;
}

.cf-select:focus[b-a3kgoxvk72] {
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
    outline: none;
}

/* Operator dropdown */
.cf-dropdown-overlay[b-a3kgoxvk72] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

.cf-dropdown[b-a3kgoxvk72] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100000;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    margin-top: 4px;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}

.cf-dropdown-item[b-a3kgoxvk72] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    transition: background-color 0.1s;
}

.cf-dropdown-item:hover[b-a3kgoxvk72] {
    background: #f5f5f5;
}

.cf-dropdown-item.active[b-a3kgoxvk72] {
    background: #e8f4fd;
    color: #0366d6;
    font-weight: 600;
}

.cf-dropdown-icon[b-a3kgoxvk72] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font-size: 0.75rem;
    font-weight: 700;
}
/* /Components/Shared/ConfirmationModal.razor.rz.scp.css */
/* Confirmation Modal Styles */
.confirmation-modal[b-sjzhxcrq10] {
    max-width: 400px;
}

.confirmation-modal .modal-header[b-sjzhxcrq10] {
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
}

.confirmation-modal .modal-header h4[b-sjzhxcrq10] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.confirmation-modal .modal-body[b-sjzhxcrq10] {
    padding: 24px 20px;
}

.confirmation-modal .modal-body p[b-sjzhxcrq10] {
    margin: 0;
    color: #666;
}

.confirmation-modal .modal-footer[b-sjzhxcrq10] {
    border-top: 1px solid #e0e0e0;
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.confirmation-modal .btn-confirm[b-sjzhxcrq10] {
    background-color: #ff6b3c;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.confirmation-modal .btn-confirm:hover[b-sjzhxcrq10] {
    background-color: #e55a2b;
}

.confirmation-modal .btn-cancel[b-sjzhxcrq10] {
    background-color: white;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.confirmation-modal .btn-cancel:hover[b-sjzhxcrq10] {
    background-color: #f5f5f5;
    border-color: #999;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header-wrapper[b-i2n0c7mjr6] {
    margin-bottom: 1.5rem;
}

.page-header-back[b-i2n0c7mjr6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: #ff6b3c;
    padding: 0 0 0.25rem 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.page-header-back svg[b-i2n0c7mjr6] {
    transform: translateY(1px);
}

.page-header-back:hover[b-i2n0c7mjr6] {
    text-decoration: underline;
}

.page-header-row[b-i2n0c7mjr6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.page-header-text[b-i2n0c7mjr6] {
    flex: 1;
    min-width: 0;
}

.page-header-title[b-i2n0c7mjr6] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #003366;
}

.page-header-subtitle[b-i2n0c7mjr6] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.page-header-actions[b-i2n0c7mjr6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* /Components/Shared/SearchableDropdown.razor.rz.scp.css */
/* Searchable Dropdown Container */
.searchable-dropdown[b-ul4g04f9mf] {
    position: relative;
    width: 100%;
}

/* Input wrapper */
.searchable-dropdown-input-wrapper[b-ul4g04f9mf] {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.searchable-dropdown-input-wrapper:hover[b-ul4g04f9mf] {
    border-color: #bbb;
}

.searchable-dropdown.open .searchable-dropdown-input-wrapper[b-ul4g04f9mf] {
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Input field */
.searchable-dropdown-input[b-ul4g04f9mf] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: none;
    outline: none;
    font-size: 0.875rem;
    background: transparent;
    min-width: 0;
}

.searchable-dropdown-input[b-ul4g04f9mf]::placeholder {
    color: #999;
}

/* Clear button */
.searchable-dropdown-clear[b-ul4g04f9mf] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    margin-right: 0.25rem;
    cursor: pointer;
    color: #999;
    border-radius: 50%;
    transition: color 0.2s, background-color 0.2s;
}

.searchable-dropdown-clear:hover[b-ul4g04f9mf] {
    color: #c0392b;
    background-color: rgba(192, 57, 43, 0.1);
}

/* Chevron */
.searchable-dropdown-chevron[b-ul4g04f9mf] {
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 0.25rem;
    color: #666;
    transition: transform 0.2s;
}

.searchable-dropdown.open .searchable-dropdown-chevron[b-ul4g04f9mf] {
    transform: rotate(180deg);
}

/* Dropdown list */
.searchable-dropdown-list[b-ul4g04f9mf] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid #003366;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Individual items */
.searchable-dropdown-item[b-ul4g04f9mf] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchable-dropdown-item:hover[b-ul4g04f9mf] {
    background-color: #f0f4f8;
}

.searchable-dropdown-item.selected[b-ul4g04f9mf] {
    background-color: #e3f2fd;
    font-weight: 500;
    color: #003366;
}

/* No results message */
.searchable-dropdown-no-results[b-ul4g04f9mf] {
    padding: 0.75rem;
    font-size: 0.85rem;
    color: #999;
    text-align: center;
    font-style: italic;
}