:root {
    --pf-client-primary: #1e40af;
    --pf-client-primary-hover: #1d4ed8;
    --pf-client-secondary: #64748b;
    --pf-client-success: #10b981;
    --pf-client-warning: #f59e0b;
    --pf-client-danger: #ef4444;
    --pf-client-info: #06b6d4;

    --pf-client-gray-50: #f8fafc;
    --pf-client-gray-100: #f1f5f9;
    --pf-client-gray-200: #e2e8f0;
    --pf-client-gray-300: #cbd5e1;
    --pf-client-gray-700: #334155;
    --pf-client-gray-800: #1e293b;
    --pf-client-gray-900: #0f172a;

    --pf-client-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --pf-client-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --pf-client-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}


body {
    background-color: var(--pf-client-gray-50);
}

#app {
    height: 100vh;
}


.card {
    border: 0;
    box-shadow: var(--pf-client-shadow-sm);
    border-radius: 0.5rem;
}


.btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:focus {
    outline: none;
    box-shadow: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    border-radius: 4px;
    font-weight: var(--pf-fw-medium);
    font-size: var(--pf-fs-base);
    cursor: pointer;
    border: 1px solid transparent;
    background-color: #1D3782;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: #0f1f4d;
}

.btn-primary:focus {
    outline: none;
    box-shadow: none;
}

.btn-primary i {
    font-size: var(--pf-fs-base);
}

.btn-outline-primary {
    background-color: transparent;
    border: 1px solid #3b82f6;
    color: #3b82f6;
}

.btn-outline-primary:hover:not(:disabled) {
    background-color: #3b82f6;
    border: 1px solid #3b82f6;
    color: white;
}

.btn-outline-primary:active:not(:disabled),
.btn-outline-primary.active {
    background-color: #3b82f6;
    border: 1px solid #3b82f6;
    color: white;
}

.btn-outline-primary:focus {
    outline: none;
    box-shadow: none;
}

.btn-outline-danger {
    background-color: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: #dc2626;
    border: 1px solid #dc2626;
    color: white;
}

.btn-outline-danger:active:not(:disabled),
.btn-outline-danger.active {
    background-color: #dc2626;
    border: 1px solid #dc2626;
    color: white;
}

.btn-outline-danger:focus {
    outline: none;
    box-shadow: none;
}

/* Button size overrides - ensure consistent sizing */
.btn-sm {
    padding: 10px 20px;
    font-size: var(--pf-fs-base);
    line-height: 1.5;
    border: 1px solid transparent;
}

/* .btn-sm's transparent border (intended for filled buttons) also erases the outline
   variant's visible border, leaving inactive toggle buttons with no fill and no border
   so they blend into the page background. Restore the outline so segmented toggles
   (e.g. My Orders / Company Orders) clearly read as selected vs unselected. */
.btn-sm.btn-outline-primary {
    border-color: #3b82f6;
}

/* Button group fixes for border overlap */
.btn-group {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
}

.btn-group .btn {
    position: relative;
    margin-left: -1px;
    border-radius: 0;
}

.btn-group .btn:first-child {
    margin-left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-group .btn:hover,
.btn-group .btn:active,
.btn-group .btn.active {
    z-index: 1;
}

.btn-group .btn:focus {
    z-index: 0;
}

/* Override Bootstrap's button inconsistencies */
.btn-primary,
.btn-outline-primary {
    padding: 10px 20px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    line-height: 1.5;
}


.btn-secondary {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #e2e8f0;
}


/* PF-5947: PfClient modal system. See Docs/PfClient-Modal-Convention.md
   for the canonical markup, sizing, layering, and footer-label rules.
   Sizes: modal-lg (default, 750px) and modal-xl (1050px, used only when
   content genuinely needs the extra width). Session-critical modals add
   .modal-session to bump z-index above all other UI. */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Base positioning shared by all modal sizes. Width comes from a size
   modifier (.modal-lg or .modal-xl) — never use .modal-dialog without one. */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 90%;
}


.modal-dialog.modal-lg {
    max-width: 750px;
    height: min(700px, 80vh);
    display: flex;
    flex-direction: column;
}

.modal-dialog.modal-xl {
    max-width: 1050px;
    height: min(700px, 85vh);
    display: flex;
    flex-direction: column;
}

/* Session-critical UX (login expiry, mandatory training): renders above
   all other modals so a routine modal can't visually mask it. */
.modal-backdrop.modal-session {
    z-index: 9998;
}
.modal-dialog.modal-session {
    z-index: 9999;
}

.modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


.modal-dialog.modal-lg .modal-content,
.modal-dialog.modal-xl .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
}


