@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';

/* /Features/Calculations/Molecules/MaterialPickerDialog/MaterialPickerDialog.razor.rz.scp.css */
/* Overlay */
.picker-overlay[b-a85uiwfidt] {
    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-a85uiwfidt 0.15s ease;
}

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

/* Dialog */
.picker-dialog[b-a85uiwfidt] {
    background: white;
    border-radius: 16px;
    width: 90vw;
    max-width: 960px;
    height: 80vh;
    max-height: 720px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: slideUp-b-a85uiwfidt 0.2s ease;
}

@keyframes slideUp-b-a85uiwfidt {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.picker-header[b-a85uiwfidt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.picker-header h3[b-a85uiwfidt] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.close-btn[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #9CA3AF;
    font-size: 16px;
    transition: all 0.15s ease;
}

.close-btn:hover[b-a85uiwfidt] {
    background: #F3F4F6;
    color: #374151;
}

/* Body layout */
.picker-body[b-a85uiwfidt] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.picker-sidebar[b-a85uiwfidt] {
    width: 220px;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header[b-a85uiwfidt] {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9CA3AF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.category-list[b-a85uiwfidt] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.category-item[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    text-align: left;
    transition: all 0.1s ease;
}

.category-item:hover[b-a85uiwfidt] {
    background: #F3F4F6;
}

.category-item.active[b-a85uiwfidt] {
    background: #EBF8FB;
    color: #00B7DD;
    font-weight: 600;
}

.category-item.depth-1[b-a85uiwfidt] { padding-left: 28px; font-size: 12px; }
.category-item.depth-2[b-a85uiwfidt] { padding-left: 44px; font-size: 12px; }
.category-item.depth-3[b-a85uiwfidt] { padding-left: 60px; font-size: 12px; }

/* Main content */
.picker-main[b-a85uiwfidt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search */
.search-bar[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 8px;
}

.search-icon[b-a85uiwfidt] {
    color: #9CA3AF;
    font-size: 14px;
}

.search-input[b-a85uiwfidt] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #111827;
    background: transparent;
}

.search-input[b-a85uiwfidt]::placeholder {
    color: #D1D5DB;
}

.clear-search[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: #F3F4F6;
    border-radius: 6px;
    cursor: pointer;
    color: #6B7280;
    font-size: 12px;
    transition: all 0.1s ease;
}

.clear-search:hover[b-a85uiwfidt] {
    background: #E5E7EB;
    color: #374151;
}

/* Materials list */
.materials-list[b-a85uiwfidt] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.material-card[b-a85uiwfidt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.1s ease;
    border: 2px solid transparent;
}

.material-card:hover[b-a85uiwfidt] {
    background: #F9FAFB;
}

.material-card.selected[b-a85uiwfidt] {
    background: #EBF8FB;
    border-color: #00B7DD;
}

.material-info[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.material-name[b-a85uiwfidt] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.material-code[b-a85uiwfidt] {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    background: #F3F4F6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.material-unit[b-a85uiwfidt] {
    font-size: 12px;
    color: #9CA3AF;
}

/* Pagination */
.pagination[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.page-btn[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #D1D5DB;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font-size: 12px;
    transition: all 0.1s ease;
}

.page-btn:hover:not(:disabled)[b-a85uiwfidt] {
    border-color: #00B7DD;
    color: #00B7DD;
}

.page-btn:disabled[b-a85uiwfidt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-a85uiwfidt] {
    font-size: 12px;
    color: #6B7280;
}

/* Price comparison section */
.price-comparison-section[b-a85uiwfidt] {
    border-top: 2px solid #00B7DD;
    background: #FAFCFE;
    padding: 16px;
    overflow-y: auto;
    max-height: 300px;
}

.section-header[b-a85uiwfidt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-header h4[b-a85uiwfidt] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.quantity-input-group[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quantity-input-group label[b-a85uiwfidt] {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
}

.qty-input[b-a85uiwfidt] {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    text-align: right;
    background: white;
    transition: border-color 0.15s ease;
}

.qty-input:focus[b-a85uiwfidt] {
    outline: none;
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.15);
}

.qty-unit[b-a85uiwfidt] {
    font-size: 12px;
    color: #6B7280;
}

/* Price stats */
.price-stats[b-a85uiwfidt] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.stat[b-a85uiwfidt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-a85uiwfidt] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9CA3AF;
}

.stat-value[b-a85uiwfidt] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.stat-value.best[b-a85uiwfidt] {
    color: #16A34A;
}

/* Supplier price rows */
.supplier-prices-list[b-a85uiwfidt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.supplier-price-row[b-a85uiwfidt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.supplier-price-row:hover[b-a85uiwfidt] {
    border-color: #D1D5DB;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.supplier-price-row.selected[b-a85uiwfidt] {
    border-color: #00B7DD;
    background: #F0FBFE;
}

.supplier-price-row.best-price[b-a85uiwfidt] {
    border-color: #BBF7D0;
}

.supplier-price-row.best-price.selected[b-a85uiwfidt] {
    border-color: #16A34A;
    background: #F0FDF4;
}

.supplier-info[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.supplier-name[b-a85uiwfidt] {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.best-tag[b-a85uiwfidt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #DCFCE7;
    color: #16A34A;
}

.article-code[b-a85uiwfidt] {
    font-size: 11px;
    color: #9CA3AF;
    font-family: monospace;
}

.supplier-price-details[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.price-column[b-a85uiwfidt] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.price-label[b-a85uiwfidt] {
    font-size: 10px;
    color: #9CA3AF;
    white-space: nowrap;
}

.price-value[b-a85uiwfidt] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.price-value.total[b-a85uiwfidt] {
    font-weight: 700;
    color: #111827;
}

.tier-indicator[b-a85uiwfidt],
.lead-time[b-a85uiwfidt] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #9CA3AF;
}

.tier-indicator i[b-a85uiwfidt],
.lead-time i[b-a85uiwfidt] {
    font-size: 12px;
}

/* Loading & empty states */
.loading-state[b-a85uiwfidt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: #9CA3AF;
    font-size: 13px;
}

.loading-state.compact[b-a85uiwfidt] {
    padding: 24px;
}

.empty-state[b-a85uiwfidt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px;
    color: #D1D5DB;
}

.empty-state.compact[b-a85uiwfidt] {
    padding: 24px;
}

.empty-state i[b-a85uiwfidt] {
    font-size: 28px;
}

.empty-state span[b-a85uiwfidt] {
    font-size: 13px;
    color: #9CA3AF;
}

/* Spinner */
.spinner[b-a85uiwfidt] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 183, 221, 0.2);
    border-top-color: #00B7DD;
    border-radius: 50%;
    animation: spin-b-a85uiwfidt 0.6s linear infinite;
}

.spinner.small[b-a85uiwfidt] {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner.white[b-a85uiwfidt] {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

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

/* Footer */
.picker-footer[b-a85uiwfidt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #FAFAFA;
    border-radius: 0 0 16px 16px;
}

.footer-summary[b-a85uiwfidt] {
    flex: 1;
    min-width: 0;
}

.summary-text[b-a85uiwfidt] {
    font-size: 13px;
    color: #374151;
}

.summary-hint[b-a85uiwfidt] {
    font-size: 13px;
    color: #9CA3AF;
}

.footer-actions[b-a85uiwfidt] {
    display: flex;
    gap: 10px;
    margin-left: 16px;
}

.btn-cancel[b-a85uiwfidt] {
    padding: 10px 20px;
    border: 1px solid #D1D5DB;
    background: white;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel:hover[b-a85uiwfidt] {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.btn-import[b-a85uiwfidt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    background: #00B7DD;
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-import:hover:not(:disabled)[b-a85uiwfidt] {
    background: #0099BB;
}

.btn-import:disabled[b-a85uiwfidt] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile */
@media (max-width: 768px) {
    .picker-dialog[b-a85uiwfidt] {
        width: 96vw;
        height: 90vh;
        border-radius: 12px;
    }

    .picker-sidebar[b-a85uiwfidt] {
        display: none;
    }

    .supplier-price-details[b-a85uiwfidt] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .picker-footer[b-a85uiwfidt] {
        flex-direction: column;
        gap: 12px;
    }

    .footer-actions[b-a85uiwfidt] {
        width: 100%;
        margin-left: 0;
    }

    .btn-import[b-a85uiwfidt] {
        flex: 1;
        justify-content: center;
    }

    .price-stats[b-a85uiwfidt] {
        flex-wrap: wrap;
    }
}
/* /Features/Calculations/Organisms/CalculationEditor/CalculationEditor.razor.rz.scp.css */
.calculation-editor[b-p450l1rj20] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Editor header */
.editor-header[b-p450l1rj20] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.editor-header-left[b-p450l1rj20] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-header-right[b-p450l1rj20] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-badge[b-p450l1rj20] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.type-badge.pre[b-p450l1rj20] {
    background: #EFF6FF;
    color: #2563EB;
}

.type-badge.post[b-p450l1rj20] {
    background: #FFF7ED;
    color: #EA580C;
}

.status-badge[b-p450l1rj20] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.draft[b-p450l1rj20] {
    background: #FEF3C7;
    color: #D97706;
}

.status-badge.finalized[b-p450l1rj20] {
    background: #D1FAE5;
    color: #059669;
}

.status-badge.archived[b-p450l1rj20] {
    background: #F3F4F6;
    color: #6B7280;
}

/* Action buttons */
.action-btn[b-p450l1rj20] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn.primary[b-p450l1rj20] {
    background: #00B7DD;
    color: white;
    border: none;
}

.action-btn.primary:hover[b-p450l1rj20] {
    background: #0099BB;
}

.action-btn.outline[b-p450l1rj20] {
    background: transparent;
    color: #DC2626;
    border: 1px solid #FCA5A5;
}

.action-btn.outline:hover[b-p450l1rj20] {
    background: #FEF2F2;
    border-color: #DC2626;
}

/* Metadata section */
.editor-meta[b-p450l1rj20] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    padding: 1.25rem;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.meta-fields[b-p450l1rj20] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meta-field label[b-p450l1rj20] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 4px;
}

.meta-input[b-p450l1rj20] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.meta-input:focus[b-p450l1rj20] {
    outline: none;
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.15);
}

.meta-textarea[b-p450l1rj20] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 13px;
    resize: vertical;
    min-height: 48px;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.meta-textarea:focus[b-p450l1rj20] {
    outline: none;
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.15);
}

.meta-value[b-p450l1rj20] {
    font-size: 14px;
    color: #374151;
}

.meta-percentages[b-p450l1rj20] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 140px;
}

.pct-field label[b-p450l1rj20] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 4px;
}

.pct-input[b-p450l1rj20] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease;
}

.pct-input:focus[b-p450l1rj20] {
    outline: none;
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.15);
}

.pct-value[b-p450l1rj20] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

/* Import bar */
.import-bar[b-p450l1rj20] {
    padding: 12px 16px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.import-btn[b-p450l1rj20] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 1px solid #D97706;
    background: white;
    color: #D97706;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.import-btn:hover:not(:disabled)[b-p450l1rj20] {
    background: #D97706;
    color: white;
}

.import-btn:disabled[b-p450l1rj20] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner[b-p450l1rj20] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-p450l1rj20 0.6s linear infinite;
}

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

/* Cost groups container */
.cost-groups[b-p450l1rj20] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Footer */
.editor-footer[b-p450l1rj20] {
    padding: 8px 0;
}

.footer-info[b-p450l1rj20] {
    font-size: 12px;
    color: #9CA3AF;
}

/* Mobile */
@media (max-width: 768px) {
    .editor-header[b-p450l1rj20] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .editor-header-right[b-p450l1rj20] {
        justify-content: flex-end;
    }

    .editor-meta[b-p450l1rj20] {
        grid-template-columns: 1fr;
    }

    .meta-percentages[b-p450l1rj20] {
        flex-direction: row;
        gap: 12px;
    }

    .pct-field[b-p450l1rj20] {
        flex: 1;
    }

    .action-btn[b-p450l1rj20] {
        padding: 10px 14px;
        font-size: 12px;
    }
}
/* /Features/Calculations/Organisms/CalculationSummary/CalculationSummary.razor.rz.scp.css */
.calculation-summary[b-as70f5z2mb] {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.summary-title[b-as70f5z2mb] {
    margin: 0 0 1rem 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
}

.summary-rows[b-as70f5z2mb] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.summary-row[b-as70f5z2mb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.summary-row:last-child[b-as70f5z2mb] {
    border-bottom: none;
}

.row-label[b-as70f5z2mb] {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.row-value[b-as70f5z2mb] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.pct-tag[b-as70f5z2mb] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: #F3F4F6;
    color: #6B7280;
}

/* Subtotal row */
.summary-row.subtotal[b-as70f5z2mb] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 10px;
    margin-bottom: 2px;
}

.summary-row.subtotal .row-label[b-as70f5z2mb] {
    font-weight: 600;
    color: #374151;
}

.summary-row.subtotal .row-value[b-as70f5z2mb] {
    font-weight: 700;
}

/* Total excl VAT */
.summary-row.total-excl[b-as70f5z2mb] {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 10px;
    margin-top: 2px;
}

.summary-row.total-excl .row-label[b-as70f5z2mb] {
    font-weight: 600;
    color: #374151;
}

.summary-row.total-excl .row-value[b-as70f5z2mb] {
    font-size: 15px;
    font-weight: 700;
}

/* VAT row */
.summary-row.vat .row-value[b-as70f5z2mb] {
    color: #6B7280;
}

/* Grand total */
.summary-row.grand-total[b-as70f5z2mb] {
    background: #F0FDF4;
    margin: 8px -1.25rem -1.25rem;
    padding: 14px 1.25rem;
    border-radius: 0 0 12px 12px;
    border-top: 2px solid #16A34A;
    border-bottom: none;
}

.summary-row.grand-total .row-label[b-as70f5z2mb] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.summary-row.grand-total .row-value[b-as70f5z2mb] {
    font-size: 18px;
    font-weight: 800;
    color: #16A34A;
    letter-spacing: -0.02em;
}
/* /Features/Calculations/Organisms/CostGroupPanel/CostGroupPanel.razor.rz.scp.css */
.cost-group-panel[b-n2sog27h7q] {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.cost-group-panel:hover[b-n2sog27h7q] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Group header */
.group-header[b-n2sog27h7q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #F9FAFB;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.group-header:hover[b-n2sog27h7q] {
    background: #F3F4F6;
}

.group-header-left[b-n2sog27h7q] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chevron-icon[b-n2sog27h7q] {
    font-size: 12px;
    color: #9CA3AF;
    transition: transform 0.2s ease;
}

.group-badge[b-n2sog27h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 14px;
}

.badge-material[b-n2sog27h7q] { background: #DBEAFE; }
.badge-labor[b-n2sog27h7q] { background: #FEF3C7; }
.badge-subcontractor[b-n2sog27h7q] { background: #D1FAE5; }
.badge-equipment[b-n2sog27h7q] { background: #E0E7FF; }
.badge-overhead[b-n2sog27h7q] { background: #F3F4F6; }
.badge-contingency[b-n2sog27h7q] { background: #FCE7F3; }

.group-name[b-n2sog27h7q] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.line-count[b-n2sog27h7q] {
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 500;
}

.group-total[b-n2sog27h7q] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}

/* Group body */
.group-body[b-n2sog27h7q] {
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Cost lines table */
.cost-lines-table[b-n2sog27h7q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cost-lines-table thead[b-n2sog27h7q] {
    background: #FAFAFA;
}

.cost-lines-table th[b-n2sog27h7q] {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cost-lines-table td[b-n2sog27h7q] {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    vertical-align: middle;
}

.col-desc[b-n2sog27h7q] { width: auto; }
.col-unit[b-n2sog27h7q] { width: 80px; }
.col-qty[b-n2sog27h7q] { width: 80px; text-align: right; }
.col-price[b-n2sog27h7q] { width: 110px; text-align: right; }
.col-total[b-n2sog27h7q] { width: 110px; text-align: right; }
.col-actions[b-n2sog27h7q] { width: 70px; }

.unit-cell[b-n2sog27h7q] { color: #6B7280; }
.qty-cell[b-n2sog27h7q] { text-align: right; font-variant-numeric: tabular-nums; }
.price-cell[b-n2sog27h7q] { text-align: right; font-variant-numeric: tabular-nums; }
.total-cell[b-n2sog27h7q] { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: #111827; }

.desc-cell[b-n2sog27h7q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.supplier-tag[b-n2sog27h7q],
.imported-tag[b-n2sog27h7q] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.supplier-tag[b-n2sog27h7q] {
    background: #EFF6FF;
    color: #3B82F6;
}

.imported-tag[b-n2sog27h7q] {
    background: #FEF3C7;
    color: #D97706;
}

/* Line row hover */
.line-row[b-n2sog27h7q] {
    transition: background 0.1s ease;
    cursor: default;
}

.line-row:hover[b-n2sog27h7q] {
    background: #F9FAFB;
}

/* Actions */
.actions-cell[b-n2sog27h7q] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.icon-btn[b-n2sog27h7q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #9CA3AF;
    transition: all 0.15s ease;
}

.icon-btn.edit:hover[b-n2sog27h7q] { background: #EFF6FF; color: #3B82F6; }
.icon-btn.delete:hover[b-n2sog27h7q] { background: #FEF2F2; color: #DC2626; }
.icon-btn.save[b-n2sog27h7q] { color: #16A34A; }
.icon-btn.save:hover[b-n2sog27h7q] { background: #F0FDF4; }
.icon-btn.cancel[b-n2sog27h7q] { color: #DC2626; }
.icon-btn.cancel:hover[b-n2sog27h7q] { background: #FEF2F2; }

/* Inline editing */
.edit-row[b-n2sog27h7q] {
    background: #FFFBEB;
}

.inline-input[b-n2sog27h7q] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    transition: border-color 0.15s ease;
}

.inline-input:focus[b-n2sog27h7q] {
    outline: none;
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.15);
}

.inline-input.unit[b-n2sog27h7q] { width: 70px; }
.inline-input.qty[b-n2sog27h7q] { width: 70px; text-align: right; }
.inline-input.price[b-n2sog27h7q] { width: 90px; text-align: right; }

.line-total[b-n2sog27h7q] {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.empty-group[b-n2sog27h7q] {
    padding: 24px;
    text-align: center;
    color: #9CA3AF;
    font-size: 13px;
}

/* Add line form */
.add-line-form[b-n2sog27h7q] {
    padding: 16px;
    background: #F9FAFB;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.form-row[b-n2sog27h7q] {
    display: grid;
    grid-template-columns: 1fr 80px 80px 100px 100px;
    gap: 8px;
    align-items: center;
}

.form-input[b-n2sog27h7q] {
    padding: 8px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 13px;
    background: white;
    transition: border-color 0.15s ease;
}

.form-input:focus[b-n2sog27h7q] {
    outline: none;
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.15);
}

.form-input.qty[b-n2sog27h7q],
.form-input.price[b-n2sog27h7q] {
    text-align: right;
}

.form-total[b-n2sog27h7q] {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.notes-input[b-n2sog27h7q] {
    width: 100%;
    margin-top: 8px;
}

.form-actions[b-n2sog27h7q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.form-actions-right[b-n2sog27h7q] {
    display: flex;
    gap: 8px;
}

.btn-text[b-n2sog27h7q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
}

.btn-text:hover[b-n2sog27h7q] {
    background: rgba(0, 0, 0, 0.04);
    color: #374151;
}

.btn-cancel[b-n2sog27h7q] {
    padding: 8px 16px;
    border: 1px solid #D1D5DB;
    background: white;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel:hover[b-n2sog27h7q] {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.btn-save[b-n2sog27h7q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: #00B7DD;
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-save:hover:not(:disabled)[b-n2sog27h7q] {
    background: #0099BB;
}

.btn-save:disabled[b-n2sog27h7q] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Add line actions */
.add-line-actions[b-n2sog27h7q] {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.add-line-btn[b-n2sog27h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 12px;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-line-btn:hover[b-n2sog27h7q] {
    color: #00B7DD;
    background: rgba(0, 183, 221, 0.04);
}

.import-catalog-btn[b-n2sog27h7q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.import-catalog-btn:hover[b-n2sog27h7q] {
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.04);
}

/* Mobile */
@media (max-width: 768px) {
    .cost-lines-table[b-n2sog27h7q] {
        font-size: 12px;
    }

    .cost-lines-table th[b-n2sog27h7q],
    .cost-lines-table td[b-n2sog27h7q] {
        padding: 8px;
    }

    .col-unit[b-n2sog27h7q] { display: none; }
    .unit-cell[b-n2sog27h7q] { display: none; }

    .form-row[b-n2sog27h7q] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .form-input.desc[b-n2sog27h7q] {
        grid-column: 1 / -1;
    }

    .form-total[b-n2sog27h7q] {
        grid-column: 1 / -1;
        text-align: left;
        padding: 4px 0;
    }
}
/* /Features/Calculations/Organisms/FinancialSummaryPanel/FinancialSummaryPanel.razor.rz.scp.css */
.financial-summary-panel[b-fr9ovahwql] {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
}

.summary-header h4[b-fr9ovahwql] {
    margin: 0 0 1rem 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
}

.summary-empty[b-fr9ovahwql] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2rem;
    color: #9CA3AF;
    font-size: 14px;
}

.summary-empty i[b-fr9ovahwql] {
    font-size: 24px;
}

/* Summary cards grid */
.summary-cards[b-fr9ovahwql] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}

.summary-card[b-fr9ovahwql] {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.summary-card.revenue[b-fr9ovahwql] {
    background: #F0FDF4;
    border-color: rgba(34, 197, 94, 0.15);
}

.summary-card.pre-calc[b-fr9ovahwql] {
    background: #EFF6FF;
    border-color: rgba(59, 130, 246, 0.15);
}

.summary-card.post-calc[b-fr9ovahwql] {
    background: #FFF7ED;
    border-color: rgba(249, 115, 22, 0.15);
}

.card-label[b-fr9ovahwql] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 6px;
}

.card-value[b-fr9ovahwql] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.no-data[b-fr9ovahwql] {
    font-size: 13px;
    font-weight: 400;
    color: #9CA3AF;
    font-style: italic;
}

.view-link[b-fr9ovahwql] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #6B7280;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

.view-link:hover[b-fr9ovahwql] {
    background: rgba(0, 183, 221, 0.1);
    color: #00B7DD;
}

/* Margin section */
.margin-section[b-fr9ovahwql] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.margin-row[b-fr9ovahwql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F9FAFB;
}

.margin-row.variance[b-fr9ovahwql] {
    background: #F3F4F6;
    margin-top: 4px;
}

.margin-label[b-fr9ovahwql] {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
}

.margin-value[b-fr9ovahwql] {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.margin-pct[b-fr9ovahwql] {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
}

.margin-good[b-fr9ovahwql] { color: #16A34A; }
.margin-ok[b-fr9ovahwql] { color: #D97706; }
.margin-low[b-fr9ovahwql] { color: #DC2626; }
.variance-under[b-fr9ovahwql] { color: #16A34A; }
.variance-over[b-fr9ovahwql] { color: #DC2626; }

/* Variance comparison table */
.variance-section[b-fr9ovahwql] {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.variance-title[b-fr9ovahwql] {
    margin: 0 0 0.75rem 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.variance-table[b-fr9ovahwql] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.variance-table th[b-fr9ovahwql] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    padding: 8px 12px;
    border-bottom: 2px solid #E5E7EB;
    text-align: left;
}

.variance-table td[b-fr9ovahwql] {
    padding: 8px 12px;
    border-bottom: 1px solid #F3F4F6;
    color: #374151;
}

.variance-table .num-col[b-fr9ovahwql] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.variance-table th.num-col[b-fr9ovahwql] {
    text-align: right;
}

.variance-table .total-row td[b-fr9ovahwql] {
    border-top: 2px solid #E5E7EB;
    border-bottom: none;
    padding-top: 10px;
}

.variance-table .variance-pct[b-fr9ovahwql] {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 4px;
}

.variance-table .variance-under[b-fr9ovahwql] { color: #16A34A; }
.variance-table .variance-over[b-fr9ovahwql] { color: #DC2626; }

/* Mobile */
@media (max-width: 768px) {
    .summary-cards[b-fr9ovahwql] {
        grid-template-columns: 1fr;
    }

    .card-value[b-fr9ovahwql] {
        font-size: 16px;
    }

    .financial-summary-panel[b-fr9ovahwql] {
        padding: 1rem;
        border-radius: 12px;
    }
}
/* /Features/CatalogItems/Molecules/CatalogItemCard/CatalogItemCard.razor.rz.scp.css */
/* Clean catalog item list design */

.catalog-item-container[b-4n0glrl856] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}

.catalog-item-container:hover[b-4n0glrl856] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07),
                0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

/* Left section with icon and content */
.catalog-item-left[b-4n0glrl856] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Icon styling */
.catalog-item-icon[b-4n0glrl856] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    color: #6B7280;
    font-size: 18px;
    flex-shrink: 0;
}

/* Content section */
.catalog-item-content[b-4n0glrl856] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

/* Title with code */
.catalog-item-title[b-4n0glrl856] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.catalog-item-code[b-4n0glrl856] {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    background: #F3F4F6;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Meta information */
.catalog-item-meta[b-4n0glrl856] {
    font-size: 14px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.catalog-item-category[b-4n0glrl856] {
    font-weight: 500;
    color: #374151;
}

.catalog-item-description[b-4n0glrl856] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

.separator[b-4n0glrl856] {
    color: #D1D5DB;
}

/* Right section */
.catalog-item-right[b-4n0glrl856] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Price styling */
.catalog-item-price[b-4n0glrl856] {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    min-width: 80px;
    text-align: right;
}

/* Action buttons */
.catalog-item-actions[b-4n0glrl856] {
    display: flex;
    gap: 4px;
}

.catalog-item-action[b-4n0glrl856] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.catalog-item-action:hover[b-4n0glrl856] {
    background: #F3F4F6;
    color: var(--primary);
}

.catalog-item-action--delete:hover[b-4n0glrl856] {
    background: #FEE2E2;
    color: #DC2626;
}

/* Responsive design */
@media (max-width: 768px) {
    .catalog-item-container[b-4n0glrl856] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .catalog-item-right[b-4n0glrl856] {
        width: 100%;
        justify-content: space-between;
    }
    
    .catalog-item-description[b-4n0glrl856] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .catalog-item-title[b-4n0glrl856] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .catalog-item-meta[b-4n0glrl856] {
        font-size: 13px;
    }
    
    .catalog-item-price[b-4n0glrl856] {
        font-size: 16px;
    }
}
/* /Features/CatalogItems/Molecules/DesktopControls/DesktopCatalogControls.razor.rz.scp.css */
/* Desktop Catalog Controls Styles */
.desktop-catalog-controls[b-ntwxo2q0cq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/* Top Toolbar */
.controls-toolbar[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface-color, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e1e5e9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Search Section */
.search-section[b-ntwxo2q0cq] {
    flex: 1;
    max-width: 500px;
}

.search-input-container[b-ntwxo2q0cq] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon[b-ntwxo2q0cq] {
    position: absolute;
    left: 16px;
    color: var(--text-secondary, #6b7280);
    font-size: 16px;
    z-index: 1;
}

.search-input[b-ntwxo2q0cq] {
    width: 100%;
    height: 44px;
    padding: 0 48px 0 48px;
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 8px;
    background: var(--input-background, #f9fafb);
    font-size: 15px;
    transition: all 0.2s ease;
}

.search-input:focus[b-ntwxo2q0cq] {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    background: var(--surface-color, #ffffff);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input[b-ntwxo2q0cq]::placeholder {
    color: var(--text-secondary, #9ca3af);
}

.clear-search-btn[b-ntwxo2q0cq] {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary, #6b7280);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.clear-search-btn:hover[b-ntwxo2q0cq] {
    background: var(--hover-background, #f3f4f6);
    color: var(--text-primary, #111827);
}

/* Action Section */
.action-section[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
}

.action-buttons[b-ntwxo2q0cq] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 8px;
    background: var(--surface-color, #ffffff);
    color: var(--text-primary, #111827);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.toolbar-btn:hover[b-ntwxo2q0cq] {
    background: var(--hover-background, #f9fafb);
    border-color: var(--border-hover, #d1d5db);
}

.toolbar-btn.has-filters[b-ntwxo2q0cq] {
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
    color: var(--primary-color, #3b82f6);
}

.filter-badge[b-ntwxo2q0cq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.dropdown-arrow[b-ntwxo2q0cq] {
    font-size: 12px;
    transition: transform 0.2s ease;
}

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

/* Active Filters Row */
.active-filters-row[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--accent-background, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--accent-border, #e2e8f0);
}

.filters-label[b-ntwxo2q0cq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.filter-chips[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 16px;
    font-size: 13px;
    max-width: 200px;
}

.chip-label[b-ntwxo2q0cq] {
    color: var(--text-secondary, #6b7280);
    font-weight: 500;
}

.chip-value[b-ntwxo2q0cq] {
    color: var(--text-primary, #111827);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: var(--text-secondary, #6b7280);
    border-radius: 2px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
}

.chip-remove:hover[b-ntwxo2q0cq] {
    background: var(--error-light, #fee2e2);
    color: var(--error-color, #dc2626);
}

.clear-all-btn[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--error-light, #fecaca);
    background: var(--error-background, #fef2f2);
    color: var(--error-color, #dc2626);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-all-btn:hover[b-ntwxo2q0cq] {
    background: var(--error-light, #fee2e2);
    border-color: var(--error-color, #dc2626);
}

/* Dropdown Overlay */
.dropdown-overlay[b-ntwxo2q0cq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 999;
}

/* Filter Dropdown */
.filter-dropdown[b-ntwxo2q0cq] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    margin-top: 8px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sort Dropdown */
.sort-dropdown[b-ntwxo2q0cq] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    margin-top: 8px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Dropdown Content */
.dropdown-content[b-ntwxo2q0cq] {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    flex: 1;
}

.dropdown-section[b-ntwxo2q0cq] {
    margin-bottom: 20px;
}

.dropdown-section:last-child[b-ntwxo2q0cq] {
    margin-bottom: 0;
}

.section-label[b-ntwxo2q0cq] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-options[b-ntwxo2q0cq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-option[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary, #111827);
}

.dropdown-option:hover[b-ntwxo2q0cq] {
    background: var(--hover-background, #f9fafb);
}

.dropdown-option.active[b-ntwxo2q0cq] {
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary-color, #3b82f6);
    font-weight: 500;
}

.check-icon[b-ntwxo2q0cq] {
    color: var(--primary-color, #3b82f6);
    font-size: 16px;
}

/* Sort Option Content */
.sort-option-content[b-ntwxo2q0cq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-direction-icon[b-ntwxo2q0cq] {
    font-size: 16px;
}

/* Loading State */
.loading-state[b-ntwxo2q0cq] {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .controls-toolbar[b-ntwxo2q0cq] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .search-section[b-ntwxo2q0cq] {
        max-width: none;
    }
    
    .action-section[b-ntwxo2q0cq] {
        justify-content: center;
    }
    
    .filter-dropdown[b-ntwxo2q0cq] {
        right: 0;
        left: 0;
        width: auto;
    }
    
    .sort-dropdown[b-ntwxo2q0cq] {
        right: 0;
        left: 0;
        width: auto;
    }
}
/* /Features/CatalogItems/Molecules/MobileControls/MobileCatalogControls.razor.rz.scp.css */
.mobile-catalog-controls[b-pidlbpwpbf] {
    margin-bottom: 24px;
}

/* Search Controls Bar */
.search-controls-bar[b-pidlbpwpbf] {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
}

.search-input-container[b-pidlbpwpbf] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    border: var(--border);
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease-in-out;
}

.search-input-container:focus-within[b-pidlbpwpbf] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.2);
}

.search-icon[b-pidlbpwpbf] {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--secondary-text);
    pointer-events: none;
    z-index: 1;
}

.search-input[b-pidlbpwpbf] {
    width: 100%;
    border: none;
    outline: none;
    padding: 14px 16px 14px 48px;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-text);
    background: transparent;
    border-radius: 15px;
}

.search-input[b-pidlbpwpbf]::placeholder {
    color: var(--secondary-text);
    font-weight: 400;
}

.clear-search-btn[b-pidlbpwpbf] {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
}

.clear-search-btn:hover[b-pidlbpwpbf] {
    background: var(--secondary-light);
    color: var(--primary-text);
}

.clear-search-btn svg[b-pidlbpwpbf] {
    width: 16px;
    height: 16px;
}

/* Action Buttons */
.action-buttons[b-pidlbpwpbf] {
    display: flex;
    gap: 8px;
}

.control-btn[b-pidlbpwpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: var(--border);
    background: var(--white);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}

.control-btn:hover[b-pidlbpwpbf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.control-btn:active[b-pidlbpwpbf] {
    transform: translateY(0);
}

.control-btn.has-filters[b-pidlbpwpbf] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

.control-btn.has-filters:hover[b-pidlbpwpbf] {
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.3);
}

.btn-icon[b-pidlbpwpbf] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-text[b-pidlbpwpbf] {
    font-size: 13px;
    font-weight: 600;
}

.filter-badge[b-pidlbpwpbf] {
    background: var(--white);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
    min-width: 16px;
    text-align: center;
}

/* Modal Overlay */
.modal-overlay[b-pidlbpwpbf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.modal-overlay.active[b-pidlbpwpbf] {
    opacity: 1;
    visibility: visible;
}

/* Filter Modal */
.filter-modal[b-pidlbpwpbf],
.sort-modal[b-pidlbpwpbf] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.filter-modal.active[b-pidlbpwpbf],
.sort-modal.active[b-pidlbpwpbf] {
    transform: translateY(0);
}

/* Modal Header */
.modal-header[b-pidlbpwpbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-light);
}

.modal-title[b-pidlbpwpbf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-text);
    margin: 0;
}

.close-btn[b-pidlbpwpbf] {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--secondary-light);
    color: var(--secondary-text);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in-out;
}

.close-btn:hover[b-pidlbpwpbf] {
    background: var(--secondary);
    color: var(--primary-text);
}

/* Modal Content */
.modal-content[b-pidlbpwpbf] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.filter-section[b-pidlbpwpbf],
.sort-section[b-pidlbpwpbf] {
    margin-bottom: 24px;
}

.filter-section:last-child[b-pidlbpwpbf],
.sort-section:last-child[b-pidlbpwpbf] {
    margin-bottom: 0;
}

.filter-label[b-pidlbpwpbf],
.sort-label[b-pidlbpwpbf] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 12px;
}

.filter-options[b-pidlbpwpbf],
.sort-options[b-pidlbpwpbf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-option[b-pidlbpwpbf],
.sort-option[b-pidlbpwpbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
    border: var(--border);
    background: var(--white);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-text);
    text-align: left;
}

.filter-option:hover[b-pidlbpwpbf],
.sort-option:hover[b-pidlbpwpbf] {
    background: var(--secondary-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-option.active[b-pidlbpwpbf],
.sort-option.active[b-pidlbpwpbf] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

.filter-option.active:hover[b-pidlbpwpbf],
.sort-option.active:hover[b-pidlbpwpbf] {
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.3);
}

.check-icon[b-pidlbpwpbf] {
    width: 20px;
    height: 20px;
    color: var(--white);
    flex-shrink: 0;
}

/* Sort Option Content */
.sort-option-content[b-pidlbpwpbf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-direction-icon[b-pidlbpwpbf] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Loading State */
.loading-state[b-pidlbpwpbf] {
    padding: 20px;
    text-align: center;
    color: var(--secondary-text);
    font-style: italic;
}

/* Modal Actions */
.modal-actions[b-pidlbpwpbf] {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-light);
    display: flex;
    gap: 12px;
}

.secondary-btn[b-pidlbpwpbf],
.primary-btn[b-pidlbpwpbf] {
    flex: 1;
    padding: 14px 24px;
    border: var(--border);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.secondary-btn[b-pidlbpwpbf] {
    background: var(--white);
    color: var(--primary-text);
}

.secondary-btn:hover[b-pidlbpwpbf] {
    background: var(--secondary-light);
    transform: translateY(-1px);
}

.primary-btn[b-pidlbpwpbf] {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.primary-btn:hover[b-pidlbpwpbf] {
    background: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.3);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .search-controls-bar[b-pidlbpwpbf] {
        flex-direction: column;
        gap: 12px;
    }
    
    .action-buttons[b-pidlbpwpbf] {
        justify-content: stretch;
    }
    
    .control-btn[b-pidlbpwpbf] {
        flex: 1;
        justify-content: center;
    }
}
/* /Features/CatalogItems/Molecules/Sorting/CatalogItemSorting.razor.rz.scp.css */
.catalog-item-sorting[b-n3shtzm328] {
    margin-bottom: 32px;
}

/* Desktop/Tablet View */
.desktop-view[b-n3shtzm328] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: var(--border);
}

.sort-field-group[b-n3shtzm328] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.sort-label[b-n3shtzm328] {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-text);
    white-space: nowrap;
}

.sort-field-options[b-n3shtzm328] {
    display: flex;
    gap: 4px;
    background: var(--secondary-light);
    padding: 4px;
    border-radius: 12px;
    flex-wrap: wrap;
}

.sort-option[b-n3shtzm328] {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text);
    transition: all 0.25s ease-in-out;
    white-space: nowrap;
    line-height: 1;
}

.sort-option:hover[b-n3shtzm328] {
    background: var(--white);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sort-option.active[b-n3shtzm328] {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.3);
}

.sort-option.active:hover[b-n3shtzm328] {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4);
}

.sort-direction-group[b-n3shtzm328] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.sort-direction-btn[b-n3shtzm328] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: var(--secondary-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-text);
}

.sort-direction-btn:hover[b-n3shtzm328] {
    background: var(--secondary);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sort-direction-btn.ascending[b-n3shtzm328] {
    background: var(--primary);
    color: var(--white);
}

.sort-direction-btn.ascending:hover[b-n3shtzm328] {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4);
}

.sort-direction-btn.descending[b-n3shtzm328] {
    background: var(--secondary);
    color: var(--white);
}

.sort-direction-btn.descending:hover[b-n3shtzm328] {
    background: var(--secondary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.sort-icon[b-n3shtzm328] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.direction-label[b-n3shtzm328] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mobile View */
.mobile-view[b-n3shtzm328] {
    display: none;
    position: relative;
}

.mobile-sort-trigger[b-n3shtzm328] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mobile-sort-trigger:hover[b-n3shtzm328] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mobile-sort-trigger.expanded[b-n3shtzm328] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.2);
    border-color: var(--primary);
}

.sort-trigger-icon[b-n3shtzm328] {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.sort-trigger-text[b-n3shtzm328] {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text);
    text-align: left;
}

.expand-icon[b-n3shtzm328] {
    width: 16px;
    height: 16px;
    color: var(--secondary-text);
    transition: transform 0.25s ease-in-out;
    flex-shrink: 0;
}

.expand-icon.rotated[b-n3shtzm328] {
    transform: rotate(180deg);
}

.mobile-sort-panel[b-n3shtzm328] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: var(--border);
    border-top: none;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease-in-out;
    z-index: 1000;
}

.mobile-sort-panel.expanded[b-n3shtzm328] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-sort-content[b-n3shtzm328] {
    padding: 20px;
}

.mobile-sort-section[b-n3shtzm328] {
    margin-bottom: 24px;
}

.mobile-sort-section:last-child[b-n3shtzm328] {
    margin-bottom: 0;
}

.mobile-sort-label[b-n3shtzm328] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 12px;
}

.mobile-sort-options[b-n3shtzm328],
.mobile-direction-options[b-n3shtzm328] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-sort-option[b-n3shtzm328],
.mobile-direction-option[b-n3shtzm328] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--secondary-light);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text);
}

.mobile-sort-option:hover[b-n3shtzm328],
.mobile-direction-option:hover[b-n3shtzm328] {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-sort-option.active[b-n3shtzm328],
.mobile-direction-option.active[b-n3shtzm328] {
    background: var(--primary);
    color: var(--white);
}

.mobile-sort-option.active:hover[b-n3shtzm328],
.mobile-direction-option.active:hover[b-n3shtzm328] {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4);
}

.mobile-direction-option[b-n3shtzm328] {
    gap: 12px;
}

.mobile-direction-option span[b-n3shtzm328] {
    flex: 1;
    text-align: left;
}

.direction-icon[b-n3shtzm328] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.check-icon[b-n3shtzm328] {
    width: 16px;
    height: 16px;
    color: var(--white);
    flex-shrink: 0;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .desktop-view[b-n3shtzm328] {
        display: none;
    }
    
    .mobile-view[b-n3shtzm328] {
        display: block;
    }
}

@media (min-width: 769px) {
    .desktop-view[b-n3shtzm328] {
        display: flex;
    }
    
    .mobile-view[b-n3shtzm328] {
        display: none;
    }
}
/* /Features/CatalogItems/Organisms/CatalogControls/CatalogControls.razor.rz.scp.css */
.catalog-controls[b-2dqwzbvfmx] {
    margin-bottom: 24px;
}

/* Desktop Controls - Show on 768px+ */
.desktop-controls[b-2dqwzbvfmx] {
    display: block;
}

/* Mobile Controls - Show below 768px */
.mobile-controls[b-2dqwzbvfmx] {
    display: none;
}

/* Responsive Breakpoints */
@media (max-width: 767px) {
    .desktop-controls[b-2dqwzbvfmx] {
        display: none;
    }
    
    .mobile-controls[b-2dqwzbvfmx] {
        display: block;
    }
}

@media (min-width: 768px) {
    .desktop-controls[b-2dqwzbvfmx] {
        display: block;
    }
    
    .mobile-controls[b-2dqwzbvfmx] {
        display: none;
    }
}
/* /Features/CatalogItems/Organisms/CatalogItemCardGrid/CatalogItemCardGrid.razor.rz.scp.css */
.catalog-item-card-grid[b-rxl7smqvfn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
}

.loading-indicator[b-rxl7smqvfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 50px 0;
}

.spinner[b-rxl7smqvfn] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left-color: var(--primary);
    animation: spin-b-rxl7smqvfn 1s ease infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-rxl7smqvfn {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-items[b-rxl7smqvfn] {
    text-align: center;
    padding: 40px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin: 20px 0;
    color: #6B7280;
    font-size: 16px;
}
/* /Features/CatalogItems/Organisms/Filters/Filters.razor.rz.scp.css */
.filters[b-tx87tjmkvw] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

@media only screen and (min-width: 1920px) {
    .filters[b-tx87tjmkvw] {
        flex-direction: row;
    }
}
/* /Features/Contacts/Molecules/ContactCard/ContactCard.razor.rz.scp.css */
.contact-card[b-yol3mn871d]{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 296px;
    min-height: 224px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 1);
}

.contact-card__header[b-yol3mn871d]{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    cursor: pointer;
}

.contact-card__pencil-icon[b-yol3mn871d]{
    padding-top: 16px;
    padding-right: 16px;
    color:var(--primary);
}

.contact-card__body[b-yol3mn871d]{
    padding-left: 16px;
}

.contact-card__footer[b-yol3mn871d]{
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    height: 100%;
    padding-left: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
}

@media only screen and (max-width: 480px) {
    .employee-card[b-yol3mn871d]{
        min-width: none;
        min-height: none;
    }
}
/* /Features/Contacts/Molecules/ContactDetailsRow/DetailRow.razor.rz.scp.css */
/* /Features/Contacts/Organisms/CategoryFilter/CategoryFilter.razor.rz.scp.css */
/* /Features/Contacts/Organisms/ContactCardGrid/ContactCardGrid.razor.rz.scp.css */
.contacts-grid[b-d0d5m3kt89]{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

@media only screen and (max-width: 480px) {
    .contacts-grid[b-d0d5m3kt89]{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 32px;
    }
}
/* /Features/Contacts/Organisms/ContactDetailsForm/ContactDetailsForm.razor.rz.scp.css */
.contact-form[b-45bdb87uur] {
    display: flex;
    flex-direction: column;
    padding: 0 32px 48px 48px;
    border: 1px solid rgb(229 229 229);
    border-radius: 20px;
    background-color: white;
    gap: 32px;
}

.contact-form__body[b-45bdb87uur] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.left-side[b-45bdb87uur], .right-side[b-45bdb87uur] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-right: 24px;
    padding-top: 32px;
}

.right-side[b-45bdb87uur] {
    padding-left: 24px;
    border-left: 1px solid rgb(229 229 229);
}

.contact-form__footer[b-45bdb87uur] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.additional-information[b-45bdb87uur]{
    display: none;
}
@media only screen and (max-width: 768px) {

    .contact-form__body[b-45bdb87uur]{
        grid-template-columns: 1fr;
    }

    .additional-information[b-45bdb87uur]{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 16px 8px 16px;
        background: var(--secondary);
        font-size: 16px;
        font-weight: 700;
    }

    .left-side[b-45bdb87uur], .right-side[b-45bdb87uur]{
        grid-template-columns: auto;
        gap: 12px;
        padding: 8px 16px 8px 16px;
        background: var(--secondary);
        border: none;
    }

    .contact-form__footer[b-45bdb87uur]{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
/* /Features/Contacts/Organisms/ContactForm/ContactForm.razor.rz.scp.css */
.contact-form[b-hwnz1tenjk] {
    display: flex;
    flex-direction: column;
    padding: 0 32px 48px 48px;
    border: 1px solid rgb(229 229 229);
    border-top: none;
    border-radius: 20px;
    background-color: white;
    gap: 32px;
}

.contact-form__body[b-hwnz1tenjk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-form_hide-left__body[b-hwnz1tenjk]
{
    grid-template-columns: 1fr;
}

.left-side[b-hwnz1tenjk], .right-side[b-hwnz1tenjk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-right: 24px;
    padding-top: 32px;
}

.right-side[b-hwnz1tenjk] {
    padding-left: 24px;
    border-left: 1px solid rgb(229 229 229);
}

.contact-form__footer[b-hwnz1tenjk] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.additional-information[b-hwnz1tenjk], .additional-information-hidden[b-hwnz1tenjk]{
    display: none;
}

.input-wrapper .form-input[b-hwnz1tenjk] {
    width: 100%;
    padding: 13px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}

.input-wrapper .form-input:focus[b-hwnz1tenjk] {
    outline: none;
    border: var(--border);
}

.overlay[b-hwnz1tenjk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 50;
    opacity: 1;
    pointer-events: auto;
}

.overlay.show[b-hwnz1tenjk] {
    display: block;
}

@media only screen and (max-width: 768px) {
    .input-wrapper[b-hwnz1tenjk] {
        display: flex;
    }

    .input-wrapper .form-input[b-hwnz1tenjk] {
        border-radius: 10px 0px 0px 10px;
        z-index: 100;
        flex: 1;
    }

    [b-hwnz1tenjk] .large-button {
        border-radius: 0px 10px 10px 0px;
        z-index: 100;
    }

    .btn-link-small[b-hwnz1tenjk] {
        grid-column: span 1;
    }

    .contact-form__body[b-hwnz1tenjk]{
        grid-template-columns: 1fr;
        padding-top:32px;
    }
    
    .additional-information[b-hwnz1tenjk]{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 16px 8px 16px;
        background: var(--secondary);
        font-size: 16px;
        font-weight: 700;
    }
    
    .left-side[b-hwnz1tenjk], .right-side[b-hwnz1tenjk]{
        grid-template-columns: auto;
        gap: 12px;
        padding: 8px 16px 8px 16px;
        background: var(--secondary);
        border: none;
    }

    .contact-form__footer[b-hwnz1tenjk]{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
/* /Features/Dashboard/Atoms/DataCard/Header/Header.razor.rz.scp.css */
.header[b-gw0e4v6wm7] {
  color: var(--primary-text);
  font-size: 16px;
  text-align: left;
  line-height: 24px;
}
/* /Features/Dashboard/Atoms/DataCard/Time/Time.razor.rz.scp.css */
.time[b-7p7nl4y6l4] {
  color: var(--secondary-text);
  font-size: 16px;
  text-align: right;
  line-height: 24px;
}
/* /Features/Dashboard/Atoms/DataCard/Value/Value.razor.rz.scp.css */
.value[b-f4p2df0d5q] {
  color: var(--primary);
  font-weight: bold;
  font-size: 68px;
  text-align: center;
  line-height: 72px;
}
/* /Features/Dashboard/Atoms/MessageCard/File/File.razor.rz.scp.css */
.bi-file-earmark-fill[b-r7hk5v65k5] {
  color: var(--primary-tex);
}
/* /Features/Dashboard/Atoms/MessageCard/Link/Link.razor.rz.scp.css */
.link[b-pbmw0y5dsl] {
  width: 34px;
  height: 24px;
  color: var(--primary);
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  line-height: 24px;
  cursor: pointer;
}
/* /Features/Dashboard/Atoms/MessageCard/Message/Message.razor.rz.scp.css */
.message[b-3vcigl47hx] {
  opacity: 1;
  color: var(--secondary-text);
  font-size: 16px;
  letter-spacing: 0px;
  text-align: left;
  line-height: 24px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Features/Dashboard/Atoms/MessageCard/Name/Name.razor.rz.scp.css */
.name[b-535adj3xp9] {
  width: 96px;
  height: 16px;
  opacity: 1;
  color: var(--secondary-text);
  font-size: 12px;
  letter-spacing: 0px;
  text-align: left;
  line-height: 16px;
}
/* /Features/Dashboard/Atoms/MessageCard/Title/Title.razor.rz.scp.css */
.title[b-atbvdpcrw2] {
  width: 55px;
  height: 24px;
  opacity: 1;
  color: var(--primary-text);
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0px;
  text-align: left;
  line-height: 24px;
}
/* /Features/Dashboard/Atoms/MessagesTitle/MessagesTitle.razor.rz.scp.css */
.messages-title[b-gehpoz2j6a] {
  opacity: 1;
  color: var(--primary-text);
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 0px;
  text-align: left;
  line-height: 48px;
}
/* /Features/Dashboard/Atoms/ProjectCard/Name/Name.razor.rz.scp.css */
.card-name[b-olh2bifz62] {
  padding: 0px 16px 0px 16px;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--primary);
  text-underline-offset: 6px;
}

.card-name h4[b-olh2bifz62] {
  max-width: 300px;
  margin-bottom: 0;
}

.card-name:hover[b-olh2bifz62] {
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .card-name h4[b-olh2bifz62] {
    max-width: 380px;
  }
}

@media only screen and (min-width: 1200px) {
  .card-name h4[b-olh2bifz62] {
    max-width: 380px;
  }
}

@media only screen and (min-width: 1920px) {
  .card-name h4[b-olh2bifz62] {
    max-width: 280px;
  }
}
/* /Features/Dashboard/Molecules/DataCard/DataCard.razor.rz.scp.css */
.data-card[b-4rm7poufqo] {
  position: relative;
  min-height: 176px;
  border-radius: 10px;
  opacity: 1;
  background-color: var(--secondary-light);
}

.header[b-4rm7poufqo] {
  margin-top: 8px;
  margin-left: 8px;
  display: flex;
  justify-content: flex-start;
}

.value[b-4rm7poufqo] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.time[b-4rm7poufqo] {
  position: absolute;
  bottom: 8px;
  right: 8px;
}
/* /Features/Dashboard/Molecules/MessageCardEmpty/MessageCardEmpty.razor.rz.scp.css */
.message-card-empty[b-8tvhzq3ag2] {
  width: 514px;
  height: 128px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
  -webkit-box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
  -moz-box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
  box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
}

.loading[b-8tvhzq3ag2] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1s loading-b-8tvhzq3ag2 linear infinite;
}

@keyframes loading-b-8tvhzq3ag2 {
  to {
    background-position-x: -200%;
  }
}

@media only screen and (max-width: 480px) {
  .message-card-empty[b-8tvhzq3ag2] {
    width: 100%;
    max-width: 90vw;
    height: auto;
  }
}
/* /Features/Dashboard/Molecules/MessageCard/MessageCard.razor.rz.scp.css */
.message-card[b-2a6g90c7gl] {
  max-width: 514px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 10px;
  border: 4px solid var(--white);
  opacity: 1;
  box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
  -webkit-box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
  -moz-box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
  box-shadow: 0px 0px 25px -11px rgba(0, 0, 0, 0.27) inset;
}

.card-header[b-2a6g90c7gl] {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.title[b-2a6g90c7gl] {
  display: flex;
  justify-content: start;
  margin-top: 4px;
}

.card-body[b-2a6g90c7gl] {
  display: flex;
  justify-content: flex-start;
  padding: 2px;
  max-width: 80%;
  margin-top: 8px;
}

.card-footer[b-2a6g90c7gl] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}

.files[b-2a6g90c7gl] {
  display: inline-block;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
  padding-top: 16px;
}

@media only screen and (max-width: 480px) {
  .message-card[b-2a6g90c7gl] {
    width: 100%;
    max-width: 90vw;
    height: auto;
  }
}

@media only screen and (min-width: 1920px) {
  .message-card[b-2a6g90c7gl] {
    min-width: 514px;
  }
}
/* /Features/Dashboard/Molecules/ProjectCard/ProjectCard.razor.rz.scp.css */
.project-card[b-2liqlaq62n] {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  min-width: 237px;
  background: var(--secondary);
  border-radius: 10px;
  flex-shrink: 0;
  border: 4px solid rgba(255, 255, 255, 1);
}

.head-wrapper[b-2liqlaq62n] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 56px;
}

.subheader-wrapper[b-2liqlaq62n] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.extra-work[b-2liqlaq62n] {
  color: #FF8500;
  padding: 4px 0px 0px 4px;
}

.project-category[b-2liqlaq62n] {
  padding: 4px;
  background-color: black;
  border-radius: 0 5px 0 5px;
  opacity: 0.8;
  color: white;
}

.project-name[b-2liqlaq62n],
.manager-name[b-2liqlaq62n] {
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-contacts[b-2liqlaq62n] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-right: 16px;
}

.body-wrapper[b-2liqlaq62n] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
  width: 100%;
}

.footer-wrapper[b-2liqlaq62n] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 64px;
  padding: 0 16px 16px 16px;
}
/* /Features/Dashboard/Organisms/DataGrid/DataGrid.razor.rz.scp.css */
.data-grid[b-72t06q1wls] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 24px;
}

@media only screen and (min-width: 768px) {
  .data-grid[b-72t06q1wls] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 16px;
  }
}
/* /Features/Dashboard/Organisms/MessagesGrid/MessagesGrid.razor.rz.scp.css */
.messages-grid[b-hev3al517w] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 24px;
  width: 100%;
  height: auto;
  opacity: 1;
}
/* /Features/Dashboard/Organisms/ProjectGrid/ProjectGrid.razor.rz.scp.css */
.project-grid[b-31sm5kpmgh] {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 32px;
}

@media only screen and (min-width: 768px) {
  .project-grid[b-31sm5kpmgh] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 1200px) {
  .project-grid[b-31sm5kpmgh] {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* /Features/PermissionManagement/Atoms/PermissionCheckbox/PermissionCheckbox.razor.rz.scp.css */
.permission-checkbox[b-y1qwvxljqv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.permission-checkbox input[type="checkbox"][b-y1qwvxljqv] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.permission-checkbox input[type="checkbox"]:disabled[b-y1qwvxljqv] {
    cursor: not-allowed;
    opacity: 0.6;
}

.permission-checkbox label[b-y1qwvxljqv] {
    position: absolute;
    top: -8px;
    right: -8px;
    pointer-events: none;
}

.new-badge[b-y1qwvxljqv] {
    background-color: #ff6b6b;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}
/* /Features/PermissionManagement/Organisms/PermissionMatrix/PermissionMatrix.razor.rz.scp.css */
.permission-matrix-container[b-nnt49jz71i] {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
}

.loading-overlay[b-nnt49jz71i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #6c757d;
}

.loading-overlay p[b-nnt49jz71i] {
    margin-top: 10px;
    font-size: 14px;
}

.matrix-stats[b-nnt49jz71i] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    flex-wrap: wrap;
}

.stat-item[b-nnt49jz71i] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
}

.stat-item i[b-nnt49jz71i] {
    font-size: 18px;
}

.stat-item.new[b-nnt49jz71i] {
    color: #dc3545;
}

.stat-item.pending[b-nnt49jz71i] {
    color: #0d6efd;
}

.matrix-table-wrapper[b-nnt49jz71i] {
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.permission-matrix-table[b-nnt49jz71i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.permission-matrix-table th[b-nnt49jz71i],
.permission-matrix-table td[b-nnt49jz71i] {
    padding: 12px 8px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.permission-header[b-nnt49jz71i] {
    background: #f8f9fa;
    position: sticky;
    left: 0;
    z-index: 10;
    min-width: 300px;
}

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

.header-content button[b-nnt49jz71i] {
    padding: 0;
    font-size: 16px;
    color: #6c757d;
}

.role-header[b-nnt49jz71i] {
    background: #f8f9fa;
    text-align: center;
    min-width: 80px;
}

.role-header-content[b-nnt49jz71i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.role-name[b-nnt49jz71i] {
    font-weight: bold;
    font-size: 16px;
}

.permission-count[b-nnt49jz71i] {
    font-size: 12px;
    color: #6c757d;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 10px;
}

.category-row td[b-nnt49jz71i] {
    background: #e9ecef;
    font-weight: bold;
    color: #495057;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.category-header i[b-nnt49jz71i] {
    margin-right: 8px;
}

.permission-name[b-nnt49jz71i] {
    position: sticky;
    left: 0;
    background: white;
    z-index: 5;
}

.permission-info[b-nnt49jz71i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.permission-label[b-nnt49jz71i] {
    font-weight: 500;
    color: #212529;
    font-family: 'Courier New', monospace;
}

.permission-description[b-nnt49jz71i] {
    font-size: 12px;
    color: #6c757d;
}

.permission-cell[b-nnt49jz71i] {
    text-align: center;
    transition: background-color 0.2s;
}

.permission-cell.pending[b-nnt49jz71i] {
    background-color: #e7f3ff;
}

.new-permission-row[b-nnt49jz71i] {
    background-color: #fff5f5;
}

.new-permission-row:hover[b-nnt49jz71i] {
    background-color: #ffe5e5;
}

.matrix-actions[b-nnt49jz71i] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

.matrix-actions button[b-nnt49jz71i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .matrix-stats[b-nnt49jz71i] {
        flex-direction: column;
        gap: 10px;
    }
    
    .permission-header[b-nnt49jz71i],
    .permission-name[b-nnt49jz71i] {
        min-width: 200px;
    }
    
    .role-header[b-nnt49jz71i] {
        min-width: 60px;
    }
    
    .role-name[b-nnt49jz71i] {
        font-size: 14px;
    }
}
/* /Features/Projects/Molecules/DesktopControls/DesktopProjectControls.razor.rz.scp.css */
/* Desktop Project Controls Styles */
.desktop-project-controls[b-kort4it4cv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/* Top Toolbar */
.controls-toolbar[b-kort4it4cv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface-color, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e1e5e9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Search Section */
.search-section[b-kort4it4cv] {
    flex: 1;
    max-width: 500px;
}

.search-input-container[b-kort4it4cv] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon[b-kort4it4cv] {
    position: absolute;
    left: 16px;
    color: var(--text-secondary, #6b7280);
    font-size: 16px;
    z-index: 1;
}

.search-input[b-kort4it4cv] {
    width: 100%;
    height: 44px;
    padding: 0 48px 0 48px;
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 8px;
    background: var(--input-background, #f9fafb);
    font-size: 15px;
    transition: all 0.2s ease;
}

.search-input:focus[b-kort4it4cv] {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    background: var(--surface-color, #ffffff);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-input[b-kort4it4cv]::placeholder {
    color: var(--text-secondary, #9ca3af);
}

.clear-search-btn[b-kort4it4cv] {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary, #6b7280);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.clear-search-btn:hover[b-kort4it4cv] {
    background: var(--hover-background, #f3f4f6);
    color: var(--text-primary, #111827);
}

/* Action Section */
.action-section[b-kort4it4cv] {
    display: flex;
    align-items: center;
}

.action-buttons[b-kort4it4cv] {
    display: flex;
    gap: 8px;
}

.toolbar-btn[b-kort4it4cv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 8px;
    background: var(--surface-color, #ffffff);
    color: var(--text-primary, #111827);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.toolbar-btn:hover[b-kort4it4cv] {
    background: var(--hover-background, #f9fafb);
    border-color: var(--border-hover, #d1d5db);
}

.toolbar-btn.has-filters[b-kort4it4cv] {
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
    color: var(--primary-color, #3b82f6);
}

.filter-badge[b-kort4it4cv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.dropdown-arrow[b-kort4it4cv] {
    font-size: 12px;
    transition: transform 0.2s ease;
}

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

/* Active Filters Row */
.active-filters-row[b-kort4it4cv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--accent-background, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--accent-border, #e2e8f0);
}

.filters-label[b-kort4it4cv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.filter-chips[b-kort4it4cv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip[b-kort4it4cv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 16px;
    font-size: 13px;
    max-width: 200px;
}

.chip-label[b-kort4it4cv] {
    color: var(--text-secondary, #6b7280);
    font-weight: 500;
}

.chip-value[b-kort4it4cv] {
    color: var(--text-primary, #111827);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove[b-kort4it4cv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: var(--text-secondary, #6b7280);
    border-radius: 2px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
}

.chip-remove:hover[b-kort4it4cv] {
    background: var(--error-light, #fee2e2);
    color: var(--error-color, #dc2626);
}

.clear-all-btn[b-kort4it4cv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--error-light, #fecaca);
    background: var(--error-background, #fef2f2);
    color: var(--error-color, #dc2626);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-all-btn:hover[b-kort4it4cv] {
    background: var(--error-light, #fee2e2);
    border-color: var(--error-color, #dc2626);
}

/* Dropdown Overlay */
.dropdown-overlay[b-kort4it4cv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 999;
}

/* Filter Dropdown */
.filter-dropdown[b-kort4it4cv] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    margin-top: 8px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sort Dropdown */
.sort-dropdown[b-kort4it4cv] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    margin-top: 8px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Dropdown Content */
.dropdown-content[b-kort4it4cv] {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    flex: 1;
}

.dropdown-section[b-kort4it4cv] {
    margin-bottom: 20px;
}

.dropdown-section:last-child[b-kort4it4cv] {
    margin-bottom: 0;
}

.section-label[b-kort4it4cv] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-options[b-kort4it4cv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-option[b-kort4it4cv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary, #111827);
}

.dropdown-option:hover[b-kort4it4cv] {
    background: var(--hover-background, #f9fafb);
}

.dropdown-option.active[b-kort4it4cv] {
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary-color, #3b82f6);
    font-weight: 500;
}

.check-icon[b-kort4it4cv] {
    color: var(--primary-color, #3b82f6);
    font-size: 16px;
}

/* Status Options */
.status-options[b-kort4it4cv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.status-option[b-kort4it4cv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.status-option:hover[b-kort4it4cv] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-check-icon[b-kort4it4cv] {
    font-size: 14px;
}

/* Sort Option Content */
.sort-option-content[b-kort4it4cv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-direction-icon[b-kort4it4cv] {
    font-size: 16px;
}

/* Loading State */
.loading-state[b-kort4it4cv] {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

/* Dropdown Actions */
.dropdown-actions[b-kort4it4cv] {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--border-color, #e1e5e9);
    background: var(--surface-secondary, #f9fafb);
}

.secondary-btn[b-kort4it4cv], .primary-btn[b-kort4it4cv] {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-btn[b-kort4it4cv] {
    background: var(--surface-color, #ffffff);
    color: var(--text-primary, #111827);
}

.secondary-btn:hover[b-kort4it4cv] {
    background: var(--hover-background, #f3f4f6);
}

.primary-btn[b-kort4it4cv] {
    background: var(--primary-color, #3b82f6);
    color: white;
    border-color: var(--primary-color, #3b82f6);
}

.primary-btn:hover[b-kort4it4cv] {
    background: var(--primary-hover, #2563eb);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .controls-toolbar[b-kort4it4cv] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .search-section[b-kort4it4cv] {
        max-width: none;
    }
    
    .action-section[b-kort4it4cv] {
        justify-content: center;
    }
    
    .filter-dropdown[b-kort4it4cv] {
        right: 0;
        left: 0;
        width: auto;
    }
    
    .sort-dropdown[b-kort4it4cv] {
        right: 0;
        left: 0;
        width: auto;
    }
}
/* /Features/Projects/Molecules/MobileControls/MobileProjectControls.razor.rz.scp.css */
.mobile-project-controls[b-skn7mqkolw] {
    margin-bottom: 24px;
}

/* Search Controls Bar */
.search-controls-bar[b-skn7mqkolw] {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 16px;
}

.search-input-container[b-skn7mqkolw] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    border: var(--border);
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease-in-out;
}

.search-input-container:focus-within[b-skn7mqkolw] {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.2);
}

.search-icon[b-skn7mqkolw] {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--secondary-text);
    pointer-events: none;
    z-index: 1;
}

.search-input[b-skn7mqkolw] {
    width: 100%;
    border: none;
    outline: none;
    padding: 14px 16px 14px 48px;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-text);
    background: transparent;
    border-radius: 15px;
}

.search-input[b-skn7mqkolw]::placeholder {
    color: var(--secondary-text);
    font-weight: 400;
}

.clear-search-btn[b-skn7mqkolw] {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
}

.clear-search-btn:hover[b-skn7mqkolw] {
    background: var(--secondary-light);
    color: var(--primary-text);
}

.clear-search-btn svg[b-skn7mqkolw] {
    width: 16px;
    height: 16px;
}

/* Action Buttons */
.action-buttons[b-skn7mqkolw] {
    display: flex;
    gap: 8px;
}

.control-btn[b-skn7mqkolw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: var(--border);
    background: var(--white);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}

.control-btn:hover[b-skn7mqkolw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.control-btn:active[b-skn7mqkolw] {
    transform: translateY(0);
}

.control-btn.has-filters[b-skn7mqkolw] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--white);
}

.control-btn.has-filters:hover[b-skn7mqkolw] {
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.3);
}

.btn-icon[b-skn7mqkolw] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-text[b-skn7mqkolw] {
    font-size: 13px;
    font-weight: 600;
}

.filter-badge[b-skn7mqkolw] {
    background: var(--white);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
    min-width: 16px;
    text-align: center;
}

/* Modal Overlay */
.modal-overlay[b-skn7mqkolw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.modal-overlay.active[b-skn7mqkolw] {
    opacity: 1;
    visibility: visible;
}

/* Filter Modal */
.filter-modal[b-skn7mqkolw], .sort-modal[b-skn7mqkolw] {
    background: var(--white);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
}

.filter-modal.active[b-skn7mqkolw], .sort-modal.active[b-skn7mqkolw] {
    transform: translateY(0);
}

.modal-header[b-skn7mqkolw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid var(--secondary-light);
    flex-shrink: 0;
}

.modal-title[b-skn7mqkolw] {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-text);
    margin: 0;
}

.close-btn[b-skn7mqkolw] {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--secondary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    color: var(--secondary-text);
}

.close-btn:hover[b-skn7mqkolw] {
    background: var(--secondary);
    color: var(--primary-text);
    transform: scale(1.1);
}

.close-btn svg[b-skn7mqkolw] {
    width: 16px;
    height: 16px;
}

.modal-content[b-skn7mqkolw] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

/* Filter Sections */
.filter-section[b-skn7mqkolw] {
    margin-bottom: 32px;
}

.filter-section:last-child[b-skn7mqkolw] {
    margin-bottom: 0;
}

.filter-label[b-skn7mqkolw] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 12px;
}

.filter-options[b-skn7mqkolw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-option[b-skn7mqkolw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--secondary-light);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-text);
    text-align: left;
}

.filter-option:hover[b-skn7mqkolw] {
    background: var(--secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-option.active[b-skn7mqkolw] {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.filter-option.active:hover[b-skn7mqkolw] {
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.3);
}

.check-icon[b-skn7mqkolw] {
    width: 16px;
    height: 16px;
    color: var(--white);
    flex-shrink: 0;
}

/* Sort Option Content */
.sort-option-content[b-skn7mqkolw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-direction-icon[b-skn7mqkolw] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Status Filter Grid */
.status-filter-grid[b-skn7mqkolw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.status-filter-chip[b-skn7mqkolw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 2px solid;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.status-filter-chip:hover[b-skn7mqkolw] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-filter-chip.selected[b-skn7mqkolw] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.status-check-icon[b-skn7mqkolw] {
    width: 14px;
    height: 14px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Loading State */
.loading-state[b-skn7mqkolw] {
    padding: 16px 20px;
    text-align: center;
    color: var(--secondary-text);
    font-size: 14px;
    background: var(--secondary-light);
    border-radius: 12px;
}

/* Modal Actions */
.modal-actions[b-skn7mqkolw] {
    padding: 16px 24px 24px 24px;
    border-top: 1px solid var(--secondary-light);
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.primary-btn[b-skn7mqkolw], .secondary-btn[b-skn7mqkolw] {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    border: none;
    text-align: center;
}

.primary-btn[b-skn7mqkolw] {
    background: var(--primary);
    color: var(--white);
}

.primary-btn:hover[b-skn7mqkolw] {
    background: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.3);
}

.secondary-btn[b-skn7mqkolw] {
    background: var(--secondary-light);
    color: var(--secondary-text);
}

.secondary-btn:hover[b-skn7mqkolw] {
    background: var(--secondary);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.full-width[b-skn7mqkolw] {
    flex: 1;
}
/* Dropdown Content */
.dropdown-content[b-skn7mqkolw] {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    flex: 1;
}

.dropdown-section[b-skn7mqkolw] {
    margin-bottom: 20px;
}

.dropdown-section:last-child[b-skn7mqkolw] {
    margin-bottom: 0;
}

.section-label[b-skn7mqkolw] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-options[b-skn7mqkolw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-option[b-skn7mqkolw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary, #111827);
}

.dropdown-option:hover[b-skn7mqkolw] {
    background: var(--hover-background, #f9fafb);
}

.dropdown-option.active[b-skn7mqkolw] {
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary-color, #3b82f6);
    font-weight: 500;
}

.check-icon[b-skn7mqkolw] {
    color: var(--primary-color, #3b82f6);
    font-size: 16px;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .mobile-project-controls[b-skn7mqkolw] {
        display: none;
    }
}

@media (max-width: 480px) {
    .search-controls-bar[b-skn7mqkolw] {
        flex-direction: column;
    }
    
    .action-buttons[b-skn7mqkolw] {
        justify-content: stretch;
    }
    
    .control-btn[b-skn7mqkolw] {
        flex: 1;
        justify-content: center;
    }
    
    .btn-text[b-skn7mqkolw] {
        display: none;
    }
    
    .status-filter-grid[b-skn7mqkolw] {
        grid-template-columns: 1fr;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-skn7mqkolw] {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus styles for accessibility */
.search-input:focus[b-skn7mqkolw],
.control-btn:focus[b-skn7mqkolw],
.filter-option:focus[b-skn7mqkolw],
.status-filter-chip:focus[b-skn7mqkolw],
.primary-btn:focus[b-skn7mqkolw],
.secondary-btn:focus[b-skn7mqkolw] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* /Features/Projects/Molecules/ProjectCardEmpty/ProjectCardEmpty.razor.rz.scp.css */
.project-card-empty[b-8vod4acx0s] {
    width: 100%;
    height: 224px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
    
}

.loading[b-8vod4acx0s] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1s loading-b-8vod4acx0s linear infinite;
}

@keyframes loading-b-8vod4acx0s {
    to {
        background-position-x: -200%;
    }
}
/* /Features/Projects/Molecules/ProjectCard/ProjectCard.razor.rz.scp.css */
.project-card[b-14kpinlg7c] {
  display: flex;
  flex-direction: column;
  background: var(--secondary);
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: end;
  /* Mobile touch optimizations */
  -webkit-tap-highlight-color: rgba(0, 183, 221, 0.2);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Add cursor pointer and touch feedback to clickable name area */
.project-card > div:nth-child(2)[b-14kpinlg7c] {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.project-card > div:nth-child(2):active[b-14kpinlg7c] {
  opacity: 0.7;
}

.subheader-wrapper[b-14kpinlg7c] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.extra-work[b-14kpinlg7c] {
  color: #FF8500;
  padding: 4px 0px 0px 4px;
}

.project-category[b-14kpinlg7c] {
  padding: 4px;
  background-color: black;
  border-radius: 0 5px 0 5px;
  opacity: 0.8;
  color: white;
}

.body-wrapper[b-14kpinlg7c] {
  display: flex;
  margin: 0px 16px 24px 16px;
  justify-content: space-between;
}

.address-wrapper[b-14kpinlg7c] {
  margin: 0px 0px 16px 0px;
}

.roles-wrapper[b-14kpinlg7c] {
  display: flex;
  gap: 12px;
}

.dates-wrapper[b-14kpinlg7c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

.actions-wrapper[b-14kpinlg7c] {
  display: flex;
  justify-content: space-between;
  margin: 0px 16px 16px 16px;
}
/* /Features/Projects/Molecules/Sorting/ProjectSorting.razor.rz.scp.css */
.project-sorting[b-c56o6x8jqn] {
    margin-bottom: 32px;
}

/* Desktop/Tablet View */
.desktop-view[b-c56o6x8jqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: var(--border);
}

.sort-field-group[b-c56o6x8jqn] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.sort-label[b-c56o6x8jqn] {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-text);
    white-space: nowrap;
}

.sort-field-options[b-c56o6x8jqn] {
    display: flex;
    gap: 4px;
    background: var(--secondary-light);
    padding: 4px;
    border-radius: 12px;
    flex-wrap: wrap;
}

.sort-option[b-c56o6x8jqn] {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text);
    transition: all 0.25s ease-in-out;
    white-space: nowrap;
    line-height: 1;
}

.sort-option:hover[b-c56o6x8jqn] {
    background: var(--white);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sort-option.active[b-c56o6x8jqn] {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.3);
}

.sort-option.active:hover[b-c56o6x8jqn] {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4);
}

.sort-direction-group[b-c56o6x8jqn] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.sort-direction-btn[b-c56o6x8jqn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: var(--secondary-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-text);
}

.sort-direction-btn:hover[b-c56o6x8jqn] {
    background: var(--secondary);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sort-direction-btn.ascending[b-c56o6x8jqn] {
    background: var(--primary);
    color: var(--white);
}

.sort-direction-btn.ascending:hover[b-c56o6x8jqn] {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4);
}

.sort-direction-btn.descending[b-c56o6x8jqn] {
    background: var(--secondary);
    color: var(--white);
}

.sort-direction-btn.descending:hover[b-c56o6x8jqn] {
    background: var(--secondary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.sort-icon[b-c56o6x8jqn] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.direction-label[b-c56o6x8jqn] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mobile View */
.mobile-view[b-c56o6x8jqn] {
    display: none;
    position: relative;
}

.mobile-sort-trigger[b-c56o6x8jqn] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mobile-sort-trigger:hover[b-c56o6x8jqn] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mobile-sort-trigger.expanded[b-c56o6x8jqn] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.2);
    border-color: var(--primary);
}

.sort-trigger-icon[b-c56o6x8jqn] {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.sort-trigger-text[b-c56o6x8jqn] {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text);
    text-align: left;
}

.expand-icon[b-c56o6x8jqn] {
    width: 16px;
    height: 16px;
    color: var(--secondary-text);
    transition: transform 0.25s ease-in-out;
    flex-shrink: 0;
}

.expand-icon.rotated[b-c56o6x8jqn] {
    transform: rotate(180deg);
}

.mobile-sort-panel[b-c56o6x8jqn] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: var(--border);
    border-top: none;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease-in-out;
    z-index: 1000;
}

.mobile-sort-panel.expanded[b-c56o6x8jqn] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-sort-content[b-c56o6x8jqn] {
    padding: 20px;
}

.mobile-sort-section[b-c56o6x8jqn] {
    margin-bottom: 24px;
}

.mobile-sort-section:last-child[b-c56o6x8jqn] {
    margin-bottom: 0;
}

.mobile-sort-label[b-c56o6x8jqn] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 12px;
}

.mobile-sort-options[b-c56o6x8jqn],
.mobile-direction-options[b-c56o6x8jqn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-sort-option[b-c56o6x8jqn],
.mobile-direction-option[b-c56o6x8jqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--secondary-light);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text);
}

.mobile-sort-option:hover[b-c56o6x8jqn],
.mobile-direction-option:hover[b-c56o6x8jqn] {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mobile-sort-option.active[b-c56o6x8jqn],
.mobile-direction-option.active[b-c56o6x8jqn] {
    background: var(--primary);
    color: var(--white);
}

.mobile-sort-option.active:hover[b-c56o6x8jqn],
.mobile-direction-option.active:hover[b-c56o6x8jqn] {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4);
}

.mobile-direction-option[b-c56o6x8jqn] {
    gap: 12px;
}

.mobile-direction-option span[b-c56o6x8jqn] {
    flex: 1;
    text-align: left;
}

.direction-icon[b-c56o6x8jqn] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.check-icon[b-c56o6x8jqn] {
    width: 16px;
    height: 16px;
    color: var(--white);
    flex-shrink: 0;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .desktop-view[b-c56o6x8jqn] {
        display: none;
    }
    
    .mobile-view[b-c56o6x8jqn] {
        display: block;
    }
}

@media (min-width: 769px) {
    .desktop-view[b-c56o6x8jqn] {
        display: flex;
    }
    
    .mobile-view[b-c56o6x8jqn] {
        display: none;
    }
}
/* /Features/Projects/Molecules/Statuses/Statuses.razor.rz.scp.css */
.statuses[b-4z8fbfh4ti] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 8px 12px 8px;
    background-color: var(--white);
    margin-bottom: 48px;
    border-radius: 15px;
}

.status-option[b-4z8fbfh4ti] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
    background: var(--secondary-light);
    border-radius: 10px;
    font-weight: bold;
    padding: 16px;
}

.status-option span[b-4z8fbfh4ti] {
    text-align: center;
}

.status-option:hover[b-4z8fbfh4ti] {
    background-color: var(--secondary);
}

@media only screen and (min-width: 1920px) {
    .statuses[b-4z8fbfh4ti] {
        margin-bottom: 60px;
    }
}
/* /Features/Projects/Organisms/Filters/Filters.razor.rz.scp.css */
.filters[b-3fcvecr8cb] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

@media only screen and (min-width: 1920px) {
    .filters[b-3fcvecr8cb] {
        flex-direction: row;
    }
}
/* /Features/Projects/Organisms/ProjectCardGrid/ProjectCardGrid.razor.rz.scp.css */
.project-card-grid[b-9kh50jefx1] {
  display: grid;
  grid-gap: 32px;
  grid-template-columns: repeat(1, 1fr);
}

@media only screen and (min-width: 768px) {
  .project-card-grid[b-9kh50jefx1] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 1440px) {
  .project-card-grid[b-9kh50jefx1] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 1920px) {
  .project-card-grid[b-9kh50jefx1] {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* /Features/Projects/Organisms/ProjectControls/ProjectControls.razor.rz.scp.css */
.project-controls[b-u6ytln6a0r] {
    margin-bottom: 24px;
}

/* Desktop Controls - Show on 768px+ */
.desktop-controls[b-u6ytln6a0r] {
    display: block;
}

/* Mobile Controls - Show below 768px */
.mobile-controls[b-u6ytln6a0r] {
    display: none;
}

/* Responsive Breakpoints */
@media (max-width: 767px) {
    .desktop-controls[b-u6ytln6a0r] {
        display: none;
    }
    
    .mobile-controls[b-u6ytln6a0r] {
        display: block;
    }
}

@media (min-width: 768px) {
    .desktop-controls[b-u6ytln6a0r] {
        display: block;
    }
    
    .mobile-controls[b-u6ytln6a0r] {
        display: none;
    }
}
/* /Features/Quotes/Atoms/ConfidenceScore/ConfidenceScore.razor.rz.scp.css */
.confidence-score[b-w2ipm4qm0t] {
    display: inline-block;
    position: relative;
}

.score-circle[b-w2ipm4qm0t] {
    position: relative;
    width: 80px;
    height: 80px;
}

.circular-chart[b-w2ipm4qm0t] {
    display: block;
    width: 100%;
    height: 100%;
}

.circle-bg[b-w2ipm4qm0t] {
    stroke: #e5e7eb;
}

.circle[b-w2ipm4qm0t] {
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
}

.score-content[b-w2ipm4qm0t] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-value[b-w2ipm4qm0t] {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.score-label[b-w2ipm4qm0t] {
    font-size: 0.625rem;
    font-weight: 500;
    margin-top: 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Color coding based on confidence level */
.confidence-veryhigh .circle[b-w2ipm4qm0t] {
    stroke: #10b981;
}

.confidence-veryhigh .score-value[b-w2ipm4qm0t],
.confidence-veryhigh .score-label[b-w2ipm4qm0t] {
    color: #10b981;
}

.confidence-high .circle[b-w2ipm4qm0t] {
    stroke: #3b82f6;
}

.confidence-high .score-value[b-w2ipm4qm0t],
.confidence-high .score-label[b-w2ipm4qm0t] {
    color: #3b82f6;
}

.confidence-medium .circle[b-w2ipm4qm0t] {
    stroke: #f59e0b;
}

.confidence-medium .score-value[b-w2ipm4qm0t],
.confidence-medium .score-label[b-w2ipm4qm0t] {
    color: #f59e0b;
}

.confidence-low .circle[b-w2ipm4qm0t] {
    stroke: #ef4444;
}

.confidence-low .score-value[b-w2ipm4qm0t],
.confidence-low .score-label[b-w2ipm4qm0t] {
    color: #ef4444;
}

/* Smaller variant */
.confidence-score.small .score-circle[b-w2ipm4qm0t] {
    width: 50px;
    height: 50px;
}

.confidence-score.small .score-value[b-w2ipm4qm0t] {
    font-size: 0.875rem;
}

.confidence-score.small .score-label[b-w2ipm4qm0t] {
    font-size: 0.5rem;
}
/* /Features/Quotes/Atoms/FieldConfidenceIndicator/FieldConfidenceIndicator.razor.rz.scp.css */
.field-confidence[b-ioi2rjl1cn] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    cursor: help;
}

.field-confidence i[b-ioi2rjl1cn] {
    font-size: 0.875rem;
}

.confidence-percentage[b-ioi2rjl1cn] {
    font-size: 0.75rem;
    font-weight: 500;
}

/* High confidence - Green */
.field-confidence-high[b-ioi2rjl1cn] {
    color: #10b981;
}

.field-confidence-high:hover[b-ioi2rjl1cn] {
    color: #059669;
}

/* Medium confidence - Orange */
.field-confidence-medium[b-ioi2rjl1cn] {
    color: #f59e0b;
}

.field-confidence-medium:hover[b-ioi2rjl1cn] {
    color: #d97706;
}

/* Low confidence - Red/Orange */
.field-confidence-low[b-ioi2rjl1cn] {
    color: #f97316;
}

.field-confidence-low:hover[b-ioi2rjl1cn] {
    color: #ea580c;
}

/* Very low confidence - Red */
.field-confidence-very-low[b-ioi2rjl1cn] {
    color: #ef4444;
}

.field-confidence-very-low:hover[b-ioi2rjl1cn] {
    color: #dc2626;
}

/* Unknown */
.field-confidence-unknown[b-ioi2rjl1cn] {
    color: #9ca3af;
}

/* Pulse animation for very low confidence */
.field-confidence-very-low i[b-ioi2rjl1cn] {
    animation: pulse-warning-b-ioi2rjl1cn 2s ease-in-out infinite;
}

@keyframes pulse-warning-b-ioi2rjl1cn {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Inline variant (even smaller) */
.field-confidence.inline[b-ioi2rjl1cn] {
    font-size: 0.75rem;
}

.field-confidence.inline i[b-ioi2rjl1cn] {
    font-size: 0.75rem;
}

.field-confidence.inline .confidence-percentage[b-ioi2rjl1cn] {
    font-size: 0.625rem;
}
/* /Features/Quotes/Atoms/FileTypeIcon/FileTypeIcon.razor.rz.scp.css */
.file-type-icon[b-iqqad3zuf2] {
    font-size: 1.5rem;
}
/* /Features/Quotes/Atoms/ImportStatus/ImportStatus.razor.rz.scp.css */
.import-status[b-c4v5t3bw2z] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.import-status i[b-c4v5t3bw2z] {
    font-size: 1rem;
}

.status-pending[b-c4v5t3bw2z] {
    background-color: #e0e7ff;
    color: #3730a3;
}

.status-processing[b-c4v5t3bw2z] {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-processing .spin[b-c4v5t3bw2z] {
    animation: spin-b-c4v5t3bw2z 1s linear infinite;
}

@keyframes spin-b-c4v5t3bw2z {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.status-completed[b-c4v5t3bw2z] {
    background-color: #d1fae5;
    color: #065f46;
}

.status-warning[b-c4v5t3bw2z] {
    background-color: #fef3c7;
    color: #92400e;
}

.status-failed[b-c4v5t3bw2z] {
    background-color: #fee2e2;
    color: #991b1b;
}
/* /Features/Quotes/Atoms/ParseMethodBadge/ParseMethodBadge.razor.rz.scp.css */
.parse-method-badge[b-rcbd7thng9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.parse-method-badge i[b-rcbd7thng9] {
    font-size: 1rem;
}

.method-text[b-rcbd7thng9] {
    font-weight: 600;
}

.ai-service-tag[b-rcbd7thng9] {
    margin-left: 0.25rem;
    padding: 0.125rem 0.375rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Traditional parser - Gray */
.parse-method-traditional[b-rcbd7thng9] {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* AI parser - Blue/Purple gradient */
.parse-method-ai[b-rcbd7thng9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.parse-method-ai i[b-rcbd7thng9] {
    animation: pulse-b-rcbd7thng9 2s ease-in-out infinite;
}

@keyframes pulse-b-rcbd7thng9 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Hybrid parser - Orange/Yellow gradient */
.parse-method-hybrid[b-rcbd7thng9] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.parse-method-hybrid i[b-rcbd7thng9] {
    animation: lightning-b-rcbd7thng9 1.5s ease-in-out infinite;
}

@keyframes lightning-b-rcbd7thng9 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Enhanced parser - Green */
.parse-method-enhanced[b-rcbd7thng9] {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

/* Small variant */
.parse-method-badge.small[b-rcbd7thng9] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

.parse-method-badge.small i[b-rcbd7thng9] {
    font-size: 0.875rem;
}

.parse-method-badge.small .ai-service-tag[b-rcbd7thng9] {
    padding: 0.0625rem 0.25rem;
    font-size: 0.625rem;
}
/* /Features/Quotes/Atoms/Status/Status.razor.rz.scp.css */
.quote-status[b-ce1n1rwghx] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-draft[b-ce1n1rwghx] {
    background-color: #e2e8f0;
    color: #475569;
}

.status-sent[b-ce1n1rwghx] {
    background-color: #bfdbfe;
    color: #1e40af;
}

.status-approved[b-ce1n1rwghx] {
    background-color: #bbf7d0;
    color: #15803d;
}

.status-rejected[b-ce1n1rwghx] {
    background-color: #fecaca;
    color: #dc2626;
}
/* /Features/Quotes/Molecules/AiMetadataCard/AiMetadataCard.razor.rz.scp.css */
.ai-metadata-card[b-gdeoskwlew] {
    margin-bottom: 1rem;
}

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

.ai-details[b-gdeoskwlew] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row[b-gdeoskwlew] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-row:last-child[b-gdeoskwlew] {
    border-bottom: none;
}

.detail-label[b-gdeoskwlew] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.detail-label i[b-gdeoskwlew] {
    font-size: 1rem;
    color: #9ca3af;
}

.detail-value[b-gdeoskwlew] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.detail-value.cost[b-gdeoskwlew] {
    color: #10b981;
    font-family: 'Courier New', monospace;
}

/* Responsive */
@media (max-width: 640px) {
    .detail-row[b-gdeoskwlew] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .detail-label[b-gdeoskwlew] {
        font-size: 0.75rem;
    }

    .detail-value[b-gdeoskwlew] {
        font-size: 0.875rem;
        padding-left: 1.5rem;
    }
}

/* Light animation for the card */
.ai-metadata-card .mud-card[b-gdeoskwlew] {
    border: 1px solid #e0e7ff;
    transition: all 0.3s ease;
}

.ai-metadata-card .mud-card:hover[b-gdeoskwlew] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* /Features/Quotes/Molecules/DropdownWithAdd/DropdownWithAdd.razor.rz.scp.css */
.dropdown-with-add-container[b-q9ma14cnhe] {
    position: relative;
    width: 100%;
}

.dropdown-button[b-q9ma14cnhe] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dropdown-button:hover[b-q9ma14cnhe] {
    border-color: #80bdff;
}

.dropdown-button:focus[b-q9ma14cnhe] {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.ellipsis-text[b-q9ma14cnhe] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
}

.overlay[b-q9ma14cnhe] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
}

.overlay.show[b-q9ma14cnhe] {
    display: block;
}

.dropdown-with-add-menu[b-q9ma14cnhe] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.25rem;
}

.dropdown-with-add-menu.show[b-q9ma14cnhe] {
    display: block;
}

.dropdown-option-wrapper[b-q9ma14cnhe] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
}

.dropdown-option-wrapper:last-child[b-q9ma14cnhe] {
    border-bottom: none;
}

.dropdown-option[b-q9ma14cnhe] {
    flex: 1;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.dropdown-option:hover[b-q9ma14cnhe] {
    background-color: #f8f9fa;
}

.trash-icon[b-q9ma14cnhe] {
    padding: 0.5rem;
    cursor: pointer;
    color: #6c757d;
}

.trash-icon:hover[b-q9ma14cnhe] {
    color: #dc3545;
}

.create-item[b-q9ma14cnhe] {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.dropdown-input[b-q9ma14cnhe] {
    flex: 1;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    font-size: 0.875rem;
}

.small-button-cancel[b-q9ma14cnhe],
.small-button-create[b-q9ma14cnhe] {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
    cursor: pointer;
    font-size: 0.75rem;
    white-space: nowrap;
}

.small-button-cancel[b-q9ma14cnhe] {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    color: #6c757d;
}

.small-button-create[b-q9ma14cnhe] {
    background-color: #00B7DD;
    border: 1px solid #00B7DD;
    color: white;
}
/* /Features/Quotes/Molecules/ErrorsPanel/ErrorsPanel.razor.rz.scp.css */
.errors-panel[b-aeqx8ltn9c] {
    margin-bottom: 1rem;
}

.alert-header[b-aeqx8ltn9c] {
    margin-bottom: 0.5rem;
}

.errors-list[b-aeqx8ltn9c] {
    margin-top: 0.75rem;
    padding-left: 0;
}

.error-item[b-aeqx8ltn9c] {
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.error-item:last-child[b-aeqx8ltn9c] {
    border-bottom: none;
}

.error-content[b-aeqx8ltn9c] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.error-icon[b-aeqx8ltn9c] {
    flex-shrink: 0;
    margin-top: 0.125rem;
    font-size: 1rem;
}
/* /Features/Quotes/Molecules/ImportBadge/ImportBadge.razor.rz.scp.css */
/* ============================================
   ImportBadge Component - Mobile First Design
   Primary Cyan Theme with Touch Optimization
   ============================================ */

.import-badge[b-95or0x7a83] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Mobile-first padding with adequate touch targets */
    padding: 8px 16px;
    /* Primary cyan gradient replacing purple */
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    /* Fully rounded pill shape */
    border-radius: 100px;
    /* Premium uppercase styling with Apple font stack */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    /* Cyan shadow instead of purple */
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
    /* Smooth transitions for interactions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Prevent text selection on mobile */
    user-select: none;
    /* Remove tap highlight on iOS */
    -webkit-tap-highlight-color: transparent;
    /* Ensure minimum touch target size */
    min-height: 32px;
    white-space: nowrap;
}

/* Icon sizing for better visual balance */
.import-badge i[b-95or0x7a83] {
    font-size: 1rem;
    /* Ensure icon doesn't shrink */
    flex-shrink: 0;
}

/* Desktop hover effect */
@media (hover: hover) {
    .import-badge:hover[b-95or0x7a83] {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 183, 221, 0.35);
        /* Subtle background shift on hover */
        background: linear-gradient(135deg, #00B7DD 0%, #00A5CC 100%);
    }
}

/* Touch feedback for mobile */
.import-badge:active[b-95or0x7a83] {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 183, 221, 0.2);
}

/* Larger screens - slightly increase padding */
@media (min-width: 769px) {
    .import-badge[b-95or0x7a83] {
        padding: 8px 20px;
    }
}

/* Accessibility - Focus state */
.import-badge:focus-visible[b-95or0x7a83] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.3), 0 2px 8px rgba(0, 183, 221, 0.25);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .import-badge[b-95or0x7a83] {
        transition-duration: 0.01ms;
    }
}
/* /Features/Quotes/Molecules/MobileQuoteItemCard/MobileQuoteItemCard.razor.rz.scp.css */
/* Mobile Quote Item Card Styles */

/*
 * Card container: 16px bottom margin (8pt × 2) for clear visual separation.
 * border-radius: 12px — medium radius (consistent vocabulary).
 * Active state shifts background subtly instead of scale — avoids the
 * "squeezed card" feeling that scale(0.98) produces on content-rich cards.
 */
.mobile-quote-item-card[b-z3gig4mzpt] {
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/*
 * Pressed state: subtle background + border tint instead of scale transform.
 * This avoids the "cheap pinch" effect that scale(0.98) causes on cards with
 * rich internal content (descriptions, grids, totals).
 */
.mobile-quote-item-card:active[b-z3gig4mzpt] {
    background-color: rgba(0, 183, 221, 0.02);
    border-color: rgba(0, 183, 221, 0.25);
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.12);
}

/* Card Header */
.item-card-header[b-z3gig4mzpt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafb 0%, #f3f6f9 100%);
    border-bottom: 1px solid #e8ecf1;
}

.item-description[b-z3gig4mzpt] {
    flex: 1;
    min-width: 0;
    padding-right: 12px; /* Guard against action button overlap */
}

.item-description h5[b-z3gig4mzpt] {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #24292e;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.catalog-badge[b-z3gig4mzpt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Action Buttons container */
.item-actions[b-z3gig4mzpt] {
    display: flex;
    gap: 8px;
    margin-left: 4px;
    flex-shrink: 0;
}

/*
 * Edit / Delete icon buttons: 44px × 44px (Apple HIG minimum touch target).
 * box-shadow gives subtle lift — matches the card's shadow vocabulary.
 * border-radius: 10px — slightly tighter than card to feel inset.
 */
.btn-icon-edit[b-z3gig4mzpt],
.btn-icon-delete[b-z3gig4mzpt] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: white;
    color: #586069;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

/*
 * Active pressed states — immediate visual feedback on touch.
 * Color fill (not scale) keeps the icon readable during the press.
 * scale(0.94) is subtle enough to feel responsive without looking broken.
 */
.btn-icon-edit:active[b-z3gig4mzpt] {
    background: rgba(0, 183, 221, 0.1);
    color: #00B7DD;
    transform: scale(0.94);
}

.btn-icon-delete:active[b-z3gig4mzpt] {
    background: rgba(255, 107, 107, 0.12);
    color: #FF6B6B;
    transform: scale(0.94);
}

/* Hover states — only fire on real pointer devices, never touch */
@media (hover: hover) and (pointer: fine) {
    .btn-icon-edit:hover[b-z3gig4mzpt] {
        background: rgba(0, 183, 221, 0.08);
        color: #00B7DD;
    }

    .btn-icon-delete:hover[b-z3gig4mzpt] {
        background: rgba(255, 107, 107, 0.08);
        color: #FF6B6B;
    }
}

/* Card Body */
.item-card-body[b-z3gig4mzpt] {
    padding: 20px;
}

/*
 * Detail grid: 2 columns × N rows for qty, unit price, discount, etc.
 * 16px gap (8pt × 2) for clear visual grouping between cells.
 * Kept at 1fr 1fr even on narrow — 2-col is more scannable than 1-col here.
 */
.detail-grid[b-z3gig4mzpt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.detail-item[b-z3gig4mzpt] {
    display: flex;
    flex-direction: column;
}

.detail-label[b-z3gig4mzpt] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem; /* 11px — tight label, uppercase treatment reads well */
    color: #6c757d;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.detail-label i[b-z3gig4mzpt] {
    font-size: 0.875rem;
    color: #00B7DD;
}

.detail-value[b-z3gig4mzpt] {
    font-size: 0.9375rem;
    color: #24292e;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.detail-value.discount[b-z3gig4mzpt] {
    color: #00D68F;
}

/* Item Notes */
.item-notes[b-z3gig4mzpt] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #586069;
    font-style: italic;
    line-height: 1.5;
}

.item-notes i[b-z3gig4mzpt] {
    color: #00B7DD;
    flex-shrink: 0;
    margin-top: 2px;
}

/*
 * Item Total row: 16px padding (8pt × 2) for comfortable internal spacing.
 * Matches the summary-row.total visual language from the parent quote view.
 * border-radius: 8px — small radius, nested inside the card.
 */
.item-total[b-z3gig4mzpt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, #E7F7FB 0%, #F5FCFE 100%);
    border-radius: 8px;
    border: 1px solid rgba(0, 183, 221, 0.2);
}

.total-label[b-z3gig4mzpt] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #586069;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.total-value[b-z3gig4mzpt] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00B7DD;
    letter-spacing: -0.3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/*
 * Very small screens (< 380px) — 320px iPhones and similar.
 * Detail grid stays 2-column: even on tiny screens the 2-col layout
 * is more scannable than a single long column for label/value pairs.
 * Only collapse to 1-col if columns become narrower than ~100px.
 */
@media (max-width: 380px) {
    .item-card-header[b-z3gig4mzpt] {
        padding: 16px;
    }

    .item-card-body[b-z3gig4mzpt] {
        padding: 16px;
    }

    .item-description h5[b-z3gig4mzpt] {
        font-size: 0.9375rem;
    }

    /* Detail grid stays 2-col unless screen is truly too narrow */
    .detail-grid[b-z3gig4mzpt] {
        gap: 12px;
    }

    /* Buttons still meet 44px minimum — never shrink below Apple HIG */
    .btn-icon-edit[b-z3gig4mzpt],
    .btn-icon-delete[b-z3gig4mzpt] {
        width: 44px;
        height: 44px;
    }

    .total-value[b-z3gig4mzpt] {
        font-size: 1.125rem;
    }

    .item-total[b-z3gig4mzpt] {
        padding: 12px 14px;
    }
}

/* Landscape orientation — compressed vertical spacing */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-quote-item-card[b-z3gig4mzpt] {
        margin-bottom: 8px;
    }

    .item-card-header[b-z3gig4mzpt] {
        padding: 12px 16px;
    }

    .item-card-body[b-z3gig4mzpt] {
        padding: 12px 16px;
    }

    .detail-grid[b-z3gig4mzpt] {
        gap: 12px;
        margin-bottom: 12px;
    }

    .item-total[b-z3gig4mzpt] {
        padding: 10px 12px;
    }
}
/* /Features/Quotes/Molecules/WarningsPanel/WarningsPanel.razor.rz.scp.css */
.warnings-panel[b-1tl669jk6a] {
    margin-bottom: 1rem;
}

.alert-header[b-1tl669jk6a] {
    margin-bottom: 0.5rem;
}

.warnings-list[b-1tl669jk6a] {
    margin-top: 0.75rem;
    padding-left: 0;
}

.warning-item[b-1tl669jk6a] {
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.warning-item:last-child[b-1tl669jk6a] {
    border-bottom: none;
}

.warning-content[b-1tl669jk6a] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.warning-icon[b-1tl669jk6a] {
    flex-shrink: 0;
    margin-top: 0.125rem;
    font-size: 1rem;
}
/* /Features/Quotes/Organisms/ImportedQuoteEditor/ImportedQuoteEditor.razor.rz.scp.css */
/* ============================================
   ImportedQuoteEditor - Premium Apple-Inspired Design
   Design Tokens & Variables - Mobile First
   Primary Cyan Theme with Enhanced Polish
   ============================================ */

/* Main Container - Mobile First with Enhanced Spacing
   CSS Variables defined here for Blazor CSS isolation compatibility */
.imported-quote-editor[b-tuuowu33z1] {
    /* Primary Colors */
    --primary-cyan: #00B7DD;
    --primary-cyan-hover: #00A3C7;
    --primary-cyan-active: #008FAF;
    --primary-cyan-light: rgba(0, 183, 221, 0.1);
    --primary-cyan-lighter: rgba(0, 183, 221, 0.05);

    /* Neutral Scale */
    --neutral-50: #FAFAFA;
    --neutral-100: #F5F5F7;
    --neutral-200: #E8E8ED;
    --neutral-300: #D1D1D6;
    --neutral-400: #A1A1A6;
    --neutral-500: #86868B;
    --neutral-600: #636366;
    --neutral-900: #1D1D1F;

    /* Sticky Bar Heights */
    --sticky-bar-height: 56px;
    --sticky-bar-height-desktop: 72px;

    /* White */
    --white: #FFFFFF;
    --white-soft: rgba(255, 255, 255, 0.95);

    /* Semantic Colors */
    --success: #10B981;
    --success-bg: #D1FAE5;
    --warning: #F59E0B;
    --warning-bg: #FEF3C7;
    --error: #EF4444;
    --error-bg: #FEE2E2;
    --info: #3B82F6;
    --info-bg: #DBEAFE;

    /* Read-Only */
    --readonly: #F5F5F7;
    --readonly-border: #E8E8ED;
    --readonly-text: #86868B;

    /* Spacing (based on 4px grid) */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
    --shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-3: 0 8px 24px 0 rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
    --shadow-4: 0 16px 48px 0 rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06);
    --shadow-5: 0 24px 64px 0 rgba(0, 0, 0, 0.16), 0 12px 24px -6px rgba(0, 0, 0, 0.08);
    --shadow-cyan-glow: 0 4px 16px 0 rgba(0, 183, 221, 0.24), 0 2px 8px -1px rgba(0, 183, 221, 0.12);

    /* Transitions */
    --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.6, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* Component styles */
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-4);
    background: var(--neutral-50);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Tablet and up */
@media (min-width: 768px) {
    .imported-quote-editor[b-tuuowu33z1] {
        padding: var(--spacing-6);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .imported-quote-editor[b-tuuowu33z1] {
        padding: var(--spacing-8);
    }
}

/* ============================================
   Editor Header
   ============================================ */

.editor-header[b-tuuowu33z1] {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-2);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--duration-slow) var(--ease-smooth);
}

@media (min-width: 768px) {
    .editor-header[b-tuuowu33z1] {
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-5);
    }
}

@media (min-width: 1024px) {
    .editor-header[b-tuuowu33z1] {
        border-radius: var(--radius-xl);
        padding: var(--spacing-8);
        margin-bottom: var(--spacing-6);
    }
}

.editor-header:hover[b-tuuowu33z1] {
    box-shadow: var(--shadow-3);
}

.editor-header h3[b-tuuowu33z1] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-900);
    margin: var(--spacing-3) 0 0 0;
    letter-spacing: -0.5px;
}

@media (min-width: 768px) {
    .editor-header h3[b-tuuowu33z1] {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .editor-header h3[b-tuuowu33z1] {
        font-size: 32px;
    }
}

/* ============================================
   Header Top - Actions
   ============================================ */

.header-top[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

@media (min-width: 768px) {
    .header-top[b-tuuowu33z1] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-8);
    }
}

.btn-back[b-tuuowu33z1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-full);
    color: var(--neutral-900);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-height: 44px;
    width: 100%;
}

@media (min-width: 768px) {
    .btn-back[b-tuuowu33z1] {
        width: auto;
        padding: var(--spacing-2) var(--spacing-5);
    }
}

.btn-back:hover[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.06);
    transform: translateX(-4px);
}

.btn-back:hover i[b-tuuowu33z1] {
    transform: translateX(-2px);
}

.btn-back:active[b-tuuowu33z1] {
    transform: translateX(0);
}

.header-actions[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

@media (min-width: 481px) {
    .header-actions[b-tuuowu33z1] {
        flex-direction: row;
        gap: var(--spacing-3);
    }
}

.btn-action[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-full);
    color: var(--neutral-600);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-height: 44px;
    width: 100%;
}

@media (min-width: 481px) {
    .btn-action[b-tuuowu33z1] {
        width: auto;
        padding: var(--spacing-2) var(--spacing-4);
    }
}

.btn-action:hover[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--neutral-900);
}

.btn-action:active[b-tuuowu33z1] {
    transform: scale(0.98);
}

/* ============================================
   Quote Header Info
   ============================================ */

.quote-header-info[b-tuuowu33z1] {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: var(--spacing-5);
}

@media (min-width: 768px) {
    .quote-header-info[b-tuuowu33z1] {
        padding-top: var(--spacing-8);
    }
}

.header-main[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

@media (min-width: 481px) {
    .header-main[b-tuuowu33z1] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-4);
        margin-bottom: var(--spacing-6);
    }
}

.quote-title[b-tuuowu33z1] {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.5px;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: calc(1.2em * 3); /* Fallback for non-webkit */
}

@media (min-width: 481px) {
    .quote-title[b-tuuowu33z1] {
        font-size: 28px;
        -webkit-line-clamp: 2;
        max-height: calc(1.2em * 2);
    }
}

@media (min-width: 768px) {
    .quote-title[b-tuuowu33z1] {
        font-size: 32px;
    }
}

.quote-number[b-tuuowu33z1] {
    display: inline-flex;
    padding: var(--spacing-1) var(--spacing-4);
    background: var(--primary-cyan-light);
    color: var(--primary-cyan);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(0, 183, 221, 0.2);
    align-self: flex-start;
}

.quote-metadata[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

@media (min-width: 481px) {
    .quote-metadata[b-tuuowu33z1] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-4);
    }
}

@media (min-width: 768px) {
    .quote-metadata[b-tuuowu33z1] {
        display: flex;
        gap: var(--spacing-8);
        flex-wrap: wrap;
    }
}

.metadata-item[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

@media (min-width: 481px) {
    .metadata-item[b-tuuowu33z1] {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-2);
    }
}

.metadata-label[b-tuuowu33z1] {
    color: var(--neutral-600); /* Improved contrast - meets WCAG AA */
    font-weight: 500;
    font-size: 14px;
}

.metadata-value[b-tuuowu33z1] {
    color: var(--neutral-900);
    font-weight: 600;
    font-size: 15px;
}

.status-badge[b-tuuowu33z1] {
    padding: var(--spacing-1) var(--spacing-4);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    display: inline-block;
}

.status-badge.status-draft[b-tuuowu33z1] {
    background: #e0e7ff;
    color: #3730a3;
    border-color: rgba(55, 48, 163, 0.2);
}

.status-badge.status-sent[b-tuuowu33z1] {
    background: #dbeafe;
    color: #1e40af;
    border-color: rgba(30, 64, 175, 0.2);
}

.status-badge.status-approved[b-tuuowu33z1] {
    background: #d1fae5;
    color: #065f46;
    border-color: rgba(6, 95, 70, 0.2);
}

.status-badge.status-rejected[b-tuuowu33z1] {
    background: #fee2e2;
    color: #991b1b;
    border-color: rgba(153, 27, 27, 0.2);
}

.original-file-info[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--primary-cyan-lighter);
    border-left: 3px solid var(--primary-cyan);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--neutral-900);
    margin-top: var(--spacing-4);
}

.original-file-info i[b-tuuowu33z1] {
    color: var(--primary-cyan);
    font-size: 18px;
}

.original-file-info strong[b-tuuowu33z1] {
    color: var(--primary-cyan);
}

/* ============================================
   Loading Spinner
   ============================================ */

.loading-spinner[b-tuuowu33z1] {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.loading-spinner i[b-tuuowu33z1] {
    font-size: 40px;
    color: var(--primary-cyan);
    animation: spin-b-tuuowu33z1 1.5s linear infinite;
}

@keyframes spin-b-tuuowu33z1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-spinner-text[b-tuuowu33z1] {
    font-size: 15px;
    color: var(--neutral-500);
    font-weight: 500;
}

/* ============================================
   Section Cards
   ============================================ */

.section[b-tuuowu33z1] {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-2);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--duration-slow) var(--ease-smooth);
    contain: layout style; /* Performance: isolate repaint */
}

@media (min-width: 768px) {
    .section[b-tuuowu33z1] {
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-8);
    }
}

@media (min-width: 1024px) {
    .section[b-tuuowu33z1] {
        padding: var(--spacing-8);
    }
}

.section:hover[b-tuuowu33z1] {
    box-shadow: var(--shadow-3);
}

.section h4[b-tuuowu33z1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0 0 var(--spacing-4) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

@media (min-width: 768px) {
    .section h4[b-tuuowu33z1] {
        font-size: 20px;
        margin-bottom: var(--spacing-5);
    }
}

.section h4 i[b-tuuowu33z1] {
    color: var(--primary-cyan);
    font-size: 20px;
}

/* ============================================
   Section Header
   ============================================ */

.section-header[b-tuuowu33z1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.section-header h4[b-tuuowu33z1] {
    margin: 0;
}

/* ============================================
   Form Elements
   ============================================ */

.form-row[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Desktop - Two columns for forms with minmax to prevent blowout */
@media (min-width: 768px) {
    .form-row[b-tuuowu33z1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-5);
        margin-bottom: var(--spacing-5);
    }
}

.form-group[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Only add bottom margin to standalone form-groups (not in form-rows) */
.form-group:not(.form-row .form-group)[b-tuuowu33z1] {
    margin-bottom: var(--spacing-4);
}

/* Remove double margin when inside form-row */
.form-row .form-group[b-tuuowu33z1] {
    margin-bottom: 0;
}

.form-group label[b-tuuowu33z1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.form-group label i[b-tuuowu33z1] {
    color: var(--primary-cyan);
    font-size: 16px;
}

.form-control[b-tuuowu33z1] {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--neutral-900);
    background: var(--white);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.form-control[b-tuuowu33z1]::placeholder {
    color: var(--neutral-500);
}

.form-control:hover[b-tuuowu33z1] {
    border-color: rgba(0, 0, 0, 0.2);
}

.form-control:focus[b-tuuowu33z1] {
    outline: none;
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px var(--primary-cyan-light);
}

textarea.form-control[b-tuuowu33z1] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

.form-control.total-input[b-tuuowu33z1] {
    font-weight: 600;
    font-size: 18px;
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    color: var(--primary-cyan);
    text-align: right;
}

/* ============================================
   Sections Container
   ============================================ */

.sections-container[b-tuuowu33z1] {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-top: var(--spacing-6); /* 24px - separate from section above */
    margin-bottom: var(--spacing-6); /* 24px - consistent spacing */
    box-shadow: var(--shadow-1);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.sections-container:hover[b-tuuowu33z1] {
    box-shadow: var(--shadow-2);
}

@media (min-width: 481px) {
    .sections-container[b-tuuowu33z1] {
        padding: var(--spacing-8);
    }
}

@media (min-width: 768px) {
    .sections-container[b-tuuowu33z1] {
        padding: var(--spacing-10);
        margin-top: var(--spacing-8); /* 32px on tablet+ */
        margin-bottom: var(--spacing-8); /* 32px on tablet+ */
    }
}

.section-title[b-tuuowu33z1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0 0 var(--spacing-4) 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .section-title[b-tuuowu33z1] {
        font-size: 20px;
        margin-bottom: var(--spacing-6);
    }
}

/* ============================================
   Section Edit Cards (Editable with Items)
   ============================================ */

.section-edit-card[b-tuuowu33z1] {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    background: var(--white);
    margin-bottom: var(--spacing-8);
    box-shadow: var(--shadow-1);
    transition:
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
    overflow: hidden;
    will-change: transform; /* GPU acceleration for hover animation */
}

/* Only apply hover effects on devices with proper hover support */
@media (hover: hover) and (pointer: fine) {
    .section-edit-card:hover[b-tuuowu33z1] {
        border-color: rgba(0, 183, 221, 0.3);
        box-shadow: var(--shadow-2);
        transform: translateY(-2px);
    }
}

.section-edit-header[b-tuuowu33z1] {
    padding: var(--spacing-6);
    background: rgba(0, 183, 221, 0.02);
    border-bottom: 2px solid rgba(0, 183, 221, 0.1);
    position: relative;
}

@media (min-width: 768px) {
    .section-edit-header[b-tuuowu33z1] {
        padding: var(--spacing-8);
        padding-left: calc(var(--spacing-8) + 32px); /* Space for drag handle */
    }
}

/* Drag Handle - positioned absolutely to avoid layout disruption */
.drag-handle[b-tuuowu33z1] {
    display: none; /* Hidden by default on mobile */
    position: absolute;
    left: var(--spacing-4);
    top: var(--spacing-6);
    color: var(--neutral-400);
    cursor: grab;
    transition: color var(--duration-fast) var(--ease-out);
    padding: var(--spacing-1);
}

@media (min-width: 768px) {
    .drag-handle[b-tuuowu33z1] {
        display: flex;
        align-items: center;
        justify-content: center;
        left: var(--spacing-3);
        top: var(--spacing-8);
    }
}

.drag-handle:hover[b-tuuowu33z1] {
    color: var(--primary-cyan);
}

.drag-handle:active[b-tuuowu33z1] {
    cursor: grabbing;
}

.drag-handle i[b-tuuowu33z1] {
    font-size: 20px;
}

/* Drag and Drop States */
.section-edit-card.dragging[b-tuuowu33z1] {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: var(--shadow-4);
    border-color: var(--primary-cyan);
}

.section-edit-card.drag-over[b-tuuowu33z1] {
    border: 2px dashed var(--primary-cyan);
    background: var(--primary-cyan-lighter);
}

/* Ensure relative positioning for pseudo-element */
.section-edit-card[b-tuuowu33z1] {
    position: relative;
}

.section-edit-info[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Section Items/Services Display */
.section-items[b-tuuowu33z1] {
    padding: var(--spacing-6);
    background: var(--readonly);
    border-bottom: 2px solid var(--readonly-border);
}

@media (min-width: 768px) {
    .section-items[b-tuuowu33z1] {
        padding: var(--spacing-8);
    }
}

.items-title[b-tuuowu33z1] {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-cyan);
    margin: 0 0 var(--spacing-4) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.items-table[b-tuuowu33z1] {
    width: 100%;
    overflow-x: auto;
    background: white;
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
}

.items-table-header[b-tuuowu33z1] {
    display: none;
}

@media (min-width: 768px) {
    .items-table-header[b-tuuowu33z1] {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1.2fr 1.2fr;
        gap: var(--spacing-4);
        padding: var(--spacing-3) var(--spacing-4);
        background: var(--neutral-100);
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        color: var(--neutral-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: var(--spacing-3);
    }
}

.items-table-row[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-3);
    font-size: 15px;
    transition: all var(--duration-fast) var(--ease-smooth);
}

.items-table-row:hover[b-tuuowu33z1] {
    background: var(--neutral-50);
    border-color: rgba(0, 183, 221, 0.2);
}

@media (min-width: 768px) {
    .items-table-row[b-tuuowu33z1] {
        grid-template-columns: 3fr 1fr 1fr 1.2fr 1.2fr;
        align-items: center;
        padding: var(--spacing-5) var(--spacing-4);
    }
}

.items-table-row .col-desc[b-tuuowu33z1] {
    grid-column: 1 / -1;
    font-weight: 500;
    color: var(--neutral-900);
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0; /* Prevent grid blowout */
}

@media (min-width: 768px) {
    .items-table-row .col-desc[b-tuuowu33z1] {
        grid-column: auto;
    }
}

.items-table-row .col-qty[b-tuuowu33z1],
.items-table-row .col-unit[b-tuuowu33z1] {
    color: var(--neutral-600);
}

.items-table-row .col-price[b-tuuowu33z1],
.items-table-row .col-total[b-tuuowu33z1] {
    font-weight: 600;
    color: var(--primary-cyan);
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
}

/* Section Total Edit */
.section-total-edit[b-tuuowu33z1] {
    padding: var(--spacing-5);
    background: var(--primary-cyan-lighter);
    border-top: 2px solid rgba(0, 183, 221, 0.2);
}

@media (min-width: 768px) {
    .section-total-edit[b-tuuowu33z1] {
        padding: var(--spacing-6);
    }
}

.section-total-edit label[b-tuuowu33z1] {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: var(--spacing-3);
}

.section-total-edit .total-input[b-tuuowu33z1] {
    max-width: 300px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-cyan);
    text-align: right;
}

/* ============================================
   Sections List
   ============================================ */

.sections-list[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* ============================================
   Section Item Cards
   ============================================ */

.section-card[b-tuuowu33z1] {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-1);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.section-card:hover[b-tuuowu33z1] {
    border-color: rgba(0, 183, 221, 0.3);
    box-shadow: var(--shadow-2);
}

.section-card-header[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.02);
    padding: var(--spacing-4) var(--spacing-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.section-card:hover .section-card-header[b-tuuowu33z1] {
    background: var(--primary-cyan-lighter);
}

.section-number[b-tuuowu33z1] {
    font-weight: 700;
    color: var(--primary-cyan);
    font-size: 18px;
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-card-body[b-tuuowu33z1] {
    padding: var(--spacing-5);
    background: var(--white);
}

@media (min-width: 768px) {
    .section-card-body[b-tuuowu33z1] {
        padding: var(--spacing-6);
    }
}

/* ============================================
   Icon Buttons
   ============================================ */

.btn-icon[b-tuuowu33z1] {
    background: transparent;
    border: none;
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-normal) var(--ease-in-out);
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.btn-icon:hover[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.04);
}

.btn-icon.btn-danger[b-tuuowu33z1] {
    color: #991b1b;
}

.btn-icon.btn-danger:hover[b-tuuowu33z1] {
    background: var(--error-bg);
}

.btn-icon i[b-tuuowu33z1] {
    font-size: 18px;
}

/* ============================================
   Totals Summary
   ============================================ */

.totals-summary[b-tuuowu33z1] {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-2);
    margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
    .totals-summary[b-tuuowu33z1] {
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-5);
    }
}

@media (min-width: 1024px) {
    .totals-summary[b-tuuowu33z1] {
        padding: var(--spacing-8);
        margin-bottom: var(--spacing-6);
    }
}

.totals-summary:hover[b-tuuowu33z1] {
    box-shadow: var(--shadow-3);
}

.totals-summary h4[b-tuuowu33z1] {
    font-size: 20px;
    margin-bottom: var(--spacing-5);
}

/* ============================================
   Totals Grid
   ============================================ */

.totals-grid[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.total-row[b-tuuowu33z1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-normal) var(--ease-in-out);
    font-size: 15px;
    min-height: 44px;
}

.total-row:hover[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.02);
}

.total-row span[b-tuuowu33z1] {
    color: var(--neutral-600);
    font-weight: 500;
}

.total-row strong[b-tuuowu33z1] {
    font-weight: 600;
    color: var(--neutral-900);
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    font-size: 16px;
}

.total-row.discount[b-tuuowu33z1] {
    background: var(--success-bg);
    border-radius: var(--radius-sm);
}

.total-row.discount span[b-tuuowu33z1],
.total-row.discount strong[b-tuuowu33z1] {
    color: #065f46;
}

.total-row.final[b-tuuowu33z1] {
    border-top: 2px solid rgba(0, 183, 221, 0.2);
    padding-top: var(--spacing-5);
    margin-top: var(--spacing-3);
    background: var(--primary-cyan-lighter);
    border-radius: var(--radius-sm);
    padding: var(--spacing-5) var(--spacing-4);
}

.total-row.final span[b-tuuowu33z1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-900);
}

.total-row.final strong[b-tuuowu33z1] {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-cyan);
}

/* ============================================
   Action Buttons
   ============================================ */

.actions[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-5);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-top: var(--spacing-8);
}

@media (min-width: 768px) {
    .actions[b-tuuowu33z1] {
        flex-direction: row;
        justify-content: flex-end;
        gap: var(--spacing-3);
        padding: var(--spacing-6);
        margin-top: var(--spacing-10);
    }
}

@media (min-width: 1024px) {
    .actions[b-tuuowu33z1] {
        padding: var(--spacing-8);
        gap: var(--spacing-4);
    }
}

.btn[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-in-out);
    min-height: 44px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 768px) {
    .btn[b-tuuowu33z1] {
        width: auto;
        padding: var(--spacing-2) var(--spacing-6);
    }
}

.btn i[b-tuuowu33z1] {
    font-size: 18px;
}

.btn:disabled[b-tuuowu33z1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-tuuowu33z1] {
    background: var(--primary-cyan);
    color: var(--white);
    box-shadow: var(--shadow-cyan-glow);
}

.btn-primary:hover:not(:disabled)[b-tuuowu33z1] {
    background: var(--primary-cyan-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
}

.btn-primary:active:not(:disabled)[b-tuuowu33z1] {
    transform: translateY(0);
}

.btn-secondary[b-tuuowu33z1] {
    background: var(--white);
    color: var(--neutral-600);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.btn-secondary:hover:not(:disabled)[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--neutral-900);
}

.btn-secondary:active:not(:disabled)[b-tuuowu33z1] {
    transform: scale(0.98);
}

.btn-sm[b-tuuowu33z1] {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 14px;
    min-height: 36px;
}

.btn .bi-arrow-repeat[b-tuuowu33z1] {
    animation: spin-b-tuuowu33z1 1s linear infinite;
}

/* ============================================
   Alert Messages
   ============================================ */

.alert[b-tuuowu33z1] {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 15px;
    min-height: 44px;
}

.alert-warning[b-tuuowu33z1] {
    background: var(--warning-bg);
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert i[b-tuuowu33z1] {
    font-size: 20px;
}

/* ============================================
   Utility Classes
   ============================================ */

.text-muted[b-tuuowu33z1] {
    color: var(--neutral-500);
    font-style: italic;
    font-size: 15px;
}

/* ============================================
   Accessibility
   ============================================ */

.form-control:focus-visible[b-tuuowu33z1],
.btn:focus-visible[b-tuuowu33z1],
.btn-icon:focus-visible[b-tuuowu33z1] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.3);
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-tuuowu33z1] {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================
   PREMIUM ADDITIONS - Two-Column Grid Layout
   ============================================ */

.editor-grid[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    margin-top: var(--spacing-6);
}

/* Desktop: Two columns (main + sidebar) */
@media (min-width: 1200px) {
    .editor-grid[b-tuuowu33z1] {
        grid-template-columns: 1fr 400px;
        gap: var(--spacing-8);
        max-width: none;
    }
}

.editor-main[b-tuuowu33z1] {
    min-width: 0; /* Prevents grid blowout */
}

/* Sidebar: Always visible, positioned differently based on screen size */
.editor-sidebar[b-tuuowu33z1] {
    display: block;
    order: 2; /* Show after main content on mobile/tablet */
    margin-top: var(--spacing-6);
}

@media (min-width: 1200px) {
    .editor-sidebar[b-tuuowu33z1] {
        order: 0; /* Reset order for grid layout on desktop */
        margin-top: 0;
    }

    .sidebar-sticky[b-tuuowu33z1] {
        position: sticky;
        top: calc(var(--sticky-bar-height-desktop) + var(--spacing-6)); /* Below sticky header + gap */
        max-height: calc(100vh - var(--sticky-bar-height-desktop) - var(--spacing-12));
        overflow-y: auto;
    }
}

/* ============================================
   PREMIUM ADDITIONS - Sticky Action Bar
   ============================================ */

.sticky-action-bar[b-tuuowu33z1] {
    /* Define variables locally since this element is outside .imported-quote-editor */
    --sticky-bar-height: 56px;
    --sticky-bar-height-desktop: 72px;
    --white-soft: rgba(255, 255, 255, 0.95);
    --shadow-3: 0 8px 24px 0 rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --radius-full: 9999px;
    --warning: #F59E0B;
    --warning-bg: #FEF3C7;
    --success: #10B981;
    --success-bg: #D1FAE5;
    --error: #EF4444;
    --error-bg: #FEE2E2;
    --duration-slow: 300ms;
    --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --drawer-width: 280px;

    position: fixed;
    top: 0;
    left: var(--drawer-width);
    right: 0;
    z-index: 1000;
    background: var(--white-soft);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-3);
    height: var(--sticky-bar-height);
    opacity: 0;
    transform: translateY(-100%);
    transition:
        opacity var(--duration-slow) var(--ease-in-out),
        transform var(--duration-slow) var(--ease-in-out);
    will-change: transform, opacity;
}

/* On mobile/tablet, drawer is hidden or overlay - use full width */
@media (max-width: 970px) {
    .sticky-action-bar[b-tuuowu33z1] {
        left: 0;
    }
}

@media (min-width: 768px) {
    .sticky-action-bar[b-tuuowu33z1] {
        height: var(--sticky-bar-height-desktop);
    }
}

.action-bar-content[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 100%;
    padding: 0 var(--spacing-4);
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .action-bar-content[b-tuuowu33z1] {
        padding: 0 var(--spacing-6);
        gap: 16px;
    }
}

@media (min-width: 1200px) {
    .action-bar-content[b-tuuowu33z1] {
        padding: 0 var(--spacing-8);
    }
}

.sticky-action-bar.visible[b-tuuowu33z1] {
    opacity: 1;
    transform: translateY(0);
}

.action-bar-left[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.action-bar-left .quote-title-compact[b-tuuowu33z1] {
    font-size: 17px;
    font-weight: 600;
    color: #1D1D1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Back button in sticky bar */
.sticky-action-bar .btn-icon[b-tuuowu33z1] {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
    color: #636366;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.sticky-action-bar .btn-icon:hover[b-tuuowu33z1] {
    background: rgba(0, 0, 0, 0.04);
}

.sticky-action-bar .btn-icon i[b-tuuowu33z1] {
    font-size: 18px;
}

.unsaved-indicator[b-tuuowu33z1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--warning-bg);
    color: var(--warning);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.unsaved-indicator[b-tuuowu33z1]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--warning);
    border-radius: 50%;
    animation: pulse-b-tuuowu33z1 2s ease-in-out infinite;
}

@keyframes pulse-b-tuuowu33z1 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.action-bar-right[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Done button styling */
.btn-done[b-tuuowu33z1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #00B7DD;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
    min-height: 40px;
}

.btn-done:hover:not(:disabled)[b-tuuowu33z1] {
    background: #00A3C7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.3);
}

.btn-done:active:not(:disabled)[b-tuuowu33z1] {
    background: #008FAF;
    transform: translateY(0);
}

.btn-done:disabled[b-tuuowu33z1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-done i[b-tuuowu33z1] {
    font-size: 16px;
}

/* Mobile: icon only */
@media (max-width: 480px) {
    .btn-done span[b-tuuowu33z1] {
        display: none;
    }

    .btn-done[b-tuuowu33z1] {
        padding: 8px 12px;
        min-width: 40px;
        justify-content: center;
    }
}

/* Mobile-specific sticky bar refinements (768px and below) */
@media (max-width: 767px) {
    .action-bar-left .quote-title-compact[b-tuuowu33z1] {
        font-size: 15px;
        max-width: 40vw;
    }

    /* Show icon-only cancel button on mobile */
    .action-bar-right .secondary-action[b-tuuowu33z1] {
        padding: var(--spacing-2) var(--spacing-3);
        min-width: 44px;
        width: auto;
    }

    .action-bar-right .secondary-action span[b-tuuowu33z1] {
        display: none; /* Hide text, keep icon */
    }

    /* Ensure primary button also fits */
    .action-bar-right .btn-primary[b-tuuowu33z1] {
        padding: var(--spacing-2) var(--spacing-4);
    }

    .action-bar-right .btn-primary span[b-tuuowu33z1] {
        display: none; /* Hide text on mobile */
    }
}

/* Very small screens - prevent button collision */
@media (max-width: 359px) {
    .action-bar-right[b-tuuowu33z1] {
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .action-bar-right .btn[b-tuuowu33z1] {
        flex-shrink: 1;
        min-width: 40px;
    }
}

/* ============================================
   PREMIUM ADDITIONS - Loading Skeleton
   ============================================ */

.skeleton[b-tuuowu33z1] {
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

.skeleton-text[b-tuuowu33z1] {
    height: 16px;
    margin: 4px 0;
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text.large[b-tuuowu33z1] {
    height: 24px;
    width: 60%;
}

.skeleton-text.medium[b-tuuowu33z1] {
    height: 16px;
    width: 80%;
}

.skeleton-text.small[b-tuuowu33z1] {
    height: 14px;
    width: 40%;
}

.skeleton-input[b-tuuowu33z1] {
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

.skeleton-button[b-tuuowu33z1] {
    height: 40px;
    width: 120px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

.skeleton-card[b-tuuowu33z1] {
    height: 200px;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

/* Hero Skeleton - matches hero-section */
.editor-skeleton .hero-skeleton[b-tuuowu33z1] {
    height: auto;
    min-height: 180px;
    margin-bottom: var(--spacing-6);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

@media (min-width: 768px) {
    .editor-skeleton .hero-skeleton[b-tuuowu33z1] {
        padding: var(--spacing-8);
        margin-bottom: var(--spacing-10);
    }
}

.skeleton-hero-content[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.skeleton-row[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Two-Column Grid Skeleton - matches editor-grid */
.skeleton-grid[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    margin-top: var(--spacing-6);
}

@media (min-width: 1200px) {
    .skeleton-grid[b-tuuowu33z1] {
        grid-template-columns: 1fr 400px;
        gap: var(--spacing-8);
    }
}

.skeleton-main[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.skeleton-sidebar[b-tuuowu33z1] {
    display: none;
}

@media (min-width: 1200px) {
    .skeleton-sidebar[b-tuuowu33z1] {
        display: block;
    }
}

/* Section Skeleton Cards */
.editor-skeleton .section-skeleton[b-tuuowu33z1] {
    height: auto;
    min-height: 160px;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-1);
}

@media (min-width: 768px) {
    .editor-skeleton .section-skeleton[b-tuuowu33z1] {
        padding: var(--spacing-8);
    }
}

/* Form Row Skeleton */
.skeleton-form-row[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
    .skeleton-form-row[b-tuuowu33z1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Skeleton Section Card (within sections container) */
.skeleton-section-card[b-tuuowu33z1] {
    height: 80px;
    margin-bottom: var(--spacing-4);
    border-radius: var(--radius-md);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

/* Skeleton Textarea */
.skeleton-textarea[b-tuuowu33z1] {
    height: 60px;
    margin-bottom: var(--spacing-4);
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

/* Skeleton Total Row */
.skeleton-total-row[b-tuuowu33z1] {
    height: 40px;
    margin-bottom: var(--spacing-3);
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--neutral-100) 0%,
        var(--neutral-50) 50%,
        var(--neutral-100) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-tuuowu33z1 1.5s ease-in-out infinite;
}

/* Sidebar Skeleton */
.sidebar-skeleton[b-tuuowu33z1] {
    height: auto;
    min-height: 280px;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-2);
}

/* ============================================
   PREMIUM ADDITIONS - Hero Section Enhancement
   ============================================ */

.hero-section[b-tuuowu33z1] {
    background: var(--primary-cyan-lighter); /* Simplified for better performance */
    border: 2px solid rgba(0, 183, 221, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
    contain: layout style; /* Performance: isolate repaint */
}

/* Tablet breakpoint */
@media (min-width: 481px) {
    .hero-section[b-tuuowu33z1] {
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-8);
    }
}

/* Tablet landscape / small desktop */
@media (min-width: 768px) {
    .hero-section[b-tuuowu33z1] {
        border-radius: var(--radius-xl);
        padding: var(--spacing-8);
        margin-bottom: var(--spacing-10);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .hero-section[b-tuuowu33z1] {
        padding: var(--spacing-10);
        margin-bottom: var(--spacing-12);
    }
}

/* Only apply hover effects on devices with proper hover support */
@media (hover: hover) and (pointer: fine) {
    .hero-section:hover[b-tuuowu33z1] {
        box-shadow: var(--shadow-2);
    }
}

/* ============================================
   PREMIUM ADDITIONS - Read-Only Item Display
   ============================================ */

.readonly-items-table[b-tuuowu33z1] {
    margin-top: var(--spacing-4);
    background: var(--readonly);
    border: 1px solid var(--readonly-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
}

.no-items-message[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    color: var(--neutral-500);
    font-size: 13px;
    font-style: italic;
}

.no-items-message i[b-tuuowu33z1] {
    color: var(--info);
    font-size: 16px;
}

.readonly-table-header[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--readonly-border);
}

.readonly-table-header .lock-icon[b-tuuowu33z1],
.readonly-table-header .bi-list-check[b-tuuowu33z1] {
    width: 16px;
    height: 16px;
    color: var(--primary-cyan);
}

.readonly-table-header .item-count[b-tuuowu33z1] {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-500);
    margin-left: auto;
}

.readonly-table-header .readonly-title[b-tuuowu33z1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--readonly-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.readonly-table-header .info-tooltip[b-tuuowu33z1] {
    margin-left: auto;
    width: 16px;
    height: 16px;
    color: var(--neutral-500);
    cursor: help;
}

/* ============================================
   PREMIUM ADDITIONS - Field Validation
   ============================================ */

.field-validation-error[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 12px;
    color: var(--error);
    font-weight: 500;
    margin-top: var(--spacing-1);
    animation: fadeInUp-b-tuuowu33z1 200ms var(--ease-out);
}

.field-validation-error i[b-tuuowu33z1] {
    font-size: 14px;
}

.field-validation-success[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 12px;
    color: var(--success);
    margin-top: var(--spacing-1);
    animation: fadeInUp-b-tuuowu33z1 200ms var(--ease-out);
}

.field-validation-success i[b-tuuowu33z1] {
    font-weight: 700;
}

.form-control.invalid[b-tuuowu33z1] {
    border-color: var(--error);
    animation: shake-b-tuuowu33z1 400ms var(--ease-in-out);
}

.form-control.invalid:focus[b-tuuowu33z1] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-control.valid[b-tuuowu33z1] {
    border-color: var(--success);
}

.form-control.valid:focus[b-tuuowu33z1] {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Touched but empty required field */
.form-control.touched.empty[b-tuuowu33z1] {
    border-color: var(--error);
}

@keyframes shake-b-tuuowu33z1 {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(4px);
    }
}

/* ============================================
   PREMIUM ADDITIONS - Conditional Field Animation
   ============================================ */

/* Animated appearance/disappearance for conditional fields */
.conditional-field[b-tuuowu33z1] {
    overflow: hidden;
    animation: slideDown-b-tuuowu33z1 300ms var(--ease-out);
}

@keyframes slideDown-b-tuuowu33z1 {
    from {
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 120px;
        margin-bottom: var(--spacing-4);
        transform: translateY(0);
    }
}

/* Applied when field is being removed - handled via Blazor */
.conditional-field-exit[b-tuuowu33z1] {
    animation: slideUp-b-tuuowu33z1 250ms var(--ease-in-out) forwards;
}

@keyframes slideUp-b-tuuowu33z1 {
    from {
        opacity: 1;
        max-height: 120px;
        margin-bottom: var(--spacing-4);
        transform: translateY(0);
    }
    to {
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        transform: translateY(-8px);
    }
}

/* ============================================
   PREMIUM ADDITIONS - Help Tooltips
   ============================================ */

.help-icon[b-tuuowu33z1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--neutral-500);
    cursor: help;
    transition: color var(--duration-fast) var(--ease-out);
}

.help-icon:hover[b-tuuowu33z1] {
    color: var(--primary-cyan);
}

.required-indicator[b-tuuowu33z1] {
    color: var(--error);
    font-weight: 700;
    margin-left: 2px;
}

/* ============================================
   PREMIUM ADDITIONS - Toast Animations
   ============================================ */

@keyframes slideInRight-b-tuuowu33z1 {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight-b-tuuowu33z1 {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes fadeInUp-b-tuuowu33z1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up[b-tuuowu33z1] {
    animation: fadeInUp-b-tuuowu33z1 400ms var(--ease-in-out);
    will-change: transform, opacity; /* Performance hint for animation */
}

/* Remove will-change after animation completes */
.fade-in-up.animation-complete[b-tuuowu33z1] {
    will-change: auto;
}

/* ============================================
   PREMIUM ADDITIONS - Enhanced Section Cards
   ============================================ */

.section-card-premium[b-tuuowu33z1] {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-1);
    transition:
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.section-card-premium:hover[b-tuuowu33z1] {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.section-header-premium[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--neutral-200);
}

.section-title-premium[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 24px;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0;
    letter-spacing: -0.02em;
}

.section-icon[b-tuuowu33z1] {
    width: 24px;
    height: 24px;
    color: var(--primary-cyan);
}

@media (max-width: 768px) {
    .section-card-premium[b-tuuowu33z1] {
        padding: var(--spacing-5);
        margin-bottom: var(--spacing-4);
        border-radius: var(--radius-md);
    }

    .section-title-premium[b-tuuowu33z1] {
        font-size: 20px;
    }
}

/* ============================================
   ACCESSIBILITY ADDITIONS
   ============================================ */

/* Screen reader only text - hidden visually but accessible */
.visually-hidden[b-tuuowu33z1] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Readonly help text - visible to all users */
.readonly-help-text[b-tuuowu33z1] {
    display: block;
    font-size: 13px;
    color: var(--neutral-600);
    font-weight: 400;
    margin-top: var(--spacing-2);
    font-style: italic;
}

@media (min-width: 768px) {
    .readonly-help-text[b-tuuowu33z1] {
        display: inline;
        margin-top: 0;
        margin-left: auto;
    }
}

/* Unsaved indicator with icon */
/* Indicators in sticky bar - using hardcoded values since outside .imported-quote-editor */
.unsaved-indicator[b-tuuowu33z1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #FEF3C7;
    color: #92400e;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.unsaved-indicator i[b-tuuowu33z1] {
    font-size: 14px;
}

/* Auto-save indicator styles */
.auto-save-indicator[b-tuuowu33z1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    transition: all 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.auto-save-indicator i[b-tuuowu33z1] {
    font-size: 14px;
}

.auto-save-indicator.saving[b-tuuowu33z1] {
    background: #DBEAFE;
    color: #3B82F6;
}

.auto-save-indicator.saving i[b-tuuowu33z1] {
    animation: spin-b-tuuowu33z1 1s linear infinite;
}

.auto-save-indicator.success[b-tuuowu33z1] {
    background: #D1FAE5;
    color: #065f46;
}

.auto-save-indicator.error[b-tuuowu33z1] {
    background: #FEE2E2;
    color: #991b1b;
}

/* Hide text on very small screens */
@media (max-width: 480px) {
    .auto-save-indicator span[b-tuuowu33z1] {
        display: none;
    }

    .auto-save-indicator[b-tuuowu33z1] {
        padding: 6px;
    }
}

/* Keyboard hint for save shortcut */
.keyboard-hint[b-tuuowu33z1] {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #86868B;
}

@media (min-width: 768px) {
    .keyboard-hint[b-tuuowu33z1] {
        display: flex;
    }
}

.keyboard-hint kbd[b-tuuowu33z1] {
    display: inline-block;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    color: #636366;
    background: #FFFFFF;
    border: 1px solid #D1D1D6;
    border-radius: 4px;
    box-shadow: 0 1px 0 #D1D1D6;
}

/* Focus visible improvements for better keyboard navigation */
.btn:focus-visible[b-tuuowu33z1],
.btn-action:focus-visible[b-tuuowu33z1],
.btn-back:focus-visible[b-tuuowu33z1],
.btn-icon:focus-visible[b-tuuowu33z1],
.form-control:focus-visible[b-tuuowu33z1] {
    outline: 2px solid var(--primary-cyan);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .metadata-label[b-tuuowu33z1] {
        color: #1d1d1f;
    }

    .readonly-help-text[b-tuuowu33z1] {
        color: #1d1d1f;
    }

    .status-badge[b-tuuowu33z1] {
        border-width: 2px;
    }

    .form-control[b-tuuowu33z1] {
        border-width: 2px;
    }
}

/* ============================================
   NEW Section Card Design (tobe.png style)
   ============================================ */

.section-card-new[b-tuuowu33z1] {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: var(--spacing-4);
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--ease-in-out);
}

.section-card-new:hover[b-tuuowu33z1] {
    box-shadow: var(--shadow-3);
}

.section-card-new.dragging[b-tuuowu33z1] {
    opacity: 0.5;
    transform: scale(0.98);
}

.section-card-new.drag-over[b-tuuowu33z1] {
    border: 2px dashed var(--primary-cyan);
    background: var(--primary-cyan-lighter);
}

/* Section Header */
.section-header-new[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);
    gap: var(--spacing-4);
}

.section-title-area[b-tuuowu33z1] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.drag-handle-inline[b-tuuowu33z1] {
    color: var(--neutral-400);
    cursor: grab;
    padding: var(--spacing-1);
    margin-top: 2px;
    transition: color var(--duration-fast) var(--ease-in-out);
}

.drag-handle-inline:hover[b-tuuowu33z1] {
    color: var(--neutral-600);
}

.drag-handle-inline:active[b-tuuowu33z1] {
    cursor: grabbing;
}

.section-title-input-wrapper[b-tuuowu33z1] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex: 1;
    min-width: 0;
}

.section-title-input[b-tuuowu33z1] {
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-900);
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    outline: none;
    letter-spacing: -0.3px;
}

.section-title-input:focus[b-tuuowu33z1] {
    outline: none;
}

.section-title-input[b-tuuowu33z1]::placeholder {
    color: var(--neutral-400);
}

.item-count-badge[b-tuuowu33z1] {
    font-size: 13px;
    color: var(--neutral-500);
}

.section-total-area[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.section-total-display[b-tuuowu33z1] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-cyan);
    letter-spacing: -0.5px;
}

.collapse-toggle[b-tuuowu33z1] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary-cyan);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.collapse-toggle:hover[b-tuuowu33z1] {
    background: var(--primary-cyan-hover);
    transform: scale(1.05);
}

.collapse-toggle i[b-tuuowu33z1] {
    font-size: 14px;
}

/* Section Items (Collapsible) */
.section-items-new[b-tuuowu33z1] {
    border-top: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}

/* Items Table */
.items-table-new[b-tuuowu33z1] {
    width: 100%;
}

.items-table-header-new[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
}

.items-table-header-new > div[b-tuuowu33z1] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.items-table-row-new[b-tuuowu33z1] {
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--neutral-200);
    transition: background var(--duration-fast) var(--ease-in-out);
}

.items-table-row-new:last-child[b-tuuowu33z1] {
    border-bottom: none;
}

.items-table-row-new:hover[b-tuuowu33z1] {
    background: var(--white);
}

.col-description[b-tuuowu33z1] {
    font-size: 14px;
    color: var(--neutral-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-unit-new[b-tuuowu33z1],
.col-qty-new[b-tuuowu33z1] {
    font-size: 14px;
    color: var(--primary-cyan);
    text-align: center;
}

/* Category Total Footer */
.category-total-footer[b-tuuowu33z1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--white);
    border-top: 1px solid var(--neutral-200);
}

.category-total-label[b-tuuowu33z1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-600);
}

.category-total-input[b-tuuowu33z1] {
    width: 140px;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-cyan);
    text-align: right;
    border: 1.5px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.category-total-input:focus[b-tuuowu33z1] {
    outline: none;
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px var(--primary-cyan-light);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .section-header-new[b-tuuowu33z1] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
    }

    .section-total-area[b-tuuowu33z1] {
        width: 100%;
        justify-content: space-between;
        padding-left: 28px;
    }

    .section-total-display[b-tuuowu33z1] {
        font-size: 20px;
    }

    .items-table-header-new[b-tuuowu33z1],
    .items-table-row-new[b-tuuowu33z1] {
        grid-template-columns: 1fr 60px 60px;
        padding: var(--spacing-3) var(--spacing-4);
    }

    .category-total-footer[b-tuuowu33z1] {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .category-total-input[b-tuuowu33z1] {
        width: 120px;
        font-size: 16px;
    }
}

/* ============================================
   PRINT STYLESHEET
   Optimized for clean, professional print output
   ============================================ */

@media print {
    /* Reset page margins and sizing */
    @page {
        size: A4;
        margin: 1.5cm 1cm;
    }

    /* Force background colors to print */
    *[b-tuuowu33z1] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Hide interactive elements */
    .sticky-action-bar[b-tuuowu33z1],
    .actions[b-tuuowu33z1],
    .btn-back[b-tuuowu33z1],
    .btn-action[b-tuuowu33z1],
    .btn-icon[b-tuuowu33z1],
    .header-actions[b-tuuowu33z1],
    .unsaved-indicator[b-tuuowu33z1],
    .help-icon[b-tuuowu33z1],
    .editor-sidebar[b-tuuowu33z1],
    .field-validation-error[b-tuuowu33z1],
    .field-validation-success[b-tuuowu33z1] {
        display: none !important;
    }

    /* Reset container */
    .imported-quote-editor[b-tuuowu33z1] {
        padding: 0;
        background: white;
        min-height: auto;
    }

    /* Clean hero section for print */
    .hero-section[b-tuuowu33z1],
    .editor-header[b-tuuowu33z1] {
        background: white;
        border: 1px solid #d1d1d6;
        box-shadow: none;
        padding: 16px;
        margin-bottom: 16px;
        page-break-inside: avoid;
    }

    /* Quote title prominent */
    .quote-title[b-tuuowu33z1] {
        font-size: 24px;
        color: #1d1d1f;
        -webkit-line-clamp: unset;
        max-height: none;
    }

    /* Quote number badge - simple */
    .quote-number[b-tuuowu33z1] {
        background: #f5f5f7;
        color: #1d1d1f;
        border: 1px solid #d1d1d6;
        font-size: 12px;
    }

    /* Metadata readable */
    .quote-metadata[b-tuuowu33z1] {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .metadata-label[b-tuuowu33z1] {
        color: #636366;
        font-size: 11px;
    }

    .metadata-value[b-tuuowu33z1] {
        color: #1d1d1f;
        font-size: 12px;
    }

    /* Status badge - simple black and white */
    .status-badge[b-tuuowu33z1] {
        background: #f5f5f7;
        color: #1d1d1f;
        border: 1px solid #d1d1d6;
    }

    /* Original file info */
    .original-file-info[b-tuuowu33z1] {
        background: #f5f5f7;
        border-left: 3px solid #636366;
        font-size: 11px;
        padding: 8px 12px;
    }

    /* Grid layout - single column for print */
    .editor-grid[b-tuuowu33z1] {
        display: block;
    }

    /* Sections - clean cards */
    .section[b-tuuowu33z1],
    .section-card-premium[b-tuuowu33z1] {
        background: white;
        border: 1px solid #d1d1d6;
        box-shadow: none;
        padding: 16px;
        margin-bottom: 16px;
        page-break-inside: avoid;
    }

    .section h4[b-tuuowu33z1] {
        font-size: 14px;
        color: #1d1d1f;
        border-bottom: 1px solid #e8e8ed;
        padding-bottom: 8px;
        margin-bottom: 12px;
    }

    .section h4 i[b-tuuowu33z1] {
        display: none; /* Hide icons in print */
    }

    /* Section edit cards */
    .section-edit-card[b-tuuowu33z1] {
        border: 1px solid #d1d1d6;
        box-shadow: none;
        margin-bottom: 16px;
        page-break-inside: avoid;
    }

    .section-edit-header[b-tuuowu33z1] {
        background: #f5f5f7;
        padding: 12px 16px;
    }

    /* Section items - table layout */
    .section-items[b-tuuowu33z1] {
        background: white;
        padding: 12px;
    }

    .items-title[b-tuuowu33z1] {
        font-size: 12px;
        color: #1d1d1f;
        margin-bottom: 8px;
    }

    .items-title i[b-tuuowu33z1] {
        display: none;
    }

    .items-table[b-tuuowu33z1] {
        padding: 0;
    }

    .items-table-header[b-tuuowu33z1] {
        display: grid !important;
        grid-template-columns: 3fr 1fr 1fr 1.2fr 1.2fr;
        background: #f5f5f7;
        font-size: 10px;
        padding: 6px 8px;
    }

    .items-table-row[b-tuuowu33z1] {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1.2fr 1.2fr;
        font-size: 11px;
        padding: 8px;
        border: none;
        border-bottom: 1px solid #e8e8ed;
    }

    .items-table-row .col-desc[b-tuuowu33z1] {
        grid-column: auto;
    }

    .items-table-row .col-price[b-tuuowu33z1],
    .items-table-row .col-total[b-tuuowu33z1] {
        color: #1d1d1f;
        font-family: 'Courier New', monospace;
    }

    /* Section totals */
    .section-total-edit[b-tuuowu33z1] {
        background: #f5f5f7;
        padding: 12px 16px;
        border-top: 2px solid #d1d1d6;
    }

    .section-total-edit label[b-tuuowu33z1] {
        font-size: 12px;
    }

    .section-total-edit .total-input[b-tuuowu33z1] {
        font-size: 14px;
        color: #1d1d1f;
        background: transparent;
        border: none;
    }

    /* Totals summary - important section */
    .totals-summary[b-tuuowu33z1] {
        background: white;
        border: 2px solid #1d1d1f;
        box-shadow: none;
        padding: 16px;
        page-break-inside: avoid;
    }

    .totals-summary h4[b-tuuowu33z1] {
        font-size: 14px;
        border-bottom: 1px solid #d1d1d6;
        padding-bottom: 8px;
        margin-bottom: 12px;
    }

    .total-row[b-tuuowu33z1] {
        padding: 6px 8px;
        font-size: 12px;
    }

    .total-row:hover[b-tuuowu33z1] {
        background: transparent;
    }

    .total-row.discount[b-tuuowu33z1] {
        background: #f5f5f7;
    }

    .total-row.final[b-tuuowu33z1] {
        background: #f5f5f7;
        border-top: 2px solid #1d1d1f;
        margin-top: 8px;
        padding: 12px 8px;
    }

    .total-row.final span[b-tuuowu33z1] {
        font-size: 14px;
        color: #1d1d1f;
    }

    .total-row.final strong[b-tuuowu33z1] {
        font-size: 18px;
        color: #1d1d1f;
    }

    .total-row strong[b-tuuowu33z1] {
        color: #1d1d1f;
        font-family: 'Courier New', monospace;
    }

    /* Form controls - display as plain text */
    .form-control[b-tuuowu33z1] {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 12px;
        color: #1d1d1f;
    }

    textarea.form-control[b-tuuowu33z1] {
        min-height: auto;
        resize: none;
    }

    .form-group label[b-tuuowu33z1] {
        font-size: 10px;
        color: #636366;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .form-group label i[b-tuuowu33z1] {
        display: none;
    }

    /* Page break hints */
    .section-edit-card[b-tuuowu33z1],
    .section[b-tuuowu33z1],
    .totals-summary[b-tuuowu33z1] {
        page-break-inside: avoid;
    }

    /* Force page break before totals if needed */
    .totals-summary[b-tuuowu33z1] {
        page-break-before: auto;
    }

    /* Sections container */
    .sections-container[b-tuuowu33z1] {
        background: white;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 16px 0;
    }

    .section-title[b-tuuowu33z1] {
        font-size: 14px;
        border-bottom: 1px solid #d1d1d6;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

    /* Ensure all text is black for better print quality */
    .metadata-item[b-tuuowu33z1],
    .form-row[b-tuuowu33z1],
    .form-group[b-tuuowu33z1],
    .section-card-body[b-tuuowu33z1],
    .section-edit-info[b-tuuowu33z1] {
        color: #1d1d1f;
    }

    /* Remove animations */
    .fade-in-up[b-tuuowu33z1],
    .conditional-field[b-tuuowu33z1] {
        animation: none;
    }

    /* Hide skeleton elements if printing during load */
    .skeleton[b-tuuowu33z1],
    .skeleton-text[b-tuuowu33z1],
    .skeleton-input[b-tuuowu33z1],
    .skeleton-button[b-tuuowu33z1],
    .skeleton-card[b-tuuowu33z1],
    .editor-skeleton[b-tuuowu33z1] {
        display: none !important;
    }

    /* Ensure URLs are shown for links */
    a[href][b-tuuowu33z1]::after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #636366;
    }

    /* Print footer with quote info */
    .imported-quote-editor[b-tuuowu33z1]::after {
        content: "Printed from BuildBoost Quote Editor";
        display: block;
        text-align: center;
        font-size: 10px;
        color: #636366;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #e8e8ed;
    }
}
/* /Features/Quotes/Organisms/MobileQuoteItemForm/MobileQuoteItemForm.razor.rz.scp.css */
/* Mobile Item Form Overlay */
.mobile-item-form-overlay[b-3voqqxsqrv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    animation: overlayFadeIn-b-3voqqxsqrv 0.2s ease;
}

@keyframes overlayFadeIn-b-3voqqxsqrv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*
 * Form Container — iOS-style bottom sheet.
 * Slides up with a spring-like cubic-bezier matching native feel.
 * border-radius: 24px top only — consistent with Apple sheet language.
 */
.mobile-item-form-container[b-3voqqxsqrv] {
    width: 100%;
    max-height: 92vh;
    background: white;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    animation: sheetSlideUp-b-3voqqxsqrv 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

@keyframes sheetSlideUp-b-3voqqxsqrv {
    from {
        transform: translateY(100%);
        opacity: 0.7;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Form Header */
.form-header[b-3voqqxsqrv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    position: relative;
    /* Subtle drag-handle indicator — matches iOS sheet UX */
    flex-shrink: 0;
}

/* Drag handle pill — visual affordance for sheet dismissal */
.form-header[b-3voqqxsqrv]::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
}

.form-header h4[b-3voqqxsqrv] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/*
 * Close button: 44px × 44px touch target (Apple HIG minimum).
 * Circular with white border — clearly visible on gradient header.
 */
.form-header .btn-close[b-3voqqxsqrv] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.form-header .btn-close:active[b-3voqqxsqrv] {
    background: rgba(255, 255, 255, 0.2);
}

/*
 * Form Body — scrollable content area.
 * 24px padding for generous breathing room (8pt grid × 3).
 * Extra bottom padding prevents content hiding behind sticky footer.
 */
.form-body[b-3voqqxsqrv] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px;
    padding-bottom: 88px; /* Keyboard clearance */
}

/* Smooth momentum scrolling on iOS */
.form-body[b-3voqqxsqrv]::-webkit-scrollbar {
    display: none;
}

/*
 * Form groups: 24px vertical rhythm (8pt × 3).
 * Increased from 20px for cleaner optical spacing between fields.
 */
.form-group[b-3voqqxsqrv] {
    margin-bottom: 24px;
}

.form-group label[b-3voqqxsqrv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #24292e;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.form-group label i[b-3voqqxsqrv] {
    color: #00B7DD;
    font-size: 1rem;
}

.required[b-3voqqxsqrv] {
    color: #FF6B6B;
    margin-left: 2px;
}

/*
 * Form controls: 16px padding for comfortable thumb reach.
 * font-size: 1rem (16px) — critical for preventing iOS auto-zoom on focus.
 * border-radius: 12px — medium radius, consistent vocabulary.
 */
.form-control[b-3voqqxsqrv] {
    width: 100%;
    padding: 16px;
    border: 2px solid #e1e4e8;
    border-radius: 12px;
    font-size: 1rem; /* 16px — prevents iOS zoom */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    background-color: #fafbfc;
    color: #24292e;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

.form-control:focus[b-3voqqxsqrv] {
    outline: none;
    border-color: #00B7DD;
    background-color: white;
    box-shadow: 0 0 0 4px rgba(0, 183, 221, 0.1);
}

.form-control[b-3voqqxsqrv]::placeholder {
    color: #a0a8b0;
    font-size: 0.9375rem;
}

/* Autocomplete Container */
.autocomplete-container[b-3voqqxsqrv] {
    position: relative;
}

.category-hint[b-3voqqxsqrv] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 10px;
    background: #E7F7FB;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #586069;
}

/*
 * Mobile form row: 2-column grid for qty + unit price.
 * 16px gap (8pt × 2) — more breathing room than original 12px.
 */
.form-row-mobile[b-3voqqxsqrv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/*
 * Add Notes — progressive disclosure pattern.
 * min-height 44px ensures Apple HIG touch compliance.
 * Dashed border signals optional / secondary action.
 */
.btn-add-notes[b-3voqqxsqrv] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px dashed #c8d0da;
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 44px;
    font-size: 0.875rem;
    color: #586069;
    cursor: pointer;
    width: 100%;
    margin-bottom: 24px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.btn-add-notes:active[b-3voqqxsqrv] {
    background: rgba(0, 183, 221, 0.06);
    border-color: #00B7DD;
    color: #00B7DD;
}

/*
 * Total Display — summary card at bottom of form.
 * 20px padding (8pt × 2.5) for generous internal whitespace.
 * Gradient background matches quote summary card language.
 */
.mobile-total-display[b-3voqqxsqrv] {
    background: linear-gradient(135deg, #E7F7FB 0%, #F5FCFE 100%);
    border-radius: 16px;
    padding: 20px;
    margin-top: 24px;
    border: 2px solid rgba(0, 183, 221, 0.2);
}

.total-breakdown[b-3voqqxsqrv] {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 183, 221, 0.2);
}

.breakdown-row[b-3voqqxsqrv] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.875rem;
    color: #586069;
}

.breakdown-row.discount[b-3voqqxsqrv] {
    color: #00D68F;
}

.total-row[b-3voqqxsqrv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label[b-3voqqxsqrv] {
    font-weight: 600;
    color: #24292e;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.total-value[b-3voqqxsqrv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00B7DD;
    letter-spacing: -0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/*
 * Form Footer — sticky action bar.
 * 20px padding + safe-area-inset-bottom for home indicator clearance.
 * 16px gap (8pt × 2) between buttons.
 * min-height 52px buttons — above 44px minimum, premium feel.
 */
.form-footer[b-3voqqxsqrv] {
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    background: #f8f9fa;
    border-top: 1px solid #e1e4e8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex-shrink: 0;
}

.btn-mobile-primary[b-3voqqxsqrv],
.btn-mobile-secondary[b-3voqqxsqrv] {
    padding: 16px;
    min-height: 52px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.btn-mobile-primary[b-3voqqxsqrv] {
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

/* Active pressed state — slight scale + shadow reduction */
.btn-mobile-primary:active:not(:disabled)[b-3voqqxsqrv] {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 183, 221, 0.2);
}

.btn-mobile-primary:disabled[b-3voqqxsqrv] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-mobile-secondary[b-3voqqxsqrv] {
    background: #f0f2f4;
    color: #586069;
}

.btn-mobile-secondary:active[b-3voqqxsqrv] {
    background: #e4e7ea;
    transform: scale(0.97);
}

/* Responsive adjustments for very small screens (< 380px) */
@media (max-width: 380px) {
    /*
     * On 320px screens the 2-col grid for qty/price feels cramped.
     * Stack to single column so inputs remain comfortably tappable.
     */
    .form-row-mobile[b-3voqqxsqrv] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Footer stacks to full-width buttons */
    .form-footer[b-3voqqxsqrv] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Primary (save) above secondary (cancel) — priority order */
    .btn-mobile-primary[b-3voqqxsqrv] {
        order: 1;
    }

    .btn-mobile-secondary[b-3voqqxsqrv] {
        order: 2;
    }

    .total-value[b-3voqqxsqrv] {
        font-size: 1.25rem;
    }

    /* Slightly tighter body padding on 320px screens */
    .form-body[b-3voqqxsqrv] {
        padding: 20px;
        padding-bottom: 88px;
    }
}

/* Landscape orientation — limited height, more compact layout */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-item-form-container[b-3voqqxsqrv] {
        max-height: 100vh;
        border-radius: 0;
    }

    .form-body[b-3voqqxsqrv] {
        padding: 12px 20px;
        padding-bottom: 68px;
    }

    .form-group[b-3voqqxsqrv] {
        margin-bottom: 12px;
    }

    .mobile-total-display[b-3voqqxsqrv] {
        padding: 12px 16px;
        margin-top: 12px;
    }

    .form-footer[b-3voqqxsqrv] {
        padding: 12px 20px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .btn-mobile-primary[b-3voqqxsqrv],
    .btn-mobile-secondary[b-3voqqxsqrv] {
        min-height: 44px;
        padding: 12px;
    }
}

/* iOS safe-area — handles notch and home indicator on all orientations */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-item-form-container[b-3voqqxsqrv] {
        /* Reserve space at bottom for home indicator */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .form-body[b-3voqqxsqrv] {
        /* Keyboard + home indicator clearance */
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .form-footer[b-3voqqxsqrv] {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}
/* /Features/Quotes/Organisms/QuoteCategoryList/QuoteCategoryList.razor.rz.scp.css */
.quote-category-list[b-0cytf3efl5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    border-right: 1px solid #e2e8f0;
    padding-right: 1rem;
}

.category-list-header[b-0cytf3efl5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.category-list-header h4[b-0cytf3efl5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.category-selector[b-0cytf3efl5] {
    width: 100%;
}

.category-list[b-0cytf3efl5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 400px;
}

.category-item[b-0cytf3efl5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.375rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}

.category-item:hover[b-0cytf3efl5] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.category-item.selected[b-0cytf3efl5] {
    background-color: #e0f2fe;
    border-color: #7dd3fc;
}

.category-info[b-0cytf3efl5] {
    display: flex;
    flex-direction: column;
}

.category-name[b-0cytf3efl5] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1e293b;
}

.category-items-count[b-0cytf3efl5] {
    font-size: 0.75rem;
    color: #64748b;
}

.category-total[b-0cytf3efl5] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0f172a;
}

.no-categories[b-0cytf3efl5] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    padding: 1rem;
}

.no-categories p[b-0cytf3efl5] {
    color: #64748b;
    font-size: 0.875rem;
    text-align: center;
}
/* /Features/Quotes/Organisms/QuoteEditor/QuoteEditor.razor.rz.scp.css */
.quote-editor[b-johs2ksqu4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

.quote-editor-header[b-johs2ksqu4] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1.5rem;
}

.quote-info[b-johs2ksqu4] {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

.quote-header-fields[b-johs2ksqu4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    flex: 3;
}

.quote-status-field[b-johs2ksqu4] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.quote-field[b-johs2ksqu4] {
    display: flex;
    flex-direction: column;
}

.quote-field label[b-johs2ksqu4],
.quote-status-field label[b-johs2ksqu4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}

.quote-input[b-johs2ksqu4] {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.quote-input:focus[b-johs2ksqu4] {
    outline: none;
    border-color: #7dd3fc;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.5);
}

.quote-editor-body[b-johs2ksqu4] {
    display: flex;
    gap: 1.5rem;
    min-height: 500px;
}

.quote-editor-sidebar[b-johs2ksqu4] {
    flex: 1;
    max-width: 300px;
}

.quote-editor-content[b-johs2ksqu4] {
    flex: 3;
}

.no-category-selected[b-johs2ksqu4] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    padding: 1rem;
}

.no-category-selected p[b-johs2ksqu4] {
    color: #64748b;
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.5;
}

.quote-editor-footer[b-johs2ksqu4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.quote-totals[b-johs2ksqu4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 250px;
}

.quote-total-row[b-johs2ksqu4] {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.total-label[b-johs2ksqu4] {
    color: #475569;
}

.total-value[b-johs2ksqu4] {
    font-weight: 500;
    color: #1e293b;
}

.discount-row[b-johs2ksqu4] {
    color: #dc3545;
}

.discount-row .total-value[b-johs2ksqu4] {
    color: #dc3545;
}

.grand-total[b-johs2ksqu4] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 1rem;
}

.quote-actions[b-johs2ksqu4] {
    display: flex;
    gap: 0.75rem;
}

.quote-action-button[b-johs2ksqu4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-button[b-johs2ksqu4] {
    background-color: #00B7DD;
    color: white;
    border: none;
}

.save-button:hover[b-johs2ksqu4] {
    background-color: #0098BC;
}

.preview-button[b-johs2ksqu4] {
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.preview-button:hover[b-johs2ksqu4] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}
/* /Features/Quotes/Organisms/QuoteImportModal/QuoteImportModal.razor.rz.scp.css */
/* File Upload Zone - Premium Design */
.file-upload-zone[b-eyrou3hmmm] {
    border: 2px dashed rgba(0, 183, 221, 0.3);
    border-radius: 16px;
    background-color: rgba(0, 183, 221, 0.02);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 32px 24px;
    text-align: center;
}

.file-upload-zone:hover[b-eyrou3hmmm] {
    border-color: rgba(0, 183, 221, 0.5);
    background-color: rgba(0, 183, 221, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 183, 221, 0.1);
}

.file-upload-zone.dragging[b-eyrou3hmmm] {
    border-color: #00B7DD;
    background-color: rgba(0, 183, 221, 0.1);
    box-shadow: 0 4px 20px rgba(0, 183, 221, 0.15);
}

/* Mobile Responsive Upload Zone */
@media (max-width: 768px) {
    .file-upload-zone[b-eyrou3hmmm] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .file-upload-zone[b-eyrou3hmmm] {
        padding: 20px 12px;
    }
}
/* /Features/Quotes/Organisms/QuoteImportPreviewDialog/QuoteImportPreviewDialog.razor.rz.scp.css */
/* Quote Import Preview Dialog - Premium Design System */

/* Dialog content container - clean padding without !important */
.preview-dialog-content[b-xazebazuhn] {
    padding: 0;
    overflow: hidden;
    height: calc(100vh - 200px);
    min-height: 600px;
}

/* Hide default MudDialog actions - component handles its own */
.preview-dialog-actions[b-xazebazuhn] {
    display: none;
}

/* Tablet and Mobile Responsiveness */
@media (max-width: 768px) {
    .preview-dialog-content[b-xazebazuhn] {
        height: calc(100vh - 120px);
        min-height: 500px;
    }
}

@media (max-width: 480px) {
    .preview-dialog-content[b-xazebazuhn] {
        height: calc(100vh - 100px);
        min-height: 400px;
    }
}
/* /Features/Quotes/Organisms/QuoteImportPreview/Components/CategoryCard.razor.rz.scp.css */
/* Apple-inspired collapsible category card */
.category-card[b-w0qf1a0eoe] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.category-card:hover[b-w0qf1a0eoe] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 183, 221, 0.2);
}

.category-card:active[b-w0qf1a0eoe] {
    transform: translateY(0);
}

.category-card.expanded[b-w0qf1a0eoe] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Category header */
.category-header[b-w0qf1a0eoe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    transition: background-color 0.2s ease;
}

.category-card:hover .category-header[b-w0qf1a0eoe] {
    background-color: rgba(0, 0, 0, 0.01);
}

.category-info[b-w0qf1a0eoe] {
    flex: 1;
    min-width: 0;
}

.category-name[b-w0qf1a0eoe] {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.category-meta[b-w0qf1a0eoe] {
    font-size: 13px;
    color: #86868b;
    margin: 0;
    font-weight: 500;
}

/* Category right side */
.category-right[b-w0qf1a0eoe] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.category-total[b-w0qf1a0eoe] {
    font-size: 20px;
    font-weight: 600;
    color: #00B7DD;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.expand-icon[b-w0qf1a0eoe] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1d1d1f;
}

.category-card:hover .expand-icon[b-w0qf1a0eoe] {
    background-color: rgba(0, 183, 221, 0.1);
    color: #00B7DD;
}

.category-card.expanded .expand-icon[b-w0qf1a0eoe] {
    transform: rotate(180deg);
    background-color: rgba(0, 183, 221, 0.15);
    color: #00B7DD;
}

/* Category items (expanded state) */
.category-items[b-w0qf1a0eoe] {
    padding: 0 24px 20px 24px;
    animation: expandItems-b-w0qf1a0eoe 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Items header */
.items-header[b-w0qf1a0eoe] {
    display: grid;
    grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1fr;
    gap: 12px;
    padding: 12px 16px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-quantity[b-w0qf1a0eoe],
.header-price[b-w0qf1a0eoe],
.header-total[b-w0qf1a0eoe] {
    text-align: right;
}

/* Item row */
.item-row[b-w0qf1a0eoe] {
    display: grid;
    grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1fr;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 15px;
    color: #1d1d1f;
    background-color: transparent;
    transition: background-color 0.2s ease;
    animation: slideIn-b-w0qf1a0eoe 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.item-row:hover[b-w0qf1a0eoe] {
    background-color: rgba(0, 183, 221, 0.04);
}

.item-description[b-w0qf1a0eoe] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-unit[b-w0qf1a0eoe] {
    color: #86868b;
    font-size: 14px;
}

.item-quantity[b-w0qf1a0eoe],
.item-price[b-w0qf1a0eoe],
.item-total[b-w0qf1a0eoe] {
    text-align: right;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.item-total[b-w0qf1a0eoe] {
    color: #00B7DD;
    font-weight: 600;
}

/* Category subtotal */
.category-subtotal[b-w0qf1a0eoe] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    padding: 16px 16px 0 16px;
    margin-top: 12px;
    border-top: 2px solid rgba(0, 0, 0, 0.06);
}

.subtotal-label[b-w0qf1a0eoe] {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

.subtotal-value[b-w0qf1a0eoe] {
    font-size: 20px;
    font-weight: 700;
    color: #00B7DD;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Animations */
@keyframes expandItems-b-w0qf1a0eoe {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

@keyframes slideIn-b-w0qf1a0eoe {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive design */
@media (max-width: 1024px) {
    .items-header[b-w0qf1a0eoe],
    .item-row[b-w0qf1a0eoe] {
        grid-template-columns: 2fr 0.6fr 0.7fr 0.9fr 1fr;
        gap: 8px;
        font-size: 14px;
    }

    .items-header[b-w0qf1a0eoe] {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .category-header[b-w0qf1a0eoe] {
        padding: 16px 20px;
    }

    .category-name[b-w0qf1a0eoe] {
        font-size: 16px;
    }

    .category-total[b-w0qf1a0eoe] {
        font-size: 18px;
    }

    .category-items[b-w0qf1a0eoe] {
        padding: 0 20px 16px 20px;
    }

    /* Stack items vertically on mobile */
    .items-header[b-w0qf1a0eoe] {
        display: none;
    }

    .item-row[b-w0qf1a0eoe] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        margin-bottom: 8px;
    }

    .item-description[b-w0qf1a0eoe] {
        font-size: 15px;
        font-weight: 600;
        white-space: normal;
    }

    .item-unit[b-w0qf1a0eoe],
    .item-quantity[b-w0qf1a0eoe],
    .item-price[b-w0qf1a0eoe] {
        display: inline;
        text-align: left;
        font-size: 13px;
    }

    .item-unit[b-w0qf1a0eoe]::before {
        content: 'Unit: ';
        color: #86868b;
        font-weight: 500;
    }

    .item-quantity[b-w0qf1a0eoe]::before {
        content: 'Qty: ';
        color: #86868b;
        font-weight: 500;
    }

    .item-price[b-w0qf1a0eoe]::before {
        content: 'Price: ';
        color: #86868b;
        font-weight: 500;
    }

    .item-total[b-w0qf1a0eoe] {
        text-align: left;
        font-size: 16px;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .item-total[b-w0qf1a0eoe]::before {
        content: 'Total: ';
        color: #86868b;
        font-weight: 500;
    }

    .category-subtotal[b-w0qf1a0eoe] {
        padding: 12px 0 0 0;
    }

    .subtotal-value[b-w0qf1a0eoe] {
        font-size: 18px;
    }
}
/* /Features/Quotes/Organisms/QuoteImportPreview/Components/QuoteDetailsSheet.razor.rz.scp.css */
/* iOS-style bottom sheet overlay */
.details-sheet-overlay[b-afscylvvvc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    visibility: hidden;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
    z-index: 1000;
}

.details-sheet-overlay.visible[b-afscylvvvc] {
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    visibility: visible;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Bottom sheet container */
.details-sheet[b-afscylvvvc] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.details-sheet.visible[b-afscylvvvc] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* iOS-style handle */
.sheet-handle-container[b-afscylvvvc] {
    padding: 12px 0 8px 0;
    display: flex;
    justify-content: center;
    cursor: grab;
}

.sheet-handle[b-afscylvvvc] {
    width: 36px;
    height: 5px;
    background-color: #d1d1d6;
    border-radius: 100px;
}

/* Sheet header */
.sheet-header[b-afscylvvvc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sheet-title[b-afscylvvvc] {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.sheet-close-button[b-afscylvvvc] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1d1d1f;
}

.sheet-close-button:hover[b-afscylvvvc] {
    background-color: rgba(0, 0, 0, 0.08);
}

.sheet-close-button:active[b-afscylvvvc] {
    transform: scale(0.95);
}

/* Sheet content */
.sheet-content[b-afscylvvvc] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}

/* Sections */
.details-section[b-afscylvvvc] {
    margin-bottom: 32px;
}

.details-section:last-of-type[b-afscylvvvc] {
    margin-bottom: 16px;
}

.section-title[b-afscylvvvc] {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.section-description[b-afscylvvvc] {
    font-size: 13px;
    color: #86868b;
    margin: 0 0 16px 0;
}

/* Detail grid */
.detail-grid[b-afscylvvvc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-field[b-afscylvvvc] {
    display: flex;
    flex-direction: column;
}

.detail-field.full-width[b-afscylvvvc] {
    grid-column: 1 / -1;
}

.detail-label[b-afscylvvvc] {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.detail-input[b-afscylvvvc] {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: #1d1d1f;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.detail-input[b-afscylvvvc]::placeholder {
    color: #86868b;
}

.detail-input:hover[b-afscylvvvc] {
    background-color: rgba(0, 0, 0, 0.04);
}

.detail-input:focus[b-afscylvvvc] {
    outline: none;
    background-color: #ffffff;
    border-color: #00B7DD;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.1);
}

/* Sheet actions */
.sheet-actions[b-afscylvvvc] {
    display: flex;
    gap: 12px;
    padding: 16px 0 0 0;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sheet-button[b-afscylvvvc] {
    flex: 1;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.sheet-button.secondary[b-afscylvvvc] {
    background-color: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.sheet-button.secondary:hover[b-afscylvvvc] {
    background-color: rgba(0, 0, 0, 0.08);
}

.sheet-button.primary[b-afscylvvvc] {
    background-color: #00B7DD;
    color: #ffffff;
}

.sheet-button.primary:hover[b-afscylvvvc] {
    background-color: #0099BB;
}

.sheet-button:active[b-afscylvvvc] {
    transform: scale(0.98);
}

/* Responsive design */
@media (max-width: 768px) {
    .details-sheet[b-afscylvvvc] {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }

    .sheet-header[b-afscylvvvc] {
        padding: 8px 20px 12px 20px;
    }

    .sheet-title[b-afscylvvvc] {
        font-size: 18px;
    }

    .sheet-content[b-afscylvvvc] {
        padding: 20px;
    }

    .detail-grid[b-afscylvvvc] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .section-title[b-afscylvvvc] {
        font-size: 16px;
    }

    .detail-input[b-afscylvvvc] {
        padding: 12px 14px;
    }

    .sheet-actions[b-afscylvvvc] {
        flex-direction: column-reverse;
    }

    .sheet-button[b-afscylvvvc] {
        width: 100%;
    }
}

/* Scrollbar styling (webkit browsers) */
.sheet-content[b-afscylvvvc]::-webkit-scrollbar {
    width: 8px;
}

.sheet-content[b-afscylvvvc]::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-content[b-afscylvvvc]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 100px;
}

.sheet-content[b-afscylvvvc]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
/* /Features/Quotes/Organisms/QuoteImportPreview/Components/QuoteHero.razor.rz.scp.css */
/* Apple-inspired hero section */
.quote-hero[b-r907r8nz12] {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-radius: 20px;
    padding: 40px 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quote-hero:hover[b-r907r8nz12] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.quote-hero-content[b-r907r8nz12] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Confidence badge */
.confidence-badge[b-r907r8nz12] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confidence-badge:hover[b-r907r8nz12] {
    transform: scale(1.05);
}

.confidence-high[b-r907r8nz12] {
    background-color: #d1fae5;
    color: #065f46;
}

.confidence-medium[b-r907r8nz12] {
    background-color: #fef3c7;
    color: #92400e;
}

.confidence-low[b-r907r8nz12] {
    background-color: #fee2e2;
    color: #991b1b;
}

.confidence-icon[b-r907r8nz12] {
    font-size: 14px;
    line-height: 1;
}

.confidence-text[b-r907r8nz12] {
    line-height: 1;
}

/* Quote title section */
.quote-title-section[b-r907r8nz12] {
    width: 100%;
    margin-bottom: 16px;
    position: relative;
}

.quote-title-input[b-r907r8nz12] {
    width: 100%;
    font-size: 34px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    border: none;
    background: transparent;
    outline: none;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.quote-title-input[b-r907r8nz12]::placeholder {
    color: #86868b;
}

.quote-title-input:hover[b-r907r8nz12] {
    background-color: rgba(0, 0, 0, 0.02);
}

.quote-title-input:focus[b-r907r8nz12] {
    background-color: rgba(0, 183, 221, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.1);
}

.title-edit-hint[b-r907r8nz12] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #00B7DD;
    animation: fadeIn-b-r907r8nz12 0.3s ease-out;
}

.hint-icon[b-r907r8nz12] {
    font-size: 14px;
}

/* Quote amount section */
.quote-amount-section[b-r907r8nz12] {
    margin-bottom: 20px;
}

.amount-label[b-r907r8nz12] {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.quote-amount[b-r907r8nz12] {
    font-size: 56px;
    font-weight: 600;
    color: #00B7DD;
    line-height: 1.1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.5px;
}

/* Quick stats */
.quote-stats[b-r907r8nz12] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 100px;
    font-size: 15px;
    color: #1d1d1f;
}

.stat-item[b-r907r8nz12] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-icon[b-r907r8nz12] {
    font-size: 16px;
    line-height: 1;
}

.stat-text[b-r907r8nz12] {
    font-weight: 500;
}

.stat-divider[b-r907r8nz12] {
    color: #d1d1d6;
    font-size: 12px;
}

/* Animations */
@keyframes fadeIn-b-r907r8nz12 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .quote-hero[b-r907r8nz12] {
        padding: 32px 24px;
        border-radius: 16px;
    }

    .quote-title-input[b-r907r8nz12] {
        font-size: 28px;
    }

    .quote-amount[b-r907r8nz12] {
        font-size: 48px;
    }

    .quote-stats[b-r907r8nz12] {
        font-size: 14px;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .quote-hero[b-r907r8nz12] {
        padding: 24px 16px;
    }

    .quote-title-input[b-r907r8nz12] {
        font-size: 24px;
    }

    .quote-amount[b-r907r8nz12] {
        font-size: 40px;
    }

    .quote-stats[b-r907r8nz12] {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .stat-divider[b-r907r8nz12] {
        display: none;
    }
}
/* /Features/Quotes/Organisms/QuoteImportPreview/Components/TechnicalInfoModal.razor.rz.scp.css */
/* Technical info modal overlay */
.tech-info-modal[b-85i2j3f9vg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
    z-index: 2000;
    padding: 20px;
}

.tech-info-modal.visible[b-85i2j3f9vg] {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    visibility: visible;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Modal content */
.tech-modal-content[b-85i2j3f9vg] {
    background-color: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16);
    transform: scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
}

.tech-info-modal.visible .tech-modal-content[b-85i2j3f9vg] {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Modal header */
.tech-modal-header[b-85i2j3f9vg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tech-modal-title[b-85i2j3f9vg] {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.tech-close-button[b-85i2j3f9vg] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1d1d1f;
}

.tech-close-button:hover[b-85i2j3f9vg] {
    background-color: rgba(0, 0, 0, 0.08);
}

.tech-close-button:active[b-85i2j3f9vg] {
    transform: scale(0.95);
}

/* Modal body */
.tech-modal-body[b-85i2j3f9vg] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    -webkit-overflow-scrolling: touch;
}

/* Sections */
.tech-section[b-85i2j3f9vg] {
    margin-bottom: 20px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
}

.tech-section:last-child[b-85i2j3f9vg] {
    margin-bottom: 0;
}

.tech-section.warning[b-85i2j3f9vg] {
    background-color: rgba(255, 193, 7, 0.08);
}

.tech-section.error[b-85i2j3f9vg] {
    background-color: rgba(244, 67, 54, 0.08);
}

.tech-section-header[b-85i2j3f9vg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.tech-icon[b-85i2j3f9vg] {
    font-size: 18px;
    line-height: 1;
}

.tech-section-title[b-85i2j3f9vg] {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Value rows */
.tech-value-row[b-85i2j3f9vg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.tech-value-row:last-child[b-85i2j3f9vg] {
    border-bottom: none;
    padding-bottom: 0;
}

.tech-label[b-85i2j3f9vg] {
    font-size: 14px;
    color: #86868b;
    font-weight: 500;
}

.tech-value[b-85i2j3f9vg] {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.tech-badge[b-85i2j3f9vg] {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.tech-badge.badge-high[b-85i2j3f9vg] {
    background-color: #d1fae5;
    color: #065f46;
}

.tech-badge.badge-medium[b-85i2j3f9vg] {
    background-color: #fef3c7;
    color: #92400e;
}

.tech-badge.badge-low[b-85i2j3f9vg] {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Lists */
.tech-list[b-85i2j3f9vg] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-list-item[b-85i2j3f9vg] {
    font-size: 14px;
    color: #1d1d1f;
    padding: 8px 0 8px 24px;
    position: relative;
    line-height: 1.5;
}

.tech-list-item[b-85i2j3f9vg]::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: #86868b;
    font-weight: bold;
}

.tech-section.warning .tech-list-item[b-85i2j3f9vg] {
    color: #92400e;
}

.tech-section.error .tech-list-item[b-85i2j3f9vg] {
    color: #991b1b;
}

/* Modal footer */
.tech-modal-footer[b-85i2j3f9vg] {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tech-button[b-85i2j3f9vg] {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    background-color: #00B7DD;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.tech-button:hover[b-85i2j3f9vg] {
    background-color: #0099BB;
}

.tech-button:active[b-85i2j3f9vg] {
    transform: scale(0.98);
}

/* Scrollbar styling */
.tech-modal-body[b-85i2j3f9vg]::-webkit-scrollbar {
    width: 8px;
}

.tech-modal-body[b-85i2j3f9vg]::-webkit-scrollbar-track {
    background: transparent;
}

.tech-modal-body[b-85i2j3f9vg]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 100px;
}

.tech-modal-body[b-85i2j3f9vg]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
    .tech-info-modal[b-85i2j3f9vg] {
        padding: 16px;
    }

    .tech-modal-content[b-85i2j3f9vg] {
        max-width: 100%;
        max-height: 85vh;
    }

    .tech-modal-header[b-85i2j3f9vg] {
        padding: 16px 20px;
    }

    .tech-modal-title[b-85i2j3f9vg] {
        font-size: 17px;
    }

    .tech-modal-body[b-85i2j3f9vg] {
        padding: 16px 20px;
    }

    .tech-section[b-85i2j3f9vg] {
        padding: 14px;
    }

    .tech-modal-footer[b-85i2j3f9vg] {
        padding: 12px 20px;
    }
}
/* /Features/Quotes/Organisms/QuoteImportPreview/QuoteImportPreview.razor.rz.scp.css */
/* BuildBoost Premium Quote Preview - Cyan Design System */
.apple-quote-preview[b-p72xrcwnh3] {
    min-height: 100%;
    background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);
    padding: 32px;
    position: relative;
}

/* Technical info button (top-right) */
.tech-info-button[b-p72xrcwnh3] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #86868b;
    z-index: 10;
}

.tech-info-button:hover[b-p72xrcwnh3] {
    background-color: rgba(0, 183, 221, 0.1);
    color: #00B7DD;
    transform: scale(1.05);
}

.tech-info-button:active[b-p72xrcwnh3] {
    transform: scale(0.95);
}

/* Categories section */
.categories-section[b-p72xrcwnh3] {
    margin-bottom: 24px;
}

.section-header[b-p72xrcwnh3] {
    margin-bottom: 16px;
    text-align: center;
}

.section-title[b-p72xrcwnh3] {
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.section-subtitle[b-p72xrcwnh3] {
    font-size: 14px;
    color: #86868b;
    font-weight: 500;
}

.categories-list[b-p72xrcwnh3] {
    max-width: 900px;
    margin: 0 auto;
}

/* Show details button */
.show-details-button[b-p72xrcwnh3] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.show-details-button:hover[b-p72xrcwnh3] {
    background-color: rgba(0, 183, 221, 0.04);
    border-color: rgba(0, 183, 221, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.show-details-button:active[b-p72xrcwnh3] {
    transform: translateY(0);
}

.button-icon[b-p72xrcwnh3] {
    font-size: 18px;
}

.button-text[b-p72xrcwnh3] {
    flex: 1;
    text-align: center;
}

.button-chevron[b-p72xrcwnh3] {
    color: #86868b;
    transition: transform 0.2s ease;
}

.show-details-button:hover .button-chevron[b-p72xrcwnh3] {
    transform: translateX(2px);
    color: #00B7DD;
}

/* Action buttons - BuildBoost Design System */
.action-buttons[b-p72xrcwnh3] {
    display: flex;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.action-button[b-p72xrcwnh3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.75;
    min-height: 36px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.action-button:disabled[b-p72xrcwnh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-button.secondary[b-p72xrcwnh3] {
    background-color: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.action-button.secondary:hover:not(:disabled)[b-p72xrcwnh3] {
    background-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.action-button.primary[b-p72xrcwnh3] {
    background-color: #00B7DD;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 183, 221, 0.3);
}

.action-button.primary:hover:not(:disabled)[b-p72xrcwnh3] {
    background-color: #0099BB;
    box-shadow: 0 4px 20px rgba(0, 183, 221, 0.4);
    transform: translateY(-2px);
}

.action-button:active:not(:disabled)[b-p72xrcwnh3] {
    transform: translateY(0);
}

.button-spinner[b-p72xrcwnh3] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-p72xrcwnh3 0.8s linear infinite;
}

/* Loading state - BuildBoost Cyan */
.apple-preview-loading[b-p72xrcwnh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 48px;
}

.loading-spinner[b-p72xrcwnh3] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 183, 221, 0.1);
    border-top-color: #00B7DD;
    border-radius: 50%;
    animation: spin-b-p72xrcwnh3 0.8s linear infinite;
    margin-bottom: 20px;
}

.loading-text[b-p72xrcwnh3] {
    font-size: 17px;
    color: #86868b;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Error state */
.apple-preview-error[b-p72xrcwnh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 48px;
    text-align: center;
}

.error-icon[b-p72xrcwnh3] {
    font-size: 64px;
    margin-bottom: 16px;
}

.error-title[b-p72xrcwnh3] {
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.error-message[b-p72xrcwnh3] {
    font-size: 15px;
    color: #86868b;
    margin-bottom: 24px;
}

.error-button[b-p72xrcwnh3] {
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.75;
    min-height: 36px;
    background-color: #00B7DD;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

.error-button:hover[b-p72xrcwnh3] {
    background-color: #0099BB;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
}

.error-button:active[b-p72xrcwnh3] {
    transform: translateY(0);
}

/* Animations */
@keyframes spin-b-p72xrcwnh3 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive design - BuildBoost Mobile-First */
@media (max-width: 1024px) {
    .apple-quote-preview[b-p72xrcwnh3] {
        padding: 24px;
    }

    .categories-list[b-p72xrcwnh3],
    .action-buttons[b-p72xrcwnh3],
    .show-details-button[b-p72xrcwnh3] {
        max-width: 100%;
    }
}

/* Tablet and Mobile - 44px Touch Targets */
@media (max-width: 768px) {
    .apple-quote-preview[b-p72xrcwnh3] {
        padding: 20px 16px;
    }

    .tech-info-button[b-p72xrcwnh3] {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }

    .section-title[b-p72xrcwnh3] {
        font-size: 20px;
    }

    .section-subtitle[b-p72xrcwnh3] {
        font-size: 13px;
    }

    .show-details-button[b-p72xrcwnh3] {
        padding: 14px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    /* Stack buttons vertically on mobile */
    .action-buttons[b-p72xrcwnh3] {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .action-button[b-p72xrcwnh3] {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.875rem;
        min-height: 44px;
    }

    .apple-preview-loading[b-p72xrcwnh3],
    .apple-preview-error[b-p72xrcwnh3] {
        min-height: 300px;
        padding: 32px 20px;
    }

    .loading-spinner[b-p72xrcwnh3] {
        width: 40px;
        height: 40px;
    }

    .loading-text[b-p72xrcwnh3] {
        font-size: 16px;
    }

    .error-icon[b-p72xrcwnh3] {
        font-size: 56px;
    }

    .error-title[b-p72xrcwnh3] {
        font-size: 20px;
    }

    .error-button[b-p72xrcwnh3] {
        min-height: 44px;
        padding: 12px 20px;
    }
}

/* Extra Small Screens - Compact Layout */
@media (max-width: 480px) {
    .apple-quote-preview[b-p72xrcwnh3] {
        padding: 16px 12px;
    }

    .tech-info-button[b-p72xrcwnh3] {
        width: 40px;
        height: 40px;
    }

    .section-title[b-p72xrcwnh3] {
        font-size: 18px;
    }

    .action-button[b-p72xrcwnh3] {
        padding: 12px 16px;
        font-size: 0.875rem;
        min-height: 44px;
    }

    .show-details-button[b-p72xrcwnh3] {
        padding: 12px 14px;
        min-height: 44px;
    }
}
/* /Features/Quotes/Organisms/QuoteImportViewer/Components/ImportedSectionCard.razor.rz.scp.css */
/* ============================================
   ImportedSectionCard - Mobile First Design
   Primary Cyan Theme with Touch Optimization
   ============================================ */

.imported-section-card[b-oly5kb5705] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Mobile first: Base spacing for small screens */
@media (max-width: 480px) {
    .imported-section-card[b-oly5kb5705] {
        margin-bottom: 12px;
        border-radius: 12px;
    }
}

/* Hover effect with cyan accent */
.imported-section-card:hover[b-oly5kb5705] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 183, 221, 0.2);
}

/* Touch feedback */
.imported-section-card:active[b-oly5kb5705] {
    transform: translateY(0);
}

/* Section Header - Mobile First */
.section-header[b-oly5kb5705] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    /* Minimum touch target height */
    min-height: 60px;
}

/* Tablet and up */
@media (min-width: 481px) {
    .section-header[b-oly5kb5705] {
        padding: 20px 24px;
    }
}

.section-header:hover[b-oly5kb5705] {
    background-color: rgba(0, 0, 0, 0.01);
}

.section-header-left[b-oly5kb5705] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

@media (min-width: 481px) {
    .section-header-left[b-oly5kb5705] {
        gap: 12px;
    }
}

/* Expand Button - Touch Optimized */
.expand-button[b-oly5kb5705] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    /* Ensure touch target size */
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

/* Desktop size */
@media (min-width: 769px) {
    .expand-button[b-oly5kb5705] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }
}

/* Hover state with cyan accent */
.imported-section-card:hover .expand-button[b-oly5kb5705] {
    background-color: rgba(0, 183, 221, 0.1);
    color: #00B7DD;
}

/* Expanded state */
.imported-section-card.expanded .expand-button[b-oly5kb5705] {
    transform: rotate(90deg);
    background-color: rgba(0, 183, 221, 0.15);
    color: #00B7DD;
}

.expand-button i[b-oly5kb5705] {
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* Section Name - Mobile Typography */
.section-name[b-oly5kb5705] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    /* Allow truncation on mobile */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 481px) {
    .section-name[b-oly5kb5705] {
        font-size: 18px;
        white-space: normal;
    }
}

.section-description[b-oly5kb5705] {
    display: none;
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
}

/* Show description on larger screens */
@media (min-width: 481px) {
    .section-description[b-oly5kb5705] {
        display: inline;
        margin-left: 12px;
    }
}

/* Section Total - Mobile First */
.section-total[b-oly5kb5705] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Total Amount - PRIMARY CYAN instead of green */
.total-amount[b-oly5kb5705] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #00B7DD; /* PRIMARY CYAN */
    letter-spacing: -0.5px;
}

@media (min-width: 481px) {
    .total-amount[b-oly5kb5705] {
        font-size: 20px;
    }
}

/* Section Body */
.section-body[b-oly5kb5705] {
    padding: 0 16px 16px 16px;
    background-color: transparent;
}

@media (min-width: 481px) {
    .section-body[b-oly5kb5705] {
        padding: 0 24px 20px 24px;
    }
}

/* Items Table - Mobile Card View */
.items-table[b-oly5kb5705] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

/* Desktop Table View */
@media (min-width: 769px) {
    .table-header[b-oly5kb5705] {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: 12px;
        background-color: rgba(0, 0, 0, 0.02);
        padding: 12px 16px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #86868b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-row[b-oly5kb5705] {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: 12px;
        padding: 14px 16px;
        align-items: center;
    }
}

/* Mobile Card View */
@media (max-width: 768px) {
    .table-header[b-oly5kb5705] {
        display: none;
    }

    .table-row[b-oly5kb5705] {
        display: block;
        padding: 12px;
        margin-bottom: 8px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 8px;
    }

    .table-row:last-child[b-oly5kb5705] {
        margin-bottom: 0;
    }

    /* Mobile label/value pairs */
    .col-description[b-oly5kb5705],
    .col-quantity[b-oly5kb5705],
    .col-unit[b-oly5kb5705],
    .col-price[b-oly5kb5705],
    .col-total[b-oly5kb5705] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        font-size: 15px;
    }

    .col-description[b-oly5kb5705] {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        margin-bottom: 8px;
        font-weight: 600;
        color: #1d1d1f;
    }

    /* Add mobile labels */
    .col-quantity[b-oly5kb5705]::before { content: "Quantity:"; color: #86868b; font-weight: 500; }
    .col-unit[b-oly5kb5705]::before { content: "Unit:"; color: #86868b; font-weight: 500; }
    .col-price[b-oly5kb5705]::before { content: "Unit Price:"; color: #86868b; font-weight: 500; }
    .col-total[b-oly5kb5705]::before { content: "Total:"; color: #86868b; font-weight: 600; }
}

/* Table Row Styling */
.table-row[b-oly5kb5705] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.table-row:last-child[b-oly5kb5705] {
    border-bottom: none;
}

/* Hover state with cyan tint */
.table-row:hover[b-oly5kb5705] {
    background-color: rgba(0, 183, 221, 0.04);
}

/* Missing price rows */
.table-row.missing-price[b-oly5kb5705] {
    background-color: #fffbf0;
    border-left: 3px solid #ffc107;
}

/* Column Styles */
.col-description[b-oly5kb5705] {
    font-size: 15px;
    color: #1d1d1f;
}

.col-quantity[b-oly5kb5705], .col-unit[b-oly5kb5705], .col-price[b-oly5kb5705], .col-total[b-oly5kb5705] {
    text-align: right;
    font-size: 15px;
    color: #1d1d1f;
}

@media (max-width: 768px) {
    .col-quantity[b-oly5kb5705], .col-unit[b-oly5kb5705], .col-price[b-oly5kb5705], .col-total[b-oly5kb5705] {
        text-align: left;
    }
}

/* Price note for missing prices */
.price-note[b-oly5kb5705] {
    display: inline-block;
    font-size: 12px;
    color: #f59e0b;
    font-weight: 500;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
}

/* Missing value indicator */
.missing-value[b-oly5kb5705] {
    color: #d1d1d6;
    font-style: italic;
}

/* Accessibility */
.expand-button:focus-visible[b-oly5kb5705] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .imported-section-card[b-oly5kb5705],
    .expand-button[b-oly5kb5705],
    .expand-button i[b-oly5kb5705],
    .table-row[b-oly5kb5705] {
        transition-duration: 0.01ms;
    }
}
/* /Features/Quotes/Organisms/QuoteImportViewer/Components/QuoteSummaryPanel.razor.rz.scp.css */
/* ============================================
   QuoteSummaryPanel - Mobile First Design
   Primary Cyan Theme with Touch Optimization
   ============================================ */

.quote-summary-panel[b-xe8cdkpo3s] {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    margin-top: 1.5rem;
    /* Mobile first padding */
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    /* Remove tap highlight */
    -webkit-tap-highlight-color: transparent;
}

/* Small phones */
@media (max-width: 480px) {
    .quote-summary-panel[b-xe8cdkpo3s] {
        padding: 16px;
        margin-top: 1rem;
        border-radius: 12px;
    }
}

/* Tablet and up */
@media (min-width: 481px) {
    .quote-summary-panel[b-xe8cdkpo3s] {
        padding: 24px 32px;
    }
}

/* Desktop */
@media (min-width: 769px) {
    .quote-summary-panel[b-xe8cdkpo3s] {
        padding: 32px;
        margin-top: 2rem;
    }
}

/* Summary Title */
.summary-title[b-xe8cdkpo3s] {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 1rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .summary-title[b-xe8cdkpo3s] {
        font-size: 20px;
        margin-bottom: 1.5rem;
    }
}

/* Summary Details Container */
.summary-details[b-xe8cdkpo3s] {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 16px;
}

@media (min-width: 481px) {
    .summary-details[b-xe8cdkpo3s] {
        padding-top: 20px;
    }
}

/* Summary Row */
.summary-row[b-xe8cdkpo3s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    /* Ensure minimum touch target height on mobile */
    min-height: 44px;
}

@media (min-width: 481px) {
    .summary-row[b-xe8cdkpo3s] {
        padding: 12px 0;
    }
}

.summary-row:last-child:not(.total)[b-xe8cdkpo3s] {
    border-bottom: none;
}

/* Summary Labels and Values */
.summary-label[b-xe8cdkpo3s] {
    font-size: 14px;
    color: #86868b;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .summary-label[b-xe8cdkpo3s] {
        font-size: 15px;
    }
}

.summary-value[b-xe8cdkpo3s] {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .summary-value[b-xe8cdkpo3s] {
        font-size: 17px;
    }
}

/* Discount value (keep red for negative) */
.summary-value.discount[b-xe8cdkpo3s],
.summary-label.discount[b-xe8cdkpo3s] {
    color: #dc3545;
}

/* Total Row - Hero Treatment with CYAN */
.summary-row.total[b-xe8cdkpo3s] {
    margin-top: 16px;
    padding: 16px;
    border-top: 2px solid rgba(0, 183, 221, 0.1);
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 12px;
    /* Negative margins to extend into panel padding on mobile */
    margin-left: -8px;
    margin-right: -8px;
    border-bottom: none;
    /* Ensure good touch target */
    min-height: 60px;
}

@media (min-width: 481px) {
    .summary-row.total[b-xe8cdkpo3s] {
        margin-top: 1.5rem;
        padding: 20px 16px;
        margin-left: -16px;
        margin-right: -16px;
    }
}

@media (min-width: 769px) {
    .summary-row.total[b-xe8cdkpo3s] {
        padding: 24px 20px;
    }
}

.summary-row.total .summary-label[b-xe8cdkpo3s] {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
}

@media (min-width: 481px) {
    .summary-row.total .summary-label[b-xe8cdkpo3s] {
        font-size: 18px;
    }
}

/* Total Value - PRIMARY CYAN instead of green */
.summary-row.total .summary-value[b-xe8cdkpo3s] {
    font-size: 28px;
    font-weight: 700;
    color: #00B7DD; /* PRIMARY CYAN */
    letter-spacing: -0.5px;
}

@media (min-width: 481px) {
    .summary-row.total .summary-value[b-xe8cdkpo3s] {
        font-size: 32px;
    }
}

/* Additional Terms Section */
.additional-terms[b-xe8cdkpo3s] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (min-width: 481px) {
    .additional-terms[b-xe8cdkpo3s] {
        margin-top: 2rem;
        padding-top: 2rem;
    }
}

/* Terms Item Container */
.terms-item[b-xe8cdkpo3s] {
    margin-bottom: 1rem;
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

@media (min-width: 481px) {
    .terms-item[b-xe8cdkpo3s] {
        padding: 16px;
        margin-bottom: 1.5rem;
    }
}

.terms-item:last-child[b-xe8cdkpo3s] {
    margin-bottom: 0;
}

/* Terms Labels */
.terms-item strong[b-xe8cdkpo3s] {
    display: block;
    margin-bottom: 6px;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .terms-item strong[b-xe8cdkpo3s] {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

/* Terms Content */
.terms-item p[b-xe8cdkpo3s] {
    margin: 0;
    color: #606060;
    line-height: 1.6;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .terms-item p[b-xe8cdkpo3s] {
        font-size: 15px;
    }
}

/* Hover Effects - Desktop Only */
@media (hover: hover) {
    .quote-summary-panel[b-xe8cdkpo3s] {
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .quote-summary-panel:hover[b-xe8cdkpo3s] {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    }
}

/* Accessibility */
.quote-summary-panel:focus-within[b-xe8cdkpo3s] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.2), 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Print Styles */
@media print {
    .quote-summary-panel[b-xe8cdkpo3s] {
        box-shadow: none;
        border: 1px solid #e5e7eb;
        page-break-inside: avoid;
    }

    .summary-row.total[b-xe8cdkpo3s] {
        background: white;
        border: 2px solid #00B7DD;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .quote-summary-panel[b-xe8cdkpo3s] {
        transition-duration: 0.01ms;
    }
}
/* /Features/Quotes/Organisms/QuoteImportViewer/QuoteImportViewer.razor.rz.scp.css */
/* ============================================
   QuoteImportViewer - Mobile First Design
   Primary Cyan Theme with Touch Optimization
   ============================================ */

/* Main Container - Mobile First */
.imported-quote-viewer[b-mn68rcwlxl] {
    max-width: 1200px;
    margin: 0 auto;
    /* Mobile padding */
    padding: 1rem;
    background: #FAFAFA; /* BuildBoost background */
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    /* Remove tap highlight */
    -webkit-tap-highlight-color: transparent;
}

/* Tablet padding */
@media (min-width: 481px) {
    .imported-quote-viewer[b-mn68rcwlxl] {
        padding: 1.5rem;
    }
}

/* Desktop padding */
@media (min-width: 769px) {
    .imported-quote-viewer[b-mn68rcwlxl] {
        padding: 2rem;
    }
}

/* Header Section - Mobile First */
.viewer-header[b-mn68rcwlxl] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}

@media (min-width: 481px) {
    .viewer-header[b-mn68rcwlxl] {
        padding: 24px;
        margin-bottom: 20px;
    }
}

@media (min-width: 769px) {
    .viewer-header[b-mn68rcwlxl] {
        border-radius: 20px;
        padding: 32px;
        margin-bottom: 24px;
    }
}

.viewer-header:hover[b-mn68rcwlxl] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Header Top - Mobile Stack */
.header-top[b-mn68rcwlxl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 769px) {
    .header-top[b-mn68rcwlxl] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
}

/* Back Button - Touch Optimized */
.btn-back[b-mn68rcwlxl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    color: #1d1d1f;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure 44px minimum touch target */
    min-height: 44px;
    width: 100%;
}

@media (min-width: 769px) {
    .btn-back[b-mn68rcwlxl] {
        width: auto;
        padding: 10px 20px;
    }
}

.btn-back:hover[b-mn68rcwlxl] {
    background: rgba(0, 0, 0, 0.06);
    transform: translateX(-4px);
}

.btn-back:hover i[b-mn68rcwlxl] {
    transform: translateX(-2px);
}

.btn-back:active[b-mn68rcwlxl] {
    transform: translateX(0);
}

/* Header Actions - Mobile Stack */
.header-actions[b-mn68rcwlxl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 481px) {
    .header-actions[b-mn68rcwlxl] {
        flex-direction: row;
        gap: 12px;
    }
}

/* Action Buttons - Touch Optimized */
.btn-action[b-mn68rcwlxl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    color: #606060;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Ensure touch target */
    min-height: 44px;
    width: 100%;
}

@media (min-width: 481px) {
    .btn-action[b-mn68rcwlxl] {
        width: auto;
        padding: 10px 16px;
    }
}

.btn-action:hover[b-mn68rcwlxl] {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1d1d1f;
}

.btn-action:active[b-mn68rcwlxl] {
    transform: scale(0.98);
}

/* Quote Header Info */
.quote-header-info[b-mn68rcwlxl] {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 20px;
}

@media (min-width: 769px) {
    .quote-header-info[b-mn68rcwlxl] {
        padding-top: 2rem;
    }
}

/* Header Main - Mobile Stack */
.header-main[b-mn68rcwlxl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 481px) {
    .header-main[b-mn68rcwlxl] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
}

/* Quote Title - Mobile Typography */
.quote-title[b-mn68rcwlxl] {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.5px;
    word-break: break-word;
}

@media (min-width: 481px) {
    .quote-title[b-mn68rcwlxl] {
        font-size: 28px;
    }
}

@media (min-width: 769px) {
    .quote-title[b-mn68rcwlxl] {
        font-size: 32px;
    }
}

/* Quote Number Badge - CYAN Accent */
.quote-number[b-mn68rcwlxl] {
    display: inline-flex;
    padding: 6px 16px;
    background: rgba(0, 183, 221, 0.1);
    color: #00B7DD; /* PRIMARY CYAN */
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(0, 183, 221, 0.2);
    align-self: flex-start;
}

/* Quote Metadata - Mobile Grid */
.quote-metadata[b-mn68rcwlxl] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 481px) {
    .quote-metadata[b-mn68rcwlxl] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }
}

@media (min-width: 769px) {
    .quote-metadata[b-mn68rcwlxl] {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
    }
}

.metadata-item[b-mn68rcwlxl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 481px) {
    .metadata-item[b-mn68rcwlxl] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
}

.metadata-label[b-mn68rcwlxl] {
    color: #86868b;
    font-weight: 500;
    font-size: 14px;
}

.metadata-value[b-mn68rcwlxl] {
    color: #1d1d1f;
    font-weight: 600;
    font-size: 15px;
}

/* Status Badges */
.status-badge[b-mn68rcwlxl] {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    display: inline-block;
}

.status-badge.status-draft[b-mn68rcwlxl] {
    background: #e0e7ff;
    color: #3730a3;
    border-color: rgba(55, 48, 163, 0.2);
}

.status-badge.status-sent[b-mn68rcwlxl] {
    background: #dbeafe;
    color: #1e40af;
    border-color: rgba(30, 64, 175, 0.2);
}

.status-badge.status-approved[b-mn68rcwlxl] {
    background: #d1fae5;
    color: #065f46;
    border-color: rgba(6, 95, 70, 0.2);
}

.status-badge.status-rejected[b-mn68rcwlxl] {
    background: #fee2e2;
    color: #991b1b;
    border-color: rgba(153, 27, 27, 0.2);
}

/* Original File Info - CYAN Accent */
.original-file-info[b-mn68rcwlxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(0, 183, 221, 0.05);
    border-left: 3px solid #00B7DD; /* PRIMARY CYAN */
    border-radius: 8px;
    font-size: 15px;
    color: #1d1d1f;
    margin-top: 16px;
}

.original-file-info i[b-mn68rcwlxl] {
    color: #00B7DD; /* PRIMARY CYAN */
    font-size: 18px;
}

.original-file-info strong[b-mn68rcwlxl] {
    color: #00B7DD; /* PRIMARY CYAN */
}

/* Contact Section - Mobile First */
.contact-section[b-mn68rcwlxl] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (min-width: 481px) {
    .contact-section[b-mn68rcwlxl] {
        padding: 24px;
        margin-bottom: 20px;
    }
}

@media (min-width: 769px) {
    .contact-section[b-mn68rcwlxl] {
        padding: 32px;
        margin-bottom: 24px;
    }
}

.section-title[b-mn68rcwlxl] {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .section-title[b-mn68rcwlxl] {
        font-size: 20px;
        margin-bottom: 1.5rem;
    }
}

/* Contact Details - Mobile Single Column */
.contact-details[b-mn68rcwlxl] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 769px) {
    .contact-details[b-mn68rcwlxl] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 12px;
    }
}

.contact-row[b-mn68rcwlxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    transition: background-color 0.2s ease;
    /* Ensure minimum touch target */
    min-height: 44px;
}

.contact-row:hover[b-mn68rcwlxl] {
    background: rgba(0, 183, 221, 0.05);
}

.contact-row i[b-mn68rcwlxl] {
    color: #00B7DD; /* PRIMARY CYAN */
    font-size: 18px;
    min-width: 20px;
}

.contact-row span[b-mn68rcwlxl] {
    font-size: 15px;
    color: #1d1d1f;
    word-break: break-word;
}

/* Sections Container */
.sections-container[b-mn68rcwlxl] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (min-width: 481px) {
    .sections-container[b-mn68rcwlxl] {
        padding: 24px;
        margin-bottom: 20px;
    }
}

@media (min-width: 769px) {
    .sections-container[b-mn68rcwlxl] {
        padding: 32px;
        margin-bottom: 24px;
    }
}

/* Viewer Actions - Mobile Stack */
.viewer-actions[b-mn68rcwlxl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (min-width: 481px) {
    .viewer-actions[b-mn68rcwlxl] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
        padding: 24px;
    }
}

@media (min-width: 769px) {
    .viewer-actions[b-mn68rcwlxl] {
        padding: 32px;
        gap: 1rem;
    }
}

/* Action Buttons - Touch Optimized */
.btn[b-mn68rcwlxl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure minimum touch target */
    min-height: 44px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 481px) {
    .btn[b-mn68rcwlxl] {
        width: auto;
        padding: 10px 24px;
    }
}

/* Primary Button - CYAN */
.btn-primary[b-mn68rcwlxl] {
    background: #00B7DD; /* PRIMARY CYAN */
    color: white;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

.btn-primary:hover[b-mn68rcwlxl] {
    background: #0099BB;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
}

.btn-primary:active[b-mn68rcwlxl] {
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary[b-mn68rcwlxl] {
    background: linear-gradient(to right, rgba(78, 99, 215, 0.9) 0%, #5a85dd 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(78, 99, 215, 0.25);
}

.btn-secondary:hover[b-mn68rcwlxl] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(78, 99, 215, 0.35);
}

.btn-secondary:active[b-mn68rcwlxl] {
    transform: translateY(0);
}

/* Outline Button */
.btn-outline-secondary[b-mn68rcwlxl] {
    background: white;
    color: #606060;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-outline-secondary:hover[b-mn68rcwlxl] {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1d1d1f;
}

.btn-outline-secondary:active[b-mn68rcwlxl] {
    transform: scale(0.98);
}

/* Accessibility */
.btn:focus-visible[b-mn68rcwlxl],
.btn-action:focus-visible[b-mn68rcwlxl],
.btn-back:focus-visible[b-mn68rcwlxl] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.3);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *[b-mn68rcwlxl] {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .imported-quote-viewer[b-mn68rcwlxl] {
        background: white;
        padding: 0;
    }

    .viewer-header[b-mn68rcwlxl],
    .contact-section[b-mn68rcwlxl],
    .sections-container[b-mn68rcwlxl],
    .viewer-actions[b-mn68rcwlxl] {
        box-shadow: none;
        border: 1px solid #e5e7eb;
        page-break-inside: avoid;
    }

    .btn-back[b-mn68rcwlxl],
    .header-actions[b-mn68rcwlxl],
    .viewer-actions[b-mn68rcwlxl] {
        display: none;
    }
}
/* /Features/Quotes/Organisms/QuoteItemList/QuoteItemList.razor.rz.scp.css */
.quote-item-list[b-xd1nbmgk1h] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.item-list-header[b-xd1nbmgk1h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.item-list-header h4[b-xd1nbmgk1h] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.add-item-section[b-xd1nbmgk1h] {
    width: 100%;
}

.items-table[b-xd1nbmgk1h] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    overflow: hidden;
}

.items-table-header[b-xd1nbmgk1h] {
    display: flex;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: #475569;
}

.items-table-body[b-xd1nbmgk1h] {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
}

.item-row-wrapper[b-xd1nbmgk1h] {
    border-bottom: 1px solid #e2e8f0;
}

.item-row-wrapper:last-child[b-xd1nbmgk1h] {
    border-bottom: none;
}

.item-row-wrapper:hover[b-xd1nbmgk1h] {
    background-color: #f8fafc;
}

.item-row[b-xd1nbmgk1h] {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.item-notes-row[b-xd1nbmgk1h] {
    padding: 0 0.5rem 0.5rem 0.5rem;
}

.notes-input[b-xd1nbmgk1h] {
    font-size: 0.8125rem !important;
    color: #64748b;
    border-color: transparent !important;
    background-color: transparent;
}

.notes-input:hover[b-xd1nbmgk1h] {
    border-color: #e2e8f0 !important;
    background-color: #f8fafc;
}

.notes-input:focus[b-xd1nbmgk1h] {
    border-color: #7dd3fc !important;
    background-color: white;
}

.notes-input[b-xd1nbmgk1h]::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.item-col[b-xd1nbmgk1h] {
    padding: 0 0.25rem;
}

.description-col[b-xd1nbmgk1h] {
    flex: 3;
    min-width: 0;
}

.unit-col[b-xd1nbmgk1h] {
    flex: 1;
    min-width: 60px;
}

.quantity-col[b-xd1nbmgk1h] {
    flex: 1;
    min-width: 70px;
}

.price-col[b-xd1nbmgk1h] {
    flex: 1;
    min-width: 80px;
}

.discount-col[b-xd1nbmgk1h] {
    flex: 0 0 80px;
    text-align: center;
}

.discount-badge[b-xd1nbmgk1h] {
    display: inline-block;
    background-color: #fee2e2;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.total-col[b-xd1nbmgk1h] {
    flex: 1;
    min-width: 80px;
    font-weight: 600;
}

.actions-col[b-xd1nbmgk1h] {
    flex: 0 0 40px;
    display: flex;
    justify-content: center;
}

.item-input[b-xd1nbmgk1h] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out;
}

.item-input:focus[b-xd1nbmgk1h] {
    outline: none;
    border-color: #7dd3fc;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.5);
}

.unit-input[b-xd1nbmgk1h] {
    text-align: center;
}

.quantity-input[b-xd1nbmgk1h],
.price-input[b-xd1nbmgk1h] {
    text-align: right;
}

.item-action[b-xd1nbmgk1h] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.15s ease-in-out;
}

.delete-btn:hover[b-xd1nbmgk1h] {
    color: #ef4444;
}

.no-items[b-xd1nbmgk1h] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    padding: 1rem;
}

.no-items p[b-xd1nbmgk1h] {
    color: #64748b;
    font-size: 0.875rem;
    text-align: center;
}
/* /Features/Quotes/Organisms/QuotePreview/QuotePreview.razor.rz.scp.css */
/* Color scheme matching PDF */
:root[b-ks37zzxfmb] {
    --primary-color: #0056B8;
    --secondary-color: #00A9E0;
    --accent-color: #FFC107;
    --success-color: #28A745;
    --danger-color: #DC3545;
    --dark-gray: #495057;
    --light-gray: #F8F9FA;
    --medium-gray: #E9ECEF;
}

/* Container for the entire preview */
.quote-preview-container[b-ks37zzxfmb] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual page styling */
.quote-page[b-ks37zzxfmb] {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    min-height: 1000px;
    position: relative;
    overflow: hidden;
}

/* Page Header - appears on all pages except cover */
.page-header[b-ks37zzxfmb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    border-bottom: 1px solid var(--medium-gray);
    background-color: white;
}

.header-logo img[b-ks37zzxfmb] {
    max-width: 150px;
    height: auto;
}

.header-contact[b-ks37zzxfmb] {
    text-align: right;
}

.header-contact p[b-ks37zzxfmb] {
    margin: 0;
    font-size: 0.625rem;
    color: var(--dark-gray);
    line-height: 1.4;
}

/* Page Content */
.page-content[b-ks37zzxfmb] {
    padding: 2rem;
}

/* Page Footer */
.page-footer[b-ks37zzxfmb] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-top: 1px solid var(--medium-gray);
    font-size: 0.5625rem;
    color: var(--dark-gray);
}

/* Cover Page Specific Styles */
.quote-cover-page[b-ks37zzxfmb] {
    height: 1200px;
    position: relative;
    margin-bottom: 2rem;
}

.cover-background[b-ks37zzxfmb] {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url('/images/cover-background.jpg');
    background-size: cover;
    background-position: center;
}

.cover-overlay[b-ks37zzxfmb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.cover-content[b-ks37zzxfmb] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
}

.cover-logo[b-ks37zzxfmb] {
    padding: 1.875rem;
}

.cover-logo img[b-ks37zzxfmb] {
    max-width: 200px;
    height: auto;
}

.cover-text[b-ks37zzxfmb] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3rem;
}

.cover-text h1[b-ks37zzxfmb] {
    font-size: 4.5rem;
    color: white;
    font-weight: bold;
    text-align: center;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Section Titles */
.section-title[b-ks37zzxfmb] {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 1.875rem 0;
}

.section-subtitle[b-ks37zzxfmb] {
    font-size: 1rem;
    color: var(--dark-gray);
    margin-bottom: 1.875rem;
}

/* Features Grid (Page 2) */
.features-grid[b-ks37zzxfmb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.feature-card[b-ks37zzxfmb] {
    border: 1px solid var(--medium-gray);
    background-color: white;
    padding: 1.25rem;
    display: flex;
    gap: 0.9375rem;
}

.feature-icon[b-ks37zzxfmb] {
    width: 3.125rem;
    height: 3.125rem;
    background-color: var(--light-gray);
    border: 1px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i[b-ks37zzxfmb] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.feature-content h3[b-ks37zzxfmb] {
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 0.3125rem 0;
}

.feature-content p[b-ks37zzxfmb] {
    font-size: 0.625rem;
    color: var(--dark-gray);
    line-height: 1.4;
    margin: 0;
}

/* Sponsors Section */
.sponsors-section[b-ks37zzxfmb] {
    margin-top: 1.25rem;
}

.sponsors-section h3[b-ks37zzxfmb] {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.625rem;
}

.sponsors-logos[b-ks37zzxfmb] {
    display: flex;
    gap: 1.875rem;
    align-items: center;
}

.sponsors-logos img[b-ks37zzxfmb] {
    max-height: 3.75rem;
    width: auto;
}

/* Info Cards (Page 3) */
.info-cards-row[b-ks37zzxfmb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.875rem;
}

.info-card[b-ks37zzxfmb] {
    border: 1px solid var(--medium-gray);
    background-color: var(--light-gray);
    padding: 1.25rem;
}

.info-card h3[b-ks37zzxfmb] {
    font-size: 0.625rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 0.625rem 0;
}

.info-content[b-ks37zzxfmb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-row[b-ks37zzxfmb] {
    display: flex;
    gap: 0.625rem;
    font-size: 0.625rem;
}

.info-label[b-ks37zzxfmb] {
    min-width: 5rem;
    color: var(--dark-gray);
}

.info-value[b-ks37zzxfmb] {
    color: #1e293b;
}

.info-value.email[b-ks37zzxfmb] {
    color: var(--secondary-color);
}

.info-value.bold[b-ks37zzxfmb] {
    font-weight: bold;
}

/* Quote Message */
.quote-message[b-ks37zzxfmb] {
    margin: 1.875rem 0;
}

.quote-message p[b-ks37zzxfmb] {
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--dark-gray);
}

/* Signature Section */
.signature-section[b-ks37zzxfmb] {
    margin-top: 2.5rem;
}

.signature-section p[b-ks37zzxfmb] {
    font-size: 0.6875rem;
    margin: 0.3125rem 0;
}

.signature-info[b-ks37zzxfmb] {
    margin: 1.25rem 0;
}

.signature-name[b-ks37zzxfmb] {
    font-size: 0.875rem;
    font-weight: bold;
    margin: 0;
}

.signature-title[b-ks37zzxfmb] {
    font-size: 0.625rem;
    color: var(--dark-gray);
    margin: 0;
}

.signature-email[b-ks37zzxfmb] {
    font-size: 0.625rem;
    color: var(--secondary-color);
    margin: 0.3125rem 0 0 0;
}

.company-name[b-ks37zzxfmb] {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0.9375rem 0 0 0;
}

/* Quote Title Section (Page 4) */
.quote-title-section[b-ks37zzxfmb] {
    background-color: var(--primary-color);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.quote-title-content h1[b-ks37zzxfmb] {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.quote-title-content p[b-ks37zzxfmb] {
    font-size: 1.125rem;
    color: white;
    margin: 0.3125rem 0 0 0;
}

.quote-number[b-ks37zzxfmb] {
    text-align: right;
    color: white;
}

.quote-number span[b-ks37zzxfmb] {
    display: block;
    font-size: 0.625rem;
}

.quote-number strong[b-ks37zzxfmb] {
    display: block;
    font-size: 1rem;
    font-weight: bold;
}

/* Metadata Cards */
.metadata-cards[b-ks37zzxfmb] {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.meta-card[b-ks37zzxfmb] {
    flex: 1;
    border: 1px solid;
    background-color: white;
    padding: 0.9375rem;
}

.meta-label[b-ks37zzxfmb] {
    display: block;
    font-size: 0.625rem;
    color: var(--dark-gray);
    margin-bottom: 0.3125rem;
}

.meta-value[b-ks37zzxfmb] {
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
}

/* Financial Overview */
.financial-overview[b-ks37zzxfmb] {
    margin-bottom: 1.25rem;
}

.financial-overview h3[b-ks37zzxfmb] {
    background-color: var(--primary-color);
    color: white;
    padding: 0.9375rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: bold;
}

.financial-content[b-ks37zzxfmb] {
    border: 1px solid var(--primary-color);
    padding: 1.25rem;
}

.summary-boxes[b-ks37zzxfmb] {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.summary-box[b-ks37zzxfmb] {
    flex: 1;
}

.summary-box.total[b-ks37zzxfmb] {
    border-left: 2px solid var(--medium-gray);
    padding-left: 0.625rem;
}

.summary-label[b-ks37zzxfmb] {
    display: block;
    font-size: 0.625rem;
    color: var(--dark-gray);
    margin-bottom: 0.3125rem;
}

.summary-value[b-ks37zzxfmb] {
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
}

.summary-box.total .summary-value[b-ks37zzxfmb] {
    font-size: 1.125rem;
}

/* Benefit Cards */
.benefit-cards[b-ks37zzxfmb] {
    display: flex;
    gap: 0.625rem;
}

.benefit-card[b-ks37zzxfmb] {
    flex: 1;
    border: 1px solid var(--medium-gray);
    padding: 0.625rem;
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.benefit-card i[b-ks37zzxfmb] {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.benefit-label[b-ks37zzxfmb] {
    display: block;
    font-size: 0.5625rem;
    color: var(--dark-gray);
}

.benefit-value[b-ks37zzxfmb] {
    display: block;
    font-size: 0.6875rem;
    font-weight: bold;
}

/* Quote Items Section */
.quote-items-section[b-ks37zzxfmb] {
    margin-bottom: 1.25rem;
}

.category-section[b-ks37zzxfmb] {
    border: 1px solid var(--medium-gray);
    margin-bottom: 1.25rem;
}

.category-header[b-ks37zzxfmb] {
    background-color: var(--secondary-color);
    padding: 0.625rem;
}

.category-header h4[b-ks37zzxfmb] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.category-content[b-ks37zzxfmb] {
    padding: 0.9375rem;
}

.items-table[b-ks37zzxfmb] {
    width: 100%;
    border-collapse: collapse;
}

.items-table td[b-ks37zzxfmb] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--light-gray);
    font-size: 0.625rem;
}

.items-table tr:last-child td[b-ks37zzxfmb] {
    border-bottom: none;
}

.item-description[b-ks37zzxfmb] {
    width: 60%;
}

.item-quantity[b-ks37zzxfmb],
.item-unit[b-ks37zzxfmb] {
    text-align: right;
    width: 10%;
}

.item-price[b-ks37zzxfmb],
.item-total[b-ks37zzxfmb] {
    text-align: right;
    width: 15%;
}

.item-discount[b-ks37zzxfmb] {
    text-align: right;
    width: 10%;
}

.discount-badge[b-ks37zzxfmb] {
    display: inline-block;
    background-color: #fee2e2;
    color: var(--danger-color);
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.item-total[b-ks37zzxfmb] {
    font-weight: bold;
}

.category-total[b-ks37zzxfmb] {
    margin-top: 0.9375rem;
    padding: 0.625rem;
    border: 1px solid var(--medium-gray);
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Terms Section */
.terms-section[b-ks37zzxfmb] {
    margin-bottom: 1.25rem;
}

.terms-section h3[b-ks37zzxfmb] {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 0.625rem 0;
}

.terms-cards[b-ks37zzxfmb] {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 0.9375rem;
}

.term-card[b-ks37zzxfmb] {
    flex: 1;
    border: 1px solid;
    background-color: white;
    padding: 0.9375rem;
}

.term-header[b-ks37zzxfmb] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    margin-bottom: 0.3125rem;
    font-size: 0.75rem;
    font-weight: bold;
}

.term-header i[b-ks37zzxfmb] {
    font-size: 1.25rem;
}

.term-card p[b-ks37zzxfmb] {
    font-size: 0.625rem;
    margin: 0;
    line-height: 1.4;
}

/* Included Scope */
.included-scope[b-ks37zzxfmb] {
    border: 1px solid var(--primary-color);
    background-color: var(--light-gray);
    padding: 0.9375rem;
}

.scope-header[b-ks37zzxfmb] {
    display: flex;
    gap: 0.3125rem;
    align-items: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.3125rem;
}

.included-scope p[b-ks37zzxfmb] {
    font-size: 0.625rem;
    margin: 0;
}

/* Signature Block */
.signature-block[b-ks37zzxfmb] {
    border: 1px solid var(--dark-gray);
    background-color: var(--light-gray);
    padding: 1.25rem;
    margin-top: 1.25rem;
}

.signature-block h3[b-ks37zzxfmb] {
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 0.625rem 0;
}

.signature-row[b-ks37zzxfmb] {
    display: flex;
    gap: 3.125rem;
}

.signature-column[b-ks37zzxfmb] {
    flex: 1;
}

.signature-column h4[b-ks37zzxfmb] {
    font-size: 0.625rem;
    font-weight: bold;
    margin: 0 0 0.3125rem 0;
}

.signatory-name[b-ks37zzxfmb] {
    font-size: 0.6875rem;
    margin: 0;
}

.signatory-title[b-ks37zzxfmb] {
    font-size: 0.5625rem;
    color: var(--dark-gray);
    margin: 0;
}

.signature-line[b-ks37zzxfmb] {
    margin-top: 1.875rem;
    padding-top: 0.3125rem;
    border-top: 1px solid black;
}

.signature-label[b-ks37zzxfmb] {
    font-size: 0.5625rem;
    color: var(--dark-gray);
    text-align: center;
    margin: 0.3125rem 0 0 0;
}

/* Empty messages */
.empty-sections-message[b-ks37zzxfmb],
.empty-items-message[b-ks37zzxfmb] {
    padding: 1.25rem;
    text-align: center;
    color: var(--dark-gray);
    font-size: 0.75rem;
}

/* Action buttons */
.quote-preview-actions[b-ks37zzxfmb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: white;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.preview-action-button[b-ks37zzxfmb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.edit-button[b-ks37zzxfmb] {
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.edit-button:hover[b-ks37zzxfmb] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.pdf-button[b-ks37zzxfmb] {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.pdf-button:hover[b-ks37zzxfmb] {
    background-color: #fecaca;
    border-color: #fca5a5;
}

.send-button[b-ks37zzxfmb] {
    background-color: var(--secondary-color);
    color: white;
}

.send-button:hover[b-ks37zzxfmb] {
    background-color: #0098BC;
}

.approve-button[b-ks37zzxfmb] {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.approve-button:hover[b-ks37zzxfmb] {
    background-color: #bbf7d0;
    border-color: #86efac;
}

.reject-button[b-ks37zzxfmb] {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.reject-button:hover[b-ks37zzxfmb] {
    background-color: #fecaca;
    border-color: #fca5a5;
}

.revert-button[b-ks37zzxfmb] {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.revert-button:hover[b-ks37zzxfmb] {
    background-color: #fcd34d;
    border-color: #fbbf24;
}

/* Print styles */
@media print {
    .quote-preview-container[b-ks37zzxfmb] {
        gap: 0;
    }
    
    .quote-page[b-ks37zzxfmb] {
        page-break-after: always;
        margin-bottom: 0;
        box-shadow: none;
    }
    
    .quote-preview-actions[b-ks37zzxfmb] {
        display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .features-grid[b-ks37zzxfmb],
    .info-cards-row[b-ks37zzxfmb],
    .terms-cards[b-ks37zzxfmb] {
        grid-template-columns: 1fr;
    }
    
    .summary-boxes[b-ks37zzxfmb],
    .benefit-cards[b-ks37zzxfmb],
    .metadata-cards[b-ks37zzxfmb] {
        flex-direction: column;
    }
    
    .signature-row[b-ks37zzxfmb] {
        flex-direction: column;
        gap: 2rem;
    }
    
    .cover-text h1[b-ks37zzxfmb] {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .page-header[b-ks37zzxfmb] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .header-contact[b-ks37zzxfmb] {
        text-align: center;
    }
    
    .cover-text h1[b-ks37zzxfmb] {
        font-size: 1.75rem;
    }
}
/* /Features/Shared/Atoms/Card/Address/Line1/Line1.razor.rz.scp.css */
.address-line-1[b-4pyi2tkdp3] {
    color: var(--secondary-text);
    max-width: 180px;
}
/* /Features/Shared/Atoms/Card/Address/Line2/Line2.razor.rz.scp.css */
.address-line-2[b-aqf1cgeagn] {
    color: var(--secondary-text);
    max-width: 180px;
}
/* /Features/Shared/Atoms/Card/Buttons/CurrentTeam/CurrentTeam.razor.rz.scp.css */
.status-container[b-zh9q25lz0p] {
    position: relative;
}

.card-button-status-filled[b-zh9q25lz0p] {
    border-radius: 10px;
    width: 106px;
    height: 32px;
    color: var(--white);
    font-weight: bold;
}

.card-button-status-filled span[b-zh9q25lz0p] {
    width: 80%;
    text-align: center;
}

.status-dropdown[b-zh9q25lz0p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    background-color: var(--white);
    z-index: 100;
    padding: 2px;
    border-radius: 10px;
    left: -2px;
}

.status-option[b-zh9q25lz0p] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
    padding: 0 4px;
    width: 90px;
    height: 22px;
    cursor: pointer;
    background: var(--secondary-light);
    border-radius: 10px;
    font-weight: bold;
}

.status-option:hover[b-zh9q25lz0p] {
    background-color: var(--secondary);
}

.overlay[b-zh9q25lz0p] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}

.team-drop[b-zh9q25lz0p]{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.role-drop i[b-zh9q25lz0p]{
    margin-left: 5px;
}
/* /Features/Shared/Atoms/Card/Buttons/Status/Status.razor.rz.scp.css */
.status-container[b-c0485v941x] {
    position: relative;
}

.card-button-status-filled[b-c0485v941x] {
    border-radius: 10px;
    height: 32px;
    color: var(--white);
    font-weight: bold;
    padding: 16px;
}

.card-button-status-filled span[b-c0485v941x] {
    width: 100%;
    text-align: center;
}

.status-dropdown[b-c0485v941x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    background-color: var(--white);
    z-index: 100;
    padding: 8px;
    border-radius: 10px;
    top: -8px;
    left: -8px;
}

.status-option[b-c0485v941x] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
    background: var(--secondary-light);
    border-radius: 10px;
    font-weight: bold;
    padding: 16px;
}

.status-option span[b-c0485v941x] {
    width: 100%;
    text-align: center;
}

.status-option:hover[b-c0485v941x] {
    background-color: var(--secondary);
}

/* /Features/Shared/Atoms/Card/CommunicationForCopy/Email/Email.razor.rz.scp.css */
.communication-email a[b-ydloeoh5ji] {
  color: unset !important;
  text-decoration: unset !important;
}

span[b-ydloeoh5ji] {
  color: var(--secondary-text);
  max-width: 180px;
  cursor: pointer;
}

.communication-email[b-ydloeoh5ji] {
  position: relative;
}

.tooltip[b-ydloeoh5ji] {
  position: absolute;
  bottom: 100%; /* Position above the text */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* /Features/Shared/Atoms/Card/CommunicationForCopy/Phone/Phone.razor.rz.scp.css */
.communication-phone[b-roc27l7eqe] {
  color: unset !important;
  text-decoration: unset !important;
}

span[b-roc27l7eqe] {
  color: var(--secondary-text);
  max-width: 180px;
  cursor: pointer;
}

.communication-phone[b-roc27l7eqe] {
  position: relative;
  cursor: pointer;
}

.tooltip[b-roc27l7eqe] {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  transition: opacity 0.3s ease;
  opacity: 0;
}
/* /Features/Shared/Atoms/Card/Communication/Email/Email.razor.rz.scp.css */
.communication-email a[b-sbpabi73pf] {
  color: unset !important;
  text-decoration: unset !important;
}
/* /Features/Shared/Atoms/Card/Communication/Phone/Phone.razor.rz.scp.css */
.communication-phone a[b-ii76943t1l] {
  text-decoration: unset !important;
  color: unset !important;
}

.color-primary[b-ii76943t1l]{
  color: var(--primary) !important;
}
/* /Features/Shared/Atoms/Card/Counter/Name/Name.razor.rz.scp.css */
.role-name[b-kzomh5ohr6] {
    color: var(--secondary-text);
    max-width: 120px;
}
/* /Features/Shared/Atoms/Card/Counter/Title/Title.razor.rz.scp.css */
/* /Features/Shared/Atoms/Card/Date/Title/Title.razor.rz.scp.css */
/* /Features/Shared/Atoms/Card/Date/Value/Value.razor.rz.scp.css */
.date-value[b-rzdqalx35t] {
    color: var(--secondary-text);
    cursor: pointer;
}
input.picker[type="date"][b-rzdqalx35t] {
    position: relative;
    text-align: end;
    background: transparent;
    cursor: pointer;
}

input.picker[type="date"][b-rzdqalx35t]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    color: transparent;
    background: transparent;
    cursor: pointer;
}
/* /Features/Shared/Atoms/Card/Icons/Shield/Shield.razor.rz.scp.css */
.shield-icon i[b-gdlhin4tdy]{
    cursor: pointer;
}

.shield-leader[b-gdlhin4tdy]{
    color: #FFB700;
}
/* /Features/Shared/Atoms/Card/Icons/Trash/Trash.razor.rz.scp.css */
.trash-icon i[b-tt1quvgreh] {
    color: #DD2600;
    cursor: pointer;
}
/* /Features/Shared/Atoms/Card/Name/Name.razor.rz.scp.css */
.card-name[b-4kb00v6zbz] {
  padding: 0px 16px 8px 16px;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--secondary-text);
  text-underline-offset: 6px;
}

.card-name h4[b-4kb00v6zbz] {
  color: var(--primary-text);
  max-width: 300px;
  margin-bottom: 0;
}

.card-name:hover[b-4kb00v6zbz] {
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .card-name h4[b-4kb00v6zbz] {
    max-width: 380px;
  }
}

@media only screen and (min-width: 1440px) {
  .card-name h4[b-4kb00v6zbz] {
    max-width: 280px;
  }
}

@media only screen and (min-width: 1920px) {
  .card-name h4[b-4kb00v6zbz] {
    max-width: 280px;
  }
}
/* /Features/Shared/Atoms/Card/Role/Name/Name.razor.rz.scp.css */
.role-name[b-zfvc3zpncd] {
    color: var(--secondary-text);
    max-width: 120px;
}
/* /Features/Shared/Atoms/Card/Role/Title/Title.razor.rz.scp.css */
/* /Features/Shared/Atoms/DateTime/DateTime.razor.rz.scp.css */
.date-time[b-lx1sij894g] {
  color: var(--secondary-text);
  font-size: 16px;
  text-align: left;
  line-height: 24px;
}
/* /Features/Shared/Atoms/FilterOption/FilterOption.razor.rz.scp.css */
.filter-option[b-62z1c2ivij] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 144px;
    height: 64px;
    color: var(--secondary-text);
    border-radius: 10px;
    box-shadow: var(--inner-shadow-bluer-3);
    backdrop-filter: var(--blur-2);
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    transition: none;
}

.filter-option[b-62z1c2ivij]::before {
    background: gray;
    filter: blur(2px);
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: 10px;
    opacity: 0.1;
}

.filter-option:hover[b-62z1c2ivij] {
    cursor: pointer;
}

.filter-option.selected[b-62z1c2ivij] {
    background-color: var(--primary);
    color: var(--white);
}

.filter-option span[b-62z1c2ivij] {
    padding: 0 16px;
}

.filter-option-inner[b-62z1c2ivij] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: var(--border-white-1);
    background: var(--white-80);
    backdrop-filter: var(--blur-2);
    transition: none;
}

.filter-option-inner.selected[b-62z1c2ivij] {
    background-color: var(--primary);
}

.filter-option-inner span[b-62z1c2ivij] {
    transition: none;
}

@media only screen and (max-width: 768px) {
    .filter-option[b-62z1c2ivij] {
        width: unset;
    }
}
/* /Features/Shared/Atoms/Header/Buttons/Menu/Menu.razor.rz.scp.css */
.menu-button[b-doubsq1jup] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 32px;
}

.menu-button:hover[b-doubsq1jup] {
    cursor: pointer;
}

@media only screen and (min-width: 960px) {
    .menu-button[b-doubsq1jup] {
        display: none !important;
    }
}
/* /Features/Shared/Atoms/Header/Buttons/Profile/Profile.razor.rz.scp.css */
.profile-button[b-z6n1x3yemx] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 48px;
    border-radius: 24px;
    flex-shrink: 0;
    background: var(--secondary);
}

.profile-button:hover[b-z6n1x3yemx] {
    cursor: pointer;
}
/* /Features/Shared/Atoms/Logo/Logo.razor.rz.scp.css */
/* /Features/Shared/Atoms/VersionDisplay/VersionDisplay.razor.rz.scp.css */
.version-text[b-nd0fm7q5hr] {
    font-size: 11px;
    color: #8a929c;
    opacity: 0.7;
    cursor: default;
    user-select: text;
    padding: 4px 0;
}
/* /Features/Shared/Components/Pagination/Pagination.razor.rz.scp.css */
.pagination-container[b-575pdlec1x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 0 15px;
}

.pagination[b-575pdlec1x] {
    margin: 0;
}

.page-link[b-575pdlec1x] {
    color: var(--primary-color);
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.page-link:hover:not(:disabled)[b-575pdlec1x] {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-item.active .page-link[b-575pdlec1x] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.page-item.disabled .page-link[b-575pdlec1x] {
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-info[b-575pdlec1x] {
    color: #6c757d;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .pagination-container[b-575pdlec1x] {
        flex-direction: column;
        gap: 10px;
    }
    
    .pagination[b-575pdlec1x] {
        flex-wrap: wrap;
    }
}
/* /Features/Shared/Form/Buttons/AddButton/AddButton.razor.rz.scp.css */
.add-button[b-7d0mnxmw7c] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    color: var(--white);
    border-radius: 24px;
    box-shadow: var(--inner-shadow-bluer-3);
    backdrop-filter: var(--blur-2);
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    font-weight: bold;
    font-size: 26px;
    color: #FFFFFF;
    line-height: 48px;
}

.add-button[b-7d0mnxmw7c]::before {
    background: var(--primary);
    filter: blur(4px);
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    border-radius: 24px;
}

.add-button:hover[b-7d0mnxmw7c] {
    cursor: pointer;
}

.add-button-inner[b-7d0mnxmw7c] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    border: var(--border-white-1);
    background: var(--primary);
    backdrop-filter: var(--blur-2);
}
/* /Features/Shared/Form/Buttons/LargeButton/LargeButton.razor.rz.scp.css */
.large-button[b-l18v6a2yxo] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    border-radius: 10px;
    min-width: 64px;
}

.large-button:hover[b-l18v6a2yxo] {
    cursor: pointer;
}

.spinner[b-l18v6a2yxo] {
    animation: spin-b-l18v6a2yxo 1s linear infinite;
    display: inline-block;
    margin-right: 5px;
}

@keyframes spin-b-l18v6a2yxo {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Features/Shared/Form/Buttons/SearchButton/SearchButton.razor.rz.scp.css */
.search-button[b-ykhufyvobc] {
    background: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    flex-shrink: 0;
}

.search-button:hover[b-ykhufyvobc] {
    cursor: pointer;
}
/* /Features/Shared/Form/Buttons/SmallButton/SmallButton.razor.rz.scp.css */
.small-button[b-dzfu3wpq8u] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 32px;
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.50);
    border-radius: 5px;
    color: white;
}

.small-button:hover[b-dzfu3wpq8u] {
    cursor: pointer;
}
/* /Features/Shared/Form/Dropdowns/AutoDropdown/AutoDropdown.razor.rz.scp.css */
.dropdown-container[b-5xn504nvlr] {
    width: 100%;
    position: relative;
}

.dropdown-container.dropdown-active[b-5xn504nvlr] {
    z-index: 1000;
}

.form-autocomplete[b-5xn504nvlr] {
    width: 100%;
    padding: 13px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}

.option-dropdown[b-5xn504nvlr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    background-color: var(--white);
    z-index: 2;
    padding: 8px;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.auto-option[b-5xn504nvlr] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: var(--secondary-light);
    border-radius: 10px;
    font-weight: bold;
    padding: 10px 16px;
}

.auto-option.selected[b-5xn504nvlr] {
    background-color: var(--primary);
    color: var(--white);
}

.auto-option-add[b-5xn504nvlr] {
    margin-right: 8px;
}

[b-5xn504nvlr] input {
    outline: none;
    border: none;
}

[b-5xn504nvlr] input:focus {
    outline: none;
    border: var(--border);
}

@media screen and (max-width: 768px) {
    .form-autocomplete[b-5xn504nvlr] {
        z-index: 3;
        position: relative;
        border-radius: 10px 10px 0px 0px;
    }

    .option-dropdown[b-5xn504nvlr] {
        border-radius: 0px 0px 10px 10px;
        top: 100%;
    }

    .overlay[b-5xn504nvlr] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.30);
        z-index: 1;
    }

    .overlay.show[b-5xn504nvlr] {
        opacity: 1;
        pointer-events: auto;
    }

    [b-5xn504nvlr] input:focus {
        outline: none;
        border: none;
        border-bottom: none;
    }
}
/* /Features/Shared/Form/Dropdowns/DynamicDropdown/DynamicDropdown.razor.rz.scp.css */
.dropdown-container[b-5gs293ifen] {
    position: relative;
    width: 100%;
}

.dropdown-container.dropdown-active[b-5gs293ifen] {
    z-index: 1000;
}

.dropdown-button[b-5gs293ifen] {
    border-radius: 10px;
    padding: 13px 16px;
    background-color: var(--white);
    border: none;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: var(--border);
    border-radius: 20px;
    color: var(--primary-text);
}

.dropdown-button span[b-5gs293ifen] {
    width: 100%;
    text-align: left;
}

.dynamic-dropdown-menu[b-5gs293ifen] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    width: 100%;
    background-color: var(--white);
    z-index: 2;
    margin-top: 4px;
    padding: 8px;
    border-radius: 10px;
    top: calc(100% + 4px);
    left: 0;
    max-height: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Animation */
    /* opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease; */
}

.dynamic-dropdown-menu.show[b-5gs293ifen] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-option-wrapper[b-5gs293ifen] {
    display: flex;
    gap: 8px;
}

.dropdown-option[b-5gs293ifen] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    cursor: pointer;
    background: var(--secondary-light, #f0f0f0);
    border-radius: 10px;
    font-weight: bold;
    padding: 10px 16px;
}

.dropdown-option span[b-5gs293ifen] {
    width: 100%;
    text-align: left;
}

.overlay[b-5gs293ifen] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 1;
}

.overlay.show[b-5gs293ifen] {
    opacity: 1;
    pointer-events: auto;
}

.dropdown-input[b-5gs293ifen] {
    width: 100%;
    border: var(--border);
    padding: 8px;
    border-radius: 20px;
}

.small-button-create[b-5gs293ifen] {
    padding: 8px;
    background: var(--primary);
    color: var(--white);
    border-radius: 5px;
}

.small-button-cancel[b-5gs293ifen] {
    padding: 8px;
    background: #F0F0F0;
    color: #606060;
    border-radius: 5px;
}

.create-item[b-5gs293ifen] {
    background: var(--white);
    gap: 8px;
    padding: 0;
    border-top: 1px solid #e0e0e0;
    padding-top: 8px;
    margin-top: 4px;
}

.trash-icon[b-5gs293ifen] {
    display: flex;
    align-items: center;
    padding: 0px 8px;
    color: #DD2600;
}

.trash-icon:hover[b-5gs293ifen] {
    cursor: pointer;
}

.dropdown-options-list[b-5gs293ifen] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 200px;
    padding-right: 4px;
}

.dropdown-options-list[b-5gs293ifen]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options-list[b-5gs293ifen]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.dropdown-options-list[b-5gs293ifen]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.dropdown-options-list[b-5gs293ifen]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

[b-5gs293ifen] input:focus {
    outline: none;
    border: var(--border);
}
/* /Features/Shared/Form/Dropdowns/MeasurementUnitSelect/MeasurementUnitSelect.razor.rz.scp.css */
.unit-dropdown-container[b-kwyjem0u0k] {
    position: relative;
    width: 100%;
}

.unit-dropdown-button[b-kwyjem0u0k] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 14px;
    background: var(--white, #FFFFFF);
    border: var(--border, 1px solid rgba(0, 0, 0, 0.1));
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text, #111827);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unit-dropdown-arrow[b-kwyjem0u0k] {
    font-size: 10px;
    color: var(--secondary-text, #606060);
    flex-shrink: 0;
}

.unit-overlay[b-kwyjem0u0k] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 50;
}

.unit-option-dropdown[b-kwyjem0u0k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 180px;
    margin-top: 4px;
    padding: 8px;
    background-color: var(--white, #FFFFFF);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.unit-option[b-kwyjem0u0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--secondary-light, #F5F5F5);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.1s ease;
}

.unit-option:hover[b-kwyjem0u0k] {
    background: var(--secondary, #F0F0F0);
}

.unit-option.selected[b-kwyjem0u0k] {
    background-color: var(--primary, #00B7DD);
    color: var(--white, #FFFFFF);
}

.unit-symbol[b-kwyjem0u0k] {
    font-weight: 600;
}

.unit-name[b-kwyjem0u0k] {
    font-weight: 400;
    opacity: 0.7;
    font-size: 13px;
}

.unit-option.selected .unit-name[b-kwyjem0u0k] {
    opacity: 0.85;
}

@media screen and (max-width: 768px) {
    .unit-dropdown-button[b-kwyjem0u0k] {
        height: 44px;
        font-size: 16px;
        padding: 10px 14px;
    }

    .unit-option-dropdown[b-kwyjem0u0k] {
        top: 0;
    }

    .unit-option[b-kwyjem0u0k] {
        padding: 12px 14px;
        font-size: 16px;
        min-height: 44px;
    }
}
/* /Features/Shared/Form/Dropdowns/RegularDropdown/RegularDropdown.razor.rz.scp.css */
.dropdown-container[b-19b45yijg1] {
    width: 100%;
    position: relative;
}

.form-dropdown[b-19b45yijg1] {
    width: 100%;
    padding: 13px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}

.option-dropdown[b-19b45yijg1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    background-color: var(--white);
    z-index: 100;
    padding: 8px;
    border-radius: 10px;
    width: 100%;
}

.dropdown-option[b-19b45yijg1] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;;
    cursor: pointer;
    background: var(--secondary-light);
    border-radius: 10px;
    font-weight: bold;
    padding: 10px 16px;
}

.dropdown-option.selected[b-19b45yijg1] {
    background-color: var(--primary);
    color: var(--white);
}

.overlay[b-19b45yijg1] {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.overlay[b-19b45yijg1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 50;
}

.overlay.show[b-19b45yijg1] {
    opacity: 1;
    pointer-events: auto;
}

[b-19b45yijg1] input:focus {
    outline: none;
    border: var(--border);
}

@media screen and (max-width: 768px) {
    .option-dropdown[b-19b45yijg1] {
        top: 0px;
    }
}
/* /Features/Shared/Form/Inputs/AddressAutocomplete/AddressAutocomplete.razor.rz.scp.css */
.address-autocomplete-wrapper[b-9p0zar03gi] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
}

.address-input-container[b-9p0zar03gi] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.address-input[b-9p0zar03gi] {
    width: 100%;
    padding-right: 2.5rem;
}

.address-loading-indicator[b-9p0zar03gi] {
    position: absolute;
    right: 0.75rem;
    color: var(--primary, #00B7DD);
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-loading-indicator .spin[b-9p0zar03gi] {
    animation: spin-b-9p0zar03gi 1s linear infinite;
}

@keyframes spin-b-9p0zar03gi {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.address-clear-btn[b-9p0zar03gi] {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.address-clear-btn:hover[b-9p0zar03gi] {
    color: #dd2600;
}

.address-details[b-9p0zar03gi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(0, 183, 221, 0.05);
    border-radius: 8px;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.address-detail-row[b-9p0zar03gi] {
    display: flex;
    gap: 0.5rem;
}

.detail-label[b-9p0zar03gi] {
    color: #666;
    min-width: 60px;
}

.detail-value[b-9p0zar03gi] {
    color: #333;
    font-weight: 500;
}

.overlay[b-9p0zar03gi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 50;
    opacity: 1;
    pointer-events: auto;
}

.overlay.show[b-9p0zar03gi] {
    display: block;
}

@media (max-width: 768px) {
    .address-autocomplete-wrapper[b-9p0zar03gi] {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        gap: 0;
    }

    .address-input-container[b-9p0zar03gi] {
        z-index: 100;
        flex: 1;
    }

    .address-input[b-9p0zar03gi] {
        border-radius: 10px 0px 0px 10px;
    }

    [b-9p0zar03gi] .large-button {
        border-radius: 0px 10px 10px 0px;
        z-index: 100;
    }

    .address-details[b-9p0zar03gi] {
        width: 100%;
        margin-top: 0.5rem;
    }
}
/* /Features/Shared/Form/Inputs/CommentInput/CommentInput.razor.rz.scp.css */
.comment-input[b-1v3vj8c7tv] {
    width: 100%;
    height: 128px;
}

.comment-input-container[b-1v3vj8c7tv] {
    padding: 16px 16px 0px 16px;
    background: var(--white);
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}

[b-1v3vj8c7tv] textarea:focus {
    outline: none;
    border: none;
}
/* /Features/Shared/Form/Inputs/DateInput/DateInput.razor.rz.scp.css */
.form-date-input[b-qd0k2o6jtj] {
    width: 100%;
    padding: 10px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}

.overlay[b-qd0k2o6jtj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

[b-qd0k2o6jtj] input:focus {
    outline: none;
    border: none;
}

@media screen and (max-width: 768px) {
    .date-input-wrapper[b-qd0k2o6jtj] {
        display: flex;
        position: relative;
    }

    .form-date-input[b-qd0k2o6jtj] {
        padding: 13px 16px;
        border-radius: 10px 0px 0px 10px;
        z-index: 3;
        position: relative;
    }

    [b-qd0k2o6jtj] .regular-label {
        width: 100%;
    }

    [b-qd0k2o6jtj] .large-button {
        border-radius: 0px 10px 10px 0px;
        z-index: 3;
    }
}
/* /Features/Shared/Form/Inputs/RegularInput/RegularInput.razor.rz.scp.css */
.form-input[b-hhawqnocbk] {
    width: 100%;
    padding: 13px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}

.overlay[b-hhawqnocbk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

[b-hhawqnocbk] input:focus {
    outline: none;
    border: var(--border);
}

@media screen and (max-width: 768px) {
    .input-wrapper[b-hhawqnocbk] {
        display: flex;
    }

    .form-input[b-hhawqnocbk] {
        padding: 13px 16px;
        border-radius: 10px 0px 0px 10px;
        position: relative;
        z-index: 3;
        min-width: 0;
    }

    [b-hhawqnocbk] .large-button {
        border-radius: 0px 10px 10px 0px;
        z-index: 3;
    }
}
/* /Features/Shared/Form/Inputs/SearchInput/SearchInput.razor.rz.scp.css */
.search-input[b-sqflgfcdgm] {
    width: 100%;
    padding: 10px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
    margin-bottom: 48px;
}

@media only screen and (min-width: 960px) {
    .search-input[b-sqflgfcdgm] {
        width: 500px;
    }
}
/* /Features/Shared/Form/Labels/RegularLabel/RegularLabel.razor.rz.scp.css */


.regular-label[b-97vtw8r5oo] {
    margin-bottom: 8px;
}

@media only screen and (max-width: 768px) {
    .regular-label[b-97vtw8r5oo] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 16px;
        background-color: var(--white);
        border-radius: 5px;
        margin: 0;
        width: 100%;
        height: 44px;
    }

    .regular-label-value[b-97vtw8r5oo] {
        display: flex;
        gap: 24px;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    .regular-label-value .x-small[b-97vtw8r5oo] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* /Features/Shared/Form/Textarea/RegularTextarea.razor.rz.scp.css */
.textarea-wrapper[b-chx8q9ssko] {
    width: 100%;
    position: relative;
    margin-bottom: 16px;
}

.textarea-container[b-chx8q9ssko] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Desktop label styling */
.desktop-label[b-chx8q9ssko] {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

/* Mobile label styling */
.mobile-label[b-chx8q9ssko] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 4px;
}

.textarea-container.mobile-expanded[b-chx8q9ssko] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
}

/* Main textarea styling */
.form-textarea[b-chx8q9ssko] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    color: #333;
    min-height: 100px;
}

.form-textarea[b-chx8q9ssko]::placeholder {
    color: #999;
}

.form-textarea:focus[b-chx8q9ssko] {
    outline: none;
    border-color: var(--primary, #007bff);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-textarea:disabled[b-chx8q9ssko] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-textarea.mobile[b-chx8q9ssko] {
    min-height: 150px;
    font-size: 16px;
    padding: 16px;
}

.form-textarea.desktop[b-chx8q9ssko] {
    min-height: 100px;
}

.mobile-actions[b-chx8q9ssko] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.overlay[b-chx8q9ssko] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.overlay.show[b-chx8q9ssko] {
    opacity: 1;
    pointer-events: all;
}

@media (max-width: 768px) {
    .form-textarea.mobile[b-chx8q9ssko] {
        min-height: 200px;
    }
}
/* /Features/Shared/Molecules/Actions/Actions.razor.rz.scp.css */
.actions[b-yt0pkigj1d] {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 48px;
    right: 48px;
    gap: 24px;
    z-index: 1000;
}

@media only screen and (max-width: 600px) {
    .actions[b-yt0pkigj1d] {
        right: 24px;
    }
}
/* /Features/Shared/Molecules/Card/Address/Address.razor.rz.scp.css */
a[b-wpha3s9ji0] {
    text-decoration: none !important;
}
/* /Features/Shared/Molecules/Card/CommunicationForCopy/CommunicationForCopy.razor.rz.scp.css */
.communication[b-1onahab298] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--black-50);
}

.communication__email[b-1onahab298]{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow:hidden;
}
/* /Features/Shared/Molecules/Card/Communication/Communication.razor.rz.scp.css */
.communication[b-csizs954e2] {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--black-50);
}
/* /Features/Shared/Molecules/Card/Counter/Counter.razor.rz.scp.css */
/* /Features/Shared/Molecules/Card/Date/Date.razor.rz.scp.css */
/* /Features/Shared/Molecules/Card/Email/Email.razor.rz.scp.css */
/* /Features/Shared/Molecules/Card/Role/Role.razor.rz.scp.css */
/* /Features/Shared/Molecules/Card/Team/Team.razor.rz.scp.css */
/* /Features/Shared/Molecules/Filter/Filter.razor.rz.scp.css */
.filter-wrapper[b-v5k8ut5p8v] {
    width: 100%;
}

.filter[b-v5k8ut5p8v] {
    display: flex;
    width: 100%;
    min-height: 72px;
    padding: 4px 6px;
    grid-gap: 12px;
    background: var(--secondary);
    background-image: linear-gradient(90deg, #ffffff00 96%, #0f0f0f4d 100%, #00000080 100%);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}

.filter[b-v5k8ut5p8v]::-webkit-scrollbar {
    display: none;
}

filter.full-width[b-v5k8ut5p8v] {
    width: 100%;
}

.loading[b-v5k8ut5p8v] {
    background: linear-gradient(90deg, var(--secondary) 25%, #e0e0e0 50%, var(--secondary) 75%);
    border-radius: 10px;
    background-size: 200% 100%;
    animation: 1s loading-b-v5k8ut5p8v linear infinite;
    animation-delay: 500ms;
}

@media only screen and (min-width: 1920px) {
    .filter-wrapper[b-v5k8ut5p8v] {
        width: 50%;
    }
    .filter-wrapper.full-width[b-v5k8ut5p8v] {
        width: 100%;
    }
}

@keyframes loading-b-v5k8ut5p8v {
    to {
        background-position-x: -200%;
    }
}
/* /Features/Shared/Molecules/Form/CommentList/CommentList.razor.rz.scp.css */
.comment-list[b-mavkp3d2lx] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24Px;
}

.comment-header[b-mavkp3d2lx] {
    display: flex;
    justify-content: space-between;
}

.comment-wrapper[b-mavkp3d2lx] {
    background: rgba(255,255,255,0.80);
    border: 4px solid #FFFFFF;
    border-radius: 10px;
    padding: 16px;
}

.comment-body[b-mavkp3d2lx] {
    margin-top: 16px;
}

.comment-actions[b-mavkp3d2lx] {
    display: flex;
    gap: 16px;
}

.comment-edit[b-mavkp3d2lx] {
    color: var(--primary);
}

.comment-edit:hover[b-mavkp3d2lx] {
    cursor: pointer;
}

.comment-trash[b-mavkp3d2lx] {
    color: #DD2600;
}

.comment-trash:hover[b-mavkp3d2lx] {
    cursor: pointer;
}

.comment-buttons[b-mavkp3d2lx] {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.file-card-mini[b-mavkp3d2lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.file-name[b-mavkp3d2lx] {
    max-width: 80px;
}

[b-mavkp3d2lx] .fi-content {
    background-color: var(--secondary-text) !important;
}

[b-mavkp3d2lx] .fi-pdf.fi:before,
[b-mavkp3d2lx] .fi-jpeg.fi:before,
[b-mavkp3d2lx] .fi-png.fi:before,
[b-mavkp3d2lx] .fi-plain.fi:before {
    background-color: var(--secondary-text) !important;
}

[b-mavkp3d2lx] .fi-pdf.fi:after,
[b-mavkp3d2lx] .fi-jpeg.fi:after,
[b-mavkp3d2lx] .fi-png.fi:after,
[b-mavkp3d2lx] .fi-plain.fi:after {
    border-left-color: var(--black) !important;
}

[b-mavkp3d2lx] a {
    color: var(--primary-text);
    text-decoration: none;
}
/* /Features/Shared/Molecules/Form/Comment/Comment.razor.rz.scp.css */
.comment-footer[b-u43uvo06uo] {
    display: flex;
    padding: 0px 16px 16px 16px;
    background: var(--white);
    border-radius: 0px 0px 10px 10px;;
}

.comment-footer-left[b-u43uvo06uo] {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.comment-footer-right[b-u43uvo06uo] {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.comment-file-actions[b-u43uvo06uo] {
    display: flex;
}

.comment-file[b-u43uvo06uo] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-file-remove:hover[b-u43uvo06uo] {
    cursor: pointer;
}

.file-list-container[b-u43uvo06uo] {
    width: 100%;
}

.file-item[b-u43uvo06uo] {
    padding: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e9e9e9;
}

.file-item:last-child[b-u43uvo06uo] {
    border-bottom: none;
}

.file-actions[b-u43uvo06uo] {
    display: flex;
    align-items: center;
}
/* /Features/Shared/Molecules/Modal/ConfirmationDialog/ConfirmationDialog.razor.rz.scp.css */
.confirmation-modal[b-7lupegpkrv] {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-light);
    border: none;
    border-radius: 20px;
    width: 100%;
}

.confirmation-modal-header[b-7lupegpkrv] {
    padding: 16px 24px 0 24px;
}

.confirmation-modal-header h4[b-7lupegpkrv] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-text);
}

.confirmation-modal-body[b-7lupegpkrv] {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
}

.confirmation-modal-body p[b-7lupegpkrv] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--secondary-text);
}

.confirmation-modal-footer[b-7lupegpkrv] {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 24px;
}

@media screen and (min-width: 480px) {
    .confirmation-modal[b-7lupegpkrv] {
        width: 400px;
    }  
}
/* /Features/Shared/Molecules/Modal/ProjectCreationDialog/ProjectCreationDialog.razor.rz.scp.css */
.add-project-modal[b-cak9lu1ydh] {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-light);
    border: none;
    border-radius: 20px;
    width: 100%;
}

.add-project-modal-header[b-cak9lu1ydh] {
    padding: 16px 24px 0 24px;
}

.add-project-modal-body[b-cak9lu1ydh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 24px 0 24px;
}

.add-project-modal-footer[b-cak9lu1ydh] {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 24px;
}

@media screen and (min-width: 480px) {
    .add-project-modal[b-cak9lu1ydh] {
        width: 320px;
    }  
}
/* /Features/Shared/Organisms/Body/Body.razor.rz.scp.css */
/* /Features/Shared/Organisms/Header/Header.razor.rz.scp.css */
.main-header[b-91bgcbqet4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 48px 32px 32px;
    padding-top: 48px;
}

@media screen and (max-width: 768px) {
    .main-header[b-91bgcbqet4] {
        margin: 0 16px 16px 16px;
        padding-top: 16px;
        gap: 12px;
    }
}
/* /Features/SupplierPricing/Atoms/PriceTag/PriceTag.razor.rz.scp.css */
.price-tag[b-lk7chikgrk] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--mud-palette-text-primary, #1a1a1a);
}
/* /Features/SupplierPricing/Atoms/PriceTrend/PriceTrend.razor.rz.scp.css */
.price-trend[b-3bzyzg7eop] {
    font-size: 0.85rem;
    font-weight: 500;
}

.trend-up[b-3bzyzg7eop] {
    color: #d32f2f;
}

.trend-down[b-3bzyzg7eop] {
    color: #388e3c;
}

.trend-neutral[b-3bzyzg7eop] {
    color: #757575;
}
/* /Features/SupplierPricing/Molecules/SupplierPriceCard/SupplierPriceCard.razor.rz.scp.css */
.supplier-price-card[b-9j8kbvbiz2] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px;
    background: white;
    transition: box-shadow 0.2s;
}

.supplier-price-card:hover[b-9j8kbvbiz2] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.supplier-price-card.lowest-price[b-9j8kbvbiz2] {
    border-color: #388e3c;
    border-width: 2px;
}

.card-header[b-9j8kbvbiz2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-header h4[b-9j8kbvbiz2] {
    margin: 0;
    font-size: 1rem;
}

.badge-lowest[b-9j8kbvbiz2] {
    background: #388e3c;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.price-main[b-9j8kbvbiz2] {
    margin-bottom: 10px;
}

.price[b-9j8kbvbiz2] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
}

.effective-price[b-9j8kbvbiz2] {
    display: block;
    font-size: 0.85rem;
    color: #388e3c;
    margin-top: 4px;
}

.billing-unit-price[b-9j8kbvbiz2] {
    display: block;
    font-size: 0.85rem;
    color: #0369a1;
    font-weight: 500;
    margin-top: 2px;
}

.detail-row[b-9j8kbvbiz2] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.875rem;
    min-height: 28px;
    align-items: center;
}

.detail-row .label[b-9j8kbvbiz2] {
    color: #757575;
}

.card-tiers[b-9j8kbvbiz2] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.card-tiers h5[b-9j8kbvbiz2] {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: #424242;
}

.tier-row[b-9j8kbvbiz2] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    min-height: 28px;
    align-items: center;
}

.tier-price[b-9j8kbvbiz2] {
    font-weight: 600;
}

/* Tablet+ */
@media (min-width: 600px) {
    .supplier-price-card[b-9j8kbvbiz2] {
        padding: 16px;
    }

    .card-header h4[b-9j8kbvbiz2] {
        font-size: 1.1rem;
    }

    .price[b-9j8kbvbiz2] {
        font-size: 1.5rem;
    }

    .detail-row[b-9j8kbvbiz2] {
        font-size: 0.9rem;
    }
}
/* /Features/SupplierPricing/Organisms/MaterialCategoryTree/MaterialCategoryTree.razor.rz.scp.css */
.category-tree[b-5za6bodxts] {
    font-size: 0.9rem;
}

.tree-node[b-5za6bodxts] {
    margin: 2px 0;
}

.tree-node.selected > .node-content[b-5za6bodxts] {
    background: #e3f2fd;
    border-radius: 6px;
}

.node-content[b-5za6bodxts] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    min-height: 44px;
}

.node-content:hover[b-5za6bodxts] {
    background: #f5f5f5;
}

.toggle[b-5za6bodxts] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    color: #757575;
    flex-shrink: 0;
    border-radius: 50%;
}

.toggle:active[b-5za6bodxts] {
    background: #e0e0e0;
}

.toggle-spacer[b-5za6bodxts] {
    width: 28px;
    flex-shrink: 0;
}

.node-name[b-5za6bodxts] {
    font-weight: 500;
    flex: 1;
}

.node-code[b-5za6bodxts] {
    color: #9e9e9e;
    font-size: 0.8rem;
}

.sub-tree[b-5za6bodxts] {
    margin-left: 20px;
}

.no-categories[b-5za6bodxts] {
    color: #9e9e9e;
    padding: 8px;
}

/* Desktop - can tighten up touch targets */
@media (min-width: 960px) {
    .node-content[b-5za6bodxts] {
        padding: 6px 8px;
        min-height: auto;
    }

    .toggle[b-5za6bodxts] {
        width: 20px;
        height: 20px;
    }

    .toggle-spacer[b-5za6bodxts] {
        width: 20px;
    }
}
/* /Features/SupplierPricing/Organisms/PriceComparisonGrid/PriceComparisonGrid.razor.rz.scp.css */
.comparison-header[b-v6leu1w8p2] {
    margin-bottom: 16px;
}

.comparison-header h3[b-v6leu1w8p2] {
    margin: 0 0 8px;
    font-size: 1.1rem;
    word-break: break-word;
}

.conversion-info[b-v6leu1w8p2] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.price-summary[b-v6leu1w8p2] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.summary-item[b-v6leu1w8p2] {
    font-size: 0.9rem;
    color: #616161;
}

.comparison-grid[b-v6leu1w8p2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Tablet (2-col) */
@media (min-width: 600px) {
    .comparison-header[b-v6leu1w8p2] {
        margin-bottom: 20px;
    }

    .comparison-header h3[b-v6leu1w8p2] {
        font-size: 1.25rem;
    }

    .price-summary[b-v6leu1w8p2] {
        gap: 24px;
    }

    .summary-item[b-v6leu1w8p2] {
        font-size: 0.95rem;
    }

    .comparison-grid[b-v6leu1w8p2] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }
}

/* Desktop */
@media (min-width: 960px) {
    .comparison-header[b-v6leu1w8p2] {
        margin-bottom: 24px;
    }
}
/* /Features/SupplierPricing/Organisms/SupplierPricingForm/SupplierPricingForm.razor.rz.scp.css */
.pricing-form[b-omafr7zogc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Section cards ── */
.form-section[b-omafr7zogc] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: visible;
    transition: box-shadow 0.25s ease;
}

.section-header[b-omafr7zogc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    border-left: 3px solid var(--primary, #00B7DD);
}

.section-title-group[b-omafr7zogc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon[b-omafr7zogc] {
    font-size: 1rem;
    color: var(--primary, #00B7DD);
}

.section-title[b-omafr7zogc] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
}

.section-body[b-omafr7zogc] {
    padding: 16px;
}

/* ── Form grid ── */
.form-grid[b-omafr7zogc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.form-grid:last-child[b-omafr7zogc] {
    margin-bottom: 0;
}

.form-field-full[b-omafr7zogc] {
    grid-column: 1 / -1;
}

/* ── Field label ── */
.field-label[b-omafr7zogc] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

/* ── Store selector (supplier dropdown) ── */
.store-selector[b-omafr7zogc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.store-icon[b-omafr7zogc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    color: #6B7280;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* ── Material toggle ── */
.material-toggle[b-omafr7zogc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toggle-group[b-omafr7zogc] {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 38px;
}

.toggle-option[b-omafr7zogc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color: #757575;
    background: #fafafa;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    padding: 0 8px;
    white-space: nowrap;
}

.toggle-option:hover[b-omafr7zogc] {
    background: #f0f0f0;
}

.toggle-option.active[b-omafr7zogc] {
    background: var(--primary, #00B7DD);
    color: white;
    font-weight: 600;
}

/* ── Validation error ── */
.validation-error[b-omafr7zogc] {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 4px;
    padding: 6px 10px;
    background: #fff5f5;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

/* ── Add tier button ── */
.add-tier-btn[b-omafr7zogc] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary, #00B7DD);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--primary, #00B7DD);
    transition: all 0.2s;
    user-select: none;
}

.add-tier-btn:hover[b-omafr7zogc] {
    background: rgba(0, 183, 221, 0.08);
}

.add-tier-btn i[b-omafr7zogc] {
    font-size: 0.9rem;
}

/* ── Volume tiers ── */
.empty-tiers[b-omafr7zogc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 4px;
}

.empty-tiers-icon[b-omafr7zogc] {
    font-size: 1.5rem;
    color: #d1d5db;
    margin-bottom: 4px;
}

.no-tiers-text[b-omafr7zogc] {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

.no-tiers-hint[b-omafr7zogc] {
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 0;
    text-align: center;
}

.tier-header-row[b-omafr7zogc] {
    display: none;
}

.tier-row[b-omafr7zogc] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.tier-row:last-child[b-omafr7zogc] {
    margin-bottom: 0;
}

.tier-field[b-omafr7zogc] {
    flex: 1;
    min-width: 0;
}

.tier-delete[b-omafr7zogc] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: #dc3545;
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.tier-delete:hover[b-omafr7zogc] {
    background: #fff5f5;
}

/* ── Actions bar ── */
.form-actions[b-omafr7zogc] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 0 0;
}

/* ═══════════════════════════════════════
   Mobile (< 600px)
   ═══════════════════════════════════════ */
@media (max-width: 599.98px) {
    .pricing-form[b-omafr7zogc] {
        gap: 16px;
    }

    .form-section[b-omafr7zogc] {
        border-radius: 10px;
    }

    .section-header[b-omafr7zogc] {
        padding: 12px 14px;
    }

    .section-icon[b-omafr7zogc] {
        display: none;
    }

    .section-body[b-omafr7zogc] {
        padding: 14px;
    }

    .form-grid[b-omafr7zogc] {
        gap: 10px;
    }

    .tier-row[b-omafr7zogc] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .tier-field[b-omafr7zogc] {
        flex: 1 1 calc(33% - 6px);
        min-width: 80px;
    }

    .form-actions[b-omafr7zogc] {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #e0e0e0;
        padding: 12px 16px;
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
        margin: 0 -16px;
    }

    .toggle-option[b-omafr7zogc] {
        font-size: 0.75rem;
        min-height: 44px;
    }

    .empty-tiers[b-omafr7zogc] {
        padding: 12px 0;
    }

    .empty-tiers-icon[b-omafr7zogc] {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════
   Tablet (600px+)
   ═══════════════════════════════════════ */
@media (min-width: 600px) {
    .form-section[b-omafr7zogc] {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .section-header[b-omafr7zogc] {
        padding: 16px 20px;
    }

    .section-body[b-omafr7zogc] {
        padding: 20px;
    }

    .form-grid[b-omafr7zogc] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .form-grid-3[b-omafr7zogc] {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ═══════════════════════════════════════
   Desktop (960px+) — Premium enhancements
   ═══════════════════════════════════════ */
@media (min-width: 960px) {
    .pricing-form[b-omafr7zogc] {
        gap: 24px;
    }

    .form-section[b-omafr7zogc] {
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                    0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .form-section:hover[b-omafr7zogc] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06),
                    0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .section-header[b-omafr7zogc] {
        padding: 18px 24px;
        border-left-width: 4px;
    }

    .section-icon[b-omafr7zogc] {
        font-size: 1.1rem;
    }

    .section-title[b-omafr7zogc] {
        font-size: 1rem;
        letter-spacing: -0.01em;
    }

    .section-body[b-omafr7zogc] {
        padding: 24px;
    }

    .form-grid[b-omafr7zogc] {
        gap: 20px;
    }

    .form-grid-3[b-omafr7zogc] {
        gap: 20px;
    }

    /* Store selector desktop premium */
    .store-icon[b-omafr7zogc] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 22px;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        color: var(--primary, #00B7DD);
    }

    /* Toggle desktop refinement */
    .toggle-group[b-omafr7zogc] {
        border-radius: 10px;
        height: 42px;
    }

    .toggle-option[b-omafr7zogc] {
        font-size: 0.85rem;
        padding: 0 16px;
    }

    /* Add tier button desktop */
    .add-tier-btn[b-omafr7zogc] {
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.825rem;
        gap: 6px;
    }

    .add-tier-btn:hover[b-omafr7zogc] {
        background: rgba(0, 183, 221, 0.1);
        box-shadow: 0 1px 3px rgba(0, 183, 221, 0.15);
    }

    /* Empty tiers desktop */
    .empty-tiers[b-omafr7zogc] {
        padding: 32px 0;
        gap: 6px;
    }

    .empty-tiers-icon[b-omafr7zogc] {
        font-size: 2rem;
        color: #d1d5db;
        margin-bottom: 8px;
    }

    .no-tiers-text[b-omafr7zogc] {
        font-size: 0.9rem;
    }

    .no-tiers-hint[b-omafr7zogc] {
        font-size: 0.825rem;
    }

    /* Tier header row — visible on desktop */
    .tier-header-row[b-omafr7zogc] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 0 10px;
        margin-bottom: 6px;
        border-bottom: 1px solid #f3f4f6;
    }

    .tier-header-field[b-omafr7zogc] {
        flex: 1;
        font-size: 0.75rem;
        font-weight: 600;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tier-header-action[b-omafr7zogc] {
        width: 36px;
        flex-shrink: 0;
    }

    .tier-row[b-omafr7zogc] {
        gap: 12px;
        margin-bottom: 12px;
        padding: 8px 0;
        border-radius: 8px;
        transition: background 0.15s ease;
    }

    .tier-row:hover[b-omafr7zogc] {
        background: #fafbfc;
    }

    .tier-delete[b-omafr7zogc] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .tier-delete:hover[b-omafr7zogc] {
        background: #fef2f2;
        color: #b91c1c;
    }

    /* Validation error desktop */
    .validation-error[b-omafr7zogc] {
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.825rem;
    }

    /* Actions bar desktop */
    .form-actions[b-omafr7zogc] {
        padding: 20px 0 0;
        border-top: 1px solid #f0f0f0;
        margin-top: 4px;
        gap: 14px;
    }
}

/* ═══════════════════════════════════════
   Wide Desktop (1200px+)
   ═══════════════════════════════════════ */
@media (min-width: 1200px) {
    .pricing-form[b-omafr7zogc] {
        gap: 28px;
    }

    .section-body[b-omafr7zogc] {
        padding: 28px;
    }

    .section-header[b-omafr7zogc] {
        padding: 20px 28px;
    }

    .form-grid[b-omafr7zogc] {
        gap: 24px;
    }

    .form-grid-3[b-omafr7zogc] {
        gap: 24px;
    }

    .tier-row[b-omafr7zogc] {
        gap: 16px;
    }

    .tier-header-row[b-omafr7zogc] {
        gap: 16px;
    }
}

/* ── Conversion preview ── */
.conversion-preview[b-omafr7zogc] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.conversion-preview-text[b-omafr7zogc] {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #0369a1;
    font-weight: 500;
    white-space: nowrap;
    height: 38px;
}
/* /Features/Teams/Molecules/MemberCard/MemberCard.razor.rz.scp.css */
.member-card[b-es71ztyh4w]{
    display: flex;
    width: 100%;
    min-width: 296px;
    min-height: 224px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 1);
}

.name-wrapper[b-es71ztyh4w]{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:flex-start;
    width: 80%;
    cursor: pointer;
}

.member-role[b-es71ztyh4w]{
    padding-left: 16px;
    padding-bottom: 16px;
}
.member-action-icons[b-es71ztyh4w]{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20%;
}

.member-shield-trash-wrapper[b-es71ztyh4w] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 16px;
    padding-right: 16px;
}

.member-phone-wrapper[b-es71ztyh4w]{
    display: flex;
    justify-content: flex-end;
    padding-bottom: 16px;
    padding-right: 16px;
}
@media only screen and (max-width: 480px) {
    .team-card[b-es71ztyh4w]{
        min-width: none;
        min-height: none;
    }
}
/* /Features/Teams/Molecules/TeamCard/TeamCard.razor.rz.scp.css */
.team-card[b-sg2a51xkrb]{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 296px;
    min-height: 224px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 1);
}

.name-wrapper[b-sg2a51xkrb]{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    cursor: pointer;
}

.team[b-sg2a51xkrb]{
    padding-left: 32px;
}

.pencil-icon[b-sg2a51xkrb]{
    padding-top: 16px;
    padding-right: 16px;
    color:var(--primary);
}

.team-details-wrapper[b-sg2a51xkrb]{
    display: flex;
    align-items:flex-end;
    height: 100%;
    padding-left: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
}
.lead-members-wrapper[b-sg2a51xkrb]{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 16px;
}

@media only screen and (max-width: 480px) {
    .team-card[b-sg2a51xkrb]{
        min-width: none;
        min-height: none;
    }
}
/* /Features/Teams/Organisms/MembersGrid/MembersGrid.razor.rz.scp.css */
.members-grid[b-ym2ijqlv0r]{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

@media only screen and (max-width: 480px) {
    .members-grid[b-ym2ijqlv0r]{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 32px;
    }
}
/* /Features/Teams/Organisms/TeamsGrid/TeamsGrid.razor.rz.scp.css */
.teams-grid[b-3g8spxfxns]{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

@media only screen and (max-width: 480px) {
    .teams-grid[b-3g8spxfxns]{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 32px;
    }
}
/* /Features/Users/Employees/Molecules/EmployeeCard/EmployeeCard.razor.rz.scp.css */
.employee-card[b-hoslvl9ass]{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 296px;
    min-height: 224px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 1);
}

.name-wrapper[b-hoslvl9ass]{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    cursor: pointer;
}

.pencil-icon[b-hoslvl9ass]{
    padding-top: 16px;
    padding-right: 16px;
    color:var(--primary);
}

.employee-details-wrapper[b-hoslvl9ass]{
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    height: 100%;
    padding-left: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
}
.contact-partner-card[b-hoslvl9ass]{
    width:56;
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
}
.employee-phone[b-hoslvl9ass]{
    width:44;
    color:var(--primary);
}
@media only screen and (max-width: 480px) {
    .employee-card[b-hoslvl9ass]{
        min-width: none;
        min-height: none;
    }
}
/* /Features/Users/Employees/Molecules/Filter/Filter.razor.rz.scp.css */
.statuses[b-tfbxhco4ti] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 8px 12px 8px;
    background-color: var(--white);
    margin-bottom: 48px;
    border-radius: 15px;
}

.status-option[b-tfbxhco4ti] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
    background: var(--secondary-light);
    border-radius: 10px;
    font-weight: bold;
    padding: 16px;
}

.status-option span[b-tfbxhco4ti] {
    width: 100%;
    text-align: center;
}

.status-option:hover[b-tfbxhco4ti] {
    background-color: var(--secondary);
}

@media only screen and (min-width: 1920px) {
    .statuses[b-tfbxhco4ti] {
        margin-bottom: 60px;
    }
}
/* /Features/Users/Employees/Organisms/EmployeesGrid/EmployeesGrid.razor.rz.scp.css */
.employees-grid[b-zmsrj2wcrt]{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

@media only screen and (max-width: 480px) {
    .employees-grid[b-zmsrj2wcrt]{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 32px;
    }
}
/* /Features/Users/Molecules/UserCardEmpty/UserCardEmpty.razor.rz.scp.css */
.user-card-empty[b-oui9cffpzt] {
    width: 100%;
    min-width: 237px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
}

.loading[b-oui9cffpzt] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1s loading-b-oui9cffpzt linear infinite;
}

@keyframes loading-b-oui9cffpzt {
    to {
        background-position-x: -200%;
    }
}
/* /Features/Users/Molecules/UserCard/UserCard.razor.rz.scp.css */
.user-card[b-v1jinmajts]{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 296px;
    min-height: 224px;
    background: var(--secondary);
    border-radius: 10px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 1);
}

.name-wrapper[b-v1jinmajts]{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    cursor: pointer;
}

.role-email-wrapper[b-v1jinmajts]{
    display: flex;
    align-items:flex-end;
    height: 100%;
    padding-left: 16px;
    padding-bottom: 16px;
}

.email[b-v1jinmajts]{
    padding-left: 32px;
}

.pencil-icon[b-v1jinmajts]{
    padding-top: 16px;
    padding-right: 16px;
    color:var(--primary);
}

@media only screen and (max-width: 480px) {
    .user-card[b-v1jinmajts]{
        min-width: none;
        min-height: none;
    }
}
/* /Features/Users/Organisms/Filters/Filters.razor.rz.scp.css */
.filters[b-rgrp1zn51b] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

@media only screen and (min-width: 1920px) {
    .filters[b-rgrp1zn51b] {
        flex-direction: row;
    }
}
/* /Features/Users/Organisms/UsersGrid/UsersGrid.razor.rz.scp.css */
.users-grid[b-y9u7l4l68f]{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
}

@media only screen and (max-width: 480px) {
    .users-grid[b-y9u7l4l68f]{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 32px;
    }
}
/* /Pages/CatalogItems/CatalogItemDetails.razor.rz.scp.css */
/* Catalog Item Details Page Styles */

#catalog-item-details[b-fqcbvpm4b3] {
    padding: 20px;
}

.loading-container[b-fqcbvpm4b3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
}

.spinner[b-fqcbvpm4b3] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left-color: #00B7DD;
    animation: spin-b-fqcbvpm4b3 1s ease infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-fqcbvpm4b3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Pages/CatalogItems/CatalogItems.razor.rz.scp.css */
/* Catalog Items List Page Styles */

#catalog-items-list[b-id3kmuda0m] {
    padding: 24px;
}

/* Override search input bottom margin */
#catalog-items-list .search-input[b-id3kmuda0m] {
    margin-bottom: 24px;
}

/* Adjust filters margin */
#catalog-items-list .filters[b-id3kmuda0m] {
    margin-bottom: 24px;
}

/* Adjust grid top margin */
#catalog-items-list .catalog-item-card-grid[b-id3kmuda0m] {
    margin-top: 0;
}

.loading-indicator[b-id3kmuda0m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 50px 0;
}

.spinner[b-id3kmuda0m] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left-color: #00B7DD;
    animation: spin-b-id3kmuda0m 1s ease infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-id3kmuda0m {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-items[b-id3kmuda0m] {
    text-align: center;
    padding: 40px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin: 0;
    color: #6B7280;
    font-size: 16px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #catalog-items-list[b-id3kmuda0m] {
        padding: 16px;
    }
    
    #catalog-items-list .search-input[b-id3kmuda0m] {
        margin-bottom: 16px;
    }
    
    #catalog-items-list .filters[b-id3kmuda0m] {
        margin-bottom: 16px;
    }
}

.loading-more[b-id3kmuda0m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    margin: 20px 0;
    color: #666;
    font-size: 14px;
}

.loading-more .spinner-border[b-id3kmuda0m] {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2em;
}
/* /Pages/Components/AutoCompleteCatalogItems.razor.rz.scp.css */
.catalog-autocomplete[b-h0aqqv26rh] {
    width: 100%;
}

.catalog-item-row[b-h0aqqv26rh] {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    width: 100%;
}

.catalog-item-name[b-h0aqqv26rh] {
    font-weight: 500;
    color: #212529;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.catalog-item-details[b-h0aqqv26rh] {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #6c757d;
    gap: 12px;
}

.catalog-item-unit[b-h0aqqv26rh] {
    font-style: italic;
}

.catalog-item-price[b-h0aqqv26rh] {
    font-weight: 500;
    color: #28a745;
}

.create-new-item-option[b-h0aqqv26rh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: #007bff;
    font-weight: 500;
}

.create-new-item-option strong[b-h0aqqv26rh] {
    font-weight: 600;
}

.no-records-found[b-h0aqqv26rh] {
    padding: 16px;
    text-align: center;
}

.no-records-found p[b-h0aqqv26rh] {
    margin: 0 0 12px 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.no-records-found strong[b-h0aqqv26rh] {
    font-weight: 600;
    color: #007bff;
}
/* /Pages/Components/Catalog/CatalogItemForm.razor.rz.scp.css */
.catalog-item-form[b-7ar6phxoam] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.form-card[b-7ar6phxoam] {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.2s ease;
}

.form-card:hover[b-7ar6phxoam] {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.form-card-header[b-7ar6phxoam] {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background-color: var(--white);
}

.form-card-header h5[b-7ar6phxoam] {
    margin: 0;
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 600;
}

.form-card-body[b-7ar6phxoam] {
    padding: 24px 20px;
}

.form-section[b-7ar6phxoam] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row[b-7ar6phxoam] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.form-field[b-7ar6phxoam] {
    flex: 1;
    min-width: 250px;
}

.modern-input[b-7ar6phxoam] {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    background-color: var(--white);
    transition: all 0.2s ease;
}

.modern-input:focus[b-7ar6phxoam] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.2);
    outline: none;
}

.modern-input[b-7ar6phxoam]::placeholder {
    color: rgba(0,0,0,0.3);
}

.description-input[b-7ar6phxoam] {
    resize: vertical;
    min-height: 100px;
}

.price-input-container[b-7ar6phxoam] {
    position: relative;
}

.currency-symbol[b-7ar6phxoam] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-text);
    z-index: 1;
}

.price-input[b-7ar6phxoam] {
    padding-left: 28px;
}

.form-actions[b-7ar6phxoam] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.btn-modern[b-7ar6phxoam] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
}

.btn-modern.primary[b-7ar6phxoam] {
    background-color: var(--primary);
    color: white;
}

.btn-modern.primary:hover[b-7ar6phxoam] {
    background-color: #009BBB;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-modern.secondary[b-7ar6phxoam] {
    background-color: #f0f0f0;
    color: #606060;
}

.btn-modern.secondary:hover[b-7ar6phxoam] {
    background-color: #e5e5e5;
}

.btn-modern.danger[b-7ar6phxoam] {
    background-color: #ff4d4f;
    color: white;
}

.btn-modern.danger:hover[b-7ar6phxoam] {
    background-color: #ff3436;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .form-row[b-7ar6phxoam] {
        flex-direction: column;
        gap: 20px;
    }

    .form-field[b-7ar6phxoam] {
        width: 100%;
    }

    .form-actions[b-7ar6phxoam] {
        flex-direction: column;
        width: 100%;
    }

    .btn-modern[b-7ar6phxoam] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Contacts/AddContact/AddContact.razor.rz.scp.css */

.card-header[b-tda1wnjuhl]{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background-color: #fafafa;
    /* border-bottom: 1px solid #e0e0e0; */
}

[b-tda1wnjuhl] .btn-header {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px; 
}

[b-tda1wnjuhl] .btn-header.enabled {
    background-color: var(--primary);
    color: white;
}

[b-tda1wnjuhl] .btn-header.enabled:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}
[b-tda1wnjuhl] .btn-header.disabled {
    background-color: white;
    color: #666;
    border-color: #ddd;
}

[b-tda1wnjuhl] .btn-header.disabled:hover {
    background-color: #f8f8f8;
    border-color: #999;
    color: #333;
}

[b-tda1wnjuhl] .btn-header.disabled:active {
    transform: translateY(1px);
    background-color: #f0f0f0;
}
/* /Pages/Contacts/ContactDetails/ContactDetails.razor.rz.scp.css */
.card-header[b-tlj9284ovo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background-color: #fafafa;
}

.header-left[b-tlj9284ovo] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-category[b-tlj9284ovo] {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.header-right[b-tlj9284ovo] {
    display: flex;
    align-items: center;
}

[b-tlj9284ovo] .btn-header {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px; 
}

[b-tlj9284ovo] .btn-header.enabled {
    background-color: var(--primary);
    color: white;
}

[b-tlj9284ovo] .btn-header.enabled:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}
[b-tlj9284ovo] .btn-header.disabled {
    background-color: white;
    color: #666;
    border-color: #ddd;
}

[b-tlj9284ovo] .btn-header.disabled:hover {
    background-color: #f8f8f8;
    border-color: #999;
    color: #333;
}

[b-tlj9284ovo] .btn-header.disabled:active {
    transform: translateY(1px);
    background-color: #f0f0f0;
}

[b-tlj9284ovo] .btn-delete {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: white;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
}

[b-tlj9284ovo] .btn-delete:hover {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

[b-tlj9284ovo] .btn-delete:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.2);
}
/* /Pages/Contacts/SearchContact/SearchContact.razor.rz.scp.css */
/* /Pages/Dashboards/Manager/Manager.razor.rz.scp.css */
.dashboard[b-ev6lj80frp] {
    max-width: 1200px;
}

.projects-grid[b-ev6lj80frp] {
    margin-top: 128px;
}

@media only screen and (max-width: 1200px) {
    .dashboard[b-ev6lj80frp] {
        flex-direction: column;
    }

    .projects-grid[b-ev6lj80frp] {
        margin-top: 50px;
    }
}
/* /Pages/Dashboards/Owner/Owner.razor.rz.scp.css */
.projects-grid[b-rtoymvjrva] {
  margin-top: 128px;
}

.messages-grid[b-rtoymvjrva] {
  margin-left: 128px;
}

.messages-title[b-rtoymvjrva] {
  margin-bottom: 24px;
}

.messages-box[b-rtoymvjrva]{
  background-color: var(--secondary-light);
  border-radius: 10px;
  height: 90vh;
  max-height: 90vh;
  overflow:auto;
  padding: 16px;
}

@media only screen and (max-width: 1200px) {
  .dashboard[b-rtoymvjrva] {
    flex-direction: column;
  }

  .projects-grid[b-rtoymvjrva] {
    margin-top: 50px;
  }

  .messages-grid[b-rtoymvjrva] {
    display: block;
    margin-left: 0;
    margin-top: 50px;
  }
}
/* /Pages/Dialogs/FilePreviewDialog.razor.rz.scp.css */
.preview-loading[b-e9z3qtc134] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.preview-container[b-e9z3qtc134] {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 70vh;
    overflow: auto;
}

.preview-image[b-e9z3qtc134] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.preview-pdf[b-e9z3qtc134] {
    height: 70vh;
}

.preview-pdf object[b-e9z3qtc134] {
    height: 100%;
}
/* /Pages/Employees/Employees/Employees.razor.rz.scp.css */
/* /Pages/NotFoundPage.razor.rz.scp.css */
.not-found-container[b-n0a34bnghd] {
    text-align: center;
    padding: 50px 20px;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

.error-code[b-n0a34bnghd] {
    font-size: 120px;
    font-weight: bold;
    color: #dc3545;
    margin: 30px 0;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.not-found-container h1[b-n0a34bnghd] {
    font-size: 36px;
    margin-bottom: 0;
    color: #333;
}

.not-found-container p[b-n0a34bnghd] {
    font-size: 18px;
    margin: 20px 0 30px;
    color: #666;
    max-width: 450px;
}

.action-buttons[b-n0a34bnghd] {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.action-buttons button[b-n0a34bnghd] {
    padding: 10px 20px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.action-buttons .btn-primary[b-n0a34bnghd] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.action-buttons .btn-primary:hover[b-n0a34bnghd] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.action-buttons .btn-secondary[b-n0a34bnghd] {
    background-color: #6c757d;
    border-color: #6c757d;
}

.action-buttons .btn-secondary:hover[b-n0a34bnghd] {
    background-color: #5c636a;
    border-color: #565e64;
}

@media (max-width: 576px) {
    .error-code[b-n0a34bnghd] {
        font-size: 100px;
    }
    
    .not-found-container h1[b-n0a34bnghd] {
        font-size: 28px;
    }
    
    .action-buttons[b-n0a34bnghd] {
        flex-direction: column;
    }
}
/* /Pages/PermissionManagement.razor.rz.scp.css */
.permission-management-page[b-ss3x7xg7ze] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-ss3x7xg7ze] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.header-content h1[b-ss3x7xg7ze] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #212529;
}

.page-description[b-ss3x7xg7ze] {
    color: #6c757d;
    margin: 0;
}

.header-actions[b-ss3x7xg7ze] {
    display: flex;
    gap: 10px;
}

.filters-section[b-ss3x7xg7ze] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group[b-ss3x7xg7ze] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label[b-ss3x7xg7ze] {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.filter-group .form-select[b-ss3x7xg7ze] {
    min-width: 200px;
}

.search-box[b-ss3x7xg7ze] {
    display: flex;
    gap: 5px;
}

.search-box input[b-ss3x7xg7ze] {
    min-width: 250px;
}

.rotating[b-ss3x7xg7ze] {
    animation: rotate-b-ss3x7xg7ze 1s linear infinite;
}

@keyframes rotate-b-ss3x7xg7ze {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .page-header[b-ss3x7xg7ze] {
        flex-direction: column;
    }

    .header-actions[b-ss3x7xg7ze] {
        width: 100%;
        justify-content: flex-start;
    }

    .filters-section[b-ss3x7xg7ze] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group .form-select[b-ss3x7xg7ze],
    .search-box input[b-ss3x7xg7ze] {
        width: 100%;
        min-width: auto;
    }
}
/* /Pages/Projects/Components/ArticleItem/ArticleItem.razor.rz.scp.css */
.article-container[b-deyt5ebq27] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-input[b-deyt5ebq27] {
    width: 100%;
    padding: 10px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}
/* /Pages/Projects/Components/ExpenseItem/ExpenseItem.razor.rz.scp.css */
/* Clean expense item design */

.expense-list[b-2wrlmhsvgp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Container styles */
.expense-form-container[b-2wrlmhsvgp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Edit mode highlight */
.expense-form-container:has(.expense-form-actions)[b-2wrlmhsvgp] {
    border-color: #E5E7EB;
}

/* Compact expense card layout */
.expense-container[b-2wrlmhsvgp] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
}

/* Left section with icon and content */
.expense-container-left[b-2wrlmhsvgp] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Icon styling */
.expense-container-icon[b-2wrlmhsvgp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #F9FAFB;
    border-radius: 8px;
    color: #6B7280;
    font-size: 16px;
    flex-shrink: 0;
}

/* Content section */
.expense-container-content[b-2wrlmhsvgp] {
    flex: 1;
    min-width: 0;
}

.expense-title[b-2wrlmhsvgp] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-meta[b-2wrlmhsvgp] {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.expense-meta .separator[b-2wrlmhsvgp] {
    font-size: 10px;
    opacity: 0.5;
}

/* Right section with amount and action */
.expense-container-right[b-2wrlmhsvgp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expense-amount[b-2wrlmhsvgp] {
    font-size: 15px;
    font-weight: 600;
    color: #DC2626;
    text-align: right;
    min-width: 70px;
}

.expense-action-icon[b-2wrlmhsvgp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #9CA3AF;
    font-size: 12px;
}

/* Make the entire container clickable */
.expense-container[b-2wrlmhsvgp] {
    cursor: pointer;
}

/* Form elements */
.form-input[b-2wrlmhsvgp] {
    width: 100%;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #111827;
    outline: none;
}

.form-input:focus[b-2wrlmhsvgp] {
    border-color: #9CA3AF;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

/* Clean number inputs */
input[type="number"][b-2wrlmhsvgp]::-webkit-inner-spin-button,
input[type="number"][b-2wrlmhsvgp]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"][b-2wrlmhsvgp] {
    -moz-appearance: textfield;
}

.form-input-label[b-2wrlmhsvgp] {
    margin-bottom: 4px;
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
}

.form-input-wrapper[b-2wrlmhsvgp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.expense-form-row[b-2wrlmhsvgp] {
    display: flex;
    gap: 12px;
    width: 100%;
}

.expense-labor-form-row[b-2wrlmhsvgp] {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: flex-end;
}

.form-input-disabled[b-2wrlmhsvgp] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #F9FAFB;
    color: #6B7280;
    font-weight: 500;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
    cursor: not-allowed;
}

.expense-form-header[b-2wrlmhsvgp] {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
}

.expense-form-actions[b-2wrlmhsvgp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #F3F4F6;
}

.delete-button[b-2wrlmhsvgp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid #FEE2E2;
    border-radius: 8px;
    color: #DC2626;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.delete-button:hover[b-2wrlmhsvgp] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #B91C1C;
}

.delete-button i[b-2wrlmhsvgp] {
    font-size: 14px;
}

.article-header-row[b-2wrlmhsvgp] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #F3F4F6;
}

.article-header-item[b-2wrlmhsvgp] {
    width: 100%;
    padding-left: 12px;
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
}

.article-header-item-empty[b-2wrlmhsvgp] {
    display: flex;
    min-width: 60px;
}

/* Deprecated - hidden for cleanup */
.expense-container-text[b-2wrlmhsvgp],
.total-value[b-2wrlmhsvgp],
.date[b-2wrlmhsvgp],
.ellipsis-text[b-2wrlmhsvgp],
.bold[b-2wrlmhsvgp] {
    display: none;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .expense-form-container[b-2wrlmhsvgp] {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 12px;
    }
    
    .expense-container[b-2wrlmhsvgp] {
        padding: 4px 0;
    }
    
    .expense-container-icon[b-2wrlmhsvgp] {
        width: 40px;
        height: 40px;
    }
    
    .expense-title[b-2wrlmhsvgp] {
        font-size: 15px;
    }
    
    .expense-meta[b-2wrlmhsvgp] {
        font-size: 13px;
        margin-top: 3px;
    }
    
    .expense-amount[b-2wrlmhsvgp] {
        font-size: 16px;
        min-width: auto;
    }
    
    .expense-action-icon[b-2wrlmhsvgp] {
        width: 36px;
        height: 36px;
    }
    
    .expense-form-row[b-2wrlmhsvgp] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .expense-labor-form-row[b-2wrlmhsvgp] {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-input[b-2wrlmhsvgp] {
        height: 44px;
        font-size: 16px;
    }
    
    .form-input-disabled[b-2wrlmhsvgp] {
        height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    /* Touch-friendly buttons */
    .expense-form-row button[b-2wrlmhsvgp] {
        height: 44px;
        min-width: unset;
        width: 100%;
    }
    
    .delete-button[b-2wrlmhsvgp] {
        height: 44px;
        margin-top: 4px;
    }
    
    /* Article items on mobile */
    .article-header-row[b-2wrlmhsvgp] {
        display: none;
    }
    
    .article-row[b-2wrlmhsvgp] {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        background: #F9FAFB;
        border-radius: 8px;
        margin-bottom: 8px;
    }
}

/* /Pages/Projects/Components/Expense/Expense.razor.rz.scp.css */
.expense-type-selector button[b-zk8y7x5cxe] {
    margin: 0.5rem;
}

.expense-type-selector .active[b-zk8y7x5cxe] {
    font-weight: bold;
    background-color: #00B7DD;
    color: white;
}

.form-input[b-zk8y7x5cxe] {
    width: 100%;
    padding: 10px 16px;
    background: var(--white);
    border: var(--border);
    border-radius: 20px;
}

.form-input-label[b-zk8y7x5cxe] {
    padding-left: 4px;
}

.form-input-wrapper[b-zk8y7x5cxe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.expense-form-container[b-zk8y7x5cxe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: var(--secondary-light);
    border-radius: 10px;
}

.expense-form-row[b-zk8y7x5cxe] {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-end;
}

.expense-labor-form-row[b-zk8y7x5cxe] {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: flex-end;
}

.expense-forms-container[b-zk8y7x5cxe] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.expense-forms-container .expense-form-container[b-zk8y7x5cxe] {
    flex: 1;
    min-width: 300px;
}

.expense-form-header[b-zk8y7x5cxe] {
    margin-bottom: 12px;
    color: #333;
    font-weight: bold;
}

/* High-quality mobile design */
@media (max-width: 768px) {
    .expense-forms-container[b-zk8y7x5cxe] {
        flex-direction: column;
        gap: 24px; /* Increased vertical spacing */
    }
    
    .expense-forms-container .expense-form-container[b-zk8y7x5cxe] {
        width: 100%;
        min-width: unset;
    }
    
    .expense-form-container[b-zk8y7x5cxe] {
        padding: 20px; /* More breathing room */
        margin-bottom: 0;
    }
    
    .expense-form-row[b-zk8y7x5cxe],
    .expense-labor-form-row[b-zk8y7x5cxe] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .form-input-wrapper[b-zk8y7x5cxe] {
        width: 100%;
    }
    
    .form-input[b-zk8y7x5cxe] {
        height: 48px; /* Touch-friendly input height */
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
    }
    
    /* Button styling for mobile */
    .expense-form-container button[b-zk8y7x5cxe] {
        height: 48px;
        width: 100% !important;
        margin-top: 8px;
    }
}
/* /Pages/Projects/Components/ExtraItem/ExtraItem.razor.rz.scp.css */
.extra-form-container[b-rizoshz79t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.extra-form-row[b-rizoshz79t] {
    display: flex;
    justify-content: end;
    gap: 16px;
    width: 100%;
}

.trash-icon[b-rizoshz79t] {
    display: flex;
    align-items: center;
    padding: 0px 8px;
    color: #DD2600;
}

.trash-icon:hover[b-rizoshz79t] {
    cursor: pointer;
}

.extra-container[b-rizoshz79t] {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: space-between;
    align-content: center;
}

.extra-container-text[b-rizoshz79t] {
    display: flex;
    align-items: center;
    background: var(--white);
}

.extra-container-text.description[b-rizoshz79t] {
    width: 240px;
}

@media only screen and (max-width: 768px) {
    .extra-container-text.description[b-rizoshz79t] {
        width: 120px;
    }

    .date[b-rizoshz79t] {
        display: none;
    }
}
/* /Pages/Projects/Components/ExtraList/ExtraList.razor.rz.scp.css */
.extra-list[b-zycjv0diik] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}
/* /Pages/Projects/Components/Extra/Extra.razor.rz.scp.css */
.extra-form-container[b-1vxothfkdm] {
    padding: 8px;
    background-color: var(--secondary-light);
    border-radius: 10px 10px 0px 0px;
}

[b-1vxothfkdm] textarea:focus {
    outline: none;
    border: none;
}
/* /Pages/Projects/Components/FileItem/FileItem.razor.rz.scp.css */
.file-card[b-mklq5ck0e1] {
    display: flex;
    flex-direction: column;
    width: 100px;
}

.thumbnail-cover[b-mklq5ck0e1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 6px; 
    background: #f5f5f5; 
    cursor: pointer; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.thumbnail-cover:hover[b-mklq5ck0e1] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
}

.thumbnail-cover img[b-mklq5ck0e1] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
}
.file-card-content[b-mklq5ck0e1]{
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}
.file-actions[b-mklq5ck0e1] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.download-icon[b-mklq5ck0e1] {
    font-size: 16px;
    color: var(--primary);
}

.delete-icon[b-mklq5ck0e1] {
    font-size: 16px;
    color: #DD2600;
}

.file-card-footer[b-mklq5ck0e1] {
    display: flex;
    justify-content: end;
    color: var(--primary);
    font-size: 16px;
}

.cursor-pointer[b-mklq5ck0e1] {
    cursor: pointer;
}

[b-mklq5ck0e1] .fi-content {
    background-color: var(--secondary-text) !important;
}

[b-mklq5ck0e1] .fi-pdf.fi:before,
[b-mklq5ck0e1] .fi-jpeg.fi:before,
[b-mklq5ck0e1] .fi-png.fi:before,
[b-mklq5ck0e1] .fi-plain.fi:before {
    background-color: var(--secondary-text) !important;
}

[b-mklq5ck0e1] .fi-pdf.fi:after,
[b-mklq5ck0e1] .fi-jpeg.fi:after,
[b-mklq5ck0e1] .fi-png.fi:after,
[b-mklq5ck0e1] .fi-plain.fi:after {
    border-left-color: var(--black) !important;
}
/* /Pages/Projects/Components/FileList/FileList.razor.rz.scp.css */
[b-asxvrk3fsf] h4 {
    margin: 0 !important;
}
/* /Pages/Projects/Components/MaterialExpenseForm/MaterialExpenseForm.razor.rz.scp.css */
/* Receipt-style material expense form */
.material-expense-form[b-ojgo3mcknw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Store selector section */
.store-selector[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px dashed #E5E7EB;
}

.store-icon[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    color: #6B7280;
    font-size: 20px;
}

/* Items section */
.items-section[b-ojgo3mcknw] {
    flex: 1;
}

.items-list[b-ojgo3mcknw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* ── Existing item styles ── */
.item-row.existing-item[b-ojgo3mcknw] {
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 12px;
}

.item-main-line[b-ojgo3mcknw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.item-name-display[b-ojgo3mcknw] {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.item-detail-line[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.item-inputs[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-quantity.compact[b-ojgo3mcknw],
.item-price.compact[b-ojgo3mcknw] {
    padding: 6px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s ease;
}

.item-quantity.compact:focus[b-ojgo3mcknw],
.item-price.compact:focus[b-ojgo3mcknw] {
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.1);
}

.item-quantity.compact[b-ojgo3mcknw] {
    width: 55px;
    text-align: center;
}

.item-price.compact[b-ojgo3mcknw] {
    width: 75px;
    text-align: right;
}

/* Inline unit dropdown in existing item rows */
[b-ojgo3mcknw] .unit-dropdown-container {
    width: 80px;
    flex-shrink: 0;
}

[b-ojgo3mcknw] .unit-dropdown-button {
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 8px;
}

.multiply[b-ojgo3mcknw] {
    color: #9CA3AF;
    font-size: 14px;
    flex-shrink: 0;
}

.item-total[b-ojgo3mcknw] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

/* Pieces per unit display */
.item-pieces[b-ojgo3mcknw] {
    font-size: 12px;
    color: #6B7280;
    font-style: italic;
}

/* Conversion / PiecesPerUnit row */
.item-conversion-line[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.conversion-label[b-ojgo3mcknw] {
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap;
}

.item-conversion.compact[b-ojgo3mcknw] {
    padding: 4px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    background: #FFFFFF;
    outline: none;
    width: 70px;
    text-align: right;
    transition: border-color 0.15s ease;
}

.item-conversion.compact:focus[b-ojgo3mcknw] {
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.1);
}

.item-conversion.compact[b-ojgo3mcknw]::placeholder {
    color: #9CA3AF;
    font-style: italic;
}

/* Remove item button */
.remove-item[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

.remove-item:hover[b-ojgo3mcknw] {
    color: #DC2626;
}

/* ── Add new item section ── */
.add-item-section[b-ojgo3mcknw] {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px;
    margin-top: 8px;
}

.new-item-name[b-ojgo3mcknw] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 15px;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s ease;
}

.new-item-name:focus[b-ojgo3mcknw] {
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.1);
}

.new-item-name[b-ojgo3mcknw]::placeholder {
    color: #9CA3AF;
}

.new-item-details[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.new-item-qty[b-ojgo3mcknw],
.new-item-price[b-ojgo3mcknw] {
    padding: 8px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s ease;
}

.new-item-qty:focus[b-ojgo3mcknw],
.new-item-price:focus[b-ojgo3mcknw] {
    border-color: #00B7DD;
    box-shadow: 0 0 0 2px rgba(0, 183, 221, 0.1);
}

.new-item-qty[b-ojgo3mcknw] {
    width: 55px;
    text-align: center;
    flex-shrink: 0;
}

.new-item-price[b-ojgo3mcknw] {
    width: 75px;
    text-align: right;
    flex-shrink: 0;
}

/* Unit dropdown in add-item row */
.new-item-details[b-ojgo3mcknw]  .unit-dropdown-container {
    width: 85px;
    flex-shrink: 0;
}

.new-item-details[b-ojgo3mcknw]  .unit-dropdown-button {
    padding: 8px 10px;
    border-radius: 8px;
}

.add-button[b-ojgo3mcknw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-left: auto;
    background: #00B7DD;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.add-button:hover:not(:disabled)[b-ojgo3mcknw] {
    background: #0099BB;
}

.add-button:disabled[b-ojgo3mcknw] {
    background: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* ── Total section ── */
.total-section[b-ojgo3mcknw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 2px solid #111827;
}

.total-label[b-ojgo3mcknw] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.total-amount[b-ojgo3mcknw] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

/* Form actions */
.form-actions[b-ojgo3mcknw] {
    display: flex;
    gap: 12px;
}

/* Delete section */
.delete-section[b-ojgo3mcknw] {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

.delete-button[b-ojgo3mcknw] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid #dc3545;
    border-radius: 8px;
    color: #dc3545;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-button:hover[b-ojgo3mcknw] {
    background-color: #dc3545;
    color: white;
}

.delete-button i[b-ojgo3mcknw] {
    font-size: 16px;
}

/* Hide number input spinners */
input[type="number"][b-ojgo3mcknw]::-webkit-inner-spin-button,
input[type="number"][b-ojgo3mcknw]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"][b-ojgo3mcknw] {
    -moz-appearance: textfield;
}

/* ── Mobile optimizations ── */
@media (max-width: 768px) {
    .material-expense-form[b-ojgo3mcknw] {
        padding: 16px;
        gap: 12px;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    .store-selector[b-ojgo3mcknw] {
        padding-bottom: 12px;
    }

    .store-icon[b-ojgo3mcknw] {
        display: none;
    }

    /* Existing items mobile */
    .item-row.existing-item[b-ojgo3mcknw] {
        padding-bottom: 10px;
    }

    .item-name-display[b-ojgo3mcknw] {
        font-size: 16px;
    }

    .item-inputs[b-ojgo3mcknw] {
        flex-wrap: wrap;
    }

    .item-quantity.compact[b-ojgo3mcknw],
    .item-price.compact[b-ojgo3mcknw] {
        height: 44px;
        font-size: 16px;
    }

    [b-ojgo3mcknw] .unit-dropdown-button {
        height: 44px;
        font-size: 16px;
    }

    /* Add item section mobile */
    .new-item-name[b-ojgo3mcknw] {
        font-size: 16px;
        padding: 12px;
    }

    .new-item-qty[b-ojgo3mcknw],
    .new-item-price[b-ojgo3mcknw] {
        height: 44px;
        font-size: 16px;
    }

    .new-item-details[b-ojgo3mcknw]  .unit-dropdown-button {
        height: 44px;
        font-size: 16px;
    }

    .add-button[b-ojgo3mcknw] {
        width: 44px;
        height: 44px;
    }

    /* Conversion row mobile */
    .item-conversion.compact[b-ojgo3mcknw] {
        height: 44px;
        font-size: 16px;
    }

    /* Form actions mobile */
    .form-actions[b-ojgo3mcknw] {
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
    }

    /* Total section mobile */
    .total-section[b-ojgo3mcknw] {
        padding: 16px 0;
        margin-top: 8px;
    }

    .total-label[b-ojgo3mcknw] {
        font-size: 18px;
    }

    .total-amount[b-ojgo3mcknw] {
        font-size: 24px;
    }

    /* iOS input fix */
    input[b-ojgo3mcknw], select[b-ojgo3mcknw] {
        font-size: 16px !important;
        -webkit-appearance: none;
    }
}
/* /Pages/Projects/Components/QuoteCreation/QuoteCreation.razor.rz.scp.css */
/* Color Variables based on _base.scss */
:root[b-juwlvttkv0] {
    --primary: #00B7DD;
    --primary-dark: #0099BB;
    --primary-darker: #007799;
    --primary-light: #E7F7FB;
    --primary-lighter: #F5FCFE;
    --accent-red: #FF6B6B;
    --accent-green: #00D68F;
    --accent-green-dark: #00B574;
    --accent-amber: #FFB94E;
    --secondary: #F0F0F0;
    --secondary-text: #606060;
}

/* Main quote creation container */
.quote-creation[b-juwlvttkv0] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Rich text area styling */
.rich-text-area[b-juwlvttkv0] {
    min-height: 150px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    resize: vertical;
}

.rich-text-area:focus[b-juwlvttkv0] {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 183, 221, 0.25);
}

.quote-creation-header[b-juwlvttkv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.quote-creation-header h3[b-juwlvttkv0] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
}

.header-actions[b-juwlvttkv0] {
    display: flex;
    align-items: center;
}

.btn-expand[b-juwlvttkv0] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn-expand:hover[b-juwlvttkv0] {
        color: #495057;
    }
}

.quote-creation-content[b-juwlvttkv0] {
    padding: 20px;
}

/* Step containers - Premium Minimal Design */
.step-container[b-juwlvttkv0] {
    margin-bottom: 30px;
    padding: 0;
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Hover lift only on true pointer devices — never triggers on touch */
@media (hover: hover) and (pointer: fine) {
    .step-container:hover[b-juwlvttkv0] {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 183, 221, 0.2);
        transform: translateY(-2px);
    }
}

.step-header[b-juwlvttkv0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Remove decorative pseudo-element */

.step-number[b-juwlvttkv0] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.125rem;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
    flex-shrink: 0;
}

.step-header h4[b-juwlvttkv0] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.step-header h4 i[b-juwlvttkv0] {
    color: #00B7DD;
    margin-right: 8px;
}

/* Form styling - Modern Design */
.step-container .form-content[b-juwlvttkv0] {
    padding: 24px;
}

.form-row[b-juwlvttkv0] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.form-row:last-child[b-juwlvttkv0] {
    margin-bottom: 0;
}

.form-group[b-juwlvttkv0] {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-row > .form-group[b-juwlvttkv0] {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    min-width: 0;
}

.form-row > .form-group.full-width[b-juwlvttkv0] {
    flex: 1 1 100%;
    max-width: 100%;
}

.form-group label[b-juwlvttkv0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.form-group label i[b-juwlvttkv0] {
    color: #00B7DD;
    font-size: 1rem;
}

/* Form section header - subsections within steps */
.form-section-header[b-juwlvttkv0] {
    margin: 32px 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.form-section-header h5[b-juwlvttkv0] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.form-section-header h5 i[b-juwlvttkv0] {
    color: #00B7DD;
    font-size: 18px;
}

.form-section-header small[b-juwlvttkv0] {
    display: block;
    font-size: 13px;
    color: #86868b;
    font-weight: 400;
    line-height: 1.5;
}

.form-control[b-juwlvttkv0] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .form-control:hover[b-juwlvttkv0] {
        border-color: rgba(0, 183, 221, 0.3);
        background-color: rgba(0, 0, 0, 0.01);
    }
}

.form-control:focus[b-juwlvttkv0] {
    outline: none;
    border-color: #00B7DD;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.1);
}

.form-control[b-juwlvttkv0]::placeholder {
    color: #86868b;
    font-size: 15px;
}

textarea.form-control[b-juwlvttkv0] {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.5;
}

select.form-control[b-juwlvttkv0] {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B7DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.form-control:focus[b-juwlvttkv0] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230099BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Input type number styling */
input[type="number"].form-control[b-juwlvttkv0] {
    -moz-appearance: textfield;
}

input[type="number"].form-control[b-juwlvttkv0]::-webkit-outer-spin-button,
input[type="number"].form-control[b-juwlvttkv0]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Form helper text */
.form-text[b-juwlvttkv0] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--secondary-text);
}

.form-text i[b-juwlvttkv0] {
    margin-right: 0.25rem;
    color: var(--primary);
}

/* Quote sections - Premium Design */
.quote-sections[b-juwlvttkv0] {
    margin-top: 24px;
}

.quote-section[b-juwlvttkv0] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift only on true pointer devices — never triggers on touch */
@media (hover: hover) and (pointer: fine) {
    .quote-section:hover[b-juwlvttkv0] {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 183, 221, 0.2);
        transform: translateY(-2px);
    }
}

.section-header[b-juwlvttkv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Remove decorative left border */

.section-header h5[b-juwlvttkv0] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.section-header h5 i[b-juwlvttkv0] {
    color: #00B7DD;
}

.badge[b-juwlvttkv0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.badge-info[b-juwlvttkv0] {
    color: #006B88;
    background: linear-gradient(135deg, rgba(0, 183, 221, 0.1) 0%, rgba(0, 183, 221, 0.2) 100%);
    border: 1px solid rgba(0, 183, 221, 0.2);
}

.badge i[b-juwlvttkv0] {
    font-size: 0.875rem;
}

.section-actions[b-juwlvttkv0] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-edit[b-juwlvttkv0],
.btn-delete[b-juwlvttkv0] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    cursor: pointer;
    color: #586069;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .btn-edit:hover[b-juwlvttkv0] {
        background-color: rgba(0, 183, 221, 0.1);
        border-color: #00B7DD;
        color: #00B7DD;
        transform: translateY(-1px);
    }

    .btn-delete:hover[b-juwlvttkv0] {
        background-color: rgba(220, 53, 69, 0.1);
        border-color: #dc3545;
        color: #dc3545;
        transform: translateY(-1px);
    }
}

/* Touch pressed states replace hover on mobile */
.btn-edit:active[b-juwlvttkv0] {
    background-color: rgba(0, 183, 221, 0.12);
    border-color: #00B7DD;
    color: #00B7DD;
}

.btn-delete:active[b-juwlvttkv0] {
    background-color: rgba(220, 53, 69, 0.12);
    border-color: #dc3545;
    color: #dc3545;
}

.btn-add-item[b-juwlvttkv0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    border: none;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 183, 221, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .btn-add-item:hover[b-juwlvttkv0] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 183, 221, 0.3);
        background: linear-gradient(135deg, #0099BB 0%, #007799 100%);
    }
}

.btn-add-item:active[b-juwlvttkv0] {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 183, 221, 0.2);
    background: linear-gradient(135deg, #0099BB 0%, #007799 100%);
}

.btn-add-item i[b-juwlvttkv0] {
    font-size: 0.875rem;
}

/* Items table - Premium Design Matching Viewer */
.items-table[b-juwlvttkv0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.items-table thead[b-juwlvttkv0] {
    background: rgba(0, 0, 0, 0.02);
}

.items-table th[b-juwlvttkv0] {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.items-table th:first-child[b-juwlvttkv0] {
    padding-left: 24px;
}

.items-table th:last-child[b-juwlvttkv0] {
    padding-right: 24px;
}

.items-table td[b-juwlvttkv0] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.items-table td:first-child[b-juwlvttkv0] {
    padding-left: 24px;
}

.items-table td:last-child[b-juwlvttkv0] {
    padding-right: 24px;
}

.items-table tbody tr[b-juwlvttkv0] {
    transition: background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .items-table tbody tr:hover[b-juwlvttkv0] {
        background-color: rgba(0, 183, 221, 0.04);
    }
}

.items-table tbody tr:last-child td[b-juwlvttkv0] {
    border-bottom: none;
}

.items-table tfoot[b-juwlvttkv0] {
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.items-table tfoot td[b-juwlvttkv0] {
    padding: 16px 24px;
    font-weight: 600;
    font-size: 15px;
    color: #1d1d1f;
    border-bottom: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.item-input[b-juwlvttkv0] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    background-color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.item-input:focus[b-juwlvttkv0] {
    outline: none;
    border-color: #00B7DD;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.1);
}

.text-right[b-juwlvttkv0] {
    text-align: right;
}

/* Inline item form - Premium Design */
.inline-item-form[b-juwlvttkv0] {
    padding: 24px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.inline-entry-table[b-juwlvttkv0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.inline-entry-table thead th[b-juwlvttkv0] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #586069;
    padding-bottom: 12px;
}

.inline-entry-table tbody td[b-juwlvttkv0] {
    padding: 4px;
}

.inline-actions-buttons[b-juwlvttkv0] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* No items message - Modern Design */
.no-items[b-juwlvttkv0] {
    padding: 60px 40px;
    text-align: center;
    position: relative;
}

.no-items[b-juwlvttkv0]::before {
    content: '\f45c';
    font-family: 'bootstrap-icons';
    font-size: 3rem;
    color: #e1e4e8;
    display: block;
    margin-bottom: 16px;
}

.no-items p[b-juwlvttkv0] {
    color: #586069;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Add section form - Premium Design */
.add-section[b-juwlvttkv0] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
    padding: 24px;
    border-radius: 16px;
    margin-top: 24px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .add-section:hover[b-juwlvttkv0] {
        border-color: rgba(0, 183, 221, 0.3);
        box-shadow: 0 4px 12px rgba(0, 183, 221, 0.1);
    }
}

.add-section .form-row[b-juwlvttkv0] {
    align-items: flex-end;
}

.add-section .form-group[b-juwlvttkv0] {
    flex: 1 1 auto;
    max-width: none;
}

.add-section .form-group.actions[b-juwlvttkv0] {
    flex: 0 0 auto;
}

.add-section .form-control[b-juwlvttkv0] {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: white;
}

.add-section .form-control:focus[b-juwlvttkv0] {
    border-color: #00B7DD;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.1);
}

.form-group.actions[b-juwlvttkv0] {
    display: flex;
    align-items: flex-end;
}

/* Remove green override - button will inherit global cyan style */

/* Quote summary - Premium Design Matching Viewer */
.quote-summary[b-juwlvttkv0] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.summary-row[b-juwlvttkv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.summary-row:last-child:not(.total)[b-juwlvttkv0] {
    border-bottom: none;
}

.summary-label[b-juwlvttkv0] {
    font-size: 15px;
    color: #86868b;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.summary-value[b-juwlvttkv0] {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.summary-value.discount[b-juwlvttkv0] {
    color: #dc3545;
}

.summary-row.discount[b-juwlvttkv0] {
    color: #dc3545;
}

.summary-row.discount .summary-value[b-juwlvttkv0] {
    color: #dc3545;
}

/* CRITICAL: Total row with hero treatment matching viewer exactly */
.summary-row.total[b-juwlvttkv0] {
    margin-top: 1.5rem;
    padding: 20px 16px;
    border-top: 2px solid rgba(0, 183, 221, 0.1);
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 12px;
    margin-left: -16px;
    margin-right: -16px;
    border-bottom: none;
}

.summary-row.total .summary-label[b-juwlvttkv0] {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.summary-row.total .summary-value[b-juwlvttkv0] {
    font-size: 32px;
    font-weight: 700;
    color: #00B7DD;
    letter-spacing: -0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Form actions */
.form-actions[b-juwlvttkv0] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding: 20px;
    border-top: 1px solid #dee2e6;
}

/* Buttons - Premium Pill Design */
.btn-primary[b-juwlvttkv0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover:not(:disabled)[b-juwlvttkv0] {
        background: linear-gradient(135deg, #0099BB 0%, #007799 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
    }
}

.btn-primary:active[b-juwlvttkv0] {
    transform: translateY(0);
}

.btn-primary:disabled[b-juwlvttkv0] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-primary i[b-juwlvttkv0] {
    font-size: 1rem;
}

.btn-secondary[b-juwlvttkv0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: #606060;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .btn-secondary:hover[b-juwlvttkv0] {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.2);
        color: #1d1d1f;
    }
}

.btn-secondary:active[b-juwlvttkv0] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1d1d1f;
}

.btn-sm[b-juwlvttkv0] {
    padding: 5px 10px;
    font-size: 0.8125rem;
}

/* Autocomplete wrapper */
.autocomplete-wrapper[b-juwlvttkv0] {
    width: 100%;
}

/* Empty sections state */
.empty-sections-container[b-juwlvttkv0] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    margin: 20px 0;
}

.empty-sections-message[b-juwlvttkv0] {
    text-align: center;
    padding: 40px;
}

.empty-sections-message h5[b-juwlvttkv0] {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #495057;
    font-weight: 600;
}

.empty-sections-message p[b-juwlvttkv0] {
    color: #6c757d;
    margin-bottom: 20px;
}

.empty-sections-message .btn-primary[b-juwlvttkv0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 183, 221, 0.2);
}

@media (hover: hover) and (pointer: fine) {
    .empty-sections-message .btn-primary:hover[b-juwlvttkv0] {
        background: linear-gradient(135deg, #0099BB 0%, #007799 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 183, 221, 0.3);
    }
}

/* Modal styles - Modern and Professional */
.modal-overlay[b-juwlvttkv0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-juwlvttkv0 0.2s ease-out;
}

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

.modal-container[b-juwlvttkv0] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 560px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-juwlvttkv0 0.3s ease-out;
    overflow: hidden;
}

@keyframes slideIn-b-juwlvttkv0 {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-juwlvttkv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.modal-header h4[b-juwlvttkv0] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.btn-close[b-juwlvttkv0] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn-close:hover[b-juwlvttkv0] {
        background-color: rgba(0, 0, 0, 0.06);
        color: #495057;
        transform: rotate(90deg);
    }
}

.btn-close:active[b-juwlvttkv0] {
    background-color: rgba(0, 0, 0, 0.08);
    color: #495057;
}

.modal-body[b-juwlvttkv0] {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

.modal-body[b-juwlvttkv0]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-juwlvttkv0]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.modal-body[b-juwlvttkv0]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.modal-body[b-juwlvttkv0]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.modal-footer[b-juwlvttkv0] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* Enhanced form styling for modal */
.modal-body .form-group[b-juwlvttkv0] {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.modal-body .form-group label[b-juwlvttkv0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.modal-body .form-control[b-juwlvttkv0] {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
    background-color: white;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.modal-body .form-control:focus[b-juwlvttkv0] {
    outline: none;
    border-color: #00B7DD;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.1);
}

/* Modern buttons for modal */
.modal-footer .btn-primary[b-juwlvttkv0],
.modal-footer .btn-secondary[b-juwlvttkv0] {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-footer .btn-primary[b-juwlvttkv0] {
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

@media (hover: hover) and (pointer: fine) {
    .modal-footer .btn-primary:hover:not(:disabled)[b-juwlvttkv0] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 183, 221, 0.35);
    }
}

.modal-footer .btn-primary:active[b-juwlvttkv0] {
    transform: translateY(0);
}

.modal-footer .btn-primary:disabled[b-juwlvttkv0] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.modal-footer .btn-secondary[b-juwlvttkv0] {
    background: white;
    color: #6c757d;
    border: 2px solid #e1e4e8;
}

@media (hover: hover) and (pointer: fine) {
    .modal-footer .btn-secondary:hover[b-juwlvttkv0] {
        background-color: #f8f9fa;
        border-color: #d1d5da;
        color: #495057;
    }
}

.modal-footer .btn-secondary:active[b-juwlvttkv0] {
    background-color: #f0f0f0;
    border-color: #d1d5da;
    color: #495057;
}

.form-info[b-juwlvttkv0] {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #E7F7FB 0%, #F0FBFD 100%);
    border: 1px solid rgba(0, 183, 221, 0.1);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.form-info[b-juwlvttkv0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #00B7DD;
}

.form-info small[b-juwlvttkv0] {
    color: #0099BB;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-info small[b-juwlvttkv0]::before {
    content: '\2139';
    font-size: 1.1rem;
    font-weight: bold;
}

.form-info strong[b-juwlvttkv0] {
    color: #006B88;
    font-weight: 600;
}

/* Enhanced autocomplete wrapper in modal */
.modal-body .autocomplete-wrapper[b-juwlvttkv0] {
    position: relative;
}

.modal-body .autocomplete-wrapper[b-juwlvttkv0]::after {
    content: '\f002';
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/* Quick add specific enhancements */
.quick-add-fields[b-juwlvttkv0] {
    display: grid;
    gap: 20px;
    margin-top: 24px;
    padding: 20px;
    background-color: #fafbfc;
    border-radius: 12px;
    border: 1px solid #e1e4e8;
}

.quick-add-fields .form-row[b-juwlvttkv0] {
    margin-bottom: 0;
}

/* Item preview card */
.item-preview[b-juwlvttkv0] {
    margin-top: 20px;
    padding: 16px;
    background: white;
    border: 2px solid #e1e4e8;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.item-preview-header[b-juwlvttkv0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.item-preview-content[b-juwlvttkv0] {
    display: grid;
    gap: 8px;
}

.item-preview-row[b-juwlvttkv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.item-preview-label[b-juwlvttkv0] {
    font-size: 0.9rem;
    color: #6c757d;
}

.item-preview-value[b-juwlvttkv0] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #212529;
}

/* Field validation states */
.form-control.is-valid[b-juwlvttkv0] {
    border-color: var(--accent-green);
}

.form-control.is-valid:focus[b-juwlvttkv0] {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(0, 214, 143, 0.1);
}

.form-control.is-invalid[b-juwlvttkv0] {
    border-color: var(--accent-red);
}

.form-control.is-invalid:focus[b-juwlvttkv0] {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
}

/* Help text */
.form-text[b-juwlvttkv0] {
    font-size: 0.8125rem;
    color: var(--secondary-text);
    margin-top: 4px;
}

/* Currency input styling */
.currency-input-group[b-juwlvttkv0] {
    position: relative;
}

.currency-input-group .currency-symbol[b-juwlvttkv0] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
}

.currency-input-group .form-control[b-juwlvttkv0] {
    padding-left: 32px;
}

/* Date input enhanced */
input[type="date"].form-control[b-juwlvttkv0] {
    cursor: pointer;
}

input[type="date"].form-control[b-juwlvttkv0]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(45%) sepia(93%) saturate(1352%) hue-rotate(166deg) brightness(95%) contrast(101%);
}

/* Loading state for modal */
.modal-loading[b-juwlvttkv0] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.modal-loading[b-juwlvttkv0]::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin-b-juwlvttkv0 1s linear infinite;
}

@keyframes spin-b-juwlvttkv0 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Text muted utility */
.text-muted[b-juwlvttkv0] {
    color: #6c757d !important;
    font-size: 0.875rem;
}

/* Create new catalog item elements */
.create-new-option[b-juwlvttkv0] {
    margin-top: 10px;
    text-align: center;
}

.btn-link[b-juwlvttkv0] {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.btn-link:hover[b-juwlvttkv0] {
    color: #0056b3;
    text-decoration: underline;
}

.create-new-link-inline[b-juwlvttkv0] {
    margin-top: 5px;
}

.btn-link-sm[b-juwlvttkv0] {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 2px 5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: color 0.2s ease;
}

.btn-link-sm:hover[b-juwlvttkv0] {
    color: #0056b3;
    text-decoration: underline;
}

/* Required field indicator */
.required[b-juwlvttkv0] {
    color: #dc3545;
    font-weight: normal;
}

/* Editing row styles */
.editing-row[b-juwlvttkv0] {
    background-color: #e7f3ff;
}

.editing-row td[b-juwlvttkv0] {
    padding: 8px;
}

/* Section animations */
@keyframes sectionSlideIn-b-juwlvttkv0 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quote-section[b-juwlvttkv0] {
    animation: sectionSlideIn-b-juwlvttkv0 0.3s ease-out;
}

/* Action button tooltips */
.btn-edit[b-juwlvttkv0],
.btn-delete[b-juwlvttkv0],
.btn-add-item[b-juwlvttkv0] {
    position: relative;
}

.btn-edit[b-juwlvttkv0]::after,
.btn-delete[b-juwlvttkv0]::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #24292e;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.btn-edit:hover[b-juwlvttkv0]::after,
.btn-delete:hover[b-juwlvttkv0]::after {
    transform: translateX(-50%) scale(1);
}

/* Quote Message Section - Modern Design */
.quote-message-textarea[b-juwlvttkv0] {
    font-family: inherit;
    line-height: 1.8;
    min-height: 280px;
    resize: vertical;
    padding: 16px;
    font-size: 0.9375rem;
    border-radius: 12px;
}

.quote-message-textarea:focus[b-juwlvttkv0] {
    box-shadow: 0 0 0 4px rgba(0, 183, 221, 0.1);
}

/* Empty catalog state */
.empty-catalog-state[b-juwlvttkv0] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.empty-catalog-state i[b-juwlvttkv0] {
    font-size: 3rem;
    color: #dee2e6;
    margin-bottom: 16px;
}

.empty-catalog-state h5[b-juwlvttkv0] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.empty-catalog-state p[b-juwlvttkv0] {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Mobile-specific styles - Premium Design */
.mobile-items-container[b-juwlvttkv0] {
    padding: 12px 0;
}

.mobile-section-total[b-juwlvttkv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(0, 183, 221, 0.1) 0%, rgba(0, 183, 221, 0.05) 100%);
    border-radius: 12px;
    margin-top: 12px;
    border: 1px solid rgba(0, 183, 221, 0.2);
}

.mobile-section-total span[b-juwlvttkv0] {
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.mobile-section-total strong[b-juwlvttkv0] {
    font-size: 20px;
    font-weight: 700;
    color: #00B7DD;
    letter-spacing: -0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* Floating Action Button */
.mobile-fab[b-juwlvttkv0] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.fab-button[b-juwlvttkv0] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00B7DD 0%, #0099BB 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 183, 221, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.fab-button:active[b-juwlvttkv0] {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.3);
}

.fab-button i[b-juwlvttkv0] {
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .fab-button:hover i[b-juwlvttkv0] {
        transform: rotate(90deg);
    }
}

/* Responsive design - Enhanced breakpoints */

/* Small phones (320px – 480px) — 8pt grid, Apple HIG touch targets */
@media (max-width: 480px) {
    /* Full-bleed on phone — remove outer container rounding */
    .quote-creation[b-juwlvttkv0] {
        border-radius: 0;
        box-shadow: none;
    }

    /* Page-level header: more compact, larger touch target for expand */
    .quote-creation-header[b-juwlvttkv0] {
        padding: 16px 20px;
    }

    .quote-creation-header h3[b-juwlvttkv0] {
        font-size: 1.125rem;
    }

    .btn-expand[b-juwlvttkv0] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Content padding: 16px for breathing room on narrow screens */
    .quote-creation-content[b-juwlvttkv0] {
        padding: 16px;
    }

    /* More vertical rhythm between steps: 20px gap */
    .step-container[b-juwlvttkv0] {
        margin-bottom: 20px;
        border-radius: 16px;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .step-container .form-content[b-juwlvttkv0] {
        padding: 20px;
    }

    .step-header[b-juwlvttkv0] {
        padding: 16px 20px;
        gap: 12px;
    }

    /* Slightly smaller step badge — still readable, less dominant */
    .step-number[b-juwlvttkv0] {
        width: 36px;
        height: 36px;
        font-size: 0.9375rem;
    }

    .step-header h4[b-juwlvttkv0] {
        font-size: 1rem;
    }

    /* Labels — slightly smaller, Apple system weight */
    .form-group label[b-juwlvttkv0] {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #3a3a3c;
        margin-bottom: 6px;
    }

    .form-group label i[b-juwlvttkv0] {
        font-size: 0.875rem;
    }

    .form-row[b-juwlvttkv0] {
        flex-direction: column;
        gap: 0; /* gap handled by form-group margin */
    }

    .form-row > .form-group[b-juwlvttkv0],
    .form-group[b-juwlvttkv0] {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }

    /*
     * 16px font-size prevents iOS auto-zoom on focus.
     * 14px padding gives comfortable thumb-friendly tap area.
     * 12px border-radius for softer iOS feel.
     */
    .form-control[b-juwlvttkv0] {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 12px;
        border: 1.5px solid rgba(0, 0, 0, 0.12);
        background-color: #fafbfc;
    }

    .form-control:focus[b-juwlvttkv0] {
        border-color: var(--primary);
        background-color: white;
        box-shadow: 0 0 0 4px rgba(0, 183, 221, 0.1);
    }

    .form-control[b-juwlvttkv0]::placeholder {
        color: #8e8e93;
        font-size: 15px;
    }

    /* Textarea specific — more breathing room */
    textarea.form-control[b-juwlvttkv0] {
        min-height: 100px;
        line-height: 1.5;
    }

    /* Helper text under fields — more compact */
    .form-text[b-juwlvttkv0] {
        font-size: 0.75rem;
        margin-top: 6px;
        color: #8e8e93;
    }

    /* Section header within steps (e.g. "Contact Information") */
    .form-section-header[b-juwlvttkv0] {
        margin: 24px 0 16px 0;
        padding-bottom: 10px;
    }

    .form-section-header h5[b-juwlvttkv0] {
        font-size: 0.9375rem;
    }

    .form-section-header small[b-juwlvttkv0] {
        font-size: 0.75rem;
    }

    /* Add section */
    .add-section[b-juwlvttkv0] {
        padding: 16px;
        margin-top: 20px;
    }

    .add-section .form-row[b-juwlvttkv0] {
        align-items: stretch;
        gap: 16px;
    }

    .add-section .form-group[b-juwlvttkv0] {
        width: 100%;
        margin-bottom: 0;
    }

    .form-group.actions[b-juwlvttkv0] {
        align-items: stretch;
        margin-top: 8px;
    }

    /* Full-width add button — prominent and easy to tap */
    .add-section .btn-primary[b-juwlvttkv0] {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 1rem;
        min-height: 48px;
    }

    /* Section header stacks on small phones */
    .section-header[b-juwlvttkv0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
    }

    .section-header h5[b-juwlvttkv0] {
        font-size: 1rem;
    }

    /* Section action row: full-width, equal spacing */
    .section-actions[b-juwlvttkv0] {
        display: flex;
        width: 100%;
        gap: 8px;
        align-items: center;
    }

    /*
     * Edit / delete buttons: 44px × 44px minimum (Apple HIG).
     * flex: 0 0 44px keeps them square and prevents unwanted stretch.
     */
    .btn-edit[b-juwlvttkv0],
    .btn-delete[b-juwlvttkv0] {
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Add-item gets remaining space */
    .btn-add-item[b-juwlvttkv0] {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    /* Summary card */
    .quote-summary[b-juwlvttkv0] {
        padding: 20px;
        border-radius: 12px;
    }

    .summary-row[b-juwlvttkv0] {
        font-size: 14px;
        padding: 10px 0;
    }

    /* Total row: generous breathing room */
    .summary-row.total[b-juwlvttkv0] {
        padding: 20px 12px;
        margin-top: 16px;
    }

    /* Hero total — 28px is clean, add letter-spacing for polish */
    .summary-row.total .summary-value[b-juwlvttkv0] {
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    /* Section subtotal pill */
    .mobile-section-total[b-juwlvttkv0] {
        padding: 16px 20px;
        margin-top: 16px;
        border-radius: 12px;
    }

    /* Form actions footer — primary above secondary */
    .form-actions[b-juwlvttkv0] {
        padding: 20px 16px;
        gap: 12px;
        flex-direction: column-reverse;
    }

    .form-actions button[b-juwlvttkv0] {
        width: 100%;
        padding: 16px;
        font-size: 1rem;
        font-weight: 600;
        min-height: 52px;
        border-radius: 14px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    }

    .btn-primary[b-juwlvttkv0] {
        order: 1;
    }

    .btn-secondary[b-juwlvttkv0] {
        order: 2;
    }

    /* Hide desktop table completely */
    .items-table[b-juwlvttkv0],
    .inline-item-form[b-juwlvttkv0],
    .inline-entry-table[b-juwlvttkv0] {
        display: none !important;
    }

    /*
     * Modal becomes a bottom sheet on small phones.
     * Border-radius: 24px top only — matches iOS sheet pattern.
     */
    .modal-container[b-juwlvttkv0] {
        width: 100%;
        margin: 0;
        border-radius: 24px 24px 0 0;
        max-height: 92vh;
        /* Slide up from bottom like a native sheet */
        animation: mobileSheetIn-b-juwlvttkv0 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes mobileSheetIn-b-juwlvttkv0 {
        from {
            transform: translateY(100%);
            opacity: 0.6;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header[b-juwlvttkv0] {
        padding: 20px 20px 16px;
    }

    .modal-body[b-juwlvttkv0] {
        padding: 20px;
        max-height: calc(92vh - 140px);
    }

    .modal-footer[b-juwlvttkv0] {
        padding: 16px 20px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* Medium phones (481px – 640px) — wider, but still touch-first */
@media (min-width: 481px) and (max-width: 640px) {
    .quote-creation-content[b-juwlvttkv0] {
        padding: 16px;
    }

    .step-container[b-juwlvttkv0] {
        margin-bottom: 20px;
    }

    .step-container .form-content[b-juwlvttkv0] {
        padding: 20px;
    }

    .quote-summary[b-juwlvttkv0] {
        padding: 20px 24px;
    }

    /* Slightly tighter total on medium phones — still elegant */
    .summary-row.total .summary-value[b-juwlvttkv0] {
        font-size: 30px;
        letter-spacing: -0.5px;
    }

    .mobile-section-total[b-juwlvttkv0] {
        padding: 16px 20px;
    }

    .form-row[b-juwlvttkv0] {
        flex-direction: column;
    }

    .form-row > .form-group[b-juwlvttkv0],
    .form-group[b-juwlvttkv0] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* 16px minimum on all inputs — prevents iOS zoom */
    .form-control[b-juwlvttkv0] {
        font-size: 16px;
        border-radius: 12px;
    }

    /* Header stays in a row on medium phones — enough horizontal room */
    .section-header[b-juwlvttkv0] {
        flex-direction: row;
        padding: 16px 20px;
    }

    /* Keep actions unwrapped: edit | delete | add item */
    .section-actions[b-juwlvttkv0] {
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* 44px minimum touch targets */
    .btn-edit[b-juwlvttkv0],
    .btn-delete[b-juwlvttkv0] {
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-add-item[b-juwlvttkv0] {
        min-height: 44px;
    }

    .form-actions[b-juwlvttkv0] {
        padding: 20px;
        gap: 12px;
        flex-direction: row;
    }

    .form-actions button[b-juwlvttkv0] {
        flex: 1;
        min-height: 48px;
    }

    .add-section[b-juwlvttkv0] {
        padding: 20px;
    }

    .add-section .form-row[b-juwlvttkv0] {
        align-items: stretch;
    }

    .add-section .form-group[b-juwlvttkv0] {
        width: 100%;
    }

    .form-group.actions[b-juwlvttkv0] {
        align-items: stretch;
        margin-top: 8px;
    }

    .add-section .btn-primary[b-juwlvttkv0] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Hide desktop table */
    .items-table[b-juwlvttkv0],
    .inline-item-form[b-juwlvttkv0],
    .inline-entry-table[b-juwlvttkv0] {
        display: none !important;
    }
}

/* Large phones / Small tablets (641px – 768px) — approaching desktop rhythm */
@media (min-width: 641px) and (max-width: 768px) {
    .quote-creation-content[b-juwlvttkv0] {
        padding: 20px;
    }

    .step-container[b-juwlvttkv0] {
        margin-bottom: 24px;
    }

    .form-row[b-juwlvttkv0] {
        flex-direction: row;
        gap: 16px;
    }

    .form-row.mobile-stack[b-juwlvttkv0] {
        flex-direction: column;
    }

    /* 16px font — prevents iOS zoom even on phablet viewports */
    .form-control[b-juwlvttkv0] {
        font-size: 16px;
    }

    /* Add section stacks vertically on this breakpoint */
    .add-section .form-row[b-juwlvttkv0] {
        flex-direction: column;
        align-items: stretch;
    }

    .add-section .form-group[b-juwlvttkv0] {
        width: 100%;
    }

    .form-group.actions[b-juwlvttkv0] {
        align-items: stretch;
        margin-top: 8px;
    }

    .add-section .btn-primary[b-juwlvttkv0] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Touch targets maintained at tablet size */
    .btn-edit[b-juwlvttkv0],
    .btn-delete[b-juwlvttkv0] {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-add-item[b-juwlvttkv0] {
        min-height: 44px;
    }

    .mobile-section-total[b-juwlvttkv0] {
        padding: 16px 20px;
    }

    /* Hide desktop table on tablets too */
    .items-table[b-juwlvttkv0],
    .inline-item-form[b-juwlvttkv0],
    .inline-entry-table[b-juwlvttkv0] {
        display: none !important;
    }

    /* FAB sits higher on tablet to avoid OS chrome */
    .mobile-fab[b-juwlvttkv0] {
        bottom: 32px;
        right: 32px;
    }
}

/* Standard tablet/desktop breakpoint */
@media (min-width: 769px) {
    /* Hide all mobile-specific elements */
    .mobile-items-container[b-juwlvttkv0],
    .mobile-section-total[b-juwlvttkv0],
    .mobile-fab[b-juwlvttkv0],
    .mobile-quote-item-card[b-juwlvttkv0],
    .mobile-item-form-overlay[b-juwlvttkv0] {
        display: none !important;
    }

    /* Ensure desktop elements are visible */
    .items-table[b-juwlvttkv0] {
        display: table !important;
    }
}

/* Very small screens (below 380px) — compact but still comfortable */
@media (max-width: 380px) {
    .quote-creation-header h3[b-juwlvttkv0] {
        font-size: 1.125rem;
    }

    .step-container[b-juwlvttkv0] {
        border-radius: 8px;
    }

    .step-header[b-juwlvttkv0] {
        gap: 12px;
        padding: 14px 16px;
    }

    /* 16px is still required for iOS zoom prevention */
    .form-control[b-juwlvttkv0] {
        padding: 12px 14px;
        font-size: 16px;
    }

    /* Edit/delete still meet 44px minimum */
    .btn-edit[b-juwlvttkv0],
    .btn-delete[b-juwlvttkv0] {
        min-width: 44px;
        min-height: 44px;
    }

    .mobile-fab[b-juwlvttkv0] {
        bottom: 16px;
        right: 16px;
    }

    /*
     * 52px — tighter than standard 56px but still above 44px minimum.
     * 48px would feel uncomfortably small for a primary FAB action.
     */
    .fab-button[b-juwlvttkv0] {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .quote-summary[b-juwlvttkv0] {
        padding: 16px;
    }

    .form-actions[b-juwlvttkv0] {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* Landscape orientation — condensed vertical rhythm */
@media (max-height: 600px) and (orientation: landscape) {
    .step-container[b-juwlvttkv0] {
        margin-bottom: 16px;
    }

    .step-header[b-juwlvttkv0] {
        padding: 12px 16px;
    }

    .step-container .form-content[b-juwlvttkv0] {
        padding: 16px;
    }

    .mobile-fab[b-juwlvttkv0] {
        bottom: 12px;
        right: 12px;
    }

    /*
     * 44px: Apple's HIG minimum. In landscape with limited height,
     * we use the floor value rather than the preferred 56px.
     */
    .fab-button[b-juwlvttkv0] {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

/* Safe-area insets — notch and home indicator awareness */
@supports (padding: env(safe-area-inset-bottom)) {
    /* FAB sits above the home indicator on iPhone X+ */
    .mobile-fab[b-juwlvttkv0] {
        bottom: calc(24px + env(safe-area-inset-bottom));
        right: calc(24px + env(safe-area-inset-right));
    }

    /* Form actions footer clears the home bar */
    .form-actions[b-juwlvttkv0] {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    /* Modal footer on bottom sheet clears home bar */
    .modal-footer[b-juwlvttkv0] {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-quote-item-card[b-juwlvttkv0] {
        border: 2px solid currentColor;
    }

    .fab-button[b-juwlvttkv0] {
        border: 2px solid currentColor;
    }
}

/* Reduced motion — respect user accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    *[b-juwlvttkv0],
    *[b-juwlvttkv0]::before,
    *[b-juwlvttkv0]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fab-button[b-juwlvttkv0],
    .mobile-quote-item-card[b-juwlvttkv0],
    .btn-icon-edit[b-juwlvttkv0],
    .btn-icon-delete[b-juwlvttkv0] {
        transition: none;
    }
}

/* Focus visible improvements for keyboard navigation */
*:focus-visible[b-juwlvttkv0] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.2);
    border-radius: inherit;
}

button:focus-visible[b-juwlvttkv0],
input:focus-visible[b-juwlvttkv0],
select:focus-visible[b-juwlvttkv0],
textarea:focus-visible[b-juwlvttkv0] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 183, 221, 0.2);
}
/* /Pages/Projects/Components/QuoteList/QuoteList.razor.rz.scp.css */
.quote-list-container[b-je2u5j6a63] {
    width: 100%;
}

.loading-indicator[b-je2u5j6a63] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #6c757d;
}

.spinner[b-je2u5j6a63] {
    width: 2rem;
    height: 2rem;
    border: 0.25rem solid #e9ecef;
    border-top-color: #00B7DD;
    border-radius: 50%;
    animation: spinner-border-b-je2u5j6a63 0.75s linear infinite;
    margin-bottom: 0.5rem;
}

@keyframes spinner-border-b-je2u5j6a63 {
    to { transform: rotate(360deg); }
}

.no-quotes[b-je2u5j6a63] {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
}

.quotes-grid[b-je2u5j6a63] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.quote-card[b-je2u5j6a63] {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.quote-card:hover[b-je2u5j6a63] {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.quote-card.selected[b-je2u5j6a63] {
    border-color: #00B7DD;
    box-shadow: 0 0 0 0.2rem rgba(0, 183, 221, 0.25);
}

.quote-card.read-only[b-je2u5j6a63] {
    background-color: #f8f9fa;
    border-left: 3px solid #6c757d;
}

.read-only-icon[b-je2u5j6a63] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.quote-card-header[b-je2u5j6a63] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.quote-info h4[b-je2u5j6a63] {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.quote-meta[b-je2u5j6a63] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.quote-number[b-je2u5j6a63] {
    padding: 0.125rem 0.375rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.status-badge[b-je2u5j6a63] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-draft[b-je2u5j6a63] {
    background-color: #e9ecef;
    color: #495057;
}

.status-sent[b-je2u5j6a63] {
    background-color: #cff4fc;
    color: #055160;
}

.status-approved[b-je2u5j6a63] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.status-rejected[b-je2u5j6a63] {
    background-color: #f8d7da;
    color: #842029;
}

.quote-card-body[b-je2u5j6a63] {
    flex: 1;
    padding: 1rem;
}

.quote-details[b-je2u5j6a63] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.quote-detail-item[b-je2u5j6a63] {
    display: flex;
    flex-direction: column;
}

.detail-label[b-je2u5j6a63] {
    font-size: 0.75rem;
    color: #6c757d;
}

.detail-value[b-je2u5j6a63] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
}

.quote-card-footer[b-je2u5j6a63] {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.btn-icon[b-je2u5j6a63] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: #6c757d;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-icon:hover[b-je2u5j6a63] {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-edit:hover[b-je2u5j6a63] {
    color: #00B7DD;
}

.btn-delete:hover[b-je2u5j6a63] {
    color: #dc3545;
}

.btn-send:hover[b-je2u5j6a63] {
    color: #198754;
}

.btn-approve:hover[b-je2u5j6a63] {
    color: #198754;
}

.btn-reject:hover[b-je2u5j6a63] {
    color: #dc3545;
}

.btn-revert:hover[b-je2u5j6a63] {
    color: #ffc107;
}

.btn-pdf:hover[b-je2u5j6a63] {
    color: #fd7e14;
}

.btn-werkfiche:hover[b-je2u5j6a63] {
    color: #6f42c1;
}

.btn-view:hover[b-je2u5j6a63] {
    color: #00B7DD; /* PRIMARY CYAN */
}

.btn-download:hover[b-je2u5j6a63] {
    color: #00B7DD; /* PRIMARY CYAN */
}

/* Imported quote card styles - Using PRIMARY CYAN */
.quote-card.imported-quote[b-je2u5j6a63] {
    border-left: 4px solid #00B7DD; /* PRIMARY CYAN */
    background: linear-gradient(to right, rgba(0, 183, 221, 0.02) 0%, white 100%);
}

.quote-card.imported-quote:hover[b-je2u5j6a63] {
    box-shadow: 0 0.5rem 1rem rgba(0, 183, 221, 0.15);
}

/* Responsive styling */
@media (max-width: 576px) {
    .quotes-grid[b-je2u5j6a63] {
        grid-template-columns: 1fr;
    }

    .quote-details[b-je2u5j6a63] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Projects/Components/QuoteManager/QuoteManager.razor.rz.scp.css */
/* Quote Manager Header */
.quote-manager-header[b-gjk8mh67ou] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Import Quote Button - Premium Design */
.btn-import-quote[b-gjk8mh67ou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    background: #00B7DD;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.75;
    min-height: 36px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.btn-import-quote:hover[b-gjk8mh67ou] {
    background: #0099BB;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
}

.btn-import-quote:active[b-gjk8mh67ou] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

.btn-import-quote i[b-gjk8mh67ou] {
    font-size: 18px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .btn-import-quote[b-gjk8mh67ou] {
        padding: 12px 20px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .quote-manager-header[b-gjk8mh67ou] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-import-quote[b-gjk8mh67ou] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetails.razor.rz.scp.css */
h5.active[b-1pw8509hty] {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-decoration-color: var(--primary);
    text-underline-offset: 6px;
}

h5.inactive[b-1pw8509hty] {
    color: var(--primary);
}

h5:hover[b-1pw8509hty] {
    cursor: pointer;
}

.project-form-container[b-1pw8509hty] {
    display: flex;
    gap: 172px;
}

.container-left[b-1pw8509hty] {
    width: 628px;
}

.container-right[b-1pw8509hty] {
    width: 616px;
}

.container-right-header[b-1pw8509hty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    margin-bottom: 16px;
}

.expenses-section[b-1pw8509hty] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.container-left[b-1pw8509hty] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.container-right[b-1pw8509hty] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

[b-1pw8509hty] section {
  padding: 0 0 0 0 !important;
}

@media only screen and (max-width: 768px) {
    .container-left[b-1pw8509hty] {
        width: 100%;
    }

    .container-right[b-1pw8509hty] {
        width: 100%;
    }

    .container-right[b-1pw8509hty] {
        min-height: 640px;
        margin-bottom: 64px;
    }
}

@media only screen and (max-width: 1500px) {
    .project-form-container[b-1pw8509hty] {
        flex-direction: column;
        gap: 32px;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsCalculations.razor.rz.scp.css */
/* Calculations tab container */
.calculations-tab[b-8cl0fshnls] {
    position: relative;
    min-height: 200px;
}

/* Loading indicator */
.loading-indicator[b-8cl0fshnls] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.loading-indicator span[b-8cl0fshnls] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #E5E7EB;
    border-top-color: #00B7DD;
    border-radius: 50%;
    animation: spin-b-8cl0fshnls 0.7s linear infinite;
}

@keyframes spin-b-8cl0fshnls {
    to { transform: rotate(360deg); }
}

/* Back header */
.calc-back-header[b-8cl0fshnls] {
    margin-bottom: 1rem;
}

.back-btn[b-8cl0fshnls] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #E2E8F0;
    background: white;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-btn:hover[b-8cl0fshnls] {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.back-btn i[b-8cl0fshnls] {
    font-size: 14px;
}

/* List header with action buttons */
.calc-list-header[b-8cl0fshnls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.item-count[b-8cl0fshnls] {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.calc-actions[b-8cl0fshnls] {
    display: flex;
    gap: 8px;
}

.add-calc-btn[b-8cl0fshnls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #00B7DD;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-calc-btn:hover[b-8cl0fshnls] {
    background: #0099BB;
}

.add-calc-btn.post[b-8cl0fshnls] {
    background: #EA580C;
}

.add-calc-btn.post:hover[b-8cl0fshnls] {
    background: #C2410C;
}

.add-calc-btn i[b-8cl0fshnls] {
    font-size: 15px;
}

/* Calculation cards list */
.calc-list[b-8cl0fshnls] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calc-card[b-8cl0fshnls] {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calc-card:hover[b-8cl0fshnls] {
    border-color: rgba(0, 183, 221, 0.3);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.08);
}

.calc-card-header[b-8cl0fshnls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calc-card-type[b-8cl0fshnls] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-badge[b-8cl0fshnls] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.type-badge.pre[b-8cl0fshnls] {
    background: #EFF6FF;
    color: #2563EB;
}

.type-badge.post[b-8cl0fshnls] {
    background: #FFF7ED;
    color: #EA580C;
}

.status-badge[b-8cl0fshnls] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.status-badge.draft[b-8cl0fshnls] {
    background: #FEF3C7;
    color: #D97706;
}

.status-badge.finalized[b-8cl0fshnls] {
    background: #D1FAE5;
    color: #059669;
}

.status-badge.archived[b-8cl0fshnls] {
    background: #F3F4F6;
    color: #6B7280;
}

.calc-card-total[b-8cl0fshnls] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.calc-card-body[b-8cl0fshnls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-card-title[b-8cl0fshnls] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.calc-card-date[b-8cl0fshnls] {
    font-size: 12px;
    color: #9CA3AF;
}

/* Mobile */
@media (max-width: 768px) {
    .calc-list-header[b-8cl0fshnls] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .calc-actions[b-8cl0fshnls] {
        flex-direction: column;
    }

    .add-calc-btn[b-8cl0fshnls] {
        justify-content: center;
        padding: 12px 16px;
    }

    .calc-card-header[b-8cl0fshnls] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .calc-card-total[b-8cl0fshnls] {
        font-size: 16px;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsComments.razor.rz.scp.css */
.project-comments-container[b-39m70qdu8n] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsExpenses.razor.rz.scp.css */
/* Clean, minimal design system */

/* Container with subtle elevation */
.expense-type-selector-wrapper[b-nyj1usuyl2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Tab selector - clean pill design */
.expense-type-selector[b-nyj1usuyl2] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #F8F9FA;
    border-radius: 12px;
    position: relative;
}

/* Animated active indicator */
.expense-type-selector[b-nyj1usuyl2]::after {
    content: '';
    position: absolute;
    height: calc(100% - 8px);
    width: var(--indicator-width, calc(33.33% - 8px));
    left: var(--indicator-left, 4px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    top: 4px;
    z-index: 0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle buttons - minimal style */
.expense-toggle[b-nyj1usuyl2] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    background: transparent;
    color: #6B7280;
    border: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Hover state */
.expense-toggle:hover:not(.active)[b-nyj1usuyl2] {
    color: #374151;
}

/* Active state */
.expense-toggle.active[b-nyj1usuyl2] {
    color: #111827;
    font-weight: 600;
}

/* Total amount display */
.x-small-bold[b-nyj1usuyl2] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-weight: 500;
    color: #6B7280;
    font-size: 13px;
}

.label[b-nyj1usuyl2] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.amount[b-nyj1usuyl2] {
    color: #DC2626;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
}


/* Expense list container */
.expense-list-container[b-nyj1usuyl2] {
    position: relative;
    min-height: 200px;
}

/* Sticky header with add button */
.expense-list-header[b-nyj1usuyl2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.item-count[b-nyj1usuyl2] {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.add-expense-btn[b-nyj1usuyl2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #00B7DD;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.add-expense-btn:hover[b-nyj1usuyl2] {
    background: #0099BB;
}

.add-expense-btn i[b-nyj1usuyl2] {
    font-size: 16px;
}

/* Add form container */
.add-expense-form[b-nyj1usuyl2] {
    margin-bottom: 16px;
}

/* Expense list */
.expense-list[b-nyj1usuyl2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/* Empty state */
.expense-list:empty[b-nyj1usuyl2]::after {
    content: 'No expenses yet';
    display: block;
    padding: 24px 0;
    color: #D1D5DB;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    pointer-events: none;
}

/* Loading skeleton */
.expense-skeleton[b-nyj1usuyl2] {
    height: 72px;
    background: #F3F4F6;
    border-radius: 12px;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .expense-type-selector-wrapper[b-nyj1usuyl2] {
        margin: 0 -16px 24px;
        border-radius: 0;
        padding: 20px 16px;
        gap: 16px;
        flex-direction: column;
        align-items: stretch;
        border-left: none;
        border-right: none;
    }
    
    .expense-type-selector[b-nyj1usuyl2] {
        width: 100%;
        gap: 4px;
        padding: 4px;
    }
    
    .expense-toggle[b-nyj1usuyl2] {
        flex: 1;
        min-width: unset;
        height: 48px;
        font-size: 15px;
    }
    
    .x-small-bold[b-nyj1usuyl2] {
        width: 100%;
        justify-content: space-between;
        padding: 12px 16px;
        background: #F9FAFB;
        border-radius: 8px;
        margin-top: 12px;
    }
    
    .amount[b-nyj1usuyl2] {
        font-size: 24px;
    }
    
    .expense-list[b-nyj1usuyl2] {
        gap: 12px;
    }
    
    .expense-list-header[b-nyj1usuyl2] {
        top: -16px; /* Compensate for container padding */
        padding: 14px 16px;
    }
    
    .add-expense-form[b-nyj1usuyl2] {
        margin: 0 16px 16px;
    }
    
    .add-expense-btn[b-nyj1usuyl2] {
        padding: 10px 16px;
        height: 44px;
    }
    
    /* Touch feedback */
    .expense-toggle:active[b-nyj1usuyl2] {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-nyj1usuyl2], *[b-nyj1usuyl2]::before, *[b-nyj1usuyl2]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .expense-type-selector[b-nyj1usuyl2]::after {
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .expense-type-selector-wrapper[b-nyj1usuyl2] {
        border: 1px solid #000;
    }
    
    .expense-toggle.active[b-nyj1usuyl2] {
        font-weight: 700;
        text-decoration: underline;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsExtra.razor.rz.scp.css */
/* /Pages/Projects/ProjectDetails/ProjectDetailsFiles.razor.rz.scp.css */
/* /Pages/Projects/ProjectDetails/ProjectDetailsForm.razor.rz.scp.css */
.project-form[b-klf4e1t2pc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project-form .paragraph[b-klf4e1t2pc] {
    margin-bottom: 8px;
}

.project-form-container[b-klf4e1t2pc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.form-buttons[b-klf4e1t2pc] {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.wrapper-left[b-klf4e1t2pc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wrapper-right[b-klf4e1t2pc] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}

.form-contact[b-klf4e1t2pc] {
    position: relative;
}

.form-contact .paragraph[b-klf4e1t2pc] {
    margin-bottom: 8px;
}

.form-row[b-klf4e1t2pc] {
    display: flex;
    gap: 24px;
}

.form-row-item[b-klf4e1t2pc] {
    width: 100%;
}

[b-klf4e1t2pc] h4 {
    margin: 0 !important
}

[b-klf4e1t2pc] .card-name {
    padding: 0 !important;
}

@media only screen and (max-width: 768px) {
    .project-form-container[b-klf4e1t2pc] {
        grid-template-columns: auto;
        gap: 12px;
        padding: 8px 16px 8px 16px;
        background: var(--secondary);
    }

    .form[b-klf4e1t2pc] {
        flex-direction: column;
    }

    .start-end[b-klf4e1t2pc] {
        flex-direction: column;
    }

    .category-status[b-klf4e1t2pc] {
        flex-direction: column;
    }

    .manager-team[b-klf4e1t2pc] {
        flex-direction: column;
    }

    .wrapper-right[b-klf4e1t2pc] {
        align-items: center;
        gap: 24px;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsHistory.razor.rz.scp.css */
.project-history-container[b-jkuqozwtks] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history-item[b-jkuqozwtks] {
    background: #FFFFFF;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.history-item:hover[b-jkuqozwtks] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.history-icon[b-jkuqozwtks] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.history-content[b-jkuqozwtks] {
    flex: 1;
    min-width: 0;
}

.history-item-header[b-jkuqozwtks] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 16px;
}

.history-item-type[b-jkuqozwtks] {
    font-size: 14px;
    font-weight: 600;
    color: #000000E6;
}

.history-item-date[b-jkuqozwtks] {
    font-size: 12px;
    color: #606060;
    white-space: nowrap;
}

.history-item-message[b-jkuqozwtks] {
    font-size: 14px;
    color: #404040;
    line-height: 1.5;
    word-wrap: break-word;
}

/* Color coding for different types */
.history-added .history-icon[b-jkuqozwtks] {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.history-updated .history-icon[b-jkuqozwtks] {
    background-color: #E3F2FD;
    color: #1976D2;
}

.history-removed .history-icon[b-jkuqozwtks] {
    background-color: #FFEBEE;
    color: #D32F2F;
}

/* Empty state */
.empty-history[b-jkuqozwtks] {
    text-align: center;
    padding: 60px 20px;
    background-color: #FAFAFA;
    border-radius: 12px;
}

.empty-history i[b-jkuqozwtks] {
    font-size: 48px;
    color: #E0E0E0;
    margin-bottom: 16px;
    display: block;
}

.empty-history p[b-jkuqozwtks] {
    margin: 0;
    color: #606060;
    font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .history-item[b-jkuqozwtks] {
        padding: 12px 16px;
    }
    
    .history-icon[b-jkuqozwtks] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .history-item-header[b-jkuqozwtks] {
        flex-direction: column;
        gap: 4px;
    }
    
    .history-item-date[b-jkuqozwtks] {
        font-size: 11px;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsOverview.razor.rz.scp.css */
.project-overview-container[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
}

.details-container-wrapper[b-enryt35eig] {
    display: flex;
    justify-content: space-between;
}

.details-container-left[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.details-container-right[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.category-wrapper[b-enryt35eig] {
    text-align: end;
    margin-top: 8px;
}

.data-wrapper[b-enryt35eig] {
    display: flex;
    text-align: right;
    justify-content: flex-end;
}

.data-wrapper-left[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-wrapper-right[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.actions-wrapper[b-enryt35eig] {
    display: flex;
    justify-content: end;
    gap: 8px;
}

.communication-button[b-enryt35eig] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: var(--white);
    border-radius: 10px;
}

.communication-button-icon[b-enryt35eig] {
    color: var(--secondary-text);
}

.date-wrapper[b-enryt35eig] {
    display: none;
}

.roles-wrapper[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-wrapper[b-enryt35eig] {
    display: flex;
    justify-content: end;
    margin-top: 12px;
}

.address-wrapper[b-enryt35eig] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.map-container[b-enryt35eig] {
    min-width: 0;
    min-height: 130px;
    background-color: var(--secondary);
    border-radius: 10px;
}

[b-enryt35eig] h4 {
    margin: 0 !important;
}

[b-enryt35eig] .card-name {
    padding: 0 !important;
}

[b-enryt35eig] .role-name {
    max-width: unset !important;
}

@media only screen and (min-width: 390px) {
    .map-container[b-enryt35eig] {
        min-width: 0;
        min-height: 134px;
    }

    .data-wrapper[b-enryt35eig] {
        gap: 4px;
    }
}

@media only screen and (min-width: 480px) {
    .map-container[b-enryt35eig] {
        min-width: 280px;
        min-height: 134px;
    }
}

@media only screen and (min-width: 768px) {
    .project-overview-container[b-enryt35eig] {
        padding: unset;
    }

    .map-container[b-enryt35eig] {
        min-width: 360px;
        min-height: 168px;
    }

    [b-enryt35eig] .role-name {
        max-width: 120px !important;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsQuotes.razor.rz.scp.css */
.project-details-quotes[b-foyxmf8xju] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quotes-header[b-foyxmf8xju] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quote-actions[b-foyxmf8xju] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.section-title[b-foyxmf8xju] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

/* Premium Cyan Button - Create Quote */
.add-quote-button[b-foyxmf8xju] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.75;
    min-height: 36px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #00B7DD;
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

.add-quote-button:hover[b-foyxmf8xju] {
    background: #0099BB;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
}

.add-quote-button:active[b-foyxmf8xju] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

.add-quote-button i[b-foyxmf8xju] {
    font-size: 18px;
}

/* Premium Cyan Button - Import Quote (Outlined) */
.import-quote-button[b-foyxmf8xju] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.75;
    min-height: 36px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    color: #00B7DD;
    border: 2px solid #00B7DD;
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.15);
}

.import-quote-button:hover[b-foyxmf8xju] {
    background: #00B7DD;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 183, 221, 0.35);
}

.import-quote-button:active[b-foyxmf8xju] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 183, 221, 0.25);
}

.import-quote-button i[b-foyxmf8xju] {
    font-size: 18px;
}

/* Gray Button - Back */
.back-button[b-foyxmf8xju] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.75;
    min-height: 36px;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.back-button:hover[b-foyxmf8xju] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .project-details-quotes[b-foyxmf8xju] {
        padding: 1rem;
    }

    .quotes-header[b-foyxmf8xju] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .section-title[b-foyxmf8xju] {
        text-align: center;
    }

    .quote-actions[b-foyxmf8xju] {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .add-quote-button[b-foyxmf8xju],
    .import-quote-button[b-foyxmf8xju] {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .project-details-quotes[b-foyxmf8xju] {
        padding: 0.75rem;
    }

    .quotes-header[b-foyxmf8xju] {
        gap: 0.75rem;
    }

    .section-title[b-foyxmf8xju] {
        font-size: 1.125rem;
    }

    .quote-actions[b-foyxmf8xju] {
        gap: 0.5rem;
    }
}
/* /Pages/Projects/ProjectDetails/ProjectDetailsUserAccess.razor.rz.scp.css */
.project-access-container[b-fbcasqrf8v] {
    padding: 0;
}

/* Add User Section */
.add-user-section[b-fbcasqrf8v] {
    margin-bottom: 20px;
}

.btn-add-user[b-fbcasqrf8v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #00B7DD;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-user:hover[b-fbcasqrf8v] {
    background-color: #0099BB;
    transform: translateY(-1px);
}

.btn-add-user i[b-fbcasqrf8v] {
    font-size: 16px;
}

/* Add User Form Card */
.add-user-form-card[b-fbcasqrf8v] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.form-title[b-fbcasqrf8v] {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #000000E6;
}

.form-row[b-fbcasqrf8v] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-fbcasqrf8v] {
    display: flex;
    flex-direction: column;
}

.dropdown-wrapper[b-fbcasqrf8v] {
    width: 100%;
}

/* Override dropdown styles to match our design */
.dropdown-wrapper[b-fbcasqrf8v]  .dropdown-container {
    width: 100%;
}

.dropdown-wrapper[b-fbcasqrf8v]  .form-dropdown {
    padding: 10px 14px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    background-color: #FAFAFA;
    transition: all 0.2s ease;
}

.dropdown-wrapper[b-fbcasqrf8v]  .form-dropdown:focus {
    border-color: #00B7DD;
    background-color: white;
}

.dropdown-wrapper[b-fbcasqrf8v]  .option-dropdown {
    background-color: white;
    border: 1px solid #E0E0E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 8px;
    margin-top: 4px;
}

.dropdown-wrapper[b-fbcasqrf8v]  .dropdown-option {
    background: #FAFAFA;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: normal;
    font-size: 14px;
    color: #000000E6;
    transition: all 0.2s ease;
}

.dropdown-wrapper[b-fbcasqrf8v]  .dropdown-option:hover {
    background-color: #F0F0F0;
}

.dropdown-wrapper[b-fbcasqrf8v]  .dropdown-option.selected {
    background-color: #00B7DD;
    color: white;
}

.form-actions[b-fbcasqrf8v] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-primary[b-fbcasqrf8v], .btn-secondary[b-fbcasqrf8v] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-fbcasqrf8v] {
    background-color: #00B7DD;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-fbcasqrf8v] {
    background-color: #0099BB;
}

.btn-primary:disabled[b-fbcasqrf8v] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-fbcasqrf8v] {
    background-color: #F0F0F0;
    color: #606060;
}

.btn-secondary:hover[b-fbcasqrf8v] {
    background-color: #E0E0E0;
}

.derived-access-info[b-fbcasqrf8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: #E8F5E9;
    border-radius: 8px;
    color: #2E7D32;
    font-size: 14px;
    margin-top: 12px;
}

.derived-access-info i[b-fbcasqrf8v] {
    font-size: 16px;
}

.error-message[b-fbcasqrf8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: #FEE;
    border-radius: 8px;
    color: #D00;
    font-size: 14px;
    margin-top: 12px;
}

/* Access List */
.access-list-container[b-fbcasqrf8v] {
    margin-top: 24px;
}

.access-grid[b-fbcasqrf8v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.access-card[b-fbcasqrf8v] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.3s ease;
    transform-origin: center;
    overflow: hidden;
}

.access-card:hover[b-fbcasqrf8v] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.access-card.removing[b-fbcasqrf8v] {
    animation: fadeOutScale-b-fbcasqrf8v 0.5s ease-out forwards;
}

@keyframes fadeOutScale-b-fbcasqrf8v {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

.card-actions[b-fbcasqrf8v] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.card-content[b-fbcasqrf8v] {
    padding: 20px;
    padding-right: 60px; /* Space for the revoke button */
}

.user-info-section[b-fbcasqrf8v] {
    display: flex;
    align-items: start;
    gap: 16px;
    margin-bottom: 16px;
}

.user-avatar[b-fbcasqrf8v] {
    width: 48px;
    height: 48px;
    background-color: #F0F0F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #606060;
    flex-shrink: 0;
}

.user-details[b-fbcasqrf8v] {
    flex: 1;
}

.user-name[b-fbcasqrf8v] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #000000E6;
    word-break: break-word;
}

.user-email[b-fbcasqrf8v] {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #606060;
}

.user-meta[b-fbcasqrf8v] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge[b-fbcasqrf8v] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.badge-role[b-fbcasqrf8v] {
    background-color: #F0F0F0;
    color: #606060;
}

.badge-access[b-fbcasqrf8v] {
    color: white;
}

.badge-access.owner[b-fbcasqrf8v] {
    background-color: #DC3545;
}

.badge-access.manager[b-fbcasqrf8v] {
    background-color: #FFC107;
    color: #000;
}

.badge-access.contributor[b-fbcasqrf8v] {
    background-color: #17A2B8;
}

.badge-access.readonly[b-fbcasqrf8v] {
    background-color: #6C757D;
}

.access-info[b-fbcasqrf8v] {
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
}

.access-info p[b-fbcasqrf8v] {
    margin: 0 0 4px 0;
    font-size: 13px;
    display: flex;
    gap: 8px;
}

.access-info .label[b-fbcasqrf8v] {
    color: #606060;
    min-width: 80px;
}

.access-info .value[b-fbcasqrf8v] {
    color: #000000E6;
}

.btn-revoke-icon[b-fbcasqrf8v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: white;
    color: #DC3545;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-revoke-icon:hover:not(:disabled)[b-fbcasqrf8v] {
    background-color: #DC3545;
    color: white;
    border-color: #DC3545;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.btn-revoke-icon:disabled[b-fbcasqrf8v] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-revoke-icon i[b-fbcasqrf8v] {
    font-size: 16px;
    line-height: 1;
}

/* Loading State */
.loading-state[b-fbcasqrf8v] {
    text-align: center;
    padding: 60px 20px;
}

.spinner[b-fbcasqrf8v] {
    width: 40px;
    height: 40px;
    border: 3px solid #F0F0F0;
    border-top-color: #00B7DD;
    border-radius: 50%;
    animation: spin-b-fbcasqrf8v 0.8s linear infinite;
    margin: 0 auto 16px;
}

.spinner-small[b-fbcasqrf8v] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-fbcasqrf8v 0.8s linear infinite;
    display: inline-block;
}

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

.loading-state p[b-fbcasqrf8v] {
    color: #606060;
    font-size: 14px;
}

/* Empty State */
.empty-state[b-fbcasqrf8v] {
    text-align: center;
    padding: 60px 20px;
    background-color: #FAFAFA;
    border-radius: 12px;
}

.empty-state i[b-fbcasqrf8v] {
    font-size: 48px;
    color: #E0E0E0;
    margin-bottom: 16px;
}

.empty-state h5[b-fbcasqrf8v] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000000E6;
}

.empty-state p[b-fbcasqrf8v] {
    margin: 0;
    color: #606060;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-row[b-fbcasqrf8v] {
        grid-template-columns: 1fr;
    }
    
    .dropdown-wrapper[b-fbcasqrf8v]  .form-dropdown {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .access-grid[b-fbcasqrf8v] {
        grid-template-columns: 1fr;
    }

    .user-info-section[b-fbcasqrf8v] {
        flex-wrap: wrap;
    }

    .access-card[b-fbcasqrf8v] {
        padding: 16px;
    }

    .card-actions[b-fbcasqrf8v] {
        top: 12px;
        right: 12px;
    }
    
    .btn-revoke-icon[b-fbcasqrf8v] {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .card-content[b-fbcasqrf8v] {
        padding: 16px;
        padding-right: 52px; /* Space for smaller revoke button */
    }
}
/* /Pages/Projects/ProjectQuotes.razor.rz.scp.css */
.project-quotes-page[b-chuoih4gb5] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.page-header[b-chuoih4gb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h2[b-chuoih4gb5] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.header-actions[b-chuoih4gb5] {
    display: flex;
    gap: 0.5rem;
}

.btn-back[b-chuoih4gb5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: #495057;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-back:hover[b-chuoih4gb5] {
    background-color: #e9ecef;
}

.quote-list-section[b-chuoih4gb5] {
    margin-top: 1.5rem;
}

/* Responsive styles */
@media (max-width: 768px) {
    .project-quotes-page[b-chuoih4gb5] {
        padding: 1rem;
    }
    
    .page-header[b-chuoih4gb5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Pages/Projects/QuotePage.razor.rz.scp.css */
.quote-page[b-zcn3j5e6vu] {
    padding: 0;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.page-header[b-zcn3j5e6vu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.page-header h2[b-zcn3j5e6vu] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.btn-secondary[b-zcn3j5e6vu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-zcn3j5e6vu] {
    background-color: #e9e9e9;
    border-color: #ccc;
}

.loading-indicator[b-zcn3j5e6vu] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.spinner-border[b-zcn3j5e6vu] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .quote-page[b-zcn3j5e6vu] {
        width: 100%;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .quote-page[b-zcn3j5e6vu] {
        padding: 15px;
    }
    
    .page-header[b-zcn3j5e6vu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .btn-secondary[b-zcn3j5e6vu] {
        align-self: flex-start;
    }
}
/* /Pages/SupplierPricing/AddSupplierPricing.razor.rz.scp.css */
.add-pricing-page[b-o59yxyg522] {
    padding: 16px;
}

/* ── Page header ── */
.page-header[b-o59yxyg522] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.page-header h2[b-o59yxyg522] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-text, #000000e6);
}

.back-btn[b-o59yxyg522] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.back-btn:hover[b-o59yxyg522] {
    background: #f0f0f0;
}

.back-btn i[b-o59yxyg522] {
    font-size: 1.1rem;
}

/* ── Breadcrumb & subtitle ── */
.page-title-group[b-o59yxyg522] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.breadcrumb-row[b-o59yxyg522] {
    display: none;
}

.page-subtitle[b-o59yxyg522] {
    display: none;
}

/* ── Page body ── */
.page-body[b-o59yxyg522] {
    max-width: 800px;
}

/* ── Tablet (600px+) ── */
@media (min-width: 600px) {
    .add-pricing-page[b-o59yxyg522] {
        padding-bottom: 24px;
    }
}

/* ── Desktop (768px+) ── */
@media (min-width: 768px) {
    .add-pricing-page[b-o59yxyg522] {
        padding: 24px;
    }

    .page-header h2[b-o59yxyg522] {
        font-size: 1.5rem;
    }
}

/* ── Desktop Premium (960px+) ── */
@media (min-width: 960px) {
    .add-pricing-page[b-o59yxyg522] {
        padding: 32px 40px;
    }

    .page-header[b-o59yxyg522] {
        gap: 16px;
        margin-bottom: 28px;
    }

    .back-btn[b-o59yxyg522] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #e8e8e8;
        background: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .back-btn:hover[b-o59yxyg522] {
        background: #f8f9fa;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
        border-color: #d0d0d0;
    }

    .back-btn i[b-o59yxyg522] {
        font-size: 1.2rem;
    }

    .page-header h2[b-o59yxyg522] {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .page-title-group[b-o59yxyg522] {
        gap: 4px;
    }

    .breadcrumb-row[b-o59yxyg522] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: #9ca3af;
        margin-bottom: 2px;
    }

    .breadcrumb-link[b-o59yxyg522] {
        cursor: pointer;
        color: #6b7280;
        transition: color 0.15s;
    }

    .breadcrumb-link:hover[b-o59yxyg522] {
        color: var(--primary, #00B7DD);
    }

    .breadcrumb-sep[b-o59yxyg522] {
        font-size: 0.6rem;
        color: #d1d5db;
    }

    .breadcrumb-current[b-o59yxyg522] {
        color: var(--primary-text, #000000e6);
        font-weight: 500;
    }

    .page-subtitle[b-o59yxyg522] {
        display: block;
        margin: 0;
        font-size: 0.875rem;
        color: #6b7280;
        line-height: 1.4;
    }

    .page-body[b-o59yxyg522] {
        max-width: 860px;
    }
}

/* ── Wide Desktop (1200px+) ── */
@media (min-width: 1200px) {
    .add-pricing-page[b-o59yxyg522] {
        padding: 40px 48px;
    }

    .page-header[b-o59yxyg522] {
        margin-bottom: 32px;
    }

    .page-header h2[b-o59yxyg522] {
        font-size: 1.75rem;
    }

    .page-body[b-o59yxyg522] {
        max-width: 900px;
    }
}
/* /Pages/SupplierPricing/EditSupplierPricing.razor.rz.scp.css */
.edit-pricing-page[b-n3zwyy1oih] {
    padding: 16px;
}

/* ── Page header ── */
.page-header[b-n3zwyy1oih] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.page-header h2[b-n3zwyy1oih] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-text, #000000e6);
}

.back-btn[b-n3zwyy1oih] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.back-btn:hover[b-n3zwyy1oih] {
    background: #f0f0f0;
}

.back-btn i[b-n3zwyy1oih] {
    font-size: 1.1rem;
}

/* ── Breadcrumb & subtitle ── */
.page-title-group[b-n3zwyy1oih] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.breadcrumb-row[b-n3zwyy1oih] {
    display: none;
}

.page-subtitle[b-n3zwyy1oih] {
    display: none;
}

/* ── Loading state ── */
.loading-container[b-n3zwyy1oih] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 32px 0;
    color: #757575;
    font-size: 0.9rem;
}

.spinner[b-n3zwyy1oih] {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--primary, #00B7DD);
    border-radius: 50%;
    animation: spin-b-n3zwyy1oih 0.7s linear infinite;
}

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

/* ── Error state ── */
.error-message[b-n3zwyy1oih] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    margin-top: 16px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc3545;
    font-size: 0.9rem;
}

/* ── Page body ── */
.page-body[b-n3zwyy1oih] {
    max-width: 800px;
}

/* ── Tablet (600px+) ── */
@media (min-width: 600px) {
    .edit-pricing-page[b-n3zwyy1oih] {
        padding-bottom: 24px;
    }
}

/* ── Desktop (768px+) ── */
@media (min-width: 768px) {
    .edit-pricing-page[b-n3zwyy1oih] {
        padding: 24px;
    }

    .page-header h2[b-n3zwyy1oih] {
        font-size: 1.5rem;
    }
}

/* ── Desktop Premium (960px+) ── */
@media (min-width: 960px) {
    .edit-pricing-page[b-n3zwyy1oih] {
        padding: 32px 40px;
    }

    .page-header[b-n3zwyy1oih] {
        gap: 16px;
        margin-bottom: 28px;
    }

    .back-btn[b-n3zwyy1oih] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #e8e8e8;
        background: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .back-btn:hover[b-n3zwyy1oih] {
        background: #f8f9fa;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
        border-color: #d0d0d0;
    }

    .back-btn i[b-n3zwyy1oih] {
        font-size: 1.2rem;
    }

    .page-header h2[b-n3zwyy1oih] {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .page-title-group[b-n3zwyy1oih] {
        gap: 4px;
    }

    .breadcrumb-row[b-n3zwyy1oih] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: #9ca3af;
        margin-bottom: 2px;
    }

    .breadcrumb-link[b-n3zwyy1oih] {
        cursor: pointer;
        color: #6b7280;
        transition: color 0.15s;
    }

    .breadcrumb-link:hover[b-n3zwyy1oih] {
        color: var(--primary, #00B7DD);
    }

    .breadcrumb-sep[b-n3zwyy1oih] {
        font-size: 0.6rem;
        color: #d1d5db;
    }

    .breadcrumb-current[b-n3zwyy1oih] {
        color: var(--primary-text, #000000e6);
        font-weight: 500;
    }

    .page-subtitle[b-n3zwyy1oih] {
        display: block;
        margin: 0;
        font-size: 0.875rem;
        color: #6b7280;
        line-height: 1.4;
    }

    .page-body[b-n3zwyy1oih] {
        max-width: 860px;
    }

    /* Loading state desktop */
    .loading-container[b-n3zwyy1oih] {
        flex-direction: column;
        align-items: center;
        padding: 64px 0;
        gap: 16px;
    }

    .spinner[b-n3zwyy1oih] {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }

    /* Error state desktop */
    .error-message[b-n3zwyy1oih] {
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 0.875rem;
        max-width: 480px;
    }
}

/* ── Wide Desktop (1200px+) ── */
@media (min-width: 1200px) {
    .edit-pricing-page[b-n3zwyy1oih] {
        padding: 40px 48px;
    }

    .page-header[b-n3zwyy1oih] {
        margin-bottom: 32px;
    }

    .page-header h2[b-n3zwyy1oih] {
        font-size: 1.75rem;
    }

    .page-body[b-n3zwyy1oih] {
        max-width: 900px;
    }
}
/* /Pages/SupplierPricing/PriceComparison.razor.rz.scp.css */
.price-comparison-page[b-jjrfpmr8eg] {
    padding: 16px;
}

.page-header[b-jjrfpmr8eg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.page-header h2[b-jjrfpmr8eg] {
    margin: 0;
    font-size: 1.25rem;
}

.quantity-input[b-jjrfpmr8eg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.quantity-field[b-jjrfpmr8eg] {
    flex: 1;
    max-width: 300px;
}

/* Tablet+ */
@media (min-width: 768px) {
    .price-comparison-page[b-jjrfpmr8eg] {
        padding: 24px;
    }

    .page-header h2[b-jjrfpmr8eg] {
        font-size: 1.5rem;
    }

    .quantity-input[b-jjrfpmr8eg] {
        margin-bottom: 24px;
    }
}
/* /Pages/SupplierPricing/SupplierPricing.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Base Layout
   ═══════════════════════════════════════ */
.supplier-pricing-page[b-6qg55cbh8a] {
    padding: 16px;
}

/* ── Page header ── */
.page-header[b-6qg55cbh8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.page-header-left[b-6qg55cbh8a] {
    min-width: 0;
}

.page-header h2[b-6qg55cbh8a] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-text, #000000e6);
}

.page-header-subtitle[b-6qg55cbh8a] {
    display: none;
}

.page-content[b-6qg55cbh8a] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ═══════════════════════════════════════
   Desktop Sidebar (hidden on mobile)
   ═══════════════════════════════════════ */
.sidebar[b-6qg55cbh8a] {
    display: none;
}

.sidebar-card[b-6qg55cbh8a] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

.sidebar-header[b-6qg55cbh8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-title-group[b-6qg55cbh8a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-icon[b-6qg55cbh8a] {
    font-size: 1rem;
    color: var(--primary, #00B7DD);
}

.sidebar-header h4[b-6qg55cbh8a] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.sidebar-body[b-6qg55cbh8a] {
    padding: 8px;
}

.category-item[b-6qg55cbh8a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    color: #4b5563;
    transition: all 0.15s ease;
}

.category-item:hover[b-6qg55cbh8a] {
    background: #f3f4f6;
}

.category-item.active[b-6qg55cbh8a] {
    background: rgba(0, 183, 221, 0.08);
    color: var(--primary, #00B7DD);
    font-weight: 600;
}

.category-item-icon[b-6qg55cbh8a] {
    font-size: 0.85rem;
    opacity: 0.6;
}

.category-item.active .category-item-icon[b-6qg55cbh8a] {
    opacity: 1;
}

.category-count[b-6qg55cbh8a] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 10px;
}

.category-item.active .category-count[b-6qg55cbh8a] {
    background: rgba(0, 183, 221, 0.12);
    color: var(--primary, #00B7DD);
}

/* ═══════════════════════════════════════
   Mobile Controls
   ═══════════════════════════════════════ */
.mobile-controls[b-6qg55cbh8a] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

[b-6qg55cbh8a] .filter-btn {
    border-radius: 20px !important;
    text-transform: none !important;
    font-size: 0.8rem !important;
    min-height: 36px;
}

[b-6qg55cbh8a] .filter-btn.filter-active {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
}

/* ═══════════════════════════════════════
   Mobile Bottom Sheet
   ═══════════════════════════════════════ */
.mobile-filter-overlay[b-6qg55cbh8a] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1200;
    animation: fadeIn-b-6qg55cbh8a 0.2s ease;
}

.mobile-filter-sheet[b-6qg55cbh8a] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 1201;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-6qg55cbh8a 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.sheet-handle[b-6qg55cbh8a] {
    width: 36px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
}

.sheet-header[b-6qg55cbh8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}

.sheet-content[b-6qg55cbh8a] {
    overflow-y: auto;
    padding: 0 16px 24px;
    -webkit-overflow-scrolling: touch;
}

.sheet-category-item[b-6qg55cbh8a] {
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
}

.sheet-category-item:active[b-6qg55cbh8a] {
    background: #f0f0f0;
}

.sheet-category-item.active[b-6qg55cbh8a] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    background: #e0f7fa;
}

@keyframes fadeIn-b-6qg55cbh8a {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-6qg55cbh8a {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ═══════════════════════════════════════
   Search & Controls
   ═══════════════════════════════════════ */
.controls[b-6qg55cbh8a] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.search-field[b-6qg55cbh8a] {
    width: 100%;
}

/* ═══════════════════════════════════════
   Desktop table / Mobile cards toggle
   ═══════════════════════════════════════ */
.desktop-view[b-6qg55cbh8a] {
    display: none;
}

.mobile-view[b-6qg55cbh8a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Table card wrapper ── */
.table-card[b-6qg55cbh8a] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

/* ── Table cell styling ── */
.material-cell[b-6qg55cbh8a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.material-cell-name[b-6qg55cbh8a] {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
}

.material-cell-code[b-6qg55cbh8a] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.supplier-cell[b-6qg55cbh8a] {
    color: #374151;
    font-size: 0.875rem;
}

.price-cell[b-6qg55cbh8a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.billing-price[b-6qg55cbh8a] {
    font-size: 0.75rem;
    color: #0369a1;
    font-weight: 500;
}

.tier-badge[b-6qg55cbh8a] {
    font-size: 0.7rem;
    color: #00838f;
    background: #e0f7fa;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
    width: fit-content;
}

.meta-cell[b-6qg55cbh8a] {
    color: #6b7280;
    font-size: 0.875rem;
}

.date-cell[b-6qg55cbh8a] {
    color: #6b7280;
    font-size: 0.85rem;
    white-space: nowrap;
}

.table-actions[b-6qg55cbh8a] {
    display: flex;
    align-items: center;
    gap: 0;
}

/* ═══════════════════════════════════════
   Mobile Pricing Cards
   ═══════════════════════════════════════ */
.pricing-card[b-6qg55cbh8a] {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px;
    transition: box-shadow 0.15s;
}

.pricing-card:active[b-6qg55cbh8a] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.card-row-top[b-6qg55cbh8a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.card-material[b-6qg55cbh8a] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.material-name[b-6qg55cbh8a] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-code[b-6qg55cbh8a] {
    font-size: 0.75rem;
    color: #9e9e9e;
    margin-top: 1px;
}

.card-price[b-6qg55cbh8a] {
    flex-shrink: 0;
    text-align: right;
}

.card-row-mid[b-6qg55cbh8a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.supplier-name[b-6qg55cbh8a] {
    color: #616161;
}

.valid-date[b-6qg55cbh8a] {
    color: #9e9e9e;
    font-size: 0.8rem;
}

.card-chips[b-6qg55cbh8a] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.chip[b-6qg55cbh8a] {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    background: #f5f5f5;
    color: #616161;
    font-weight: 500;
    white-space: nowrap;
}

.chip-accent[b-6qg55cbh8a] {
    background: #e0f7fa;
    color: #00838f;
}

.card-actions[b-6qg55cbh8a] {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    margin: -4px -8px -6px 0;
}

/* ═══════════════════════════════════════
   Empty State
   ═══════════════════════════════════════ */
.empty-state[b-6qg55cbh8a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    gap: 6px;
}

.empty-state-icon[b-6qg55cbh8a] {
    font-size: 2rem;
    color: #d1d5db;
    margin-bottom: 8px;
}

.empty-state-title[b-6qg55cbh8a] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
}

.empty-state-hint[b-6qg55cbh8a] {
    margin: 0;
    font-size: 0.85rem;
    color: #9ca3af;
}

/* ═══════════════════════════════════════
   Pagination
   ═══════════════════════════════════════ */
.pagination[b-6qg55cbh8a] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* ═══════════════════════════════════════
   Add button
   ═══════════════════════════════════════ */
[b-6qg55cbh8a] .add-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ═══════════════════════════════════════
   Tablet (768px+)
   ═══════════════════════════════════════ */
@media (min-width: 768px) {
    .supplier-pricing-page[b-6qg55cbh8a] {
        padding: 24px;
    }

    .page-header h2[b-6qg55cbh8a] {
        font-size: 1.5rem;
    }

    .search-field[b-6qg55cbh8a] {
        max-width: 400px;
    }

    .mobile-view[b-6qg55cbh8a] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ═══════════════════════════════════════
   Desktop (960px+)
   ═══════════════════════════════════════ */
@media (min-width: 960px) {
    .supplier-pricing-page[b-6qg55cbh8a] {
        padding: 28px 32px;
    }

    .page-header[b-6qg55cbh8a] {
        margin-bottom: 24px;
        align-items: flex-start;
    }

    .page-header h2[b-6qg55cbh8a] {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .page-header-subtitle[b-6qg55cbh8a] {
        display: block;
        margin: 4px 0 0;
        font-size: 0.875rem;
        color: #6b7280;
        line-height: 1.4;
    }

    .page-content[b-6qg55cbh8a] {
        flex-direction: row;
        gap: 28px;
    }

    .sidebar[b-6qg55cbh8a] {
        display: block;
        width: 260px;
        flex-shrink: 0;
    }

    .sidebar-card[b-6qg55cbh8a] {
        position: sticky;
        top: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                    0 1px 2px rgba(0, 0, 0, 0.02);
        transition: box-shadow 0.25s ease;
    }

    .sidebar-card:hover[b-6qg55cbh8a] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06),
                    0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .mobile-controls[b-6qg55cbh8a] {
        display: none;
    }

    .mobile-filter-overlay[b-6qg55cbh8a],
    .mobile-filter-sheet[b-6qg55cbh8a] {
        display: none;
    }

    .desktop-view[b-6qg55cbh8a] {
        display: block;
    }

    .mobile-view[b-6qg55cbh8a] {
        display: none;
    }

    .main-content[b-6qg55cbh8a] {
        flex: 1;
        min-width: 0;
    }

    .controls[b-6qg55cbh8a] {
        margin-bottom: 20px;
    }

    /* ── Table card premium ── */
    .table-card[b-6qg55cbh8a] {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                    0 1px 2px rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.06);
        border-radius: 14px;
        transition: box-shadow 0.25s ease;
    }

    .table-card:hover[b-6qg55cbh8a] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06),
                    0 1px 3px rgba(0, 0, 0, 0.04);
    }

    /* Table header styling */
    [b-6qg55cbh8a] .pricing-table thead th {
        background: #fafbfc;
        color: #6b7280;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap;
    }

    /* Table body row styling */
    [b-6qg55cbh8a] .pricing-table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #f8f8f8;
        vertical-align: middle;
    }

    [b-6qg55cbh8a] .pricing-table tbody tr:last-child td {
        border-bottom: none;
    }

    [b-6qg55cbh8a] .pricing-table tbody tr:hover td {
        background: #fafbfc;
    }

    .actions-col[b-6qg55cbh8a] {
        text-align: right;
    }

    .table-actions[b-6qg55cbh8a] {
        justify-content: flex-end;
    }

    /* ── Empty state desktop ── */
    .empty-state[b-6qg55cbh8a] {
        padding: 64px 24px;
        background: white;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .empty-state-icon[b-6qg55cbh8a] {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .empty-state-title[b-6qg55cbh8a] {
        font-size: 1rem;
    }

    /* ── Add button desktop ── */
    [b-6qg55cbh8a] .add-btn {
        border-radius: 10px !important;
        padding: 8px 20px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
        box-shadow: 0 1px 3px rgba(0, 183, 221, 0.2);
        transition: all 0.2s ease !important;
    }

    [b-6qg55cbh8a] .add-btn:hover {
        box-shadow: 0 4px 8px rgba(0, 183, 221, 0.3) !important;
        transform: translateY(-1px);
    }
}

/* ═══════════════════════════════════════
   Wide Desktop (1200px+)
   ═══════════════════════════════════════ */
@media (min-width: 1200px) {
    .supplier-pricing-page[b-6qg55cbh8a] {
        padding: 32px 40px;
    }

    .page-header[b-6qg55cbh8a] {
        margin-bottom: 28px;
    }

    .page-header h2[b-6qg55cbh8a] {
        font-size: 1.75rem;
    }

    .page-content[b-6qg55cbh8a] {
        gap: 32px;
    }

    .sidebar[b-6qg55cbh8a] {
        width: 280px;
    }

    .search-field[b-6qg55cbh8a] {
        max-width: 480px;
    }

    [b-6qg55cbh8a] .pricing-table thead th {
        padding: 16px 20px;
    }

    [b-6qg55cbh8a] .pricing-table tbody td {
        padding: 16px 20px;
    }

    .material-cell-name[b-6qg55cbh8a] {
        font-size: 0.9rem;
    }

    .empty-state[b-6qg55cbh8a] {
        padding: 80px 32px;
    }
}

/* ═══════════════════════════════════════
   Ultra-wide (1400px+)
   ═══════════════════════════════════════ */
@media (min-width: 1400px) {
    .supplier-pricing-page[b-6qg55cbh8a] {
        padding: 40px 48px;
    }

    .sidebar[b-6qg55cbh8a] {
        width: 300px;
    }
}
/* /Pages/Teams/SearchTeam/SearchTeam.razor.rz.scp.css */
/* /Pages/Teams/TeamDetails/TeamDetails.razor.rz.scp.css */
/* /Pages/Teams/Teams/Teams.razor.rz.scp.css */
/* /Pages/Users/Users/Users.razor.rz.scp.css */
.hide-input[b-5w2wwptvfv], .hide-grid[b-5w2wwptvfv]{
    display: none;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-4o6tbh6ujq] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-4o6tbh6ujq] {
    flex: 1;
}

.sidebar[b-4o6tbh6ujq] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

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

    .top-row[b-4o6tbh6ujq]  a, .top-row .btn-link[b-4o6tbh6ujq] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-4o6tbh6ujq] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-4o6tbh6ujq] {
        display: none;
    }

    .top-row.auth[b-4o6tbh6ujq] {
        justify-content: space-between;
    }

    .top-row a[b-4o6tbh6ujq], .top-row .btn-link[b-4o6tbh6ujq] {
        margin-left: 0;
    }
}

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

    .sidebar[b-4o6tbh6ujq] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

    .main > div[b-4o6tbh6ujq] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-l0c4nhwox0] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-brand[b-l0c4nhwox0] {
    font-size: 1.1rem;
}

.oi[b-l0c4nhwox0] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-l0c4nhwox0] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-l0c4nhwox0]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

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

.nav-item[b-l0c4nhwox0]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-footer[b-l0c4nhwox0] {
    padding: 8px 16px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: auto;
}

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

    .collapse[b-l0c4nhwox0] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}