.modal-dialog.modal-lg .modal-header,
.modal-dialog.modal-xl .modal-header {
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-size: var(--pf-fs-xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
}

.modal-close {
    background: none;
    border: none;
    font-size: var(--pf-fs-4xl);
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.modal-body {
    padding: 16px 24px;
}


.modal-dialog.modal-lg .modal-body,
.modal-dialog.modal-xl .modal-body {
    flex: 1;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 8px 8px;
}


.modal-dialog.modal-lg .modal-footer,
.modal-dialog.modal-xl .modal-footer {
    flex-shrink: 0;
    margin-top: auto;
}

.modal-footer .footer-spacer {
    flex: 1;
}

/* Final "Onboarding submitted successfully" banner: the whole footer turns green with
   centered white text and no buttons (the submit action is done). */
.modal-footer.pf-footer-success {
    background: var(--bs-success, #198754);
    border-top-color: var(--bs-success, #198754);
}

.modal-footer .btn {
    min-width: 120px;
    justify-content: center;
}

/* The per-location list in multi-rooftop onboarding/delegate/bank-info forms can hold many
   rooftops (a 14-location group overflows the modal). Cap its height and scroll it internally
   so the form content beside it stays put instead of the whole modal growing/scrolling. */
.onboarding-location-sidebar {
    max-height: 60vh;
    overflow-y: auto;
}


.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--pf-fs-base);
}

.alert i {
    font-size: var(--pf-fs-lg);
}

.alert-info {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
}

.alert-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.info-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #1e40af;
}

.info-message i {
    font-size: var(--pf-fs-xl);
    margin-top: 2px;
    flex-shrink: 0;
}

.info-message p {
    margin: 0;
    font-size: var(--pf-fs-base);
    line-height: 1.5;
}

.intro-text {
    margin: 0 0 20px 0;
    font-size: var(--pf-fs-base);
    line-height: 1.5;
    color: #64748b;
}

.no-inventory-section {
    text-align: center;
    padding: 40px 20px;
}

.no-inventory-section h4 {
    font-size: var(--pf-fs-3xl);
    font-weight: var(--pf-fw-bold);
    color: #1e293b;
    margin: 0 0 16px 0;
}

.no-inventory-message {
    font-size: var(--pf-fs-lg);
    color: #64748b;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.watchlist-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.watchlist-info i {
    font-size: var(--pf-fs-xl);
    margin-top: 2px;
    flex-shrink: 0;
}

.watchlist-info p {
    margin: 0;
    font-size: var(--pf-fs-base);
    line-height: 1.5;
}

.part-description {
    margin-bottom: 16px;
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row .form-section {
    flex: 1;
    margin-bottom: 0;
}

.form-row-aligned {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.form-field {
    display: flex;
    flex-direction: column;
}


.text-gray-800 {
    color: #1e293b;
}

.form-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 24px;
}

.form-section {
    margin-bottom: 16px;
}

.form-section:last-of-type {
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.form-label {
    display: block;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    margin-bottom: 8px;
}

.form-input,
.form-textarea,
select.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: var(--pf-fs-base);
    line-height: 1.5;
    color: #1e293b;
    transition: all 0.2s;
    font-family: inherit;
    background-color: #ffffff;
}

select.form-input,
.modal-section select.form-input,
.modal-table select.form-input,
.modal-table td select.form-input,
.modal-body select.form-input,
.modal-grid select.form-input,
.modal-grid-item select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    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='%23334155' 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 10px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:read-only {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-textarea {
    resize: vertical;
    min-height: 60px;
}

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

.input-group .form-control {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 10px 20px;
    height: auto;
    min-height: 38px;
}

.input-prefix {
    position: absolute;
    left: 12px;
    color: #64748b;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-semibold);
    pointer-events: none;
}

.input-group .form-input {
    padding-left: 28px;
}

.form-hint {
    display: block;
    font-size: var(--pf-fs-xs);
    color: #64748b;
    margin-top: 6px;
}


.toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.toggle-info {
    flex: 1;
}

.toggle-info .form-label {
    margin-bottom: 4px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


.section-header {
    margin-bottom: 12px;
}

.alert-criteria-options {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.alert-criteria-options .radio-option {
    flex: 1;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.radio-option:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.radio-option input[type="radio"] {
    margin-top: 2px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked {
    accent-color: #3b82f6;
}

.radio-option:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.radio-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.radio-title {
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
}

.radio-description {
    font-size: var(--pf-fs-sm);
    color: #64748b;
    line-height: 1.4;
}

.target-price-input {
    margin-top: 12px;
}


.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--pf-client-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: var(--pf-fw-semibold);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--pf-client-primary);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}


/* Loading screen styles */
.loading-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loading-message {
    font-size: var(--pf-fs-xl);
    color: #1e40af;
    margin-bottom: 16px;
}

.loading-icon {
    font-size: var(--pf-fs-3xl);
    margin-right: 8px;
}

.loading-subtext {
    font-size: var(--pf-fs-base);
    color: #64748b;
}

/* Blazor error UI styles */
#blazor-error-ui {
    background: #fee2e2;
    color: var(--pf-client-danger);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-top: 1px solid #fecaca;
}

.blazor-error-content {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px;
    border-radius: 6px;
    margin: 16px;
}

.blazor-error-content .reload {
    margin-left: 12px;
    color: #dc2626;
    font-weight: var(--pf-fw-semibold);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--pf-client-danger);
}


.mud-snackbar {
    background-color: #e0f2fe !important;
    color: #0f172a !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06) !important;
    cursor: pointer;
    border: 1px solid #bae6fd !important;
}

.mud-snackbar .mud-snackbar-content-message {
    color: #0f172a !important;
}

.mud-snackbar .mud-snackbar-content-message * {
    color: #0f172a !important;
}

.mud-snackbar .mud-icon-button {
    color: #1e3a8a !important;
}

.mud-snackbar svg {
    color: #1e3a8a !important;
}

.toast-title {
    color: #1e3a8a !important;
    margin-bottom: 4px;
}

.toast-message {
    color: #0f172a !important;
}


.step-indicator {
    display: flex;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.step.completed:not(:last-child)::after {
    background: #3b82f6;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--pf-fw-semibold);
    color: #64748b;
    font-size: var(--pf-fs-sm);
    z-index: 1;
}

.step.active .step-number {
    border-color: #3b82f6;
    background: #3b82f6;
    color: white;
}

.step.completed .step-number {
    border-color: #3b82f6;
    background: #3b82f6;
    color: white;
}

.step-label {
    font-size: var(--pf-fs-xs);
    color: #64748b;
    font-weight: var(--pf-fw-medium);
    text-align: center;
}

.step.active .step-label {
    color: #3b82f6;
    font-weight: var(--pf-fw-semibold);
}


.modal-lg {
    max-width: 900px;
}


.pricing-breakdown {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.radio-price {
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-semibold);
    color: #10b981;
    margin-top: 4px;
}


.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-state .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.loading-state p {
    color: #64748b;
    font-size: var(--pf-fs-base);
    margin: 0;
}


.alert-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.alert-info {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.alert-success {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}


.order-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inline-form-field {
    margin-top: 12px;
    width: 100%;
}

.inline-form-field .form-label {
    display: block;
    margin-bottom: 8px;
}

.inline-form-field .form-input {
    width: 100%;
}

.strategy-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.strategy-options .radio-option {
    margin: 0;
}


.radio-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8fafc;
}

.radio-option.disabled:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.radio-option.disabled input[type="radio"] {
    cursor: not-allowed;
}


@media (max-width: 768px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        height: min(650px, 85vh);
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        height: 90vh;
        max-width: 98%;
    }
}

/* Page Layout - Standard Header Styles */
.page-container {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: var(--pf-fs-4xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    margin: 0 0 4px 0;
}

.page-subtitle {
    color: #64748b;
    font-size: var(--pf-fs-base);
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 12px;
}

/* Orders/Fulfillments Page Shared Styles */
.order-section {
    margin-bottom: 8px;
}

.section-title {
    font-size: var(--pf-fs-2xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    margin-bottom: 16px;
}

.order-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.order-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.order-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.order-card.clickable {
    cursor: pointer;
}

.order-card .card-header {
    padding: 12px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-card .card-body {
    padding: 12px;
}

.order-card .card-footer {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
}

.order-reference {
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    font-size: var(--pf-fs-xl);
}

.badge-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
}

.status-badge.status-draft {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-processing {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-pending {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-shipped {
    background: #e0e7ff;
    color: #3730a3;
}

.status-badge.status-completed,
.status-badge.status-finalized {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-received {
    background: #86efac;
    color: #14532d;
}

.status-badge.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-auto {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-seller {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-shipment {
    background: #e0e7ff;
    color: #3730a3;
}

.status-badge.status-awaiting-approval {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-pendingsellerapproval {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-pendingbuyerapproval {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-sellerapproved {
    background: #d1fae5;
    color: #065f46;
}

.type-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
    background: #f1f5f9;
    color: #475569;
}

.type-badge.type-manual {
    background: #e0e7ff;
    color: #3730a3;
}

.type-badge.type-auto {
    background: #ddd6fe;
    color: #5b21b6;
}

.order-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--pf-fs-base);
}

.order-info .label {
    color: #64748b;
    font-weight: var(--pf-fw-medium);
}

.order-info .value {
    color: #1e293b;
    font-weight: var(--pf-fw-semibold);
}

.order-info .value.total {
    color: #1e40af;
}

.order-info .value.savings {
    color: #16a34a;
}

.table-responsive-wrapper {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.order-table {
    width: 100%;
    background: white;
}

.order-table thead {
    background: #f8fafc;
}

.order-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: var(--pf-fw-semibold);
    color: #475569;
    font-size: var(--pf-fs-sm);
    border-bottom: 2px solid #e2e8f0;
}

.order-table td {
    padding: 12px 16px;
    color: #1e293b;
    font-size: var(--pf-fs-base);
    border-bottom: 1px solid #f1f5f9;
}

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

.order-table tbody tr:hover {
    background: #f8fafc;
}

.order-table .text-end {
    text-align: right;
}

.order-table .order-reference {
    font-weight: var(--pf-fw-semibold);
    color: #1e40af;
}

.order-table .savings {
    color: #16a34a;
    font-weight: var(--pf-fw-semibold);
}

.order-table .comment-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-style: italic;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.page-info {
    color: #64748b;
    font-size: var(--pf-fs-base);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: var(--pf-fs-7xl);
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: var(--pf-fs-2xl);
    color: #475569;
    margin-bottom: 8px;
}

.empty-state p {
    color: #64748b;
    font-size: var(--pf-fs-lg);
}

/* Financial Cards - Shared styles for order totals and financial breakdowns */
.financial-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
}

.financial-card {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    text-align: center;
}

.financial-card.highlight {
    background-color: #e7f5ff;
    border-color: #4dabf7;
}

.financial-card-label {
    font-size: var(--pf-fs-xs);
    font-weight: var(--pf-fw-semibold);
    color: #6c757d;
    margin-bottom: 0.15rem;
}

.financial-card.highlight .financial-card-label {
    color: #1971c2;
}

.financial-card-value {
    font-size: var(--pf-fs-xl);
    font-weight: var(--pf-fw-normal);
    color: #212529;
}

.financial-card.highlight .financial-card-value {
    color: #1864ab;
}

/* Form value display - for readonly data display in forms */
.form-value {
    font-size: var(--pf-fs-base);
    color: #1e293b;
    padding: 8px 0;
}

/* Decision options - for FulfillmentReviewModal step 3 */
.decision-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.decision-option {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.decision-option:hover {
    border-color: #3b82f6;
    background-color: #f8fafc;
}

.decision-option.selected {
    border-color: #3b82f6;
    background-color: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.decision-icon {
    font-size: var(--pf-fs-4xl);
    margin-right: 12px;
    flex-shrink: 0;
}

.decision-icon.accept {
    color: #10b981;
}

.decision-icon.reject {
    color: #ef4444;
}

.decision-icon.unavailable {
    color: #f59e0b;
}

.decision-icon.other {
    color: #64748b;
}

.decision-content h6 {
    margin: 0 0 2px 0;
    font-weight: var(--pf-fw-semibold);
    font-size: var(--pf-fs-lg);
    color: #1e293b;
}

.decision-content p {
    margin: 0;
    font-size: var(--pf-fs-sm);
    color: #64748b;
}

/* Completion icon - for final step */
.completion-icon {
    font-size: var(--pf-fs-7xl);
    text-align: center;
}

.completion-icon i {
    color: #10b981;
}

/* ========================================
   STANDARDIZED MODAL COMPONENTS
   ======================================== */

/* Modal Sections - Unified container for all modal content sections */
.modal-section {
    margin-bottom: 10px;
}

.modal-section:last-child {
    margin-bottom: 0;
}

.modal-section + .modal-table-container {
    margin-top: -4px;
}

.modal-section h5 {
    font-size: var(--pf-fs-xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.modal-section p {
    font-size: var(--pf-fs-base);
}

.modal-section .form-label {
    font-weight: var(--pf-fw-normal);
    color: #64748b;
}

/* Modal Label/Value Pairs - Standardized display for read-only data */
.modal-label {
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-semibold);
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
    display: block;
    margin-bottom: 4px;
}

.modal-value {
    font-size: var(--pf-fs-base);
    color: #1e293b;
    padding: 0;
}

.modal-value.savings {
    color: #16a34a;
}

/* Modal Grid Layout - For label/value pairs in grid */
.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.modal-grid.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

.modal-grid-item.full-width {
    grid-column: 1 / -1;
}

.modal-grid-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Utility classes for inline style replacement */
.icon-xxl {
    font-size: 48px;
}

.resizable-vertical {
    resize: vertical;
}

.code-block {
    white-space: pre-wrap;
}

.modal-grid-item.full-width {
    grid-column: 1 / -1;
}

/* Modal Tables - Standardized table styling */
.modal-table-container {
    border-radius: 8px;
    overflow: hidden;
}

.modal-table {
    width: 100%;
    border-collapse: collapse;
}

.modal-table thead {
    background: #f8fafc;
}

.modal-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-semibold);
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
}

.modal-table td {
    padding: 12px 16px;
    font-size: var(--pf-fs-base);
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

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

.modal-table tbody tr:hover {
    background: #f8fafc;
}

.modal-table .text-center {
    text-align: center;
}

.modal-table .text-right {
    text-align: right;
}

.modal-table tfoot {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
}

.modal-table tfoot .totals-row td {
    padding: 8px 16px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-semibold);
    border-bottom: none;
}

/* Tab Navigation - For modals with multiple tabs */
.modal-tab-navigation {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}

.modal-tab-btn {
    flex: 1;
    padding: 16px 24px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: var(--pf-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    font-size: var(--pf-fs-base);
}

.modal-tab-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.modal-tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: white;
}

.modal-tab-btn i {
    font-size: var(--pf-fs-lg);
}

/* Tab Content - Content area for tabbed modals */
.tab-content {
    padding: 16px;
}

/* Confirmation Dialog - Standardized confirmation overlay */
.confirmation-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.confirmation-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    min-width: 400px;
    max-width: 500px;
}

.confirmation-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.confirmation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.confirmation-header i {
    color: #f59e0b;
    font-size: var(--pf-fs-3xl);
}

.confirmation-header h4 {
    margin: 0;
    font-size: var(--pf-fs-xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
}

.confirmation-body {
    padding: 24px;
}

.confirmation-body p {
    margin: 0 0 12px 0;
    color: #475569;
    font-size: var(--pf-fs-base);
    line-height: 1.6;
}

.confirmation-body p:last-child {
    margin-bottom: 0;
}

.confirmation-body .warning-text {
    color: #dc2626;
    font-weight: var(--pf-fw-medium);
    font-size: var(--pf-fs-sm);
}

.confirmation-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
}

.btn-danger {
    background: #dc2626;
    color: white;
    border: 1px solid transparent;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-success {
    background: #10b981;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-success:hover:not(:disabled) {
    background: #059669;
}

.btn-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Icon Spacing - Standardized across all modals */
.btn i.me-2 {
    margin-right: 8px;
}

.btn i.ms-2 {
    margin-left: 8px;
}

/* Alert Standardization - Consistent naming */
.alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Summary Section - For success messages and final steps */
.summary-section {
    padding: 12px;
}

.summary-success-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #16a34a;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 6px;
    font-size: var(--pf-fs-lg);
    font-weight: var(--pf-fw-medium);
}

.summary-success-message i {
    font-size: var(--pf-fs-2xl);
}

.summary-details {
    border-radius: 6px;
    padding: 8px 0;
    margin-bottom: 10px;
}

.summary-pricing {
    border-radius: 6px;
    padding: 8px 0;
    margin-bottom: 10px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: var(--pf-fs-base);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-row.highlight {
    font-size: var(--pf-fs-base);
}

.summary-row.savings {
    color: #16a34a;
    font-size: var(--pf-fs-base);
    padding-top: 6px;
    margin-top: 0px;
}

.summary-label {
    color: #64748b;
    font-weight: var(--pf-fw-medium);
}

.summary-row.highlight .summary-label,
.summary-row.savings .summary-label {
    color: #64748b;
}

.summary-value {
    font-weight: normal;
    color: #1e293b;
}

.savings-percent {
    margin-left: 6px;
    font-size: var(--pf-fs-sm);
    color: #16a34a;
    font-weight: bold;
}

.summary-reminder {
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--pf-fs-sm);
    color: #64748b;
    margin-top: 8px;
}

.summary-reminder i {
    color: #64748b;
    font-size: var(--pf-fs-sm);
    flex-shrink: 0;
    margin-top: 2px;
}

.summary-reminder span {
    margin: 0;
    color: #64748b;
}

.summary-reminder strong {
    font-weight: var(--pf-fw-medium);
    color: #1e293b;
}

.auto-submit-option {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

.toggle-label span {
    font-size: var(--pf-fs-base);
    color: #1e40af;
    font-weight: var(--pf-fw-medium);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background-color: #3b82f6;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Status Column Width */
.modal-table th.status-column,
.modal-table td.status-column {
    width: 180px;
}

/* Segmented Control Styles */
.segmented-control {
    display: inline-flex;
    background: #e2e8f0;
    border-radius: 8px;
    padding: 2px;
    gap: 0;
}

.segmented-control .segment {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
    white-space: nowrap;
}

.segmented-control .segment:hover {
    color: #334155;
    background: rgba(255, 255, 255, 0.5);
}

.segmented-control .segment.active {
    background: #ffffff;
    color: #1e40af;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

/* ========== Layout & Navigation Styles ========== */

/* Main Layout */
.pf-layout {
    display: flex;
    min-height: 100vh;
    background: #f3f4f6;
    padding-top: 64px;
}

.pf-main-content {
    flex: 1;
    margin-left: 180px;
    padding: 20px;
    transition: margin-left 0.3s ease;
    overflow-x: hidden;
}

.pf-main-content.sidebar-collapsed {
    margin-left: 70px;
}

/* Top Navigation Bar */
.pf-navbar-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #e0e7ff;
    border-bottom: 1px solid #c7d2fe;
}

.pf-logo {
    height: 40px;
}

/* Company Badge */
.company-badge {
    display: flex;
    align-items: center;
    background-color: #c7d2fe;
    color: #1e3a8a;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--pf-fs-lg);
    font-weight: normal;
    margin-right: 12px;
    white-space: nowrap;
}

.company-badge i {
    font-size: var(--pf-fs-xs);
}

.company-badge-switcher {
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.company-badge-switcher:hover {
    background-color: #a5b4fc;
    color: #1e3a8a;
}

.company-switcher-menu {
    min-width: 250px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    margin-top: 8px;
}

.company-switcher-menu .dropdown-item {
    font-size: 0.875rem;
}

.company-switcher-menu .dropdown-item.active {
    background-color: #eef2ff;
    color: #1e3a8a;
    font-weight: 600;
}

.company-switcher-menu .dropdown-item:hover:not(.active) {
    background-color: #f8fafc;
}

/* PF-5947: Company switcher modal card grid (used when >10 companies). */
.company-card {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    text-align: left;
    cursor: pointer;
}

.company-card:hover {
    border-color: #6366f1;
    background-color: #f5f3ff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.company-card-active {
    border-color: #6366f1;
    background-color: #eef2ff;
}

.company-card-name {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.3;
    color: #1e293b;
}

.company-separator {
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: #a5b4fc;
    margin-right: 16px;
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ef4444;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: var(--pf-fs-2xs);
    font-weight: bold;
    min-width: 18px;
    text-align: center;
}

/* Sidebar Navigation */
.pf-sidebar {
    background: #1e3a8a;
    height: 100vh;
    width: 180px;
    display: flex;
    flex-direction: column;
    padding-top: 76px;
    padding-left: 12px;
    padding-right: 12px;
    position: fixed;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.pf-sidebar.collapsed {
    width: 70px;
}

.pf-sidebar.collapsed .pf-nav-label {
    display: none;
}

.pf-sidebar.collapsed .pf-nav-item {
    justify-content: center;
}

.pf-sidebar.collapsed .pf-nav-item i {
    margin-bottom: 0;
}

.pf-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pf-sidebar-footer {
    padding-bottom: 12px;
}

.pf-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    font-size: var(--pf-fs-xs);
    font-weight: var(--pf-fw-medium);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    width: 100%;
}

.pf-nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
    color: white;
    transform: scale(1.05);
}

.pf-nav-item.active {
    background: white;
    color: #1e3a8a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pf-nav-item.active:hover {
    background: white;
    color: #1e3a8a;
    transform: scale(1.05);
}

.pf-nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.pf-nav-item i {
    font-size: var(--pf-fs-3xl);
    margin-bottom: 6px;
}

.pf-nav-item .pf-nav-icon-wrapper i {
    margin-bottom: 0;
}

.pf-nav-label {
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.pf-badge {
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pf-fs-2xs);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -6px;
}

.pf-nav-item.active .pf-badge {
    background: #dc2626;
}

.pf-nav-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pf-nav-item-disabled:hover {
    background: transparent;
    transform: none;
}

/* Empty Layout */
.empty-layout {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.empty-layout * {
    box-sizing: border-box;
}

/* Settings Sub-Navigation */
.settings-nav {
}

.settings-nav .nav-link {
    color: #4b5563;
    padding: 12px 20px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    border-radius: 0;
}

.settings-nav .nav-link:hover {
    background: #f3f4f6;
    color: #1e3a8a;
}

.settings-nav .nav-link.active {
    background: #e7f2ff;
    color: #1e3a8a;
}

.settings-nav .nav-link:first-child {
    border-top: none;
}

.settings-nav .nav-link:last-child {
    border-bottom: none;
}

.settings-nav .nav-link i {
    width: 20px;
    text-align: center;
    color: #6b7280;
}

.settings-nav .nav-link:hover i,
.settings-nav .nav-link.active i {
    color: #1e3a8a;
}

/* Sub-navigation header with darker background */
.subnav-header {
    background-color: #1565c0 !important;
    color: white !important;
    padding: 12px 20px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
}

.subnav-header h5 {
    color: white !important;
}

/* ========== Avatar & Icon Utilities ========== */

/* Avatar Sizes */
.avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.avatar-m {
    width: 32px;
    height: 32px;
}

.avatar-xl {
    width: 64px;
    height: 64px;
}

/* Avatar with Icons */
.avatar-icon-sm {
    width: 32px;
    height: 32px;
    background-color: #1e3a8a;
}

.avatar-icon-md {
    width: 48px;
    height: 48px;
    background-color: #e7f2ff;
}

/* Background Utilities */
.bg-soft-primary {
    background-color: #e7f2ff;
}

/* Icon Sizes */
.icon-sm {
    font-size: var(--pf-fs-base);
}

.icon-md {
    font-size: var(--pf-fs-lg);
}

.icon-header {
    font-size: var(--pf-fs-xl);
    color: #3b82f6;
}

.icon-white {
    color: white;
}

.icon-blue {
    color: #3b82f6;
}

/* Font Size Utilities */
.fs-10 {
    font-size: var(--pf-fs-2xs);
}

/* ========== Dropdown Utilities ========== */

.dropdown-menu-wide {
    min-width: 280px;
    position: absolute;
    right: 0;
    margin-right: 0;
}

/* ========== Utility Classes ========== */

.min-h-200 {
    min-height: 200px;
}

.min-h-400 {
    min-height: 400px;
}

/* ========== Settings Page Layout ========== */

.settings-subnav-fixed {
    position: fixed;
    left: 180px;
    top: 64px;
    bottom: 0;
    width: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    background: white;
    transition: left 0.3s ease;
    border-right: 3px solid #bdbdbd;
}

.pf-main-content.sidebar-collapsed .settings-subnav-fixed {
    left: 70px;
}

.settings-page-content {
    margin-left: 240px;
    overflow-x: hidden;
}

.sidebar-collapsed .settings-page-content {
    margin-left: 240px;
    overflow-x: hidden;
}

/* Email badge list for invite users modal */
.email-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 40px;
    align-items: center;
}

.email-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #e7f2ff;
    color: #1e3a8a;
    border-radius: 4px;
    font-size: var(--pf-fs-base);
}

.email-badge-remove {
    cursor: pointer;
    font-weight: bold;
    font-size: var(--pf-fs-xl);
    color: #6b7280;
    line-height: 1;
}

.email-badge-remove:hover {
    color: #dc2626;
}

/* ========== Table Column Width Utilities ========== */

.col-w-6 {
    width: 6%;
}

.col-w-8 {
    width: 8%;
}

.col-w-9 {
    width: 9%;
}

.col-w-10 {
    width: 10%;
}

.col-w-12 {
    width: 12%;
}

.col-w-13 {
    width: 13%;
}

.col-w-15 {
    width: 15%;
}

.col-w-16 {
    width: 16%;
}

.col-w-18 {
    width: 18%;
}

.col-w-20 {
    width: 20%;
}

.col-w-70 {
    width: 70%;
}

/* ========== Shipping & Address Styles ========== */

.address-display {
    line-height: 1.6;
}

.empty-state i {
    opacity: 0.5;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.page-info {
    font-weight: var(--pf-fw-medium);
    color: #495057;
}

/* ========== Action Buttons ========== */

.action-btn {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
    font-size: var(--pf-fs-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-btn:not(:first-child) {
    margin-left: 8px;
}

.edit-btn:hover:not(:disabled) {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

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

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-to-order-btn:hover:not(:disabled) {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ========== Watchlist Styles ========== */

.text-gray-800 {
    color: #1e293b;
}

.user-group-container {
    margin-bottom: 24px;
}

.user-group-header {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
    color: #1e293b;
    display: flex;
    align-items: center;
}

.user-group-header i {
    color: #64748b;
}

.user-group-container .watchlist-table-container {
    border-radius: 0 0 8px 8px;
    border-top: none;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}

.empty-state i {
    font-size: var(--pf-fs-7xl);
    margin-bottom: 24px;
    opacity: 0.3;
}

.empty-state h3 {
    margin: 0 0 12px 0;
    color: #475569;
}

.empty-state p {
    margin: 0;
}

.watchlist-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    overflow-x: auto;
}

.watchlist-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.watchlist-table thead {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.watchlist-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--pf-fs-xs);
    font-weight: var(--pf-fw-semibold);
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.watchlist-table td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
}

.row-group:hover tr {
    background: #f8fafc;
}

.forecast-row {
    background: white;
}

.watchlist-row td {
    border-bottom: none;
}

.forecast-row td {
    padding-top: 0;
}

.part-number-cell {
    min-width: 200px;
}

.part-number-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-button {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.copy-button:hover {
    background: #f1f5f9;
    color: #3b82f6;
}

.copy-button:active {
    color: #059669;
}

.part-number-link {
    text-decoration: none;
    flex: 1;
}

.part-number-link:hover .part-number {
    text-decoration: underline;
}

.part-number {
    color: #1e40af;
}

.part-description {
    font-size: var(--pf-fs-base);
    color: #64748b;
    margin-top: 4px;
}

.target-price {
    color: #059669;
}

.no-target {
    color: #94a3b8;
    font-style: italic;
}

.availability-cell {
    min-width: 150px;
}

.score-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--pf-fs-sm);
}

.score-0 {
    background: #fee2e2;
    color: #991b1b;
}

.score-1 {
    background: #fef3c7;
    color: #92400e;
}

.score-2 {
    background: #fef9c3;
    color: #854d0e;
}

.score-3 {
    background: #dbeafe;
    color: #1e40af;
}

.score-4 {
    background: #d1fae5;
    color: #065f46;
}

.score-5 {
    background: #bbf7d0;
    color: #14532d;
}

.availability-qty {
    font-size: var(--pf-fs-xs);
    color: #64748b;
    margin-top: 4px;
}

.no-qty {
    color: #cbd5e1;
}

.forecast-cell {
    padding: 0 16px 16px 16px !important;
    border-bottom: 1px solid #e2e8f0;
}

.forecast-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.forecast-info i {
    color: #3b82f6;
    font-size: var(--pf-fs-2xl);
    margin-top: 2px;
    flex-shrink: 0;
}

.forecast-text {
    color: #1e293b;
    font-size: var(--pf-fs-base);
}

.forecast-date {
    color: #64748b;
    margin-left: auto;
}

/* ========== Auth & Error Pages Styles ========== */

/* Common full-page container styles */
.login-container,
.forgot-password-container,
.reset-password-container,
.inactive-container,
.unauthorized-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #1D3782 0%, #2B4BA3 100%);
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

.forgot-password-container,
.reset-password-container,
.login-container {
    padding: 0;
}

/* Accept invite uses modal structure */
.accept-invite-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #1D3782 0%, #2B4BA3 100%);
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

/* Common card styles */
.login-card,
.forgot-password-card,
.reset-password-card {
    background: white;
    border-radius: 8px;
    padding: 40px;
    width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


.inactive-card,
.unauthorized-card {
    background: white;
    border-radius: 12px;
    padding: 50px 40px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.forgot-password-card.success-state {
    width: 600px;
}

.reset-password-card {
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    padding: 0;
}

/* Headers */
.login-header,
.forgot-password-header {
    text-align: center;
    margin-bottom: 30px;
}

.reset-password-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 40px 40px 0 40px;
}

.login-header h2,
.forgot-password-header h2,
.reset-password-header h2 {
    color: #1D3782;
    margin-bottom: 10px;
    font-weight: var(--pf-fw-semibold);
    font-size: var(--pf-fs-3xl);
}

.login-logo {
    width: 200px;
    height: auto;
    margin-bottom: 8px;
}

.inactive-card h2,
.unauthorized-card h2 {
    color: #1D3782;
    margin-bottom: 25px;
    font-weight: var(--pf-fw-semibold);
    font-size: var(--pf-fs-7xl);
}

.forgot-subtitle,
.reset-subtitle {
    color: #6c757d;
    font-size: var(--pf-fs-base);
    margin-bottom: 20px;
    text-align: center;
}

/* Icons for error pages */
.inactive-icon,
.unauthorized-icon {
    font-size: var(--pf-fs-5xl);
    margin-bottom: 30px;
    animation: pulse 2s ease-in-out infinite;
}

.inactive-icon {
    color: #ffc107;
}

.unauthorized-icon {
    color: #dc3545;
}

.icon-large {
    font-size: var(--pf-fs-7xl);
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Messages */
.inactive-message,
.unauthorized-message {
    margin-bottom: 35px;
    padding: 20px;
    border-radius: 8px;
}

.inactive-message {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.unauthorized-message {
    background: #f8f9fa;
    border-left: 4px solid #dc3545;
}

.inactive-message .lead,
.unauthorized-message .lead {
    font-size: var(--pf-fs-xl);
    margin-bottom: 0;
    color: #333;
}

/* Info/Actions sections */
.inactive-info,
.inactive-actions,
.unauthorized-info,
.unauthorized-actions {
    text-align: left;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.inactive-info h6,
.inactive-actions h6,
.unauthorized-info h6,
.unauthorized-actions h6 {
    color: #1D3782;
    font-weight: var(--pf-fw-semibold);
    margin-bottom: 15px;
    font-size: var(--pf-fs-xl);
}

.inactive-info ul,
.inactive-actions ul,
.unauthorized-info ul,
.unauthorized-actions ul {
    margin: 0;
    padding-left: 20px;
}

.inactive-info li,
.inactive-actions li,
.unauthorized-info li,
.unauthorized-actions li {
    margin-bottom: 8px;
    color: #666;
    line-height: 1.6;
}

/* Form groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: var(--pf-fw-medium);
}

/* Form sections for grouped inputs */
.form-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section-title {
    color: #1D3782;
    font-weight: var(--pf-fw-semibold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.form-section-title i {
    color: #3b82f6;
}

/* Onboarding: installer avatar */
.installer-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}
.installer-avatar-initials {
    background: #1D3782;
    color: white;
    font-size: 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.installer-avatar-photo {
    object-fit: cover;
    border: 3px solid #dee2e6;
}

/* Onboarding: reusable small helpers */
.icon-hero { font-size: 3rem; }

/* Section hero instructions: left-aligned notes beneath the centered icon+title.
   Normal paragraph size (inherits body font-size, not .small). */
.section-hero-instructions { text-align: left; }

/* Operating-hours: two compact tables side by side (Mon-Fri | Sat-Sun). A fixed
   table layout with identical column widths makes both tables line up cleanly so the
   Mon-Fri and Sat-Sun columns align and never butt against each other (the row gutter
   provides the gap between the two halves). */
.hours-table { table-layout: fixed; width: 100%; }
.hours-table th, .hours-table td { padding: 0.25rem 0.4rem; }
.hours-table th { font-size: var(--pf-fs-base); font-weight: var(--pf-fw-semibold); }
.hours-table th:nth-child(1), .hours-table td:nth-child(1) { width: 30%; }
.hours-table th:nth-child(2), .hours-table td:nth-child(2) { width: 14%; }
.hours-table th:nth-child(3), .hours-table td:nth-child(3),
.hours-table th:nth-child(4), .hours-table td:nth-child(4) { width: 28%; }
.hours-time { width: 100%; padding-left: 0.4rem; padding-right: 0.25rem; }

/* Brand primary color (TDS navy). Distinct from Bootstrap's --bs-primary which is
   a lighter blue. Use .text-brand-primary for headings, hero icons, and section
   accents where the TDS brand color is wanted instead of the Bootstrap primary. */
.text-brand-primary { color: #1D3782; }

/* Softened, less-alarming red for informational error states (e.g. the invalid/expired
   onboarding link screen) — calmer than Bootstrap's harsh --bs-danger (#dc3545). */
.text-soft-danger { color: #c9736f; }

/* Card with a brand-colored left accent stripe. Used on the Welcome step's four
   "what to expect" cards to give them a subtle vertical accent without a full
   border. Stays consistent with the brand color used elsewhere on the form. */
.card-accent-brand { border-left: 4px solid #1D3782; }

/* Click-to-select card (Confirm Your Role, Onboarding Mode). A constant 2px border
   keeps the layout stable; the selected card gets the brand border, a faint fill,
   and a focus-style ring so the choice is unmistakable. */
.pf-selectable-card {
    cursor: pointer;
    border: 2px solid var(--bs-border-color, #dee2e6);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.pf-selectable-card:hover { border-color: #1D3782; }
.pf-selectable-card.selected {
    border-color: #1D3782;
    background-color: rgba(29, 55, 130, 0.06);
    box-shadow: 0 0 0 0.2rem rgba(29, 55, 130, 0.25);
}

/* Unified callout for onboarding + meeting picker.
   Used for info hints, errors, success confirmations, loading states, empty
   states, etc. Differentiation is by icon + copy, not by background/border
   color. One class, one style — no alert-info/warning/success variants.

   Padding is deliberately minimal on the left (only the icon width + gap
   visually insets the message) so that the text inside a callout aligns
   with the text of paragraphs/labels rendered above and below it. */
.pf-callout {
    background: #fefefe;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 8px 12px;
    font-size: var(--pf-fs-base);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Multi-line callouts (e.g. error banner with title + buttons) should
   top-align the icon, not center it. Callouts that need this opt in via
   .pf-callout-multiline on the container. */
.pf-callout.pf-callout-multiline {
    align-items: flex-start;
}
.pf-callout > .pf-callout-icon {
    color: var(--bs-primary);
    flex-shrink: 0;
}
/* Semantic color modifiers on the callout container — override the default
   primary icon color for success (green), danger (red), and warning (amber).
   Specificity matches the base .pf-callout > .pf-callout-icon rule (0,2,1 vs
   0,1,1), so these always win the cascade regardless of source order. Use
   these instead of adding .text-success / .text-danger classes directly on
   the icon, which may not beat the base rule's specificity. */
.pf-callout.pf-callout-success > .pf-callout-icon { color: var(--bs-success); }
.pf-callout.pf-callout-danger > .pf-callout-icon { color: var(--bs-danger); }
.pf-callout.pf-callout-warning > .pf-callout-icon { color: var(--bs-warning); }
.pf-callout.pf-callout-multiline > .pf-callout-icon {
    margin-top: 2px;
}
.pf-callout > .pf-callout-body {
    flex-grow: 1;
    min-width: 0;
}
.pf-callout > .pf-callout-dismiss {
    flex-shrink: 0;
    margin-left: auto;
}
.pf-callout-title {
    font-weight: 600;
    display: block;
}
/* Action button inside a callout — sized to match the callout's text line-height
   so it doesn't force the callout container taller. */
.pf-callout-action {
    padding: 2px 10px;
    font-size: var(--pf-fs-base);
    line-height: 1.4;
}

/* Quiet text-link action buttons used beneath lists (e.g., "+ Add another")
   on the Team Invitations step. Matches the slot-nav-link pattern from the
   meeting picker for a consistent secondary-action aesthetic. */
.invite-action-link {
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.invite-action-link:hover:not(:disabled) {
    text-decoration: underline;
}
.invite-action-link:disabled {
    color: #adb5bd;
    pointer-events: none;
}

.form-control:focus {
    border-color: #1D3782;
    box-shadow: 0 0 0 0.2rem rgba(29, 55, 130, 0.25);
}

/* Button groups */
.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Button styles for auth pages */
.btn-login {
    width: 100%;
    padding: 12px;
    background-color: #1D3782;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: var(--pf-fs-base);
    cursor: pointer;
}

.btn-login:hover:not(:disabled) {
    background-color: #152b6b;
}

.btn-login:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.inactive-card .btn-primary:hover,
.unauthorized-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 55, 130, 0.3);
}


.forgot-password-card .btn-primary,
.reset-password-card .btn-success {
    width: 100%;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border: 1px solid #6c757d;
    border-radius: 4px;
    font-size: var(--pf-fs-base);
    cursor: pointer;
    font-weight: var(--pf-fw-medium);
    text-decoration: none;
    text-align: center;
}

.forgot-password-card .btn-outline-secondary,
.reset-password-card .btn-outline-secondary {
    width: 100%;
    padding: 12px;
    display: inline-block;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

.unauthorized-card .btn-outline-secondary {
    border: 2px solid #6c757d;
}

.unauthorized-card .btn-outline-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Inactive/Unauthorized page specific button styles */
.inactive-card .btn,
.unauthorized-card .btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* Alerts */
.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: left;
}

/* Reset password specific */
.reset-password-card .card-body {
    padding: 0 40px 40px 40px;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .inactive-card,
    .unauthorized-card {
        padding: 30px 20px;
    }

    .inactive-card h2,
    .unauthorized-card h2 {
        font-size: var(--pf-fs-3xl);
    }

    .button-group {
        flex-direction: column;
    }

    .button-group .btn {
        width: 100%;
    }
}

/* ========== Transactional Pages Styles ========== */

/* Dashboard card styles */
.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: var(--pf-fs-3xl);
}

.bg-primary-soft {
    background-color: rgba(59, 130, 246, 0.1);
}

.bg-success-soft {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-warning-soft {
    background-color: rgba(245, 158, 11, 0.1);
}

.bg-info-soft {
    background-color: rgba(6, 182, 212, 0.1);
}

.text-primary {
    color: #3b82f6;
}

.text-success {
    color: #10b981;
}

.text-warning {
    color: #f59e0b;
}

.text-info {
    color: #06b6d4;
}

.card {
    transition: box-shadow 0.2s;
}

/* Search results styles */
.search-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px;
    justify-content: center;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.search-results {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 20px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.results-header h3 {
    margin: 0;
    font-size: var(--pf-fs-xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
}

.results-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.results-count {
    color: #64748b;
    font-size: var(--pf-fs-base);
}

.results-cap-message {
    color: #f59e0b;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
}

.results-table thead {
    background: #f8fafc;
}

.results-table th {
    padding: 12px;
    text-align: left;
    font-size: var(--pf-fs-xs);
    font-weight: var(--pf-fw-semibold);
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.results-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: var(--pf-fs-base);
    color: #1e293b;
}

.results-table tbody tr:hover {
    background: #f8fafc;
    cursor: pointer;
}

.part-number {
    color: #1e293b;
}

.description {
    color: #64748b;
}

.availability-score,
.price-range {
    text-align: left;
}

.lowest-price {
    color: #1e293b;
    font-size: var(--pf-fs-base);
}

.results-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.pagination-btn {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--pf-fs-base);
    color: #1e293b;
}

.pagination-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #1e40af;
    color: #1e40af;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    color: #64748b;
    font-size: var(--pf-fs-base);
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.no-results i {
    font-size: var(--pf-fs-7xl);
    margin-bottom: 16px;
    opacity: 0.3;
}

.no-results p {
    font-size: var(--pf-fs-lg);
    margin: 0;
}

.actions-cell {
    text-align: left;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.btn-watch,
.btn-order {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--pf-fs-base);
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-watch:hover {
    background: #f8fafc;
    border-color: #f59e0b;
    color: #f59e0b;
}

.btn-order:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-watch i,
.btn-order i {
    font-size: var(--pf-fs-base);
}

/* Buying/Selling page styles */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px;
}

.loading-state p {
    color: #64748b;
    font-size: var(--pf-fs-lg);
}

.card-mode,
.table-mode {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.order-section {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.section-title {
    font-size: var(--pf-fs-xl);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    margin: 0 0 20px 0;
}

.order-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 12px;
}

.order-card {
    background: white;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    transition: all 0.2s;
    overflow: hidden;
}

.order-card.clickable {
    cursor: pointer;
}

.order-card.clickable:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.order-card.draft {
    border-left: 4px solid #f59e0b;
}

.order-card.processing {
    border-left: 4px solid #3b82f6;
}

.order-card.pending {
    border-left: 4px solid #f59e0b;
}

.order-card.awaiting-approval {
    border-left: 4px solid #f59e0b;
}

.order-card.shipped {
    border-left: 4px solid #06b6d4;
}

.order-card.received {
    border-left: 4px solid #8b5cf6;
}

.order-card.completed {
    border-left: 4px solid #10b981;
}

/* Hint Card - "Looking for More Orders?" */
.order-card.hint-card {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
}

.order-card.hint-card:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* Order Count Badge - Outline style for scope toggle buttons */
.order-count-badge {
    background: transparent;
    border: 1px solid #60a5fa;
    color: #3b82f6;
    font-weight: 500;
}

.btn-primary .order-count-badge {
    border-color: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.9);
}

/* Grace Period - Undo Available Card */
.order-card.grace-period {
    border: 2px solid #f59e0b;
    animation: grace-period-pulse 2s ease-in-out infinite;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.order-card.grace-period:hover {
    border-color: #d97706;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

@keyframes grace-period-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
    }
}

.countdown-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f59e0b;
    color: white;
}

.status-badge.status-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

/* Grace Period Modal Styles */
.grace-period-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.grace-period-header h3 {
    color: white;
}

.grace-period-header .modal-close {
    color: white;
}

.grace-period-countdown {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    margin-bottom: 20px;
}

.countdown-icon {
    font-size: 2.5rem;
    color: #d97706;
    animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.countdown-text {
    display: flex;
    flex-direction: column;
}

.countdown-label {
    font-size: 0.875rem;
    color: #92400e;
    font-weight: 500;
}

.countdown-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #d97706;
    font-variant-numeric: tabular-nums;
}

.order-card .card-header {
    padding: 12px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-reference {
    font-size: var(--pf-fs-lg);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
}

.badge-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.type-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
}

.type-badge.type-buying {
    background: #e0e7ff;
    color: #3730a3;
}

.type-badge.type-selling {
    background: #ecfccb;
    color: #3f6212;
}

.order-card .card-body {
    padding: 12px;
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.info-row .label {
    color: #64748b;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
}

.info-row .value {
    color: #1e293b;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-normal);
    text-align: right;
    max-width: 60%;
}

.info-row .value.total {
    font-weight: var(--pf-fw-semibold);
    color: #16a34a;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.order-table thead {
    background: #f8fafc;
}

.order-table th {
    padding: 12px;
    text-align: left;
    font-size: var(--pf-fs-xs);
    font-weight: var(--pf-fw-semibold);
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.order-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: var(--pf-fs-base);
    color: #1e293b;
}

.order-table tbody tr:hover {
    background: #f8fafc;
}

.order-table .text-end {
    text-align: right;
}

.order-table .savings {
    color: #16a34a;
    font-weight: var(--pf-fw-semibold);
}

.comment-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

/* Document Display (Invoice/Credit Memo) */
.document-display {
    text-align: center;
    padding: 40px 20px;
}

.document-icon {
    margin-bottom: 24px;
}

.document-icon i {
    font-size: 72px;
    color: var(--pf-color-primary);
}

.document-info {
    margin-bottom: 24px;
}

.document-reference {
    font-size: 24px;
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    margin-bottom: 8px;
}

.document-date {
    font-size: 14px;
    color: #64748b;
}

.empty-state i {
    font-size: var(--pf-fs-7xl);
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: var(--pf-fs-2xl);
    margin: 0 0 8px 0;
    color: #1e293b;
}

.empty-state p {
    font-size: var(--pf-fs-lg);
    margin: 0;
}

/* ========== Component Styles ========== */

/* OrderDetailModal specific styles */
.savings-text {
    color: #10b981;
}

.totals-row-border {
    border-top: 2px solid #dee2e6;
}

.grand-total-label {
    font-weight: var(--pf-fw-semibold);
}

.grand-total-value {
    font-weight: var(--pf-fw-semibold);
    color: #3b82f6;
}

/* ApiHealthOverlay styles */
.api-health-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.health-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    margin: 20px;
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.health-modal-content {
    padding: 40px;
    text-align: center;
}

.health-icon {
    font-size: var(--pf-fs-7xl);
    color: #dc3545;
    margin-bottom: 20px;
}

.health-modal h3 {
    color: #333;
    margin-bottom: 20px;
    font-weight: var(--pf-fw-semibold);
    font-size: var(--pf-fs-3xl);
}

.health-details {
    margin-bottom: 30px;
}

.error-message {
    color: #dc3545;
    font-weight: var(--pf-fw-medium);
    margin-bottom: 10px;
    font-size: var(--pf-fs-lg);
}

.failure-count {
    color: #6c757d;
    font-size: var(--pf-fs-md);
    margin-bottom: 5px;
}

.last-check {
    color: #6c757d;
    font-size: var(--pf-fs-md);
    margin-bottom: 0;
}

.health-actions {
    margin-bottom: 20px;
}

.retry-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6c757d;
}

.health-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: var(--pf-fs-lg);
    font-weight: var(--pf-fw-medium);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.health-btn:hover {
    background-color: #0056b3;
}

.health-btn:active {
    transform: translateY(1px);
}

.health-info {
    border-top: 1px solid #e9ecef;
    padding-top: 20px;
    margin-top: 20px;
}

/* AuthenticationWrapper styles */
.auth-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

/* Breadcrumb styles */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: var(--pf-fs-base);
}

.breadcrumb-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.breadcrumb-separator {
    color: #94a3b8;
    user-select: none;
}

.breadcrumb-current {
    color: #64748b;
    font-weight: var(--pf-fw-medium);
}

/* NotificationPanel styles */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1040;
}

.notification-panel {
    position: fixed;
    top: 0;
    right: -25%;
    width: 25%;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.notification-panel.open {
    right: 0;
}

.notification-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.notification-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.notification-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.notification-acknowledge-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border: none;
    background: #10b981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--pf-fs-base);
    z-index: 2;
}

.notification-acknowledge-btn:hover {
    background: #059669;
    transform: scale(1.1);
}

.notification-acknowledge-btn:active {
    transform: scale(0.95);
}

.notification-content {
    padding-right: 2rem;
}

.notification-content.clickable {
    cursor: pointer;
}

.notification-content.clickable:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.notification-type-badge {
    font-size: var(--pf-fs-sm);
    padding: 0.25rem 0.5rem;
    display: inline-block;
}

.notification-message {
    color: #1e293b;
    line-height: 1.5;
    word-break: break-word;
}

.notification-time {
    font-size: var(--pf-fs-sm);
}

.notification-footer {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background: white;
}

/* Responsive - NotificationPanel */
@media (max-width: 1200px) {
    .notification-panel {
        width: 33.333%;
        right: -33.333%;
    }
}

@media (max-width: 768px) {
    .notification-panel {
        width: 100%;
        right: -100%;
    }
}

/* SearchBar styles */
.search-container {
    margin-bottom: 32px;
}

.search-label {
    display: block;
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-medium);
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-box {
    display: flex;
    width: 100%;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

.search-box:focus-within {
    box-shadow: 0 4px 8px rgba(30, 64, 175, 0.15);
    border-color: #1e40af;
}

.search-input {
    flex: 1;
    border: none;
    padding: 16px 20px;
    font-size: var(--pf-fs-lg);
    outline: none;
}

.search-input:first-child {
    border-radius: 8px 0 0 8px;
}

.search-input::placeholder {
    color: #94a3b8;
}

.search-button {
    background: #1e40af;
    color: white;
    border: none;
    padding: 0 24px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
}

.search-button:hover {
    background: #1d4ed8;
}

.search-button i {
    font-size: var(--pf-fs-base);
}

/* Search scope dropdown styles */
.search-scope-dropdown {
    position: relative;
    border-right: 1px solid #e2e8f0;
}

.search-scope-button {
    background: white;
    border: none;
    padding: 16px 16px;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-medium);
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    border-radius: 8px 0 0 8px;
}

.search-scope-button:hover {
    background-color: #f9fafb;
}

.search-scope-button i {
    font-size: 10px;
    color: #6b7280;
}

.search-scope-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    margin-top: 4px;
}

.search-scope-item {
    display: block;
    padding: 12px 16px;
    font-size: var(--pf-fs-sm);
    color: #374151;
    text-decoration: none;
    cursor: pointer;
}

.search-scope-item:hover {
    background-color: #f1f5f9;
}

.search-scope-item.active {
    background-color: #1e40af;
    color: white;
}

.search-scope-item:first-child {
    border-radius: 8px 8px 0 0;
}

.search-scope-item:last-child {
    border-radius: 0 0 8px 8px;
}

/* MudDataGrid Customization for Buying/Selling Tables */
.buying-orders-grid .mud-table-root,
.selling-fulfillments-grid .mud-table-root {
    border-radius: 0.5rem;
    box-shadow: var(--pf-client-shadow-sm);
}

.buying-orders-grid .mud-table-head,
.selling-fulfillments-grid .mud-table-head {
    background-color: var(--pf-client-gray-100);
}

.buying-orders-grid .mud-table-cell,
.selling-fulfillments-grid .mud-table-cell {
    padding: 0.75rem;
}

.buying-orders-grid .mud-table-filter-row,
.selling-fulfillments-grid .mud-table-filter-row {
    background-color: var(--pf-client-gray-50);
}

/* Ensure badges work in grid cells */
.mud-table-cell .status-badge,
.mud-table-cell .type-badge {
    display: inline-block;
}

/* Row-action column shared by every PfClient grid: one min width (sized to the standard
   Edit + Delete pair) so Actions cells align across grids instead of flexing per page. */
.pf-actions-col {
    min-width: 180px;
    white-space: nowrap;
}

/* Wide grids (reports) scroll horizontally instead of clipping their right-most columns. */
.pf-server-grid .mud-table-container {
    overflow-x: auto;
}

/* Headers render on one line in every grid; wide tables scroll instead of wrapping titles. */
.pf-server-grid .mud-table-cell .column-header,
.buying-orders-grid .mud-table-cell .column-header,
.selling-fulfillments-grid .mud-table-cell .column-header {
    white-space: nowrap;
}

/* ─── Pricing Plans Modal ─────────────────────────────────────── */

.plans-info-banner {
    margin-bottom: 16px;
    font-size: var(--pf-fs-sm);
    border-radius: 6px;
    padding: 10px 14px;
}



.plan-badge {
    display: inline-block;
    font-size: var(--pf-fs-2xs);
    font-weight: var(--pf-fw-semibold);
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 4px;
    letter-spacing: 0.03em;
}

.plan-badge-tds {
    background: #1e293b;
    color: white;
}

.plan-badge-global {
    background: #dbeafe;
    color: #1e40af;
}

.plan-badge-custom {
    background: #d1fae5;
    color: #065f46;
}

.plan-badge-readonly {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}



.plan-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 12px;
}

.plan-detail-name {
    font-size: var(--pf-fs-lg);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    line-height: 1.3;
}

.plan-detail-desc {
    font-size: var(--pf-fs-sm);
    color: #64748b;
    margin-top: 3px;
}

.plan-detail-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.plan-basis-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    font-size: var(--pf-fs-sm);
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.plan-basis-label {
    font-weight: var(--pf-fw-semibold);
    color: #374151;
    white-space: nowrap;
}

.plan-basis-value {
    color: #1e293b;
}

.plan-basis-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #374151;
}

.plan-basis-option input[type="radio"] {
    cursor: pointer;
}

.plan-basis-option input[type="radio"]:disabled {
    cursor: default;
    opacity: 0.5;
}

/* 4-column grid for the month table */
.plan-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.plan-month-col {
    display: flex;
    flex-direction: column;
}

.plan-month-col-header {
    display: flex;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-semibold);
    color: #64748b;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2px;
}

.plan-month-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px;
    border-radius: 4px;
}

.plan-month-row:nth-child(even) {
    background: #f8fafc;
}

.plan-month-label {
    font-size: var(--pf-fs-base);
    color: #374151;
    font-weight: var(--pf-fw-medium);
    min-width: 24px;
}

.plan-month-value {
    width: 65px;
    font-size: var(--pf-fs-base);
    text-align: right;
    color: #1e293b;
    padding: 2px 4px;
    font-variant-numeric: tabular-nums;
}

.plan-month-input {
    width: 65px;
    font-size: var(--pf-fs-base);
    padding: 2px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    text-align: right;
    color: #1e293b;
    background: white;
    -moz-appearance: textfield;
}

.plan-month-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.plan-detail-section {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.plan-detail-section.plan-detail-editing {
    background: #f0f9ff;
    border-color: #bae6fd;
}

/* Create plan form fields */
.create-step .form-field-group {
    margin-bottom: 18px;
}

.create-step .form-label {
    display: block;
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-semibold);
    color: #374151;
    margin-bottom: 6px;
}

.create-step .form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: var(--pf-fs-base);
    color: #1e293b;
    background: white;
    box-sizing: border-box;
}

.create-step .form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.field-hint {
    font-size: var(--pf-fs-sm);
    color: #64748b;
    margin-bottom: 10px;
}

/* Plan selector dropdown */
.plan-selector {
    position: relative;
    margin-bottom: 16px;
}

.plan-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    gap: 12px;
    transition: border-color 0.15s;
}

.plan-selector-trigger:hover {
    border-color: #94a3b8;
}

.plan-selector-trigger.open {
    border-color: #3b82f6;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.plan-selector-trigger-content {
    flex: 1;
    min-width: 0;
}

.plan-selector-placeholder {
    color: #94a3b8;
    font-size: var(--pf-fs-sm);
}

.plan-selector-name {
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-selector-desc {
    font-size: var(--pf-fs-xs);
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-selector-arrow {
    color: #64748b;
    font-size: var(--pf-fs-xs);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.plan-selector-trigger.open .plan-selector-arrow {
    transform: rotate(180deg);
}

.plan-selector-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #3b82f6;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.plan-selector-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    text-align: left;
    gap: 12px;
    transition: background 0.1s;
}

.plan-selector-item:last-child {
    border-bottom: none;
}

.plan-selector-item:hover {
    background: #f8fafc;
}

.plan-selector-item.active {
    background: #eff6ff;
}

.plan-selector-item-text {
    flex: 1;
    min-width: 0;
}

.plan-selector-item-name {
    font-size: var(--pf-fs-sm);
    font-weight: var(--pf-fw-semibold);
    color: #1e293b;
    line-height: 1.3;
}

.plan-selector-item-desc {
    font-size: var(--pf-fs-xs);
    color: #64748b;
    line-height: 1.4;
    margin-top: 2px;
}

.plan-selector-item-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}