/* /Components/Authorization/PortalAuthorizeView.razor.rz.scp.css */
/* Portal Access Denied */
.portal-access-denied[b-tccvsa8zi0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 2rem;
}

.access-denied-icon[b-tccvsa8zi0] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5f5;
    border-radius: 50%;
    color: #dc3545;
    margin-bottom: 1.5rem;
}

.portal-access-denied h3[b-tccvsa8zi0] {
    margin: 0 0 0.5rem 0;
    color: #dc3545;
    font-size: 1.25rem;
    font-weight: 600;
}

.portal-access-denied p[b-tccvsa8zi0] {
    margin: 0 0 1rem 0;
    color: #6c757d;
    max-width: 400px;
}

.denied-message[b-tccvsa8zi0] {
    font-size: 0.875rem;
    color: #495057;
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 6px;
    border-left: 4px solid #dc3545;
}

/* Portal Authorizing */
.portal-authorizing[b-tccvsa8zi0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    padding: 2rem;
}

/* Old spinner styles removed - using LfzSpinner component instead */

.portal-authorizing p[b-tccvsa8zi0] {
    margin: 0;
    color: #6c757d;
    font-size: 0.875rem;
}
/* /Components/Common/ContactPopover.razor.rz.scp.css */
/* ContactPopover — inline contact card.
   Lives inside the row's `-info` column. Collapsed state has zero height
   and zero padding so it takes no visual space; on parent-row hover
   (rule lives in the host's CSS via ::deep) the card animates open with
   height + opacity + padding + margin transitions for a clean reveal.

   Brand alignment: navy `#001F57` for icons + accent border, off-white
   gradient surface so the card reads as elevated against the row's flat
   background. */

.contact-card[b-kcu1m7oyru] {
    /* ── Collapsed state (default) ───────────────────────────────────── */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    padding: 0 12px;            /* keeps horizontal padding so transition
                                   feels uniform when expanding */

    /* ── Card visual styling (visible on expansion) ──────────────────── */
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    border: 1px solid rgba(0, 31, 87, 0.14);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;

    /* Match the rest of the page's hover easing (cubic-bezier(0.16,1,.3,1)
       is the brand "smooth-out" curve used elsewhere in the wizard +
       org-card animations). */
    transition:
        max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        opacity    0.20s cubic-bezier(0.16, 1, 0.3, 1),
        margin-top 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        padding    0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* One row inside the card: icon | LABEL | value */
.contact-line[b-kcu1m7oyru] {
    display: grid;
    grid-template-columns: 16px 50px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #1e293b;
    min-width: 0;     /* lets the value column ellipsis correctly */
}

/* Brand-navy icon. `currentColor` lets the SVG inherit. */
.contact-icon[b-kcu1m7oyru] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #001F57;     /* OnePortal brand primary */
    flex-shrink: 0;
}

/* "PHONE" / "EMAIL" — small all-caps eyebrow */
.contact-label[b-kcu1m7oyru] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 700;
}

.contact-value[b-kcu1m7oyru] {
    color: #0f172a;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Not available" — muted + italic so it reads as absent data, not as a
   real value. Same treatment whether the missing field is phone or email. */
.contact-value.is-missing[b-kcu1m7oyru] {
    color: #94a3b8;
    font-style: italic;
    font-weight: 500;
}
/* /Components/Common/DonutChart.razor.rz.scp.css */
.donut-chart-container[b-fn9nqlsxca] {
    background-color: transparent;
    border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
}

.chart-title[b-fn9nqlsxca] {
    font-size: 18px;
    font-weight: 700;
    color: #141414;
    margin: 0 0 15px 0;
    text-align: center;
    display: block;
    visibility: visible;
    opacity: 1;
}

.chart-wrapper[b-fn9nqlsxca] {
    flex: 1;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-chart-canvas[b-fn9nqlsxca] {
    max-width: 100%;
    max-height: 100%;
}

.chart-legend[b-fn9nqlsxca] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-primary, #e5e7eb);
}

.legend-item[b-fn9nqlsxca] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.legend-color[b-fn9nqlsxca] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.legend-label[b-fn9nqlsxca] {
    color: #141414;
    font-weight: 500;
}

/* /Components/Common/PasskeyModal.razor.rz.scp.css */
.passkey-modal-overlay[b-fa1iyd8xdk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.passkey-modal[b-fa1iyd8xdk] {
    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);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-fa1iyd8xdk 0.3s ease-out;
}

@keyframes modalSlideIn-b-fa1iyd8xdk {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.passkey-modal-header[b-fa1iyd8xdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.passkey-modal-header h3[b-fa1iyd8xdk] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.passkey-modal-close[b-fa1iyd8xdk] {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.passkey-modal-close:hover[b-fa1iyd8xdk] {
    background: #f3f4f6;
    color: #374151;
}

.passkey-modal-body[b-fa1iyd8xdk] {
    padding: 24px;
}

.passkey-step[b-fa1iyd8xdk] {
    text-align: center;
}

.passkey-spinner[b-fa1iyd8xdk] {
    margin: 0 auto 16px;
    width: 40px;
    height: 40px;
}

.spinner[b-fa1iyd8xdk] {
    width: 100%;
    height: 100%;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-fa1iyd8xdk 1s linear infinite;
}

.spinner-sm[b-fa1iyd8xdk] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-fa1iyd8xdk 1s linear infinite;
    margin-right: 8px;
}

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

.passkey-icon[b-fa1iyd8xdk] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #3b82f6;
}

.passkey-icon.error[b-fa1iyd8xdk] {
    background: #fef2f2;
    color: #ef4444;
}

.passkey-step h4[b-fa1iyd8xdk] {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.passkey-step p[b-fa1iyd8xdk] {
    margin: 0 0 24px;
    color: #6b7280;
    line-height: 1.5;
}

.passkey-step.error h4[b-fa1iyd8xdk] {
    color: #ef4444;
}

.passkey-step.error p[b-fa1iyd8xdk] {
    color: #dc2626;
}

.qr-section[b-fa1iyd8xdk] {
    margin: 24px 0;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
}

.qr-instruction[b-fa1iyd8xdk] {
    margin-top: 12px !important;
    font-size: 14px;
    color: #6b7280;
}

.passkey-options[b-fa1iyd8xdk] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
}

.passkey-option[b-fa1iyd8xdk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 500;
    color: #374151;
}

.passkey-option:hover[b-fa1iyd8xdk] {
    border-color: #3b82f6;
    background: #f8fafc;
}

.passkey-option.platform[b-fa1iyd8xdk] {
    border-color: #10b981;
}

.passkey-option.platform:hover[b-fa1iyd8xdk] {
    border-color: #059669;
    background: #ecfdf5;
}

.passkey-option.cross-platform[b-fa1iyd8xdk] {
    border-color: #8b5cf6;
}

.passkey-option.cross-platform:hover[b-fa1iyd8xdk] {
    border-color: #7c3aed;
    background: #faf5ff;
}

.passkey-option i[b-fa1iyd8xdk] {
    font-size: 20px;
}

.passkey-benefits[b-fa1iyd8xdk] {
    margin: 24px 0;
    text-align: left;
}

.benefit[b-fa1iyd8xdk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    color: #6b7280;
    font-size: 14px;
}

.benefit i[b-fa1iyd8xdk] {
    color: #10b981;
    font-size: 16px;
}

.passkey-actions[b-fa1iyd8xdk] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.btn[b-fa1iyd8xdk] {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

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

.btn-primary[b-fa1iyd8xdk] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-fa1iyd8xdk] {
    background: #2563eb;
}

.btn-secondary[b-fa1iyd8xdk] {
    background: #f3f4f6;
    color: #374151;
}

.btn-secondary:hover:not(:disabled)[b-fa1iyd8xdk] {
    background: #e5e7eb;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .passkey-modal[b-fa1iyd8xdk] {
        background: #1f2937;
        color: #f9fafb;
    }
    
    .passkey-modal-header h3[b-fa1iyd8xdk] {
        color: #f9fafb;
    }
    
    .passkey-modal-close[b-fa1iyd8xdk] {
        color: #9ca3af;
    }
    
    .passkey-modal-close:hover[b-fa1iyd8xdk] {
        background: #374151;
        color: #d1d5db;
    }
    
    .passkey-step h4[b-fa1iyd8xdk] {
        color: #f9fafb;
    }
    
    .passkey-step p[b-fa1iyd8xdk] {
        color: #d1d5db;
    }
    
    .passkey-icon[b-fa1iyd8xdk] {
        background: #374151;
        color: #60a5fa;
    }
    
    .passkey-icon.error[b-fa1iyd8xdk] {
        background: #7f1d1d;
        color: #f87171;
    }
    
    .passkey-step.error h4[b-fa1iyd8xdk] {
        color: #f87171;
    }
    
    .passkey-step.error p[b-fa1iyd8xdk] {
        color: #fca5a5;
    }
    
    .qr-section[b-fa1iyd8xdk] {
        background: #374151;
    }
    
    .qr-instruction[b-fa1iyd8xdk] {
        color: #d1d5db;
    }
    
    .passkey-option[b-fa1iyd8xdk] {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .passkey-option:hover[b-fa1iyd8xdk] {
        background: #4b5563;
    }
    
    .passkey-option.platform:hover[b-fa1iyd8xdk] {
        background: #064e3b;
    }
    
    .passkey-option.cross-platform:hover[b-fa1iyd8xdk] {
        background: #581c87;
    }
    
    .benefit[b-fa1iyd8xdk] {
        color: #d1d5db;
    }
    
    .btn-secondary[b-fa1iyd8xdk] {
        background: #4b5563;
        color: #f9fafb;
    }
    
    .btn-secondary:hover:not(:disabled)[b-fa1iyd8xdk] {
        background: #6b7280;
    }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .passkey-modal[b-fa1iyd8xdk] {
        margin: 16px;
        width: calc(100% - 32px);
    }
    
    .passkey-modal-header[b-fa1iyd8xdk],
    .passkey-modal-body[b-fa1iyd8xdk] {
        padding: 20px;
    }
    
    .passkey-actions[b-fa1iyd8xdk] {
        flex-direction: column;
    }
    
    .btn[b-fa1iyd8xdk] {
        width: 100%;
    }
}
/* /Components/Common/PasskeySetupWizard.razor.rz.scp.css */
/* Passkey Setup Wizard Styles */
.passkey-wizard-overlay[b-qx04fcn8ja] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.passkey-wizard[b-qx04fcn8ja] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn-b-qx04fcn8ja 0.3s ease-out;
}

@keyframes slideIn-b-qx04fcn8ja {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.passkey-wizard-header[b-qx04fcn8ja] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.wizard-title[b-qx04fcn8ja] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.title-icon[b-qx04fcn8ja] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.title-text h3[b-qx04fcn8ja] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.title-text p[b-qx04fcn8ja] {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.wizard-close[b-qx04fcn8ja] {
    background: none;
    border: none;
    color: #6b7280;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-close:hover[b-qx04fcn8ja] {
    background: #e5e7eb;
    color: #374151;
}

.passkey-wizard-body[b-qx04fcn8ja] {
    padding: 2rem;
    max-height: 60vh;
    overflow-y: auto;
}

.wizard-step[b-qx04fcn8ja] {
    text-align: center;
}

.step-icon[b-qx04fcn8ja] {
    margin: 0 auto 1.5rem;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
}

.step-icon.success[b-qx04fcn8ja] {
    background: #dcfce7;
    color: #16a34a;
}

.step-icon.error[b-qx04fcn8ja] {
    background: #fef2f2;
    color: #dc2626;
}

.step-spinner[b-qx04fcn8ja] {
    margin: 0 auto 1.5rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner[b-qx04fcn8ja] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-qx04fcn8ja 1s linear infinite;
}

.spinner-sm[b-qx04fcn8ja] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-qx04fcn8ja 1s linear infinite;
    display: inline-block;
    margin-right: 0.5rem;
}

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

.wizard-step h4[b-qx04fcn8ja] {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
}

.step-description[b-qx04fcn8ja] {
    margin: 0 0 2rem 0;
    color: #6b7280;
    line-height: 1.6;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.benefits-grid[b-qx04fcn8ja] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0;
    text-align: left;
}

.benefit-item[b-qx04fcn8ja] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.benefit-icon[b-qx04fcn8ja] {
    width: 40px;
    height: 40px;
    background: #dbeafe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.benefit-text[b-qx04fcn8ja] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.benefit-text strong[b-qx04fcn8ja] {
    font-weight: 600;
    color: #111827;
}

.benefit-text span[b-qx04fcn8ja] {
    font-size: 0.875rem;
    color: #6b7280;
}

.input-group[b-qx04fcn8ja] {
    text-align: left;
    margin: 2rem 0;
}

.input-group label[b-qx04fcn8ja] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-input[b-qx04fcn8ja] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus[b-qx04fcn8ja] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.input-hint[b-qx04fcn8ja] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.device-prompt[b-qx04fcn8ja] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    margin: 2rem 0;
}

.prompt-icon[b-qx04fcn8ja] {
    color: #0284c7;
}

.device-prompt p[b-qx04fcn8ja] {
    margin: 0;
    color: #0c4a6e;
    font-weight: 500;
}

.success-details[b-qx04fcn8ja] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 2rem 0;
    text-align: left;
}

.detail-item[b-qx04fcn8ja] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
}

.detail-item svg[b-qx04fcn8ja] {
    color: #16a34a;
    flex-shrink: 0;
}

.wizard-actions[b-qx04fcn8ja] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.btn[b-qx04fcn8ja] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

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

.btn-primary[b-qx04fcn8ja] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-qx04fcn8ja] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
}

.btn-secondary[b-qx04fcn8ja] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover:not(:disabled)[b-qx04fcn8ja] {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 640px) {
    .passkey-wizard[b-qx04fcn8ja] {
        width: 95%;
        margin: 1rem;
    }
    
    .passkey-wizard-header[b-qx04fcn8ja] {
        padding: 1rem;
    }
    
    .passkey-wizard-body[b-qx04fcn8ja] {
        padding: 1.5rem;
    }
    
    .wizard-actions[b-qx04fcn8ja] {
        flex-direction: column;
    }
    
    .btn[b-qx04fcn8ja] {
        width: 100%;
        justify-content: center;
    }
    
    .benefits-grid[b-qx04fcn8ja] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Common/ProfileImageModal.razor.rz.scp.css */
/* Profile Image Modal — themed via /wwwroot/css/themes.css vars.
   Scoped by Blazor CSS isolation to ProfileImageModal.razor only. */

.pi-modal-backdrop[b-p62sjgkjkd] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    animation: piFade-b-p62sjgkjkd 0.18s ease;
}

@keyframes piFade-b-p62sjgkjkd { from { opacity: 0; } to { opacity: 1; } }

.pi-modal[b-p62sjgkjkd] {
    width: min(440px, 92vw);
    max-height: 92vh;
    overflow-y: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 32px rgba(15, 23, 42, 0.18),
        0 24px 56px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    animation: piIn-b-p62sjgkjkd 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes piIn-b-p62sjgkjkd {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pi-modal-hd[b-p62sjgkjkd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-primary);
}

.pi-modal-hd h3[b-p62sjgkjkd] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.pi-icon[b-p62sjgkjkd] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pi-icon:hover[b-p62sjgkjkd] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.pi-modal-body[b-p62sjgkjkd] {
    padding: 24px 22px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Circular preview — 160px, gradient ring around the image to match the
   premium feel of the org-chart avatars elsewhere in the app. */
.pi-preview-wrap[b-p62sjgkjkd] {
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.22);
}

.pi-preview[b-p62sjgkjkd] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 4px solid var(--card-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    user-select: none;
}

.pi-preview img[b-p62sjgkjkd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pi-initials[b-p62sjgkjkd] {
    font-size: 56px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.pi-hint[b-p62sjgkjkd] {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 8px;
    text-align: center;
}

.pi-actions[b-p62sjgkjkd] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 8px;
}

.pi-alert[b-p62sjgkjkd] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.pi-alert-error[b-p62sjgkjkd] {
    background-color: rgba(239, 68, 68, 0.10);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.pi-modal-ft[b-p62sjgkjkd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
}

/* Buttons — same family as the Divisions admin page so the look is consistent
   across all admin modals. */

.pi-btn[b-p62sjgkjkd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.15s ease,
                box-shadow 0.15s ease;
    line-height: 1.2;
    white-space: nowrap;
}

.pi-btn:disabled[b-p62sjgkjkd] { cursor: not-allowed; opacity: 0.55; }

.pi-btn-primary[b-p62sjgkjkd] {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.32);
}

.pi-btn-primary:hover:not(:disabled)[b-p62sjgkjkd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.42);
}

.pi-btn-outline[b-p62sjgkjkd] {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.pi-btn-outline:hover:not(:disabled)[b-p62sjgkjkd] {
    background-color: var(--bg-secondary);
}

.pi-btn-danger-outline[b-p62sjgkjkd] {
    background: transparent;
    color: var(--error);
    border-color: var(--error);
}

.pi-btn-danger-outline:hover:not(:disabled)[b-p62sjgkjkd] {
    background-color: var(--error);
    color: #ffffff;
}

/* The InputFile is hidden but its parent <label> is the visible button — make
   the whole label clickable so the click target matches the styled button. */
.pi-file-btn[b-p62sjgkjkd] {
    cursor: pointer;
    user-select: none;
}

.pi-file-btn:has(input:disabled)[b-p62sjgkjkd] {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 480px) {
    .pi-modal[b-p62sjgkjkd] { width: 95vw; }
    .pi-preview-wrap[b-p62sjgkjkd] { padding: 3px; }
    .pi-preview[b-p62sjgkjkd] { width: 140px; height: 140px; }
    .pi-initials[b-p62sjgkjkd] { font-size: 48px; }
}
/* /Components/Common/SearchableSelect.razor.rz.scp.css */
.autocomplete-container[b-257ktroxdd] {
    position: relative;
    width: 100%;
}

.autocomplete-input[b-257ktroxdd] {
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--card-bg, #fff);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.autocomplete-input:focus[b-257ktroxdd] {
    border-color: var(--input-focus, #3b82f6);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.autocomplete-input:disabled[b-257ktroxdd] {
    background: var(--bg-primary, #f9fafb);
    color: var(--text-secondary, #9ca3af);
    cursor: not-allowed;
    opacity: 0.7;
}

.autocomplete-dropdown[b-257ktroxdd] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 9999;
}

.autocomplete-item[b-257ktroxdd] {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-primary, #f3f4f6);
    transition: background 0.12s;
}

.autocomplete-item:last-child[b-257ktroxdd] { border-bottom: none; }

.autocomplete-item:hover[b-257ktroxdd],
.autocomplete-item.highlighted[b-257ktroxdd] {
    background: var(--bg-primary, #f0f7ff);
}

.autocomplete-item.no-results[b-257ktroxdd] {
    color: var(--text-secondary, #9ca3af);
    cursor: default;
    font-style: italic;
}

.autocomplete-item .user-name[b-257ktroxdd] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 2px;
}

.autocomplete-item .user-email[b-257ktroxdd] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
/* /Components/Common/SharedHeader.razor.rz.scp.css */
/* TeleportHQ Page Header Bar */
.tp-hdr[b-7crboq1cxl] {
    background: #001F57;                      /* Teleport navy */
    border: 1px solid rgba(0, 9, 26, 0.06);
    border-radius: 30px;
    margin: 16px 40px;                        /* add breathing room around the bar */
}
.tp-hdr-inner[b-7crboq1cxl] {
    height: 72px;                             /* slightly shorter header */
    padding: 16px 24px;                       /* reduce internal padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tp-hdr-left[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-icon-btn[b-7crboq1cxl] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
}

.home-icon-btn:hover[b-7crboq1cxl] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.home-icon-btn svg[b-7crboq1cxl] {
    width: 24px;
    height: 24px;
}
.tp-hdr-title[b-7crboq1cxl] {
    margin: 0;
    font-family: "Ubuntu", "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;                          /* reduce title size to match proportion */
    line-height: 1;
    color: #FFFFFF;
}
.tp-hdr-username[b-7crboq1cxl] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;
}

.user-profile[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.user-avatar-dropdown[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.user-avatar-dropdown:hover[b-7crboq1cxl] {
    background-color: rgba(255,255,255,0.08);
}

.user-avatar[b-7crboq1cxl] {
    width: 47px;
    height: 47px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001F57;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;     /* clip the <img> to the circle */
}

/* When the user has uploaded a photo, an <img> replaces the initials span.
   object-fit: cover guarantees the photo fills the circle without distortion
   no matter the source aspect ratio. */
.avatar-image[b-7crboq1cxl] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.user-dropdown-menu[b-7crboq1cxl] {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 200px;
    z-index: 1000;
    margin-top: 8px;
    border: 1px solid var(--border-primary);
    backdrop-filter: blur(10px);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.2s ease;
}

.dropdown-item[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
    border-radius: 0;
}

.dropdown-item:hover[b-7crboq1cxl] {
    background-color: var(--bg-secondary);
}

.dropdown-item svg[b-7crboq1cxl] {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.dropdown-divider[b-7crboq1cxl] {
    height: 1px;
    background-color: var(--border-primary);
    margin: 8px 0;
}

/* Passkey Modal Styles */
.passkey-modal-overlay[b-7crboq1cxl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.passkey-management-modal[b-7crboq1cxl] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    border: 1px solid var(--border-primary);
}

.modal-header[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.header-content[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon[b-7crboq1cxl] {
    width: 48px;
    height: 48px;
    background: var(--accent-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-text h2[b-7crboq1cxl] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-text p[b-7crboq1cxl] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.modal-close[b-7crboq1cxl] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: background-color 0.2s ease;
}

.modal-close:hover[b-7crboq1cxl] {
    background-color: var(--bg-primary);
}

.modal-body[b-7crboq1cxl] {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.loading-state[b-7crboq1cxl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

/* Old spinner styles removed - using LfzSpinner component instead */

.passkeys-section[b-7crboq1cxl] {
    margin-bottom: 24px;
}

.section-header[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3[b-7crboq1cxl] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.add-passkey-btn[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.add-passkey-btn:hover[b-7crboq1cxl] {
    background-color: var(--accent-secondary);
}

.passkeys-list[b-7crboq1cxl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.passkey-item[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.passkey-info[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.passkey-icon[b-7crboq1cxl] {
    width: 40px;
    height: 40px;
    background: var(--accent-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.passkey-details h4[b-7crboq1cxl] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.passkey-details p[b-7crboq1cxl] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.remove-passkey-btn[b-7crboq1cxl] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.remove-passkey-btn:hover[b-7crboq1cxl] {
    background-color: var(--bg-primary);
    color: var(--error-color);
}

.empty-state[b-7crboq1cxl] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-7crboq1cxl] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--text-secondary);
}

.empty-state h4[b-7crboq1cxl] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state p[b-7crboq1cxl] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.add-first-passkey-btn[b-7crboq1cxl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.add-first-passkey-btn:hover[b-7crboq1cxl] {
    background-color: var(--accent-secondary);
}

.message[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.success-message[b-7crboq1cxl] {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}

.error-message[b-7crboq1cxl] {
    background: var(--error-bg);
    color: var(--error-color);
    border: 1px solid var(--error-border);
}

/* Toast Styles */
.toast-container[b-7crboq1cxl] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3000;
}

.toast[b-7crboq1cxl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-primary);
    min-width: 300px;
    backdrop-filter: blur(10px);
}

.success-toast[b-7crboq1cxl] {
    border-left: 4px solid var(--success-color);
}

.toast-icon[b-7crboq1cxl] {
    flex-shrink: 0;
    color: var(--success-color);
}

.toast-content[b-7crboq1cxl] {
    flex: 1;
}

.toast-content h4[b-7crboq1cxl] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.toast-content p[b-7crboq1cxl] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.toast-close[b-7crboq1cxl] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: background-color 0.2s ease;
}

.toast-close:hover[b-7crboq1cxl] {
    background-color: var(--bg-secondary);
}

/* ============================================================================
   SharedHeader — Mobile responsiveness
   --------------------------------------------------------------------------
   Desktop dimensions (margin: 16px 40px, h1 font 32px, height 72px,
   space-between flex with no wrap) require ~305px of horizontal content for
   the home button + "Dashboard" title + username + avatar. On a 360px phone
   the inner content area is only 232px after lateral margin and padding —
   the avatar gets pushed off the right edge and the username clips.

   Tightening per breakpoint:
     ≤ 768px    smaller margins (12px each side), smaller home button,
                title font 22px, hide username text, keep avatar visible.
     ≤ 480px    even tighter; the home icon shrinks to 36px so the
                avatar sits comfortably on a 320px iPhone SE.
   ========================================================================= */

@media (max-width: 768px) {
    .tp-hdr[b-7crboq1cxl] {
        /* Left margin clears the floating sidebar-mobile-toggle (hamburger)
           which is fixed at top:12px / left:12px with 40px width — total
           footprint 12+40+12 = 64px. */
        margin: 12px 16px 12px 64px;
        border-radius: 22px;
    }

    .tp-hdr-inner[b-7crboq1cxl] {
        height: 60px;
        padding: 10px 14px;
        gap: 10px;
    }

    .tp-hdr-left[b-7crboq1cxl] {
        gap: 10px;
        min-width: 0;          /* allows the title to truncate cleanly */
        flex: 1 1 auto;
    }

    .home-icon-btn[b-7crboq1cxl] {
        width: 36px;
        height: 36px;
        padding: 6px;
        flex: 0 0 auto;
    }

    .home-icon-btn svg[b-7crboq1cxl] {
        width: 20px;
        height: 20px;
    }

    .tp-hdr-title[b-7crboq1cxl] {
        font-size: 22px;
        line-height: 1.1;
        /* Truncate long titles instead of wrapping or pushing the avatar
           off-screen. Most page titles are short enough that this never
           triggers; the safety net is here for tenant-prefixed titles. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* Hide the username text on phones — the avatar carries the identity
       cue and tapping it still opens the dropdown. Reclaiming this width
       guarantees the avatar circle stays on-screen. */
    .tp-hdr-username[b-7crboq1cxl] {
        display: none;
    }

    .user-profile[b-7crboq1cxl] {
        gap: 0;
        flex: 0 0 auto;
    }

    .user-avatar[b-7crboq1cxl] {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tp-hdr[b-7crboq1cxl] {
        margin: 10px 12px 10px 60px;
    }

    .tp-hdr-inner[b-7crboq1cxl] {
        height: 56px;
        padding: 8px 12px;
        gap: 8px;
    }

    .tp-hdr-title[b-7crboq1cxl] {
        font-size: 20px;
    }
}
/* /Components/Common/SideImagePanel.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   SideImagePanel — premium enterprise-style image surface.
   In rotation mode, two stacked slides cross-fade with a slow Ken-Burns
   zoom (1.00 → 1.05) for a calm, cinematic, professional feel. A fixed
   dark navy gradient overlay sits above the slides for type legibility.
   ───────────────────────────────────────────────────────────────────────── */

.side-image-panel[b-rthomh1yqb] {
    width: 100%;
    height: 100%;
    position: relative;
}

    .side-image-panel .overlay[b-rthomh1yqb] {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: none;
        z-index: 3;
    }

/* ── Cross-fade rotation (when ImageUrl2 is set) ──────────────────────── */
.side-image-panel.is-rotating[b-rthomh1yqb] {
    overflow: hidden;
    background-color: #000814;
}

    .side-image-panel.is-rotating .slide[b-rthomh1yqb] {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        transform-origin: center center;
        will-change: opacity, transform;
        animation: onep-side-fade-zoom-b-rthomh1yqb var(--onep-side-cycle, 12s) ease-in-out infinite;
        z-index: 1;
    }

    .side-image-panel.is-rotating .slide-b[b-rthomh1yqb] {
        /* Half-cycle offset so the second slide peaks while the first fades */
        animation-delay: calc(var(--onep-side-cycle, 12s) / -2);
    }

    /* Fixed dark navy gradient — sits above the slides, below ChildContent.
       Sets the enterprise tone (calm, secure) AND gives text-on-image
       enough contrast without darkening the photo too much. */
    .side-image-panel.is-rotating .slide-overlay[b-rthomh1yqb] {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(
            135deg,
            rgba(0, 18, 54, 0.55)  0%,
            rgba(0, 31, 87, 0.30) 50%,
            rgba(0, 18, 54, 0.65) 100%
        );
    }

/* Cross-fade + slow zoom keyframe.
   12s cycle (CycleSeconds=6 × 2):
     0–45%   visible, zooming  scale(1.00) → scale(1.05)
     45–50%  fade out          opacity 1 → 0   (scale held at 1.05)
     50–95%  hidden, reset     scale resets quietly to 1.00
     95–100% fade in           opacity 0 → 1
   The second slide carries a half-cycle (-6s) delay so it peaks while
   the first fades, producing a smooth cross-fade rather than a flash. */
@keyframes onep-side-fade-zoom-b-rthomh1yqb {
    0% {
        opacity: 1;
        transform: scale(1.00);
    }
    45% {
        opacity: 1;
        transform: scale(1.05);
    }
    50% {
        opacity: 0;
        transform: scale(1.05);
    }
    95% {
        opacity: 0;
        transform: scale(1.00);
    }
    100% {
        opacity: 1;
        transform: scale(1.00);
    }
}

/* ── 3-slide rotation (when ImageUrl3 is also set) ────────────────────────
   Each slide is visible ~1/3 of the cycle; the three slides are offset by a
   third so one fades in as the previous fades out. Cycle = CycleSeconds × 3
   (the component sets --onep-side-cycle accordingly, e.g. 6 s × 3 = 18 s). */
.side-image-panel.is-rotating-3 .slide[b-rthomh1yqb] {
    animation-name: onep-side-fade-zoom-3-b-rthomh1yqb;
}
    .side-image-panel.is-rotating-3 .slide-b[b-rthomh1yqb] {
        animation-delay: calc(var(--onep-side-cycle, 18s) / -3);
    }
    .side-image-panel.is-rotating-3 .slide-c[b-rthomh1yqb] {
        animation-delay: calc(var(--onep-side-cycle, 18s) * -2 / 3);
    }

@keyframes onep-side-fade-zoom-3-b-rthomh1yqb {
    0%   { opacity: 1; transform: scale(1.00); }
    28%  { opacity: 1; transform: scale(1.05); }   /* visible, zooming */
    33%  { opacity: 0; transform: scale(1.05); }   /* faded out */
    95%  { opacity: 0; transform: scale(1.00); }   /* hidden, reset */
    100% { opacity: 1; transform: scale(1.00); }   /* fade back in */
}

/* Honour users who prefer reduced motion — pin to the first slide, no zoom. */
@media (prefers-reduced-motion: reduce) {
    .side-image-panel.is-rotating .slide[b-rthomh1yqb] {
        animation: none;
        transform: none;
    }
    .side-image-panel.is-rotating .slide-b[b-rthomh1yqb],
    .side-image-panel.is-rotating-3 .slide-c[b-rthomh1yqb] {
        opacity: 0;
    }
}
/* /Components/Common/UserProfile.razor.rz.scp.css */
.user-profile[b-pyiu7hovxk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name[b-pyiu7hovxk] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary, #374151);
}

.user-avatar[b-pyiu7hovxk] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bg-secondary, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-text[b-pyiu7hovxk] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-primary, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}
/* /Components/Events/EventCalendar.razor.rz.scp.css */
/* Calendar - Scoped styles for EventCalendar component */
/* Matches Dashboard/index.html reference design exactly */

.tp-cal[b-xfbid27wm0] {
    width: 300px;
    height: 230px;
    background: rgba(255, 255, 255, 1);
    border-radius: 24.249px;
    box-shadow: 0px 3.2332632541656494px 20px 0px rgba(0, 9, 26, 0.10000000149011612);
    padding: 16px 19px 14px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.tp-cal-nav[b-xfbid27wm0] {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
}

.tp-cal-pill[b-xfbid27wm0] {
    justify-self: start;
    background: rgba(242, 242, 242, 0.8);
    color: rgba(134, 134, 134, 1);
    border: none;
    border-radius: 40.416px;
    padding: 5.658px 12.125px;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 9.487px;
    font-style: normal;
    line-height: normal;
    cursor: pointer;
    opacity: 0.8;
    margin: 0;
    outline: none;
    box-shadow: none;
}

.tp-cal-pill:hover[b-xfbid27wm0] {
    opacity: 1;
}

.tp-cal-nav .tp-cal-pill:last-child[b-xfbid27wm0] {
    justify-self: end;
}

.tp-cal-month[b-xfbid27wm0] {
    margin: 0;
    justify-self: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 11.385px;
    font-style: normal;
    line-height: normal;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}

.tp-cal-grid[b-xfbid27wm0] {
    display: grid;
    grid-template-rows: auto repeat(5, 1fr);
    gap: 6px;
}

.tp-cal-dow[b-xfbid27wm0],
.tp-cal-row[b-xfbid27wm0] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 14px;
    row-gap: 0;
}

.tp-cal-dow .dow[b-xfbid27wm0] {
    text-align: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 10.508px;
    font-style: normal;
    line-height: normal;
    color: rgba(54, 54, 54, 1);
    display: block;
}

.tp-cal-row .date[b-xfbid27wm0] {
    position: relative;
    text-align: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 8.083px;
    font-style: normal;
    line-height: normal;
    color: rgba(54, 54, 54, 1);
    padding-top: 6px;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.tp-cal-row .date.muted[b-xfbid27wm0] {
    color: #9A9A9A;
}

.tp-cal-row .date.has-dot[b-xfbid27wm0] {
    color: rgba(242, 242, 242, 1);
    font-weight: 700;
    font-style: normal;
    text-shadow: none;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    height: 21px;
    min-height: 21px;
}

.tp-cal-row .date.has-dot .dot[b-xfbid27wm0] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #FF6A00;
    z-index: -1;
    margin: 0;
    padding: 0;
}

/* Event tooltip styles */
.event-tooltip[b-xfbid27wm0] {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: "Ubuntu", "Inter", sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 1000;
}

.tooltip-content[b-xfbid27wm0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-event[b-xfbid27wm0] {
    white-space: nowrap;
}

/* Dark Mode support */
@media (prefers-color-scheme: dark) {
    .tp-cal[b-xfbid27wm0] {
        background: var(--card-bg, #0f172a);
    }
}

body.dark .tp-cal[b-xfbid27wm0],
[data-theme="dark"] .tp-cal[b-xfbid27wm0],
.theme-dark .tp-cal[b-xfbid27wm0] {
    background: var(--card-bg, #0f172a);
}

/* /Components/Events/EventForm.razor.rz.scp.css */
.event-form[b-mypcj2e79v] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.form-field[b-mypcj2e79v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label[b-mypcj2e79v] {
    font-weight: 500;
    color: #333;
}

.required[b-mypcj2e79v] {
    color: #e74c3c;
}

.form-input[b-mypcj2e79v] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-input:focus[b-mypcj2e79v] {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1);
}

.form-actions[b-mypcj2e79v] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}

.btn[b-mypcj2e79v] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-primary[b-mypcj2e79v] {
    background-color: #1e40af;
    color: white;
}

.btn-primary:hover[b-mypcj2e79v] {
    background-color: #1e3a8a;
}

.btn-secondary[b-mypcj2e79v] {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover[b-mypcj2e79v] {
    background-color: #4b5563;
}





/* /Components/Portal/MinimizedPortalBar.razor.rz.scp.css */
/* Fixed taskbar pinned to the bottom of the viewport — persists across all pages */
.minimized-bar[b-xv2oa3s63c] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 1rem;
    background: #1a2540;
    border-top: 2px solid #2d4070;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
    min-height: 44px;
}

.minimized-bar-label[b-xv2oa3s63c] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    user-select: none;
}

.minimized-tabs[b-xv2oa3s63c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.minimized-tabs[b-xv2oa3s63c]::-webkit-scrollbar {
    height: 3px;
}

.minimized-tabs[b-xv2oa3s63c]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Individual minimized portal tab */
.minimized-tab[b-xv2oa3s63c] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.5rem 0.3rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-width: 120px;
    max-width: 200px;
    white-space: nowrap;
    flex-shrink: 0;
    animation: slideUpTab-b-xv2oa3s63c 0.18s ease-out;
}

@keyframes slideUpTab-b-xv2oa3s63c {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.minimized-tab:hover[b-xv2oa3s63c] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.28);
}

/* Portal icon inside a tab */
.minimized-tab-icon[b-xv2oa3s63c] {
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
    font-size: 13px;
}

.minimized-tab-icon-svg[b-xv2oa3s63c] {
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}

/* Portal name label */
.minimized-tab-name[b-xv2oa3s63c] {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Close (✕) button on each tab */
.minimized-tab-close[b-xv2oa3s63c] {
    background: none;
    border: none;
    padding: 0.15rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.minimized-tab-close:hover[b-xv2oa3s63c] {
    background: rgba(255, 71, 71, 0.35);
    color: #ff8080;
}
/* /Components/Portal/PortalContainer.razor.rz.scp.css */
/*
   PortalContainer is a singleton mounted at App.razor level. It overlays the
   viewport with all open portal iframes; only the active one is shown.

   The host is fixed-positioned to fill the viewport area beneath the OnePortal
   page chrome. When the user is NOT on a /portal/{code} route, the host hides
   itself entirely so it doesn't paint over the dashboard.
*/
.portal-iframe-host[b-gsw7tct6rw] {
    position: fixed;
    /* Sit beneath the PortalHeader (rendered by PortalPage). 48px is a safe
       default; tune in the page's own stylesheet if your header is taller. */
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--bg-primary, #ffffff);
    overflow: hidden;
}

/* Full-viewport when no header — applied dynamically when route changes
   put the iframe in a fullscreen layout (no PortalPage chrome). */
.portal-iframe-host.fullscreen[b-gsw7tct6rw] {
    top: 0;
}

.portal-iframe-host.visible[b-gsw7tct6rw] {
    display: block;
}

.portal-iframe-host.hidden[b-gsw7tct6rw] {
    display: none;
}

.portal-iframe[b-gsw7tct6rw] {
    width: 100%;
    height: 100%;
    border: none;
}

/* Active vs inactive — the inline style attribute does the real toggling so
   that even mid-render the right iframe is the one painted. These classes
   are kept for any future styling hooks (e.g. fade transitions). */
.portal-iframe.active[b-gsw7tct6rw] {
    visibility: visible;
}

.portal-iframe.inactive[b-gsw7tct6rw] {
    visibility: hidden;
}

/* Empty / error / loading overlays sit on top of the iframe layer. */
.portal-empty-state[b-gsw7tct6rw],
.portal-loading-state[b-gsw7tct6rw],
.portal-error-state[b-gsw7tct6rw] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #ffffff);
    text-align: center;
    padding: 2rem;
}

.portal-empty-state h3[b-gsw7tct6rw],
.portal-error-state h3[b-gsw7tct6rw] {
    margin: 1rem 0 0.5rem;
    font-size: 1.25rem;
    color: var(--text-primary, #333);
}

.portal-empty-state p[b-gsw7tct6rw],
.portal-error-state p[b-gsw7tct6rw] {
    margin: 0 0 1rem;
    color: var(--text-secondary, #666);
}

.error-icon[b-gsw7tct6rw] {
    color: var(--error-color, #dc3545);
    margin-bottom: 1rem;
}

.error-actions[b-gsw7tct6rw] {
    display: flex;
    gap: 1rem;
}

.btn[b-gsw7tct6rw] {
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.btn-primary[b-gsw7tct6rw] {
    background-color: var(--primary-color, #007bff);
    color: white;
}

.btn-primary:hover[b-gsw7tct6rw] {
    background-color: var(--primary-hover, #0056b3);
}

.btn-outline[b-gsw7tct6rw] {
    background-color: transparent;
    border-color: var(--border-color, #dee2e6);
    color: var(--text-primary, #333);
}

.btn-outline:hover[b-gsw7tct6rw] {
    background-color: var(--bg-secondary, #f8f9fa);
}
/* /Components/Portal/PortalHeader.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   PortalHeader — the navy chrome strip above the iframe of a launched
   portal. Premium-grade so the user always feels the OnePortal product
   surface even when the body content is a separate downstream app.
   ───────────────────────────────────────────────────────────────────────── */

.portal-header-container[b-uklohwh6iq] {
    background: linear-gradient(135deg, #001F57 0%, #00296B 55%, #0a3380 100%) !important;
    color: #ffffff !important;
    padding: 12px 22px !important;
    position: relative;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 6px 22px rgba(0, 18, 54, 0.22) !important;
    overflow: hidden;
    font-family: 'Ubuntu', 'Segoe UI', 'Inter', system-ui, sans-serif;
    border-bottom: 0 !important;
}

/* Decorative ambient glow — soft, top-right */
.portal-header-container[b-uklohwh6iq]::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.18) 0%, transparent 65%);
    pointer-events: none;
}

/* Thin gold accent rule along the bottom edge */
.portal-header-container[b-uklohwh6iq]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.0) 12%,
        rgba(201, 169, 97, 0.85) 50%,
        rgba(201, 169, 97, 0.0) 88%,
        transparent 100%);
}

.portal-header-content[b-uklohwh6iq] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.portal-header-info[b-uklohwh6iq] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

/* Corporate LFZ wordmark — appears before the per-portal icon chip on
   every portal launcher. Constrained height; width is intrinsic so the
   logo proportions stay correct regardless of which portal is loaded. */
.portal-lfz-mark[b-uklohwh6iq] {
    height: 36px;
    width: auto;
    flex-shrink: 0;
    display: block;
    margin-right: 4px;
    user-select: none;
}

/* Frosted-glass icon chip on navy */
.portal-header-icon[b-uklohwh6iq] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.portal-header-icon i[b-uklohwh6iq] { font-size: 19px; color: #ffffff; }

.portal-header-text[b-uklohwh6iq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Eyebrow + breadcrumb hidden: single bold portal name is the only label */
.portal-header-eyebrow[b-uklohwh6iq],
.portal-breadcrumb[b-uklohwh6iq] { display: none !important; }

.portal-header-title[b-uklohwh6iq] {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: 0.005em;
}

/* Live-status pill */
.portal-status-chip[b-uklohwh6iq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #6EE7B7;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-left: 8px;
}

.portal-status-dot[b-uklohwh6iq] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: onep-pulse-b-uklohwh6iq 2s ease-in-out infinite;
}

@keyframes onep-pulse-b-uklohwh6iq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Action icon buttons */
.portal-header-actions[b-uklohwh6iq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-icon[b-uklohwh6iq] {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.86);
    padding: 0;
    cursor: pointer;
    border-radius: 9px;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-uklohwh6iq] {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    transform: translateY(-1px);
}

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

.btn-icon svg[b-uklohwh6iq] { width: 16px; height: 16px; }

.btn-icon--close:hover[b-uklohwh6iq] {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(239, 68, 68, 0.85);
    color: #ffffff;
}

@media (max-width: 768px) {
    .portal-header-container[b-uklohwh6iq] { padding: 10px 14px; }
    .portal-lfz-mark[b-uklohwh6iq] { height: 30px; }
    .portal-header-icon[b-uklohwh6iq] { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; }
    .portal-header-title[b-uklohwh6iq] { font-size: 17px; }
    .portal-status-chip[b-uklohwh6iq] { display: none; }
    .btn-icon[b-uklohwh6iq] { width: 30px; height: 30px; }
}
/* /Pages/AddEnterpriseUsers.razor.rz.scp.css */
/* ENT-01 Part B — Add Enterprise Users.
   All colors flow from /wwwroot/css/themes.css CSS variables, so toggling
   .dark-theme on <body> swaps the palette automatically. Mirrors the
   layout/table/panel conventions of ManageTenants.razor.css. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

.employee-dashboard-container[b-rjvr0m1y4s] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-rjvr0m1y4s] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-rjvr0m1y4s] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-rjvr0m1y4s] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-rjvr0m1y4s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
}

.section-title[b-rjvr0m1y4s] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-subtitle[b-rjvr0m1y4s] {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.action-bar[b-rjvr0m1y4s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-rjvr0m1y4s] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-rjvr0m1y4s] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    width: 280px;
    outline: none;
}

.search-input:focus[b-rjvr0m1y4s] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.search-input[b-rjvr0m1y4s]::placeholder {
    color: var(--input-placeholder);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn[b-rjvr0m1y4s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary[b-rjvr0m1y4s] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover[b-rjvr0m1y4s] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.btn-outline[b-rjvr0m1y4s] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.btn-outline:hover[b-rjvr0m1y4s] {
    background-color: var(--btn-secondary-hover);
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.employee-table-section[b-rjvr0m1y4s] {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-rjvr0m1y4s] {
    width: 100%;
    border-collapse: collapse;
}

.employee-table thead[b-rjvr0m1y4s] {
    background-color: var(--bg-secondary);
}

.employee-table th[b-rjvr0m1y4s] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
}

.employee-table tbody tr[b-rjvr0m1y4s] {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-rjvr0m1y4s] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-rjvr0m1y4s] {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

.status-badge[b-rjvr0m1y4s] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-rjvr0m1y4s] {
    background: var(--success-bg);
    color: var(--success);
}

.status-inactive[b-rjvr0m1y4s] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.btn-icon[b-rjvr0m1y4s] {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 0.5rem;
}

.btn-icon:hover[b-rjvr0m1y4s] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon.btn-danger[b-rjvr0m1y4s] {
    color: var(--error);
    border-color: var(--error);
}

.btn-icon.btn-danger:hover[b-rjvr0m1y4s] {
    background: var(--error-bg);
}

.actions-col[b-rjvr0m1y4s] {
    text-align: right;
    white-space: nowrap;
}

.empty[b-rjvr0m1y4s] {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

.loading-state[b-rjvr0m1y4s],
.error-state[b-rjvr0m1y4s] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

/* ── Right-slide edit panel ──────────────────────────────────────────────── */

.edit-panel-overlay[b-rjvr0m1y4s] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn-b-rjvr0m1y4s 0.2s ease;
}

.edit-panel[b-rjvr0m1y4s] {
    width: 480px;
    max-width: 100%;
    background-color: var(--card-bg);
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideIn-b-rjvr0m1y4s 0.2s ease;
}

.edit-panel-header[b-rjvr0m1y4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.edit-panel-header h3[b-rjvr0m1y4s] {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}

.close-btn[b-rjvr0m1y4s] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

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

.edit-panel-body[b-rjvr0m1y4s] {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.edit-panel-footer[b-rjvr0m1y4s] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
}

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

@keyframes slideIn-b-rjvr0m1y4s {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ── Form helpers ────────────────────────────────────────────────────────── */

.form-label[b-rjvr0m1y4s] {
    display: block;
    margin: 1rem 0 0.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-rjvr0m1y4s] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 0.25rem;
    box-sizing: border-box;
}

.form-input:focus[b-rjvr0m1y4s] {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.15);
}

.form-input:disabled[b-rjvr0m1y4s] {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-hint[b-rjvr0m1y4s] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-checkbox[b-rjvr0m1y4s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.login-status[b-rjvr0m1y4s] {
    margin-top: 1rem;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.required[b-rjvr0m1y4s] {
    color: var(--error);
}

.alert[b-rjvr0m1y4s] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-rjvr0m1y4s] {
    background: var(--error-bg);
    border: 1px solid var(--error);
    color: var(--error);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .sidebar[b-rjvr0m1y4s] { width: 250px; }
    .main-content[b-rjvr0m1y4s] { margin-left: 250px; }
}

@media (max-width: 768px) {
    .employee-dashboard-container[b-rjvr0m1y4s] {
        flex-direction: column;
    }
    .sidebar[b-rjvr0m1y4s] {
        position: relative;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }
    .main-content[b-rjvr0m1y4s] {
        margin-left: 0;
    }
    .employee-details-section[b-rjvr0m1y4s] {
        padding: 20px 16px;
    }
    .section-header[b-rjvr0m1y4s] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .action-bar[b-rjvr0m1y4s] {
        width: 100%;
        flex-wrap: wrap;
    }
    .search-box[b-rjvr0m1y4s] {
        flex: 1 1 auto;
        min-width: 0;
    }
    .search-input[b-rjvr0m1y4s] {
        width: 100%;
    }
    .employee-table-section[b-rjvr0m1y4s] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .employee-table[b-rjvr0m1y4s] {
        min-width: 720px;
        font-size: 13px;
    }
    .employee-table th[b-rjvr0m1y4s],
    .employee-table td[b-rjvr0m1y4s] {
        padding: 12px 10px;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .section-title[b-rjvr0m1y4s] { font-size: 20px; }
}

@media (max-width: 480px) {
    .employee-details-section[b-rjvr0m1y4s] {
        padding: 16px 12px;
    }
    .btn-icon[b-rjvr0m1y4s] {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 10px;
    }
    .edit-panel[b-rjvr0m1y4s] {
        width: 100% !important;
        max-width: none;
        height: 100%;
        border-radius: 0;
    }
}
/* /Pages/AdminRoleEditor.razor.rz.scp.css */
/* Phase-5 RBAC: AdminRoleEditor — same shell as AdminRoles, plus the
   permission-matrix grid styling. Responsive ladder mirrors AdminRoles. */

.employee-dashboard-container[b-kwanvzr8h3] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-kwanvzr8h3] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    height: 100dvh;
    left: 0; top: 0; z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-kwanvzr8h3] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-kwanvzr8h3] { padding: 30px 40px; }

.back-link[b-kwanvzr8h3] {
    display: inline-block;
    color: #001F57;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
}
.back-link:hover[b-kwanvzr8h3] { text-decoration: underline; }

.section-title[b-kwanvzr8h3] {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}
.section-title .role-code[b-kwanvzr8h3] {
    font-size: 14px; color: var(--text-muted);
    font-weight: 500; margin-left: 8px;
}

.tabs[b-kwanvzr8h3] {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border-primary);
    margin: 22px 0 14px;
}
.tab[b-kwanvzr8h3] {
    padding: 10px 16px; background: transparent;
    border: 0; border-bottom: 2px solid transparent;
    cursor: pointer; font-weight: 600; color: var(--text-muted);
}
.tab.active[b-kwanvzr8h3] {
    border-bottom-color: #001F57;
    color: var(--text-primary);
}

.permission-matrix-info[b-kwanvzr8h3] {
    background: #eef4ff;
    border: 1px solid #c7d8f5;
    border-radius: 8px;
    padding: 12px 14px;
    color: #1e3a6b;
    font-size: 13.5px;
    margin: 12px 0 18px;
}

.employee-table-section[b-kwanvzr8h3] {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    overflow: hidden;
}

.employee-table[b-kwanvzr8h3] { width: 100%; border-collapse: collapse; }
.employee-table th[b-kwanvzr8h3], .employee-table td[b-kwanvzr8h3] {
    padding: 14px 16px; text-align: left;
    border-bottom: 1px solid var(--border-primary);
}
.employee-table th[b-kwanvzr8h3] {
    background: var(--bg-secondary); font-weight: 700;
    font-size: 13px; color: var(--text-secondary);
}
.permission-matrix .check-col[b-kwanvzr8h3] { text-align: center; width: 80px; }
.permission-matrix input[type="checkbox"][b-kwanvzr8h3] { width: 18px; height: 18px; cursor: pointer; }
.permission-matrix .module-code[b-kwanvzr8h3] {
    display: block; color: var(--text-muted);
    font-size: 11px; font-family: monospace;
}

.action-row[b-kwanvzr8h3] {
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px;
}
.btn[b-kwanvzr8h3] { padding: 10px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-primary[b-kwanvzr8h3] { background: #001F57; color: white; border: 1px solid #001F57; }

.alert[b-kwanvzr8h3] { padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.alert-error[b-kwanvzr8h3] { background: #fff5f5; border: 1px solid #f5c4c4; color: #b3261e; }
.alert-info[b-kwanvzr8h3] { background: #eef4ff; border: 1px solid #c7d8f5; color: #1e3a6b; }

.loading-state[b-kwanvzr8h3], .error-state[b-kwanvzr8h3] {
    text-align: center; padding: 3rem 1rem;
    color: var(--text-secondary);
}

/* Responsive ladder (mirrors AdminRoles + ManageTenants) */
@media (max-width: 1200px) {
    .sidebar[b-kwanvzr8h3] { width: 250px; }
    .main-content[b-kwanvzr8h3] { margin-left: 250px; }
}
@media (max-width: 768px) {
    .employee-dashboard-container[b-kwanvzr8h3] { flex-direction: column; }
    .sidebar[b-kwanvzr8h3] {
        position: relative; width: 100%; height: 0;
        min-height: 0; overflow: visible;
        background: transparent; border: 0;
    }
    .main-content[b-kwanvzr8h3] { margin-left: 0; }
    .employee-details-section[b-kwanvzr8h3] { padding: 20px 16px; }
    .employee-table-section[b-kwanvzr8h3] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .permission-matrix[b-kwanvzr8h3] { min-width: 540px; font-size: 13px; }
    .permission-matrix th[b-kwanvzr8h3], .permission-matrix td[b-kwanvzr8h3] { padding: 12px 10px; }
}
@media (max-width: 600px) { .section-title[b-kwanvzr8h3] { font-size: 20px; } }
@media (max-width: 480px) {
    .employee-details-section[b-kwanvzr8h3] { padding: 16px 12px; }
    .btn[b-kwanvzr8h3] { min-height: 44px; }
    .permission-matrix .check-col[b-kwanvzr8h3] { width: 56px; }
    .permission-matrix input[type="checkbox"][b-kwanvzr8h3] { width: 22px; height: 22px; }  /* easier tap */
}

/* Phase-Item-4: typeahead row at the top of the Users tab. The dropdown
   list is absolutely positioned so it overlays the table below rather
   than pushing it down — matches the standard typeahead UX. */
.assign-row[b-kwanvzr8h3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 12px;
    flex-wrap: wrap;
}

.assign-search[b-kwanvzr8h3] {
    position: relative;
    flex: 1 1 300px;
    min-width: 220px;
}

.assign-search .form-input[b-kwanvzr8h3] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
}

.assign-search-results[b-kwanvzr8h3] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    z-index: 20;
}

.assign-search-item[b-kwanvzr8h3] {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
}
.assign-search-item:last-child[b-kwanvzr8h3] { border-bottom: none; }
.assign-search-item:hover[b-kwanvzr8h3],
.assign-search-item.selected[b-kwanvzr8h3] {
    background: #eef4ff;
    color: #001F57;
}

.assign-primary-toggle[b-kwanvzr8h3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-primary);
    white-space: nowrap;
}

.assign-primary-toggle input[type="checkbox"][b-kwanvzr8h3] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #001F57;
}

.row-revoked[b-kwanvzr8h3] {
    opacity: 0.55;
    background: #f8fafc;
}

@media (max-width: 600px) {
    .assign-row[b-kwanvzr8h3] { flex-direction: column; align-items: stretch; }
    .assign-primary-toggle[b-kwanvzr8h3] { padding: 4px 0; }
    .assign-row .btn-primary[b-kwanvzr8h3] { width: 100%; min-height: 44px; }
}
/* /Pages/AdminRoles.razor.rz.scp.css */
/* Phase-5 RBAC: AdminRoles page styles. Mirrors the layout shell and
   responsive ladder shipped in ManageTenants.razor.css to keep the admin
   surface visually consistent. Tokens come from /wwwroot/css/themes.css. */

.employee-dashboard-container[b-2crxhibcrp] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-2crxhibcrp] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-2crxhibcrp] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-2crxhibcrp] { padding: 30px 40px; }

.section-header[b-2crxhibcrp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title[b-2crxhibcrp] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 30px 0;
}

.action-bar[b-2crxhibcrp] { display: flex; align-items: center; gap: 12px; }
.search-box[b-2crxhibcrp] { position: relative; display: flex; align-items: center; }
.search-input[b-2crxhibcrp] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    width: 250px;
    outline: none;
}

.btn[b-2crxhibcrp] { padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-primary[b-2crxhibcrp] { background: #001F57; color: white; border: 1px solid #001F57; }
.btn-outline[b-2crxhibcrp] { background: transparent; color: var(--text-primary); border: 1px solid var(--border-primary); }
.btn-icon[b-2crxhibcrp] { padding: 6px 10px; border: 1px solid var(--border-primary); background: transparent; border-radius: 6px; cursor: pointer; }

.employee-table-section[b-2crxhibcrp] {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    overflow: hidden;
}

.employee-table[b-2crxhibcrp] { width: 100%; border-collapse: collapse; }
.employee-table th[b-2crxhibcrp], .employee-table td[b-2crxhibcrp] { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-primary); }
.employee-table th[b-2crxhibcrp] { background: var(--bg-secondary); font-weight: 700; font-size: 13px; color: var(--text-secondary); }
.employee-table td.empty[b-2crxhibcrp] { text-align: center; color: var(--text-muted); padding: 32px; }
.employee-table .actions-col[b-2crxhibcrp] { text-align: right; width: 1%; white-space: nowrap; }

.status-badge[b-2crxhibcrp] { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-active[b-2crxhibcrp] { background: #d4edda; color: #155724; }
.status-inactive[b-2crxhibcrp] { background: #f8d7da; color: #721c24; }

/* ── Edit panel (modal-ish slide-in, mirrors ManageTenants pattern) ─────── */
.edit-panel-overlay[b-2crxhibcrp] {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 2000;
    display: flex; justify-content: flex-end;
    animation: fadeIn-b-2crxhibcrp 0.18s ease;
}
.edit-panel[b-2crxhibcrp] {
    width: min(420px, 100%);
    background: var(--card-bg);
    height: 100%;
    box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column;
    animation: slideIn-b-2crxhibcrp 0.22s ease;
}
@keyframes fadeIn-b-2crxhibcrp { from { opacity:0 } to { opacity:1 } }
@keyframes slideIn-b-2crxhibcrp { from { transform: translateX(100%) } to { transform: translateX(0) } }

.edit-panel-header[b-2crxhibcrp] {
    padding: 16px 20px; border-bottom: 1px solid var(--border-primary);
    display: flex; justify-content: space-between; align-items: center;
}
.edit-panel-header h3[b-2crxhibcrp] { margin: 0; font-size: 17px; }
.close-btn[b-2crxhibcrp] { background: transparent; border: 0; font-size: 24px; cursor: pointer; color: var(--text-muted); }
.edit-panel-body[b-2crxhibcrp] { padding: 20px; flex: 1; overflow-y: auto; }
.edit-panel-footer[b-2crxhibcrp] { padding: 14px 20px; border-top: 1px solid var(--border-primary); display: flex; justify-content: flex-end; gap: 12px; }

.form-label[b-2crxhibcrp] { display: block; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.form-label .required[b-2crxhibcrp] { color: #c62828; }
.form-input[b-2crxhibcrp] {
    display: block; width: 100%; margin-top: 6px;
    padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px;
    background: var(--input-bg); color: var(--text-primary); font-size: 14px;
    box-sizing: border-box;
}
.form-hint[b-2crxhibcrp] { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }

.alert[b-2crxhibcrp] { padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.alert-error[b-2crxhibcrp] { background: #fff5f5; border: 1px solid #f5c4c4; color: #b3261e; }

.loading-state[b-2crxhibcrp], .error-state[b-2crxhibcrp] { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }

/* ── Responsive ladder — mirrors ManageTenants.razor.css lines 510-end ──── */
@media (max-width: 1200px) {
    .sidebar[b-2crxhibcrp] { width: 250px; }
    .main-content[b-2crxhibcrp] { margin-left: 250px; }
}
@media (max-width: 768px) {
    .employee-dashboard-container[b-2crxhibcrp] { flex-direction: column; }
    .sidebar[b-2crxhibcrp] {
        position: relative; width: 100%; height: 0;
        min-height: 0; overflow: visible;
        background: transparent; border: 0;
    }
    .main-content[b-2crxhibcrp] { margin-left: 0; }
    .employee-details-section[b-2crxhibcrp] { padding: 20px 16px; }
    .section-header[b-2crxhibcrp] { flex-direction: column; align-items: flex-start; gap: 16px; }
    .action-bar[b-2crxhibcrp] { width: 100%; flex-wrap: wrap; }
    .search-box[b-2crxhibcrp] { flex: 1 1 auto; min-width: 0; }
    .search-input[b-2crxhibcrp] { width: 100%; }
    .employee-table-section[b-2crxhibcrp] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .employee-table[b-2crxhibcrp] { min-width: 640px; font-size: 13px; }
    .employee-table th[b-2crxhibcrp], .employee-table td[b-2crxhibcrp] { padding: 12px 10px; white-space: nowrap; }
}
@media (max-width: 600px) {
    .section-title[b-2crxhibcrp] { font-size: 20px; }
}
@media (max-width: 480px) {
    .employee-details-section[b-2crxhibcrp] { padding: 16px 12px; }
    .btn-icon[b-2crxhibcrp] { min-width: 44px; min-height: 44px; padding: 6px 10px; }
    .edit-panel[b-2crxhibcrp] { width: 100% !important; max-width: none; height: 100%; border-radius: 0; }
    .form-input[b-2crxhibcrp] { font-size: 16px; }  /* prevents iOS focus zoom */
    .edit-panel-footer[b-2crxhibcrp] { flex-direction: column-reverse; }
    .edit-panel-footer .btn[b-2crxhibcrp] { width: 100%; }
}
/* /Pages/AllSystemUsers.razor.rz.scp.css */
/* All colors flow from /wwwroot/css/themes.css CSS variables.
   Light theme renders white card / dark text by default; .dark-theme on the
   <body> swaps every var(--*) value to the dark palette automatically.
   The table header retains a fixed navy background to match the brand bar. */

/* Main Container */
.employee-dashboard-container[b-2rr1fw78hq] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar */
.sidebar[b-2rr1fw78hq] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

/* Main Content Area */
.main-content[b-2rr1fw78hq] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.section-title[b-2rr1fw78hq] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 30px 0;
}

/* Employee Details Section */
.employee-details-section[b-2rr1fw78hq] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-2rr1fw78hq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.action-bar[b-2rr1fw78hq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-2rr1fw78hq] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-2rr1fw78hq] {
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.search-input[b-2rr1fw78hq] {
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    width: 250px;
    outline: none;
}

.search-input:focus[b-2rr1fw78hq] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.search-input[b-2rr1fw78hq]::placeholder {
    color: var(--input-placeholder);
}

.btn-export[b-2rr1fw78hq],
.btn-create[b-2rr1fw78hq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-export[b-2rr1fw78hq] {
    background-color: var(--success);
    color: #ffffff;
}

.btn-export:hover[b-2rr1fw78hq] {
    background-color: #059669;
    transform: translateY(-1px);
}

.btn-create[b-2rr1fw78hq] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-create:hover[b-2rr1fw78hq] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

/* Filters Row */
.filters-row[b-2rr1fw78hq] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-select[b-2rr1fw78hq] {
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 500;
}

.filter-select:focus[b-2rr1fw78hq] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.filter-select option[b-2rr1fw78hq] {
    background-color: var(--input-bg);
    color: var(--text-primary);
    padding: 8px;
}

.filter-select[b-2rr1fw78hq]::-ms-expand {
    display: none;
}

/* Table Container */
.table-container[b-2rr1fw78hq] {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-2rr1fw78hq] {
    width: 100%;
    border-collapse: collapse;
}

/* Header keeps the brand-navy bar regardless of theme — anchors the table
   visually and matches the page chrome. White text against navy is intentional
   and theme-independent. */
.employee-table thead[b-2rr1fw78hq] {
    background-color: var(--accent-dark);
}

.employee-table th[b-2rr1fw78hq] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    border-bottom: 2px solid var(--accent-dark);
}

.employee-table tbody tr[b-2rr1fw78hq] {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-2rr1fw78hq] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-2rr1fw78hq] {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

.employee-link[b-2rr1fw78hq] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.employee-link:hover[b-2rr1fw78hq] {
    color: var(--accent-hover);
    text-decoration: underline;
}

.action-buttons[b-2rr1fw78hq] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-btn[b-2rr1fw78hq] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover[b-2rr1fw78hq] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.action-btn.delete-btn:hover[b-2rr1fw78hq] {
    background-color: var(--error);
    color: #ffffff;
}

/* Pagination */
.pagination[b-2rr1fw78hq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.pagination-btn[b-2rr1fw78hq] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-2rr1fw78hq] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.pagination-btn:disabled[b-2rr1fw78hq] {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-info[b-2rr1fw78hq] {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* Loading and Empty States */
.loading-message[b-2rr1fw78hq],
.no-data-message[b-2rr1fw78hq] {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar[b-2rr1fw78hq] {
        width: 250px;
    }
    
    .main-content[b-2rr1fw78hq] {
        margin-left: 250px;
    }
    
    .filters-row[b-2rr1fw78hq] {
        flex-direction: column;
    }
    
    .filter-select[b-2rr1fw78hq] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .employee-dashboard-container[b-2rr1fw78hq] {
        flex-direction: column;
    }

    /* See Dashboard.razor.css for the rationale: the wrapper must collapse
       to zero so SharedHeader anchors at top: 0. PortalSidebar's internal
       elements remain visible via their own fixed positioning at this
       breakpoint, so functionality is unaffected. */
    .sidebar[b-2rr1fw78hq] {
        position: relative;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }
    
    .main-content[b-2rr1fw78hq] {
        margin-left: 0;
    }
    
    .section-header[b-2rr1fw78hq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .action-bar[b-2rr1fw78hq] {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .search-input[b-2rr1fw78hq] {
        width: 100%;
    }
    
    .employee-details-section[b-2rr1fw78hq] {
        padding: 20px;
    }
    
    /* Tables on mobile: enable horizontal scroll inside the container so the
       7-column employee table stays readable. Without overflow-x:auto the
       columns squash unreadably or the entire page scrolls horizontally. */
    .table-container[b-2rr1fw78hq] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .employee-table[b-2rr1fw78hq] {
        font-size: 12px;
        min-width: 720px;   /* keep columns wide enough to read */
    }

    .employee-table th[b-2rr1fw78hq],
    .employee-table td[b-2rr1fw78hq] {
        padding: 12px 8px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .employee-details-section[b-2rr1fw78hq] {
        padding: 16px;
    }

    .section-title[b-2rr1fw78hq] {
        font-size: 20px;
    }

    .pagination[b-2rr1fw78hq] {
        flex-direction: column;
        gap: 12px;
    }

    /* WCAG-friendly touch target on row action buttons (Edit / Toggle /
       Reset Password). Icon buttons on touch screens need 44×44 to be
       comfortably tappable; previously these were ~28×28. */
    .btn-icon[b-2rr1fw78hq],
    .actions-col .btn-icon[b-2rr1fw78hq] {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 10px;
    }

    /* Pagination pill buttons get the same minimum target. */
    .pagination button[b-2rr1fw78hq] {
        min-height: 44px;
    }
}

/* ── Inactive-user row styling ───────────────────────────────────────────────
   Soft-deleted (IsActive=false) rows are faded with a strikethrough on the
   name + a small "Inactive" pill so admins can tell at a glance whether the
   row's toggle button will deactivate or reactivate. */
.row-inactive[b-2rr1fw78hq] {
    background-color: #f8fafc;
    color: #6b7280;
}

.row-inactive td[b-2rr1fw78hq] {
    color: #6b7280;
}

.row-inactive .employee-link[b-2rr1fw78hq] {
    color: #6b7280;
    text-decoration: line-through;
}

.inactive-badge[b-2rr1fw78hq] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}

/* Reactivate button — green check icon. Distinct from the red Deactivate
   power-icon button (which keeps the existing .delete-btn styling). */
.activate-btn[b-2rr1fw78hq] {
    color: #15803d;
}

.activate-btn:hover[b-2rr1fw78hq] {
    background-color: rgba(34, 197, 94, 0.10);
    color: #166534;
}

/* /Pages/CasualStaff.razor.rz.scp.css */
/* All colors flow from /wwwroot/css/themes.css CSS variables. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

.employee-dashboard-container[b-eruy1vnpqb] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-eruy1vnpqb] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-eruy1vnpqb] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-eruy1vnpqb] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-eruy1vnpqb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title[b-eruy1vnpqb] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 30px 0;
}

.action-bar[b-eruy1vnpqb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-eruy1vnpqb] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-eruy1vnpqb] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    width: 250px;
    outline: none;
}

.search-input:focus[b-eruy1vnpqb] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.search-input[b-eruy1vnpqb]::placeholder {
    color: var(--input-placeholder);
}

.filter-select[b-eruy1vnpqb] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    font-weight: 500;
}

.btn[b-eruy1vnpqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary[b-eruy1vnpqb] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover[b-eruy1vnpqb] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.btn-outline[b-eruy1vnpqb] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.btn-outline:hover[b-eruy1vnpqb] {
    background-color: var(--btn-secondary-hover);
}

.employee-table-section[b-eruy1vnpqb] {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-eruy1vnpqb] {
    width: 100%;
    border-collapse: collapse;
}

.employee-table thead[b-eruy1vnpqb] {
    background-color: var(--bg-secondary);
}

.employee-table th[b-eruy1vnpqb] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
}

.employee-table tbody tr[b-eruy1vnpqb] {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-eruy1vnpqb] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-eruy1vnpqb] {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

/* ── Right-slide edit panel ──────────────────────────────────────────────── */

.edit-panel-overlay[b-eruy1vnpqb] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn-b-eruy1vnpqb 0.2s ease;
}

.edit-panel[b-eruy1vnpqb] {
    width: 640px;
    max-width: 100%;
    background-color: var(--card-bg);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideIn-b-eruy1vnpqb 0.2s ease;
}

.edit-panel-header[b-eruy1vnpqb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.edit-panel-header h3[b-eruy1vnpqb] {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}

.close-btn[b-eruy1vnpqb] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

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

.edit-panel-body[b-eruy1vnpqb] {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.edit-panel-footer[b-eruy1vnpqb] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
}

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

@keyframes slideIn-b-eruy1vnpqb {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ── Form helpers ────────────────────────────────────────────────────────── */

.form-grid[b-eruy1vnpqb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.form-label[b-eruy1vnpqb] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

.form-label-wide[b-eruy1vnpqb] {
    grid-column: 1 / -1;
}

.form-input[b-eruy1vnpqb] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 0.25rem;
}

.form-input:focus[b-eruy1vnpqb] {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.15);
}

.form-hint[b-eruy1vnpqb] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-checkbox[b-eruy1vnpqb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.required[b-eruy1vnpqb] {
    color: var(--error);
}

.alert[b-eruy1vnpqb] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-eruy1vnpqb] {
    background: var(--error-bg);
    border: 1px solid var(--error);
    color: var(--error);
}

.status-badge[b-eruy1vnpqb] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-eruy1vnpqb] {
    background: var(--success-bg);
    color: var(--success);
}

.status-inactive[b-eruy1vnpqb] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.status-terminated[b-eruy1vnpqb] {
    background: var(--error-bg);
    color: var(--error);
}

/* CAU-Staff: section headers inside the (now multi-section) edit panel. */
.form-section-title[b-eruy1vnpqb] {
    grid-column: 1 / -1;
    margin: 1.25rem 0 0.25rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.form-section-title:first-child[b-eruy1vnpqb] {
    margin-top: 0;
}

.btn-icon[b-eruy1vnpqb] {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 0.5rem;
}

.btn-icon:hover[b-eruy1vnpqb] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon.btn-danger[b-eruy1vnpqb] {
    color: var(--error);
    border-color: var(--error);
}

.btn-icon.btn-danger:hover[b-eruy1vnpqb] {
    background: var(--error-bg);
}

.actions-col[b-eruy1vnpqb] {
    text-align: right;
    white-space: nowrap;
}

.empty[b-eruy1vnpqb] {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

.loading-state[b-eruy1vnpqb],
.error-state[b-eruy1vnpqb] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.pagination[b-eruy1vnpqb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 16px;
    color: var(--text-secondary);
}
/* /Pages/ChangePassword.razor.rz.scp.css */
/* ===== ONE PORTAL – Reset Password (CSS isolation) ===== */

/* reset sizing */
*[b-ruffuwzfbz], *[b-ruffuwzfbz]::before, *[b-ruffuwzfbz]::after {
    box-sizing: border-box;
}

/* layout: mirror the login page */
.reset-shell[b-ruffuwzfbz] {
    --primary: #001F57;
    --heading: #292929;
    --sub: #585858;
    --placeholder: #C9D3E0;
    --border: #254a76;
    --input-h: 55px;
    --input-r: 16px;
    --content-w: 480px;

    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

.reset-left[b-ruffuwzfbz] {
    position: relative;
    background: #0b1b33;
}

.reset-img[b-ruffuwzfbz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reset-right[b-ruffuwzfbz] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 16px;
}

.reset-right h1[b-ruffuwzfbz] {
    margin: 0 0 10px;
    color: var(--heading);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
}

/* Subtle "← Back to Home" affordance shown above the heading when the
   user reached this page voluntarily (avatar dropdown). Hidden in the
   forced-change flow, where the user must complete the change before
   navigating away. Brand-navy mirrors the input focus halo so the
   visual story stays coherent across the form. */
.back-link[b-ruffuwzfbz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin-bottom: 6px;
    padding: 4px 2px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.back-link:hover[b-ruffuwzfbz] {
    color: #002b78;
    transform: translateX(-2px);
    text-decoration: underline;
}

.back-link:focus-visible[b-ruffuwzfbz] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.back-link i[b-ruffuwzfbz] {
    font-size: 16px;
    line-height: 1;
}

/* fields */
.field[b-ruffuwzfbz] {
    width: min(var(--content-w), 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.field label[b-ruffuwzfbz] {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    letter-spacing: .2px;
}

/* base input style — clean white surface, brand-navy focus halo. */
.input[b-ruffuwzfbz] {
    width: 100%;
    height: var(--input-h);
    padding: 0 18px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: var(--input-r);
    font-size: 15px;
    outline: none;
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input[b-ruffuwzfbz]::placeholder {
    color: #94a3b8;                      /* slate-400 — readable on white */
}

.input:focus[b-ruffuwzfbz] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

/* validation colors */
.input.valid[b-ruffuwzfbz] {
    border-color: #2e7d32;
}
.input.invalid[b-ruffuwzfbz] {
    border-color: #c62828;
}
.input.modified[b-ruffuwzfbz] {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* password toggle */
.password .password-wrap[b-ruffuwzfbz] {
    position: relative;
    width: min(var(--content-w), 100%);
}
.password .password-wrap .input[b-ruffuwzfbz] {
    width: 100%;
    padding-right: 46px;
}
.password .toggle[b-ruffuwzfbz] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    color: #8aa0b9;
    z-index: 1;
}
.password .toggle:hover[b-ruffuwzfbz] {
    color: #ffffff;
}
.password .toggle i[b-ruffuwzfbz] {
    font-size: 20px;
    line-height: 1;
}

/* forgot/OK/error alignment */
.ok-message[b-ruffuwzfbz],
.error-message[b-ruffuwzfbz],
.validation-message[b-ruffuwzfbz] {
    font-size: 12px;
    margin-top: 6px;
}

.ok-message[b-ruffuwzfbz] {
    color: #0a7a2f;
}
.error-message[b-ruffuwzfbz] {
    color: #c62828;
}

/* button */
.btn.primary[b-ruffuwzfbz] {
    width: min(var(--content-w), 100%);
    height: var(--input-h);
    border-radius: 22px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 22px;
    cursor: pointer;
}

.btn.primary:hover[b-ruffuwzfbz] {
    filter: brightness(1.05);
}
.btn.primary:active[b-ruffuwzfbz] {
    transform: translateY(1px);
}
.btn.primary[disabled][b-ruffuwzfbz] {
    opacity: .7;
    cursor: not-allowed;
}

/* ── Responsive ladder ──────────────────────────────────────────────────
   ChangePassword reuses the .reset-shell selectors (the form's structure
   is identical to ResetPassword). SideImagePanel hide + 100dvh fallback
   are global (wwwroot/css/app.css). */

@media (max-width: 960px) {
    .reset-shell[b-ruffuwzfbz] {
        grid-template-columns: 1fr;
    }
    .reset-right[b-ruffuwzfbz] {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .reset-right[b-ruffuwzfbz] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .reset-right[b-ruffuwzfbz] {
        padding: 20px 14px;
        gap: 12px;
    }
    .input[b-ruffuwzfbz],
    .form-control[b-ruffuwzfbz] {
        font-size: 16px;
    }
    .btn.primary[b-ruffuwzfbz] {
        width: 100%;
    }
    .pw-checks[b-ruffuwzfbz] {
        grid-template-columns: 1fr;
    }
    /* The "← Back to Home" link can crowd the heading on tiny phones —
       drop it onto its own line with a touch-friendly hit area. */
    .back-link[b-ruffuwzfbz] {
        margin-bottom: 10px;
        padding: 8px 4px;
        min-height: 36px;
    }
}
/* === Password strength meter === */
.pw-meter-wrap[b-ruffuwzfbz] {
    width: min(var(--content-w), 100%);
    margin-top: 8px;
}

.pw-meter[b-ruffuwzfbz] {
    --pct: 0;
    height: 8px;
    width: 100%;
    border-radius: 9999px;
    background: #2b3e57;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

    .pw-meter .bar[b-ruffuwzfbz] {
        height: 100%;
        width: calc(var(--pct) * 1%);
        background: linear-gradient(90deg, #c62828 0%, #f9a825 50%, #2e7d32 100%);
        transition: width .25s ease;
    }

.pw-label[b-ruffuwzfbz] {
    margin-top: 6px;
    font-size: 12px;
    color: #222;
    font-weight: 700;
    letter-spacing: .2px;
}

.pw-checks[b-ruffuwzfbz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12px;
    color: #333;
}

    .pw-checks .ok[b-ruffuwzfbz] {
        color: #2e7d32;
        font-weight: 700;
    }

    .pw-checks .bad[b-ruffuwzfbz] {
        color: #c62828;
        font-weight: 600;
    }

    .pw-checks .dot[b-ruffuwzfbz] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
        background: currentColor;
        vertical-align: middle;
    }

/* Heads-up banner shown above the form. Tells the user the post-change MFA
   wizard is coming so the redirect doesn't feel abrupt. */
.mfa-notice[b-ruffuwzfbz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 12px 0 18px;
    background: #eef4ff;
    border: 1px solid #c7d8f5;
    border-radius: 10px;
    color: #1e3a6b;
    font-size: 13.5px;
    line-height: 1.45;
}

.mfa-notice i[b-ruffuwzfbz] {
    color: #2553a3;
    font-size: 16px;
    margin-top: 1px;
    flex: 0 0 auto;
}

/* Persistent server-error banner shown when the API rejects a submit
   (e.g. PASSWORD_REUSED, PASSWORD_TOO_SIMILAR_TO_PREVIOUS, expired
   session). Sits between the form fields and the submit button so the
   user can't miss it. Subtle red — matches the .invalid border colour
   on the inputs themselves so the visual story is consistent. */
.api-error-banner[b-ruffuwzfbz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 14px 0 10px;
    background: #fff5f5;
    border: 1px solid #f5c4c4;
    border-radius: 10px;
    color: #b3261e;            /* MD3 error-on-error-container */
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
    /* Subtle slide-in so the banner is noticed when it first renders. */
    animation: errorBannerIn-b-ruffuwzfbz 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.api-error-banner svg[b-ruffuwzfbz] {
    color: #c62828;
    flex: 0 0 auto;
    margin-top: 1px;
}

@keyframes errorBannerIn-b-ruffuwzfbz {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* Main Container */
.dashboard-container[b-7d4lcwxp8n] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar */
.sidebar[b-7d4lcwxp8n] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: white;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

/* Main Content Area */
.main-content[b-7d4lcwxp8n] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page Header */
.page-header[b-7d4lcwxp8n] {
    background-color: var(--card-bg);
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    margin-left: -1px;
    border-left: 1px solid var(--border-primary);
}

.page-title[b-7d4lcwxp8n] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.user-profile[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.user-name[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.user-avatar-dropdown[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.user-avatar-dropdown:hover[b-7d4lcwxp8n] {
    background-color: var(--bg-secondary);
}

.user-avatar[b-7d4lcwxp8n] {
    width: 40px;
    height: 40px;
    background-color: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.user-dropdown-menu[b-7d4lcwxp8n] {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 200px;
    z-index: 1000;
    margin-top: 8px;
    border: 1px solid var(--border-primary);
}

.dropdown-item[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.dropdown-item:hover[b-7d4lcwxp8n] {
    background-color: var(--bg-secondary);
}

.dropdown-item svg[b-7d4lcwxp8n] {
    color: var(--text-tertiary);
}

.dropdown-divider[b-7d4lcwxp8n] {
    height: 1px;
    background-color: var(--border-primary);
    margin: 4px 0;
}

/* Welcome Banner */
.welcome-banner[b-7d4lcwxp8n] {
    padding: 40px 40px 20px;
}

.welcome-text[b-7d4lcwxp8n] {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Search Container */
.search-container[b-7d4lcwxp8n] {
    padding: 0 40px 30px;
    display: flex;
    justify-content: flex-end;
}

.search-box[b-7d4lcwxp8n] {
    position: relative;
    width: 320px;
}

.search-icon[b-7d4lcwxp8n] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--text-tertiary);
}

.search-input[b-7d4lcwxp8n] {
    width: 100%;
    height: 48px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    padding: 0 20px 0 50px;
    font-size: 16px;
    color: var(--text-secondary);
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-7d4lcwxp8n] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.search-input[b-7d4lcwxp8n]::placeholder {
    color: var(--input-placeholder);
}

/* Dashboard Content */
.dashboard-content[b-7d4lcwxp8n] {
    padding: 0 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.dashboard-row[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.dashboard-card[b-7d4lcwxp8n] {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--card-border);
}

.card-title[b-7d4lcwxp8n] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px 0;
    border-bottom: 2px solid var(--border-primary);
    padding-bottom: 12px;
}

/* Upcoming Events */
.upcoming-events[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.events-list[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.event-item[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-dot[b-7d4lcwxp8n] {
    width: 8px;
    height: 8px;
    background-color: #1e40af;
    border-radius: 50%;
    flex-shrink: 0;
}

.event-details[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-name[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.event-date[b-7d4lcwxp8n] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.calendar-widget[b-7d4lcwxp8n] {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    height: 160px;
    position: relative;
    align-self: flex-end;
    border: 1px solid var(--border-primary);
}

.calendar-header[b-7d4lcwxp8n] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 16px;
}

.calendar-dates[b-7d4lcwxp8n] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.calendar-date[b-7d4lcwxp8n] {
    width: 32px;
    height: 32px;
    background-color: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.calendar-date.highlighted[b-7d4lcwxp8n] {
    background-color: var(--accent-primary);
    color: white;
    transform: scale(1.1);
}

/* Employee Update */
.employee-update[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.update-section[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-7d4lcwxp8n] {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
    margin: 0;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 8px;
}

.employee-list[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.employee-item[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.employee-item:hover[b-7d4lcwxp8n] {
    background-color: var(--bg-secondary);
}

.employee-avatar[b-7d4lcwxp8n] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--accent-primary);
}

.employee-avatar.blue[b-7d4lcwxp8n] {
    background-color: #dbeafe;
}

.employee-avatar.pink[b-7d4lcwxp8n] {
    background-color: #fce7f3;
}

.employee-details[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.employee-name[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.employee-dept[b-7d4lcwxp8n] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.employee-date[b-7d4lcwxp8n] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Latest News */
.latest-news[b-7d4lcwxp8n] {
    grid-column: 1 / -1;
}

.news-content[b-7d4lcwxp8n] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.news-text[b-7d4lcwxp8n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-title[b-7d4lcwxp8n] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.news-body[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
}

.news-details[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-venue[b-7d4lcwxp8n],
.news-date[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.news-cta[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent-primary);
    margin: 0;
    line-height: 1.6;
}

.news-image[b-7d4lcwxp8n] {
    position: relative;
    width: 200px;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-primary);
}

.news-image img[b-7d4lcwxp8n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-arrow[b-7d4lcwxp8n] {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.news-arrow:hover[b-7d4lcwxp8n] {
    transform: scale(1.1);
}

/* Gallery */
.gallery[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-images[b-7d4lcwxp8n] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.gallery-item[b-7d4lcwxp8n] {
    width: 120px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-primary);
    transition: transform 0.2s ease;
}

.gallery-item:hover[b-7d4lcwxp8n] {
    transform: translateY(-4px);
}

.gallery-item img[b-7d4lcwxp8n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Helpful Links */
.helpful-links[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.links-list[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.helpful-link[b-7d4lcwxp8n] {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.helpful-link:hover[b-7d4lcwxp8n] {
    color: var(--accent-hover);
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar[b-7d4lcwxp8n] {
        width: 250px;
    }
    
    .main-content[b-7d4lcwxp8n] {
        margin-left: 250px;
    }
    
    .dashboard-row[b-7d4lcwxp8n] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .latest-news[b-7d4lcwxp8n] {
        grid-column: 1;
    }
    
    .news-content[b-7d4lcwxp8n] {
        flex-direction: column;
    }
    
    .news-image[b-7d4lcwxp8n] {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-7d4lcwxp8n] {
        flex-direction: column;
    }

    /* Collapse the sidebar wrapper to zero height on phones so SharedHeader
       anchors at the top of the viewport. PortalSidebar's own internal
       elements (the hamburger toggle, backdrop, and drawer panel) are all
       fixed-positioned at this breakpoint, so they remain visible/usable
       even though the wrapper takes no flow space. Without this rule the
       wrapper retains intrinsic height from `.portal-sidebar`'s base
       100vh declaration, pushing the dashboard header below the fold. */
    .sidebar[b-7d4lcwxp8n] {
        position: relative;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }

    .main-content[b-7d4lcwxp8n] {
        margin-left: 0;
    }
    
    .page-header[b-7d4lcwxp8n] {
        padding: 16px 20px;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .welcome-banner[b-7d4lcwxp8n] {
        padding: 20px 20px 16px;
    }
    
    .welcome-text[b-7d4lcwxp8n] {
        font-size: 24px;
    }
    
    .search-container[b-7d4lcwxp8n] {
        padding: 0 20px 20px;
    }
    
    .search-box[b-7d4lcwxp8n] {
        width: 100%;
    }
    
    .dashboard-content[b-7d4lcwxp8n] {
        padding: 0 20px 20px;
    }
    
    .dashboard-card[b-7d4lcwxp8n] {
        padding: 20px;
    }
    
    .calendar-widget[b-7d4lcwxp8n] {
        width: 100%;
        height: 140px;
    }
    
    .gallery-images[b-7d4lcwxp8n] {
        justify-content: center;
    }
    
    .gallery-item[b-7d4lcwxp8n] {
        width: 100px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .page-header[b-7d4lcwxp8n] {
        padding: 16px;
    }
    
    .page-title[b-7d4lcwxp8n] {
        font-size: 24px;
    }
    
    .welcome-banner[b-7d4lcwxp8n] {
        padding: 16px;
    }
    
    .welcome-text[b-7d4lcwxp8n] {
        font-size: 20px;
    }
    
    .dashboard-content[b-7d4lcwxp8n] {
        padding: 0 16px 16px;
    }
    
    .dashboard-card[b-7d4lcwxp8n] {
        padding: 16px;
    }
}

/* Modal Styles - Keep existing modal styles */
.passkey-modal-overlay[b-7d4lcwxp8n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.passkey-management-modal[b-7d4lcwxp8n] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    animation: modalSlideIn-b-7d4lcwxp8n 0.3s ease;
}

@keyframes modalSlideIn-b-7d4lcwxp8n {
    from {
        transform: scale(0.95) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.passkey-management-modal .modal-header[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 24px;
}

.header-content[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon[b-7d4lcwxp8n] {
    width: 48px;
    height: 48px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.header-text h2[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.header-text p[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.modal-close[b-7d4lcwxp8n] {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
}

.modal-close:hover[b-7d4lcwxp8n] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.passkey-management-modal .modal-body[b-7d4lcwxp8n] {
    padding: 0 24px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

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

/* Old spinner styles removed - using LfzSpinner component instead */

.loading-state p[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-secondary);
    margin: 0;
}

.passkeys-section[b-7d4lcwxp8n] {
    margin-bottom: 24px;
}

.section-header[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.add-passkey-btn[b-7d4lcwxp8n] {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.add-passkey-btn:hover[b-7d4lcwxp8n] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.passkeys-list[b-7d4lcwxp8n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.passkey-item[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.passkey-item:hover[b-7d4lcwxp8n] {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
}

.passkey-info[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.passkey-icon[b-7d4lcwxp8n] {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.passkey-details h4[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.passkey-details p[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.remove-passkey-btn[b-7d4lcwxp8n] {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: #ef4444;
    transition: all 0.2s ease;
}

.remove-passkey-btn:hover[b-7d4lcwxp8n] {
    background: #fef2f2;
    color: #dc2626;
}

.empty-state[b-7d4lcwxp8n] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-7d4lcwxp8n] {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state h4[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.empty-state p[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px;
}

.add-first-passkey-btn[b-7d4lcwxp8n] {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.add-first-passkey-btn:hover[b-7d4lcwxp8n] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.message[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    margin-bottom: 16px;
}

.success-message[b-7d4lcwxp8n] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.error-message[b-7d4lcwxp8n] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Toast Styles */
.toast-container[b-7d4lcwxp8n] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3000;
    animation: toastSlideIn-b-7d4lcwxp8n 0.3s ease-out;
}

@keyframes toastSlideIn-b-7d4lcwxp8n {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast[b-7d4lcwxp8n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 16px;
    min-width: 320px;
    border-left: 4px solid #10b981;
}

.success-toast[b-7d4lcwxp8n] {
    border-left-color: #10b981;
}

.toast-icon[b-7d4lcwxp8n] {
    color: #10b981;
    flex-shrink: 0;
    margin-top: 2px;
}

.toast-content[b-7d4lcwxp8n] {
    flex: 1;
}

.toast-content h4[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.toast-content p[b-7d4lcwxp8n] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.toast-close[b-7d4lcwxp8n] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-tertiary);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.toast-close:hover[b-7d4lcwxp8n] {
    background-color: var(--bg-secondary);
}

/* TeleportHQ Strict Replica (scoped) */
.tp-scope[b-7d4lcwxp8n] {
    font-family: "Inter", "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
}
.tp-grid[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: minmax(760px, 1fr) 320px; /* widen left, keep right fixed */
    column-gap: 25px;
    align-items: start;
    width: 100%; /* ensure right column hugs the container's right edge */
    min-width: 0; /* Allow grid to shrink below content size */
    box-sizing: border-box;
}
.tp-left[b-7d4lcwxp8n] {
    display: grid;
    grid-template-rows: 327px 455px;
    row-gap: 25px;
    min-width: 0; /* Allow grid to shrink */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
}
.tp-card[b-7d4lcwxp8n] {
    background: #FFFFFF;
    border-radius: 30px;
    border: 1px solid rgba(0, 9, 26, 0.06);
    padding: 30px 24px;
    overflow: hidden; /* Prevent content from overflowing card borders */
    box-sizing: border-box; /* Include padding in width calculations */
    width: 100%; /* Ensure card respects container width */
    max-width: 100%; /* Prevent card from exceeding container */
}
.tp-card-hd[b-7d4lcwxp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px 0;
    min-width: 0; /* Allow header to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-h-label[b-7d4lcwxp8n] {
    margin: 0;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1; /* Allow label to take available space */
    min-width: 0; /* Allow label to shrink */
}
.tp-icon-btn[b-7d4lcwxp8n] {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 9, 26, 0.06);
    box-shadow: 0 3.233263px 20px rgba(0, 9, 26, 0.10);
    display: grid;
    place-items: center;
    color: var(--heading);
}
.tp-icon-btn .chev[b-7d4lcwxp8n] { width: 20px; height: 20px; }
/* Upcoming Events */
.tp-events-body[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: center; /* Center align items vertically */
    margin-top: 0;
    min-width: 0; /* Allow grid container to shrink */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
    width: 100%; /* Ensure it respects parent width */
    max-width: 100%; /* Prevent exceeding parent */
}
.tp-events-list[b-7d4lcwxp8n] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    row-gap: 16px;
    min-width: 0; /* Allow list to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-event[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 8px 1fr;
    column-gap: 10px;
    align-items: start;
    min-width: 0; /* Allow grid item to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-bullet[b-7d4lcwxp8n] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    margin-top: 5px;
    flex-shrink: 0;
}
.tp-event-txt[b-7d4lcwxp8n] { 
    display: flex; 
    flex-direction: column;
    gap: 3px; 
    min-width: 0; /* Allow grid item to shrink below content size */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
}
.tp-event-name[b-7d4lcwxp8n] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
    margin: 0;
    padding: 0;
}
.tp-event-date[b-7d4lcwxp8n] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-muted);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
    margin: 0;
    padding: 0;
}
/* Calendar */
.tp-cal[b-7d4lcwxp8n] {
    width: 280px;
    max-width: 100%;
    height: 185px;
    background: #FFFFFF;
    border-radius: 24.249px;
    box-shadow: 0 3.233263px 20px rgba(0, 9, 26, 0.10);
    padding: 16px 18px 14px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.tp-cal-nav[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
}
.tp-cal-pill[b-7d4lcwxp8n] {
    justify-self: start;
    background: rgba(242, 242, 242, 0.8);
    color: var(--text-muted);
    border-radius: 40.416px;
    padding: 6px 12px;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 9.487px;
    line-height: 1;
}
.tp-cal-nav .tp-cal-pill:last-child[b-7d4lcwxp8n] { justify-self: end; }
.tp-cal-month[b-7d4lcwxp8n] {
    margin: 0;
    justify-self: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 11.385px;
    line-height: 1;
    color: var(--text-primary);
}
.tp-cal-grid[b-7d4lcwxp8n] {
    display: grid;
    grid-template-rows: auto repeat(4, 1fr);
    gap: 6px;
}
.tp-cal-dow[b-7d4lcwxp8n],
.tp-cal-row[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 14px;
}
.tp-cal-dow .dow[b-7d4lcwxp8n] {
    text-align: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 10.508px;
    line-height: 1;
    color: var(--text-primary);
}
.tp-cal-row .date[b-7d4lcwxp8n] {
    position: relative;
    text-align: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 8.083px;
    line-height: 1;
    color: var(--text-primary);
    padding-top: 6px;
    z-index: 0; /* base layer; text will sit above negative z-index dot */
}
.tp-cal-row .date.muted[b-7d4lcwxp8n] { color: var(--text-muted); }
.tp-cal-row .date.has-dot .dot[b-7d4lcwxp8n] {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #FF6A00; /* strong orange like screenshot */
    z-index: -1; /* place dot behind the date text */
}
.tp-cal-row .date.has-dot[b-7d4lcwxp8n] {
    color: #FFFFFF; /* ensure date number is clearly visible on orange dot */
    font-weight: 700; /* match strong contrast as per screenshot */
    text-shadow: 0 0 1px rgba(0,0,0,0.15); /* subtle crispness on vibrant dot */
}
/* Latest News */
.tp-news-body[b-7d4lcwxp8n] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 219px;
    align-items: center;
    gap: 24px;
    min-width: 0; /* Allow grid container to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-news-text[b-7d4lcwxp8n] { 
    display: grid; 
    row-gap: 18px; 
    padding-right: 12px;
    min-width: 0; /* Allow grid item to shrink */
    overflow-wrap: break-word;
    word-wrap: break-word;
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
}
.tp-news-head[b-7d4lcwxp8n] {
    margin: 0;
    max-width: 100%; /* Changed from 275px to 100% to respect container */
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.2;
    color: var(--heading);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
.tp-news-copy[b-7d4lcwxp8n] {
    margin: 0;
    max-width: 100%; /* Changed from 401px to 100% to respect container */
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
.tp-news-meta p[b-7d4lcwxp8n] {
    margin: 0;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
.tp-news-media[b-7d4lcwxp8n] {
    width: 219px;
    height: 291px;
    border-radius: 30px;
    overflow: hidden;
    margin: 0;
    flex-shrink: 0; /* Prevent image from shrinking */
    box-sizing: border-box;
    max-width: 100%; /* Ensure it doesn't exceed container */
}
.tp-news-media img[b-7d4lcwxp8n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Employee Update */
.tp-employee[b-7d4lcwxp8n] {
    width: 320px;
    display: grid;
    row-gap: 28px;
    min-width: 0; /* Allow grid to shrink */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
    max-width: 100%; /* Prevent exceeding container */
}
.tp-emp-sec[b-7d4lcwxp8n] { 
    display: grid; 
    row-gap: 18px; 
    min-width: 0; /* Allow grid to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-emp-hd[b-7d4lcwxp8n] {
    margin: 0;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    color: var(--heading);
}
.tp-emp-list[b-7d4lcwxp8n] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    row-gap: 16px;
    min-width: 0; /* Allow list to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-emp-item[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 63px 1fr;
    column-gap: 15px;
    align-items: center;
    min-width: 0; /* Allow grid item to shrink */
    overflow: hidden; /* Prevent overflow */
}
.tp-avatar[b-7d4lcwxp8n] {
    width: 63px;
    height: 63px;
    border-radius: 50%;
    background: #E6EAF6;
    color: var(--heading);
    display: grid;
    place-items: center;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 700;
    font-size: 22px;
}
.tp-emp-text[b-7d4lcwxp8n] { 
    display: grid; 
    row-gap: 6px;
    min-width: 0; /* Allow grid item to shrink */
    overflow-wrap: break-word;
    word-wrap: break-word;
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
}
.emp-name[b-7d4lcwxp8n] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
.emp-role[b-7d4lcwxp8n] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
.emp-date[b-7d4lcwxp8n] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--text-primary);
}

/* Dark Mode support (do not rely on global styles; override locally) */
@media (prefers-color-scheme: dark) {
    .tp-card[b-7d4lcwxp8n] { background: var(--card-bg, #0f172a); border-color: var(--border-primary, rgba(255,255,255,0.08)); }
    .tp-h-label[b-7d4lcwxp8n] { color: var(--text-secondary, #a1a1aa); }
    .tp-news-head[b-7d4lcwxp8n] { color: #9db2ff; }
    .tp-news-copy[b-7d4lcwxp8n], .tp-news-meta p[b-7d4lcwxp8n],
    .tp-event-name[b-7d4lcwxp8n], .tp-event-date[b-7d4lcwxp8n],
    .emp-name[b-7d4lcwxp8n], .emp-role[b-7d4lcwxp8n], .emp-date[b-7d4lcwxp8n] { color: var(--text-primary, #e5e7eb); }
    .tp-cal[b-7d4lcwxp8n] { background: var(--card-bg, #0f172a); }
    .tp-icon-btn[b-7d4lcwxp8n] { background: var(--card-bg, #0f172a); border-color: var(--border-primary, rgba(255,255,255,0.08)); color: #c7d2fe; }
    .tp-avatar[b-7d4lcwxp8n] { background: #1f2a48; color: #c7d2fe; }
}
/* Common app dark mode hooks */
body.dark .tp-card[b-7d4lcwxp8n],
[data-theme="dark"] .tp-card[b-7d4lcwxp8n],
.theme-dark .tp-card[b-7d4lcwxp8n] {
    background: var(--card-bg, #0f172a);
    border-color: var(--border-primary, rgba(255,255,255,0.08));
}
body.dark .tp-cal[b-7d4lcwxp8n],
[data-theme="dark"] .tp-cal[b-7d4lcwxp8n],
.theme-dark .tp-cal[b-7d4lcwxp8n] {
    background: var(--card-bg, #0f172a);
}
body.dark .tp-h-label[b-7d4lcwxp8n],
[data-theme="dark"] .tp-h-label[b-7d4lcwxp8n],
.theme-dark .tp-h-label[b-7d4lcwxp8n] { color: var(--text-secondary, #a1a1aa); }
body.dark .tp-icon-btn[b-7d4lcwxp8n],
[data-theme="dark"] .tp-icon-btn[b-7d4lcwxp8n],
.theme-dark .tp-icon-btn[b-7d4lcwxp8n] {
    background: var(--card-bg, #0f172a);
    border-color: var(--border-primary, rgba(255,255,255,0.08));
    color: #c7d2fe;
}
body.dark .tp-news-head[b-7d4lcwxp8n],
[data-theme="dark"] .tp-news-head[b-7d4lcwxp8n],
.theme-dark .tp-news-head[b-7d4lcwxp8n] { color: #9db2ff; }
body.dark .tp-news-copy[b-7d4lcwxp8n],
body.dark .tp-news-meta p[b-7d4lcwxp8n],
body.dark .tp-event-name[b-7d4lcwxp8n],
body.dark .tp-event-date[b-7d4lcwxp8n],
body.dark .emp-name[b-7d4lcwxp8n],
body.dark .emp-role[b-7d4lcwxp8n],
body.dark .emp-date[b-7d4lcwxp8n],
[data-theme="dark"] .tp-news-copy[b-7d4lcwxp8n],
[data-theme="dark"] .tp-news-meta p[b-7d4lcwxp8n],
[data-theme="dark"] .tp-event-name[b-7d4lcwxp8n],
[data-theme="dark"] .tp-event-date[b-7d4lcwxp8n],
[data-theme="dark"] .emp-name[b-7d4lcwxp8n],
[data-theme="dark"] .emp-role[b-7d4lcwxp8n],
[data-theme="dark"] .emp-date[b-7d4lcwxp8n],
.theme-dark .tp-news-copy[b-7d4lcwxp8n],
.theme-dark .tp-news-meta p[b-7d4lcwxp8n],
.theme-dark .tp-event-name[b-7d4lcwxp8n],
.theme-dark .tp-event-date[b-7d4lcwxp8n],
.theme-dark .emp-name[b-7d4lcwxp8n],
.theme-dark .emp-role[b-7d4lcwxp8n],
.theme-dark .emp-date[b-7d4lcwxp8n] { color: var(--text-primary, #e5e7eb); }
body.dark .tp-avatar[b-7d4lcwxp8n],
[data-theme="dark"] .tp-avatar[b-7d4lcwxp8n],
.theme-dark .tp-avatar[b-7d4lcwxp8n] { background: #1f2a48; color: #c7d2fe; }

/* ===== TeleportHQ: Gallery + Helpful Links ===== */
.tp-gallery[b-7d4lcwxp8n],
.tp-links[b-7d4lcwxp8n] {
    border: 1px solid rgba(0, 9, 26, 0.06);
    border-radius: 30px;
    background: #FFFFFF;
    padding: 40px 30px;
    overflow: hidden; /* Prevent content from overflowing */
    box-sizing: border-box; /* Include padding in width calculations */
    width: 100%; /* Ensure card respects container width */
    max-width: 100%; /* Prevent card from exceeding container */
}
.tp-gallery .tp-h-label[b-7d4lcwxp8n],
.tp-links .tp-h-label[b-7d4lcwxp8n] {
    margin: 0;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
}
.tp-gallery[b-7d4lcwxp8n] {
    width: 100%; /* expand to match the left column width above */
    min-height: 392px;
}
.tp-links[b-7d4lcwxp8n] {
    width: 320px;
    min-height: 392px;
}
/* Make the Gallery/Helpful Links row use the same column geometry as the top grid,
   so the Helpful Links card aligns perfectly with Employee Update on the right. */
.tp-scope > .dashboard-row[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: minmax(760px, 1fr) 320px;
    column-gap: 25px;
    align-items: start;
    min-width: 0; /* Allow grid to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-gallery-grid[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 128px 358px 128px;
    column-gap: 25px;
    align-items: start;
    margin-top: 24px;
    min-width: 0; /* Allow grid to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-g-item[b-7d4lcwxp8n] {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    background: #D9D9D9;
}
.tp-g-left[b-7d4lcwxp8n],
.tp-g-right[b-7d4lcwxp8n] {
    width: 128px;
    height: 216px;
    border-radius: 11.0357px;
}
.tp-g-center[b-7d4lcwxp8n] {
    width: 358px;
    height: 268px;
}
.tp-g-item > img[b-7d4lcwxp8n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tp-links-list[b-7d4lcwxp8n] {
    display: grid;
    row-gap: 52px;
    margin-top: 24px;
    min-width: 0; /* Allow list to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-link[b-7d4lcwxp8n] {
    text-decoration: none;
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--heading);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
@media (prefers-color-scheme: dark) {
    .tp-gallery[b-7d4lcwxp8n],
    .tp-links[b-7d4lcwxp8n] {
        background: var(--card-bg, #0f172a);
        border-color: var(--border-primary, rgba(255,255,255,0.08));
    }
    .tp-gallery .tp-h-label[b-7d4lcwxp8n],
    .tp-links .tp-h-label[b-7d4lcwxp8n] { color: var(--text-secondary, #a1a1aa); }
    .tp-link[b-7d4lcwxp8n] { color: #9db2ff; }
    .tp-g-item[b-7d4lcwxp8n] { background: #1f2937; }
}
body.dark .tp-gallery[b-7d4lcwxp8n], [data-theme="dark"] .tp-gallery[b-7d4lcwxp8n], .theme-dark .tp-gallery[b-7d4lcwxp8n],
body.dark .tp-links[b-7d4lcwxp8n],  [data-theme="dark"] .tp-links[b-7d4lcwxp8n],  .theme-dark .tp-links[b-7d4lcwxp8n] {
    background: var(--card-bg, #0f172a);
    border-color: var(--border-primary, rgba(255,255,255,0.08));
}
body.dark .tp-gallery .tp-h-label[b-7d4lcwxp8n], [data-theme="dark"] .tp-gallery .tp-h-label[b-7d4lcwxp8n], .theme-dark .tp-gallery .tp-h-label[b-7d4lcwxp8n],
body.dark .tp-links .tp-h-label[b-7d4lcwxp8n],  [data-theme="dark"] .tp-links .tp-h-label[b-7d4lcwxp8n],  .theme-dark .tp-links .tp-h-label[b-7d4lcwxp8n] {
    color: var(--text-secondary, #a1a1aa);
}
body.dark .tp-link[b-7d4lcwxp8n], [data-theme="dark"] .tp-link[b-7d4lcwxp8n], .theme-dark .tp-link[b-7d4lcwxp8n] { color: #9db2ff; }
body.dark .tp-g-item[b-7d4lcwxp8n], [data-theme="dark"] .tp-g-item[b-7d4lcwxp8n], .theme-dark .tp-g-item[b-7d4lcwxp8n] { background: #1f2937; }

/* Our Core Values */
.tp-core-values[b-7d4lcwxp8n] {
    width: 320px;
    display: grid;
    row-gap: 28px;
    min-width: 0; /* Allow grid to shrink */
    overflow: hidden; /* Prevent overflow */
    box-sizing: border-box;
    max-width: 100%; /* Prevent exceeding container */
}
.tp-values-list[b-7d4lcwxp8n] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    row-gap: 24px;
    min-width: 0; /* Allow list to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-value-item[b-7d4lcwxp8n] {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 16px;
    align-items: center;
    min-width: 0; /* Allow grid item to shrink */
    overflow: hidden; /* Prevent overflow */
    width: 100%; /* Respect container width */
    max-width: 100%; /* Prevent exceeding container */
    box-sizing: border-box;
}
.tp-value-icon[b-7d4lcwxp8n] {
    width: 24px;
    height: 24px;
    color: var(--heading);
    flex-shrink: 0;
}
.tp-value-text[b-7d4lcwxp8n] {
    font-family: "Ubuntu", "Inter", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block; /* Ensure it's a block element */
}
@media (prefers-color-scheme: dark) {
    .tp-core-values[b-7d4lcwxp8n] {
        background: var(--card-bg, #0f172a);
        border-color: var(--border-primary, rgba(255,255,255,0.08));
    }
    .tp-core-values .tp-h-label[b-7d4lcwxp8n] {
        color: var(--text-secondary, #a1a1aa);
    }
    .tp-value-icon[b-7d4lcwxp8n] {
        color: #9db2ff;
    }
    .tp-value-text[b-7d4lcwxp8n] {
        color: var(--text-primary, #e5e7eb);
    }
}
body.dark .tp-core-values[b-7d4lcwxp8n],
[data-theme="dark"] .tp-core-values[b-7d4lcwxp8n],
.theme-dark .tp-core-values[b-7d4lcwxp8n] {
    background: var(--card-bg, #0f172a);
    border-color: var(--border-primary, rgba(255,255,255,0.08));
}
body.dark .tp-core-values .tp-h-label[b-7d4lcwxp8n],
[data-theme="dark"] .tp-core-values .tp-h-label[b-7d4lcwxp8n],
.theme-dark .tp-core-values .tp-h-label[b-7d4lcwxp8n] {
    color: var(--text-secondary, #a1a1aa);
}
body.dark .tp-value-icon[b-7d4lcwxp8n],
[data-theme="dark"] .tp-value-icon[b-7d4lcwxp8n],
.theme-dark .tp-value-icon[b-7d4lcwxp8n] {
    color: #9db2ff;
}
body.dark .tp-value-text[b-7d4lcwxp8n],
[data-theme="dark"] .tp-value-text[b-7d4lcwxp8n],
.theme-dark .tp-value-text[b-7d4lcwxp8n] {
    color: var(--text-primary, #e5e7eb);
}

/* ========================================================================
   MOBILE RESPONSIVENESS — Dashboard
   ------------------------------------------------------------------------
   The TeleportHQ-imported `.tp-grid` rule has a fixed left column with
   `minmax(760px, 1fr)` plus a 320px right rail, which forces horizontal
   scroll below ~1100px viewport (breaks iPad portrait + every phone).
   These overrides collapse the grid to a single column under tablet width
   and ensure the dashboard stays usable on touch devices.
   ======================================================================== */
@media (max-width: 1024px) {
    .tp-grid[b-7d4lcwxp8n] {
        grid-template-columns: 1fr !important;
        column-gap: 0;
        row-gap: 16px;
    }
    .tp-grid > *[b-7d4lcwxp8n] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .tp-left[b-7d4lcwxp8n],
    .tp-right[b-7d4lcwxp8n] {
        width: 100%;
    }
}

/* ========================================================================
   iOS Safari + small-phone polish
   ------------------------------------------------------------------------
   `height: 100vh` on `.main-content` and `.sidebar` clips bottom content
   when the iOS Safari URL bar slides in. `100dvh` is the dynamic fix; we
   keep `100vh` as the fallback in the cascade. Also: `.search-box` had
   a fixed 320px width that overflows the 320–375px phone action bar.
   ======================================================================== */
.dashboard-container[b-7d4lcwxp8n] {
    min-height: 100dvh;        /* augments the existing min-height: 100vh */
}

.sidebar[b-7d4lcwxp8n] {
    height: 100dvh;
}

.main-content[b-7d4lcwxp8n] {
    height: auto;              /* let content drive height on touch devices */
    min-height: 100vh;
    min-height: 100dvh;
}

@media (max-width: 600px) {
    /* Search box: full-width on phones so it doesn't push the avatar
       button off-screen when the action bar wraps. */
    .search-box[b-7d4lcwxp8n] {
        width: 100%;
    }
    /* Page header padding tighter on small screens. */
    .page-header[b-7d4lcwxp8n] {
        padding: 14px 16px;
    }
    .welcome-banner[b-7d4lcwxp8n] {
        padding: 18px 16px 14px;
    }
}

@media (max-width: 480px) {
    /* Touch-target floor for any icon button inside the dashboard chrome. */
    .btn-icon[b-7d4lcwxp8n],
    .icon-button[b-7d4lcwxp8n],
    .nav-toggle[b-7d4lcwxp8n] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Manage button — sits inline in .tp-card-hd next to the section title (Latest
   News / Gallery). Visible only to Admin / SuperAdmin (gated in the markup).
   Sized to match the existing .tp-icon-btn rhythm so the header stays balanced. */
.tp-manage-btn[b-7d4lcwxp8n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 9, 26, 0.08);
    background: #ffffff;
    color: var(--heading);
    font-family: "Ubuntu", "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 9, 26, 0.06);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.tp-manage-btn:hover[b-7d4lcwxp8n] {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 9, 26, 0.10);
}

.tp-manage-btn:active[b-7d4lcwxp8n] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 9, 26, 0.10);
}
/* /Pages/Divisions.razor.rz.scp.css */
/* Divisions admin page styling — themed via /wwwroot/css/themes.css vars.
   Blazor CSS isolation scopes every selector here to Divisions.razor only. */

/* ── Layout shell ────────────────────────────────────────────────────── */

.employee-dashboard-container[b-l7fo983w5b] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-l7fo983w5b] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-l7fo983w5b] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.section-title[b-l7fo983w5b] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px 0;
}

.employee-details-section[b-l7fo983w5b] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-l7fo983w5b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.action-bar[b-l7fo983w5b] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.muted[b-l7fo983w5b] {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* ── Main table ──────────────────────────────────────────────────────── */

.table-container[b-l7fo983w5b] {
    background-color: var(--card-bg);
    border-radius: 12px;
    /* overflow-x clips horizontal scroll on narrow viewports; overflow-y must
       stay 'visible' so the .org-tree popover can render outside the row
       without being chopped at the table edge. */
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-l7fo983w5b] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.employee-table thead[b-l7fo983w5b] {
    background-color: var(--accent-dark);
}

.employee-table th[b-l7fo983w5b] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    border-bottom: 2px solid var(--accent-dark);
}

.employee-table tbody tr[b-l7fo983w5b] {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-l7fo983w5b] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-l7fo983w5b] {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-primary);
    vertical-align: top;
}

/* Two-line "head" cell. */
.head-name[b-l7fo983w5b]  { font-weight: 600; color: var(--text-primary); }
.head-meta[b-l7fo983w5b]  { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.head-empty[b-l7fo983w5b] { color: var(--text-muted); font-style: italic; }

.actions-col[b-l7fo983w5b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── Icon action buttons (Edit / Update head / Delete head) ────────────
   Replaces the text-label buttons with compact 32×32 icon affordances.
   Tooltip is provided by the native `title` attribute (consistent with
   the existing `title="Bulk-reassign HOD"` pattern elsewhere on the page).
   Each variant gets its own brand-aligned hover colour so the meaning is
   reinforced visually:
     • edit   → neutral slate (no destructive intent)
     • update → brand navy (stable / configuration action)
     • delete → red (destructive — same as the old btn-danger-outline)
*/
.icon-btn[b-l7fo983w5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.icon-btn:hover:not(:disabled)[b-l7fo983w5b] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.icon-btn:active:not(:disabled)[b-l7fo983w5b] {
    transform: translateY(0);
}

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

/* Edit — neutral. */
.icon-btn-edit:hover:not(:disabled)[b-l7fo983w5b] {
    color: #1e293b;
    border-color: #94a3b8;
    background: #f8fafc;
}

/* Update division head — brand navy (stable/info accent). */
.icon-btn-update:hover:not(:disabled)[b-l7fo983w5b] {
    color: #ffffff;
    background: var(--accent-primary, #001F57);
    border-color: var(--accent-primary, #001F57);
}

/* Delete head — destructive. */
.icon-btn-delete:hover:not(:disabled)[b-l7fo983w5b] {
    color: #ffffff;
    background: var(--error, #dc2626);
    border-color: var(--error, #dc2626);
}

/* Department-count chip + Manage link in the count column. */
.badge-count[b-l7fo983w5b] {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    margin-right: 6px;
}

.btn-link[b-l7fo983w5b] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
}

.btn-link:hover[b-l7fo983w5b] { color: var(--accent-hover); text-decoration: underline; }

/* Status pill — shared across divisions and departments. */
.status-badge[b-l7fo983w5b] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-active[b-l7fo983w5b]   { background-color: #dcfce7; color: #166534; }
.status-inactive[b-l7fo983w5b] { background-color: #fee2e2; color: #991b1b; }

/* Inactive row dimming — applied to both top-level and dept tables. */
.row-inactive[b-l7fo983w5b] { background-color: var(--bg-secondary); }
.row-inactive td[b-l7fo983w5b] { color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   Org-chart visualisation
   ────────────────────────────────────────────────────────────────────────
   Two surfaces, designed as one system:

   1. .org-card  — the hover popover. Material-3-inspired surface with
                   tonal elevation, an avatar with deterministic gradient,
                   stat pills, and a stagger-animated department list.
                   "View full org chart" CTA promotes to:

   2. .zoom-card — the click-zoom full visualisation. Backdrop-blurred
                   overlay, centered tree (Division → Head → Departments)
                   with pure-CSS connectors and stagger-animated nodes.

   Easing curve cubic-bezier(0.16, 1, 0.3, 1) is Material 3's "emphasized
   decelerate" — it produces the slow-then-snap feeling that makes Google's
   surfaces feel alive without bouncing.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cell trigger ──────────────────────────────────────────────────── */

.division-cell[b-l7fo983w5b] {
    position: relative;
    cursor: default;
}

.division-cell-inner[b-l7fo983w5b] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.division-cell-name[b-l7fo983w5b] { font-weight: 700; }

.division-cell-hint[b-l7fo983w5b] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 3px 8px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.division-cell:hover .division-cell-hint[b-l7fo983w5b] {
    opacity: 1;
    transform: translateY(0);
    color: var(--accent-dark);
    background: rgba(0, 31, 87, 0.08);
}

/* ── .org-card hover popover ──────────────────────────────────────── */

.org-card[b-l7fo983w5b] {
    /* Hidden until parent :hover. We use opacity + visibility (not display)
       so the entrance animation has frames to interpolate over. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.20s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.20s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.20s;

    position: absolute;
    top: calc(100% - 2px);     /* slight overlap kills the cursor-gap glitch */
    left: 0;
    z-index: 50;
    width: 360px;
    padding: 18px 18px 16px;

    /* Material-3 surface: layered shadow + subtle tinted border. */
    background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-bg) 100%);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.10),
        0 24px 56px rgba(15, 23, 42, 0.12);

    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}

/* Soft conic-gradient glow behind the card — the tiny touch that makes
   it feel premium without being loud. Sits behind everything. */
.org-card-glow[b-l7fo983w5b] {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    pointer-events: none;
    background: radial-gradient(130% 90% at 0% 0%, rgba(0, 31, 87, 0.06) 0%, transparent 58%);
    z-index: 0;
}

.org-card > *[b-l7fo983w5b] { position: relative; z-index: 1; }

/* Tail pointer back at the trigger cell. */
.org-card[b-l7fo983w5b]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: var(--card-bg);
    border-top: 1px solid var(--card-border);
    border-left: 1px solid var(--card-border);
    transform: rotate(45deg);
    z-index: 0;
}

.division-cell:hover .org-card[b-l7fo983w5b] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Header — eyebrow label + division name, status pill on the right. */
.org-card-header[b-l7fo983w5b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 14px;
}

.org-card-eyebrow[b-l7fo983w5b] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.org-card-title[b-l7fo983w5b] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.org-card-status[b-l7fo983w5b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.org-card-status.is-active[b-l7fo983w5b]   { color: #166534; background-color: rgba(34, 197, 94, 0.14); }
.org-card-status.is-inactive[b-l7fo983w5b] { color: #991b1b; background-color: rgba(239, 68, 68, 0.14); }

.org-card-status-dot[b-l7fo983w5b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.org-card-status.is-active .org-card-status-dot[b-l7fo983w5b] {
    animation: orgPulse-b-l7fo983w5b 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes orgPulse-b-l7fo983w5b {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Stat pills row */
.org-card-stats[b-l7fo983w5b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.org-stat[b-l7fo983w5b] {
    text-align: center;
    padding: 10px 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.18s ease;
}

.org-stat:hover[b-l7fo983w5b] {
    transform: translateY(-1px);
    background: var(--bg-tertiary);
}

.org-stat-num[b-l7fo983w5b] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.org-stat-label[b-l7fo983w5b] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Section blocks (Head, Departments). */
.org-card-section[b-l7fo983w5b] { margin-bottom: 14px; }
.org-card-section:last-of-type[b-l7fo983w5b] { margin-bottom: 12px; }

.org-card-section-label[b-l7fo983w5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.org-section-count[b-l7fo983w5b] {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-dark);
    background: rgba(0, 31, 87, 0.08);
    padding: 1px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

/* Person row — avatar + info. Reused in zoom modal too. */
.org-person[b-l7fo983w5b] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.org-person-vacant[b-l7fo983w5b] {
    background: transparent;
    border-style: dashed;
}

.org-person-info[b-l7fo983w5b] { flex: 1; min-width: 0; }
.org-person-name[b-l7fo983w5b] { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.org-person-meta[b-l7fo983w5b] { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avatar — circular gradient surface with 2-letter monogram. data-tone
   indexes one of six palette pairs so the same person always reads with
   the same swatch. */
.org-avatar[b-l7fo983w5b] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;   /* lets a profile photo overlay the initials */
    overflow: hidden;     /* clips the photo to the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    user-select: none;
    box-shadow:
        0 0 0 2px var(--card-bg),
        0 2px 6px rgba(15, 23, 42, 0.18);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.org-avatar[data-tone="0"][b-l7fo983w5b] { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); }
.org-avatar[data-tone="1"][b-l7fo983w5b] { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); }
.org-avatar[data-tone="2"][b-l7fo983w5b] { background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%); }
.org-avatar[data-tone="3"][b-l7fo983w5b] { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.org-avatar[data-tone="4"][b-l7fo983w5b] { background: linear-gradient(135deg, #10b981 0%, #84cc16 100%); }
.org-avatar[data-tone="5"][b-l7fo983w5b] { background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%); }

.org-avatar-vacant[b-l7fo983w5b] {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    color: #475569;
}

/* Department list — staggered fade-in driven by --i style var. */
.org-dept-list[b-l7fo983w5b] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed var(--border-primary);
}

.org-dept-item[b-l7fo983w5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px dashed var(--border-primary);
    /* Stagger keyed off custom property --i (set inline per row). */
    opacity: 0;
    transform: translateX(-4px);
    animation: orgDeptIn-b-l7fo983w5b 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(120ms + (var(--i, 0) * 40ms));
}

/* Re-trigger animation each time the popover opens by tying it to :hover. */
.division-cell:hover .org-dept-item[b-l7fo983w5b] { animation-play-state: running; }

@keyframes orgDeptIn-b-l7fo983w5b {
    to { opacity: 1; transform: translateX(0); }
}

.org-dept-dot[b-l7fo983w5b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}

.org-dept-name[b-l7fo983w5b] { font-size: 13px; color: var(--text-primary); }

.org-empty[b-l7fo983w5b] {
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 4px;
}

.org-more[b-l7fo983w5b] {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Subordinate-divisions list ──────────────────────────────────────
   Shown inside the apex (CEO Office) card to surface the division
   heads who report up. Each row mirrors a mini "person card": small
   avatar (gradient-toned per user) + division name on top + head name
   beneath. Stagger animation matches the departments list above. */
.org-sub-list[b-l7fo983w5b] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.org-sub-item[b-l7fo983w5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    opacity: 0;
    transform: translateX(-4px);
    /* Same easing the dept list uses, with a small base delay so the
       sections paint sequentially when the org-card opens. */
    animation: orgSubIn-b-l7fo983w5b 0.30s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(120ms + (var(--i, 0) * 28ms));
    transition: background 0.15s ease, border-color 0.15s ease;
}

.org-sub-item:hover[b-l7fo983w5b] {
    background: var(--card-bg);
    border-color: rgba(0, 31, 87, 0.25);
}

.org-sub-avatar[b-l7fo983w5b] {
    /* Borrow the standard org-avatar look but slightly smaller. */
    width: 32px;
    height: 32px;
    font-size: 11px;
    flex-shrink: 0;
}

.org-sub-info[b-l7fo983w5b] { flex: 1; min-width: 0; }

.org-sub-name[b-l7fo983w5b] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-sub-meta[b-l7fo983w5b] {
    color: var(--text-secondary);
    font-size: 11.5px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-sub-meta-vacant[b-l7fo983w5b] {
    color: var(--text-muted);
    font-style: italic;
}

@keyframes orgSubIn-b-l7fo983w5b {
    to { opacity: 1; transform: translateX(0); }
}

/* Zoom CTA — primary affordance to open the full chart. */
.org-zoom-cta[b-l7fo983w5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-primary) 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 31, 87, 0.28);
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.15s ease;
}

.org-zoom-cta:hover[b-l7fo983w5b] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 31, 87, 0.40);
}

.org-zoom-cta:active[b-l7fo983w5b] { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════════════
   Zoom modal — full org chart visualisation
   ════════════════════════════════════════════════════════════════════════ */

.zoom-overlay[b-l7fo983w5b] {
    position: fixed;
    inset: 0;
    z-index: 2500;     /* above edit-panel-overlay (2000) */
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    animation: zoomFade-b-l7fo983w5b 0.18s ease;
}

@keyframes zoomFade-b-l7fo983w5b { from { opacity: 0; } to { opacity: 1; } }

.zoom-card[b-l7fo983w5b] {
    position: relative;
    width: min(1080px, 95vw);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--card-bg);
    border-radius: 24px;
    border: 1px solid var(--card-border);
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.12),
        0 24px 64px rgba(15, 23, 42, 0.28);
    animation: zoomIn-b-l7fo983w5b 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 32px;
}

@keyframes zoomIn-b-l7fo983w5b {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.zoom-card-header[b-l7fo983w5b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 32px;
}

.zoom-eyebrow[b-l7fo983w5b] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 6px;
}

.zoom-title[b-l7fo983w5b] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
}

.zoom-close[b-l7fo983w5b] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom-close:hover[b-l7fo983w5b] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* The tree itself — vertical flow with pure-CSS connectors. Each .zoom-node
   stamps in with a stagger driven by --i and the keyframe below. */

.zoom-tree[b-l7fo983w5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

@keyframes zoomNodeIn-b-l7fo983w5b {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Department fan-out — connector forks to a grid of cards. */
.zoom-fanout[b-l7fo983w5b] {
    width: 100%;
    position: relative;
    padding-top: 30px;
    opacity: 0;
    animation: zoomNodeIn-b-l7fo983w5b 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

/* Spine stub dropping from the Head node into the departments section, so the
   fan-out reads as a continuation of the tree rather than a detached block. */
.zoom-fanout[b-l7fo983w5b]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 22px;
    background: linear-gradient(180deg, var(--accent-primary) 0%, var(--border-primary) 100%);
    border-radius: 2px;
}

.zoom-dept-grid[b-l7fo983w5b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.zoom-dept-card[b-l7fo983w5b] {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 18px;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.18s ease,
                border-color 0.18s ease;

    opacity: 0;
    transform: translateY(8px);
    animation: zoomNodeIn-b-l7fo983w5b 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 50ms);
}

/* Brand-navy top accent — wipes in on hover for a crisp, enterprise tell. */
.zoom-dept-card[b-l7fo983w5b]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom-dept-card:hover[b-l7fo983w5b] {
    transform: translateY(-3px);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 28px rgba(0, 31, 87, 0.12);
}

.zoom-dept-card:hover[b-l7fo983w5b]::before { transform: scaleX(1); }

.zoom-dept-card.is-inactive[b-l7fo983w5b] {
    opacity: 0.6;
    background: var(--bg-secondary);
}

.zoom-dept-status[b-l7fo983w5b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.zoom-dept-dot[b-l7fo983w5b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}

.zoom-dept-card.is-inactive .zoom-dept-dot[b-l7fo983w5b] {
    background: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.20);
}

.zoom-dept-name[b-l7fo983w5b] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   Microsoft-style hierarchy view — apex person + bus connector + report cards.
   Compact + brand-navy. ohc- = OnePortal hierarchy chart (prefixed so it never
   clashes with the .zoom-* surfaces). Reuses the zoomNodeIn keyframe.
   ════════════════════════════════════════════════════════════════════════ */

/* Shared avatar — a photo overlays the initials/smiley; a missing or broken
   photo (onerror hides the <img>) falls back to the gradient + initials. */
.ohc-ava[b-l7fo983w5b] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2px;
    user-select: none;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}
.ohc-ava[data-tone="0"][b-l7fo983w5b] { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); }
.ohc-ava[data-tone="1"][b-l7fo983w5b] { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.ohc-ava[data-tone="2"][b-l7fo983w5b] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.ohc-ava[data-tone="3"][b-l7fo983w5b] { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.ohc-ava[data-tone="4"][b-l7fo983w5b] { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.ohc-ava[data-tone="5"][b-l7fo983w5b] { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.ohc-apex.is-vacant .ohc-ava-apex[b-l7fo983w5b],
.ohc-card .ohc-ava[data-tone="0"]:has(.ohc-smiley)[b-l7fo983w5b] { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); }

/* Profile-photo overlay — fills the circle; object-fit keeps it un-stretched. */
.ohc-ava-img[b-l7fo983w5b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ohc-smiley[b-l7fo983w5b] { width: 58%; height: 58%; color: rgba(255, 255, 255, 0.9); }
.ohc-apex.is-vacant .ohc-smiley[b-l7fo983w5b],
.ohc-card .ohc-ava .ohc-smiley[b-l7fo983w5b] { color: #64748b; }

/* Apex person node (the head / CEO sits atop), brand navy. */
.ohc-apex[b-l7fo983w5b] {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px 13px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #002a78 0%, #001f57 55%, #00153d 100%);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 31, 87, 0.28);
    opacity: 0;
    transform: translateY(6px);
    animation: zoomNodeIn-b-l7fo983w5b 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ohc-ava-apex[b-l7fo983w5b] { width: 50px; height: 50px; font-size: 17px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.ohc-apex-info[b-l7fo983w5b] { min-width: 0; }
.ohc-apex-name[b-l7fo983w5b] { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; }
.ohc-apex-role[b-l7fo983w5b] { font-size: 12px; color: rgba(255, 255, 255, 0.78); margin-top: 2px; }
.ohc-apex-contact[b-l7fo983w5b] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ohc-chip[b-l7fo983w5b] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Bus connector — trunk + horizontal rail with a centre junction node. */
.ohc-trunk[b-l7fo983w5b] { width: 2px; height: 26px; margin: 0 auto; background: linear-gradient(180deg, var(--accent-dark), var(--accent-primary)); border-radius: 2px; }
.ohc-rail-wrap[b-l7fo983w5b] { position: relative; width: 86%; height: 2px; margin: 0 auto; }
.ohc-rail[b-l7fo983w5b] { width: 100%; height: 2px; background: var(--border-primary); border-radius: 2px; }
.ohc-rail-wrap[b-l7fo983w5b]::before {
    content: "";
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 0 0 2px var(--accent-primary);
}

/* Section label pill (reused by "direct reports" and "Departments"). */
.ohc-label[b-l7fo983w5b] {
    width: fit-content;
    margin: 22px auto 18px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent-dark);
}

/* Direct-report cards. */
.ohc-grid[b-l7fo983w5b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; width: 100%; }
.ohc-card[b-l7fo983w5b] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 13px;
    padding: 11px 14px 11px 26px;
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
    opacity: 0;
    transform: translateY(8px);
    animation: zoomNodeIn-b-l7fo983w5b 0.30s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.ohc-card[b-l7fo983w5b]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-dark), var(--accent-primary));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ohc-card:hover[b-l7fo983w5b] { transform: translateY(-2px); border-color: var(--accent-primary); box-shadow: 0 9px 24px rgba(0, 31, 87, 0.12); }
.ohc-card:hover[b-l7fo983w5b]::before { transform: scaleY(1); }
.ohc-card-exp[b-l7fo983w5b] {
    position: absolute;
    left: 7px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--border-primary);
    color: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1;
    background: var(--card-bg);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ohc-card:hover .ohc-card-exp[b-l7fo983w5b] { background: var(--accent-primary); border-color: var(--accent-primary); color: #ffffff; }
.ohc-card-info[b-l7fo983w5b] { min-width: 0; display: flex; flex-direction: column; }
.ohc-name[b-l7fo983w5b]  { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohc-title[b-l7fo983w5b] { font-size: 11px; font-weight: 600; color: var(--accent-primary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohc-meta[b-l7fo983w5b]  { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) {
    .ohc-grid[b-l7fo983w5b] { grid-template-columns: 1fr; }
}

/* ── Department card: HOD line (eager-loaded) ───────────────────────────── */
.ohc-ava-sm[b-l7fo983w5b] { width: 30px; height: 30px; font-size: 11px; }
.ohc-dc-hod[b-l7fo983w5b] { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.ohc-dc-hod-info[b-l7fo983w5b] { min-width: 0; display: flex; flex-direction: column; }
.ohc-dc-hod-name[b-l7fo983w5b] { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohc-dc-hod-title[b-l7fo983w5b] { font-size: 10px; font-weight: 600; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohc-dc-hodmuted[b-l7fo983w5b] { margin-top: 11px; font-size: 11.5px; color: var(--text-muted); font-style: italic; }

/* ── Department team — ONE centered, landscape panel (replaces the per-card
   anchored popover). Fixed + viewport-centered; wide grid of people for a
   clean glance. No HOD section (the head shows on the card). ────────────── */
.ohc-team-pop[b-l7fo983w5b] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, calc(100vw - 48px));
    max-height: 82vh;
    overflow-y: auto;
    z-index: 3000;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 30px 80px rgba(15, 23, 42, 0.34);
    padding: 22px 24px;
    animation: ohcTeamPopIn-b-l7fo983w5b 0.20s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ohcTeamPopIn-b-l7fo983w5b {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ohc-team-head[b-l7fo983w5b] { padding-bottom: 14px; border-bottom: 1px solid var(--border-primary); margin-bottom: 16px; }
.ohc-team-eyebrow[b-l7fo983w5b] { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-primary); }
.ohc-team-title[b-l7fo983w5b] { font-size: 19px; font-weight: 700; color: var(--text-primary); margin-top: 3px; line-height: 1.2; }
.ohc-team-count[b-l7fo983w5b] { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.ohc-team-grid[b-l7fo983w5b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; align-items: start; }
.ohc-team-member[b-l7fo983w5b] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--card-bg);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ohc-team-member:hover[b-l7fo983w5b] { background: var(--bg-secondary); border-color: var(--accent-primary); }
.ohc-team-member-info[b-l7fo983w5b] { min-width: 0; display: flex; flex-direction: column; }
.ohc-team-member-name[b-l7fo983w5b] { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohc-team-member-title[b-l7fo983w5b] { font-size: 11px; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohc-team-tag[b-l7fo983w5b] { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--accent-dark); background: rgba(0, 31, 87, 0.10); padding: 1px 6px; border-radius: 4px; vertical-align: middle; }

/* Email + phone reveal on member hover (reuses the shared ContactPopover, which
   is collapsed by default; ::deep reaches into the child component to expand it). */
.ohc-team-member:hover[b-l7fo983w5b]  .contact-card {
    max-height: 88px;
    opacity: 1;
    margin-top: 6px;
    padding: 8px 10px;
}

@media (max-width: 768px) {
    .ohc-team-pop[b-l7fo983w5b] { width: calc(100vw - 28px); padding: 18px; }
    .ohc-team-grid[b-l7fo983w5b] { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   Department drill-down popover (hover inside zoom modal)
   ────────────────────────────────────────────────────────────────────────
   Anchored below each .zoom-dept-card. On mouseenter the wrapper sets a
   .is-hovered class + lifts the card subtly; the .dept-drill panel slides
   in with the same emphasised-decelerate easing as the rest of the system.
   z-index 60 sits above sibling cards but below the zoom modal close
   button (which lives at zoom-card root above the tree).
   ════════════════════════════════════════════════════════════════════════ */

.zoom-dept-wrapper[b-l7fo983w5b] {
    position: relative;
}

/* Card lifts a bit when its wrapper is hovered, signalling that hover does
   something — pairs with the "Hover for team" hint at the bottom of the card. */
.zoom-dept-wrapper.is-hovered .zoom-dept-card[b-l7fo983w5b] {
    transform: translateY(-3px);
    border-color: var(--accent-primary);
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.08),
        0 12px 28px rgba(0, 31, 87, 0.18);
}

.zoom-dept-wrapper.is-hovered .zoom-dept-card[b-l7fo983w5b]::before { transform: scaleX(1); }

.zoom-dept-hint[b-l7fo983w5b] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.zoom-dept-wrapper.is-hovered .zoom-dept-hint[b-l7fo983w5b] {
    color: var(--accent-primary);
}

/* Empty / fallback */
.dept-drill-empty[b-l7fo983w5b] {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px dashed var(--border-primary);
}

/* Loading spinner — centered, branded ring */
.dept-drill-loading[b-l7fo983w5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 12px;
}

.dept-drill-spinner[b-l7fo983w5b] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(0, 31, 87, 0.15);
    border-top-color: var(--accent-dark);
    animation: deptSpinnerRotate-b-l7fo983w5b 0.8s linear infinite;
}

@keyframes deptSpinnerRotate-b-l7fo983w5b {
    to { transform: rotate(360deg); }
}

.dept-drill-error[b-l7fo983w5b] {
    padding: 16px;
    text-align: center;
    color: #991b1b;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .org-card[b-l7fo983w5b] { width: min(320px, calc(100vw - 32px)); }
    .zoom-card[b-l7fo983w5b] { padding: 20px; border-radius: 18px; }
    .zoom-title[b-l7fo983w5b] { font-size: 22px; }
    .zoom-dept-grid[b-l7fo983w5b] { grid-template-columns: 1fr; }
}

/* ── Buttons (shared) ────────────────────────────────────────────────── */
/* Two button families: solid (primary / danger) and outline (secondary).
   All sized to align in narrow action columns. */

.btn[b-l7fo983w5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.btn:disabled[b-l7fo983w5b] { cursor: not-allowed; opacity: 0.55; }

.btn-primary[b-l7fo983w5b]          { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover:not(:disabled)[b-l7fo983w5b] { background-color: var(--btn-primary-hover); transform: translateY(-1px); }

.btn-danger[b-l7fo983w5b]           { background-color: var(--error); color: #ffffff; border-color: var(--error); }
.btn-danger:hover:not(:disabled)[b-l7fo983w5b] { filter: brightness(0.92); }

.btn-outline[b-l7fo983w5b]          { background: transparent; color: var(--text-primary); border-color: var(--border-primary); }
.btn-outline:hover:not(:disabled)[b-l7fo983w5b] { background-color: var(--bg-secondary); }

.btn-danger-outline[b-l7fo983w5b]   { background: transparent; color: var(--error); border-color: var(--error); }
.btn-danger-outline:hover:not(:disabled)[b-l7fo983w5b] { background-color: var(--error); color: #ffffff; }

/* ── Modal scaffold (overlay + panel) ────────────────────────────────── */

.edit-panel-overlay[b-l7fo983w5b] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-l7fo983w5b 0.15s ease;
}

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

.edit-panel[b-l7fo983w5b] {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    width: min(520px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.edit-panel-wide[b-l7fo983w5b] { width: min(840px, 95vw); }

.confirm-panel[b-l7fo983w5b] {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    width: min(460px, 92vw);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.edit-panel-header[b-l7fo983w5b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
}

.edit-panel-header h3[b-l7fo983w5b] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.close-btn[b-l7fo983w5b] {
    background: none;
    border: none;
    font-size: 26px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

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

.edit-panel-body[b-l7fo983w5b] {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}

.edit-panel-footer[b-l7fo983w5b] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
}

/* ── Form controls ───────────────────────────────────────────────────── */

.form-label[b-l7fo983w5b] {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.form-input[b-l7fo983w5b] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}

.form-input:focus[b-l7fo983w5b] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.form-hint[b-l7fo983w5b] {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
}

.form-checkbox[b-l7fo983w5b] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 4px;
}

.form-checkbox input[type="checkbox"][b-l7fo983w5b] { width: 16px; height: 16px; cursor: pointer; }

.required[b-l7fo983w5b] { color: var(--error); }

.alert[b-l7fo983w5b] {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.4;
}

.alert-error[b-l7fo983w5b] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Departments side-panel (master-detail) ──────────────────────────── */

.dept-toolbar[b-l7fo983w5b] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.dept-table[b-l7fo983w5b] {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
}

.dept-table thead[b-l7fo983w5b] {
    background-color: var(--bg-secondary);
}

.dept-table th[b-l7fo983w5b] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border-primary);
}

.dept-table td[b-l7fo983w5b] {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
    vertical-align: middle;
}

.dept-table tbody tr:last-child td[b-l7fo983w5b] { border-bottom: none; }

/* ── Set HOD modal — current-state summary block ──────────────────────
   Two-row "label : value" panel above the picker so the admin sees current
   HOD + member count before they pick the replacement. */
.hod-summary[b-l7fo983w5b] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hod-summary-row[b-l7fo983w5b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.hod-summary-label[b-l7fo983w5b] {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
}

.hod-summary-value[b-l7fo983w5b] {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* ── Confirm modal extras ───────────────────────────────────────────── */

.confirm-detail[b-l7fo983w5b] {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 8px;
    padding: 10px 12px;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--accent-primary);
}

/* ── Empty / loading / error states ──────────────────────────────────── */

.loading-message[b-l7fo983w5b],
.no-data-message[b-l7fo983w5b] {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
}

.no-data-message p[b-l7fo983w5b] { margin: 0 0 12px 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .sidebar[b-l7fo983w5b] { width: 250px; }
    .main-content[b-l7fo983w5b] { margin-left: 250px; }
}

@media (max-width: 768px) {
    .employee-dashboard-container[b-l7fo983w5b] { flex-direction: column; }
    .sidebar[b-l7fo983w5b] { position: relative; width: 100%; height: auto; }
    .main-content[b-l7fo983w5b] { margin-left: 0; }
    .employee-details-section[b-l7fo983w5b] { padding: 20px; }

    .table-container[b-l7fo983w5b] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .employee-table[b-l7fo983w5b] { font-size: 12px; min-width: 760px; }

    .actions-col[b-l7fo983w5b] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
    .actions-col .btn[b-l7fo983w5b] { width: 100%; }
    /* Icon buttons stay 34×34 — they're small enough to wrap nicely on
       narrow screens without becoming full-width strips. */
    .actions-col .icon-btn[b-l7fo983w5b] { width: 34px; }

    .edit-panel[b-l7fo983w5b], .edit-panel-wide[b-l7fo983w5b], .confirm-panel[b-l7fo983w5b] { width: 95vw; max-height: 95vh; }
}

/* ── Contact-card hover expansion (cross-component CSS isolation) ─────
   The card lives in ContactPopover.razor; this file owns the parent rows
   that trigger its expansion on hover. ::deep reaches across the Blazor
   scope-attribute boundary into the child component's `.contact-card`.

   The card sits INSIDE the row's `-info` column (added in Divisions.razor
   markup), starts collapsed (max-height 0, opacity 0, padding 0), and
   here we expand it on row hover. Because the card is in the row's own
   flex column, expansion grows the row vertically — no popover, no
   absolute positioning, no overlap with siblings.

   Hosts must allow vertical alignment to follow the growing content:
   `.dept-drill-member` and `.dept-drill-hod` are flex containers with
   `align-items: center`. We override to `align-items: flex-start` so the
   avatar stays anchored to the top while the info column grows downward
   smoothly during the expansion. */
.org-person[b-l7fo983w5b] {
    align-items: flex-start;
}.org-person:hover[b-l7fo983w5b]  .contact-card {
    /* Two contact lines × ~18px line-height + 5px gap + 16px padding
       fits comfortably under 80px. */
    max-height: 80px;
    opacity: 1;
    margin-top: 8px;
    padding: 8px 12px;
}
/* /Pages/Email2FA.razor.rz.scp.css */
/* ===== ONE PORTAL – Email 2FA (CSS isolation) ===== */

/* predictable sizing */
*[b-bbfaammrk2], *[b-bbfaammrk2]::before, *[b-bbfaammrk2]::after {
    box-sizing: border-box;
}

/* two‑column layout */
.twofa-shell[b-bbfaammrk2] {
    --primary: #001F57;
    --heading: #292929;
    --sub: #585858;
    --placeholder: #C9D3E0;
    --border: #254a76;
    --input-h: 55px;
    --input-r: 16px;
    --content-w: 520px;
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

.twofa-left[b-bbfaammrk2] {
    position: relative;
    background: #0b1b33;
}

.twofa-img[b-bbfaammrk2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.twofa-right[b-bbfaammrk2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 16px;
}

    .twofa-right h1[b-bbfaammrk2] {
        margin: 0 0 6px;
        color: var(--heading);
        font-weight: 800;
        font-size: clamp(22px,3vw,32px);
    }

    .twofa-right p[b-bbfaammrk2] {
        margin: 0;
        color: var(--sub);
        font-size: 14px;
    }

/* OTP boxes wrapper */
.otp-boxes[b-bbfaammrk2] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Plain white surface — matches every other auth input across the app. */
.otp-input[b-bbfaammrk2] {
    width: 50px;
    height: 50px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    outline: none;
    caret-color: transparent; /* hide caret */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .otp-input:focus[b-bbfaammrk2] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

/* link styling for resend */
.small-text[b-bbfaammrk2] {
    margin-top: 0;
    font-size: 12px;
    color: var(--sub);
}

    .small-text a[b-bbfaammrk2] {
        color: var(--primary);
        text-decoration: underline;
        cursor: pointer;
    }

        .small-text a:hover[b-bbfaammrk2] {
            text-decoration: none;
        }

/* button styling */
.btn.primary[b-bbfaammrk2] {
    width: min(var(--content-w),100%);
    height: var(--input-h);
    border-radius: 22px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 22px;
    cursor: pointer;
}

    .btn.primary:hover[b-bbfaammrk2] {
        filter: brightness(1.05);
    }

    .btn.primary:active[b-bbfaammrk2] {
        transform: translateY(1px);
    }

    .btn.primary[disabled][b-bbfaammrk2] {
        opacity: .7;
        cursor: not-allowed;
    }

/* timer display */
.timer-display[b-bbfaammrk2] {
    margin: 12px 0;
    text-align: center;
    font-size: 14px;
}

.timer-text[b-bbfaammrk2] {
    color: var(--sub);
}

.timer-countdown[b-bbfaammrk2] {
    color: var(--primary);
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: #f0f4f8;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 4px;
}

.timer-expired[b-bbfaammrk2] {
    margin: 12px 0;
    text-align: center;
}

.expired-text[b-bbfaammrk2] {
    color: #c62828;
    font-weight: 600;
    font-size: 14px;
}

/* disabled OTP inputs */
.otp-input:disabled[b-bbfaammrk2] {
    background: #e0e0e0;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
}

/* error message */
.error-message[b-bbfaammrk2] {
    margin-top: 12px;
    font-size: 13px;
    color: #c62828;
    font-weight: 600;
}

/* ── Responsive ladder ──────────────────────────────────────────────────
   SideImagePanel hide + 100dvh fallback are global. OTP cells shrink
   responsively below 480px so 6 boxes fit on a 320px iPhone SE. */

@media (max-width: 960px) {
    .twofa-shell[b-bbfaammrk2] {
        grid-template-columns: 1fr;
    }
    .twofa-right[b-bbfaammrk2] {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .twofa-right[b-bbfaammrk2] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .twofa-right[b-bbfaammrk2] {
        padding: 20px 14px;
        gap: 12px;
    }
    .otp-boxes[b-bbfaammrk2] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .otp-input[b-bbfaammrk2] {
        width: clamp(40px, 12vw, 50px);
        height: clamp(44px, 13vw, 54px);
        font-size: clamp(18px, 5.5vw, 24px);
    }
    .btn.primary[b-bbfaammrk2] {
        width: 100%;
    }
}
/* /Pages/EmployeeDashboard.razor.rz.scp.css */
/* Main Container */
.employee-dashboard-container[b-s623m7ud53] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary, #0F172A);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar */
.sidebar[b-s623m7ud53] {
    width: 280px;
    background-color: var(--bg-sidebar, #1E293B);
    color: white;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary, #334155);
}

/* Main Content Area */
.main-content[b-s623m7ud53] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary, #0F172A);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Statistics Section */
.statistics-section[b-s623m7ud53] {
    padding: 30px 40px;
    background-color: var(--bg-primary, #0F172A);
}

.section-title[b-s623m7ud53] {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 30px 0;
}

.charts-grid[b-s623m7ud53] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}

.chart-card[b-s623m7ud53] {
    background-color: var(--card-bg, #1E293B);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-primary, #334155);
}

.see-less-btn[b-s623m7ud53] {
    background-color: #3B82F6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.see-less-btn:hover[b-s623m7ud53] {
    background-color: #2563EB;
    transform: translateY(-1px);
}

/* Employee Details Section */
.employee-details-section[b-s623m7ud53] {
    padding: 30px 40px;
    background-color: var(--bg-primary, #0F172A);
}

.section-header[b-s623m7ud53] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.action-bar[b-s623m7ud53] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-s623m7ud53] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-s623m7ud53] {
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.search-input[b-s623m7ud53] {
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--border-primary, #334155);
    border-radius: 8px;
    background-color: #ffffff;
    color: #141414;
    font-size: 14px;
    width: 250px;
    outline: none;
}

.search-input:focus[b-s623m7ud53] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.search-input[b-s623m7ud53]::placeholder {
    color: rgba(20, 20, 20, 0.45);
}

.btn-export[b-s623m7ud53],
.btn-create[b-s623m7ud53] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-export[b-s623m7ud53] {
    background-color: #10B981;
    color: white;
}

.btn-export:hover[b-s623m7ud53] {
    background-color: #059669;
    transform: translateY(-1px);
}

.btn-create[b-s623m7ud53] {
    background-color: #3B82F6;
    color: white;
}

.btn-create:hover[b-s623m7ud53] {
    background-color: #2563EB;
    transform: translateY(-1px);
}

/* Explicit Search button — sits beside the search input in the action bar.
   Matches btn-export/btn-create sizing for vertical alignment; navy palette
   reads as a primary affirmative action distinct from Export (green) and
   Create (blue). */
.btn-search[b-s623m7ud53] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background-color: #001f57;
    color: white;
}

.btn-search:hover:not(:disabled)[b-s623m7ud53] {
    background-color: #00184a;
    transform: translateY(-1px);
}

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

/* Filters Row */
.filters-row[b-s623m7ud53] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Each filter cell wraps a SearchableSelect so it claims the same horizontal
   space the old <select> did and keeps the row's flex layout stable. */
.filter-cell[b-s623m7ud53] {
    flex: 1;
    min-width: 180px;
}

[b-s623m7ud53] .filter-cell .autocomplete-container {
    width: 100%;
}

[b-s623m7ud53] .filter-cell .autocomplete-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-primary, #334155);
    border-radius: 8px;
    background-color: #ffffff;
    color: #141414;
    font-size: 14px;
    outline: none;
    font-weight: 500;
}

[b-s623m7ud53] .filter-cell .autocomplete-input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.filter-select[b-s623m7ud53] {
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    border: 1px solid var(--border-primary, #334155);
    border-radius: 8px;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: 500;
}

.filter-select:focus[b-s623m7ud53] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    color: #000000 !important;
}

.filter-select option[b-s623m7ud53] {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 8px;
}

.filter-select[b-s623m7ud53]::-ms-expand {
    display: none;
}

/* Ensure selected option text is visible */
.filter-select:invalid[b-s623m7ud53] {
    color: #000000 !important;
}

.filter-select:valid[b-s623m7ud53] {
    color: #000000 !important;
}

/* Table Container */
.table-container[b-s623m7ud53] {
    background-color: var(--card-bg, #1E293B);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-primary, #334155);
    margin-bottom: 24px;
}

.employee-table[b-s623m7ud53] {
    width: 100%;
    border-collapse: collapse;
}

.employee-table thead[b-s623m7ud53] {
    background-color: #0F172A;
}

.employee-table th[b-s623m7ud53] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    border-bottom: 2px solid var(--border-primary, #334155);
}

.employee-table tbody tr[b-s623m7ud53] {
    border-bottom: 1px solid var(--border-primary, #334155);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-s623m7ud53] {
    background-color: #1E293B;
}

.employee-table td[b-s623m7ud53] {
    padding: 16px;
    font-size: 14px;
    color: #E2E8F0;
}

.employee-link[b-s623m7ud53] {
    color: #3B82F6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.employee-link:hover[b-s623m7ud53] {
    color: #60A5FA;
    text-decoration: underline;
}

.action-buttons[b-s623m7ud53] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-btn[b-s623m7ud53] {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover[b-s623m7ud53] {
    background-color: #334155;
    color: #ffffff;
}

.action-btn.delete-btn:hover[b-s623m7ud53] {
    background-color: #EF4444;
    color: #ffffff;
}

/* Pagination */
.pagination[b-s623m7ud53] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.pagination-btn[b-s623m7ud53] {
    background-color: #3B82F6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-s623m7ud53] {
    background-color: #2563EB;
    transform: translateY(-1px);
}

.pagination-btn:disabled[b-s623m7ud53] {
    background-color: #475569;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-info[b-s623m7ud53] {
    color: #E2E8F0;
    font-size: 14px;
    font-weight: 500;
}

/* Loading and Empty States */
.loading-message[b-s623m7ud53],
.no-data-message[b-s623m7ud53] {
    padding: 40px;
    text-align: center;
    color: #94A3B8;
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .charts-grid[b-s623m7ud53] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .sidebar[b-s623m7ud53] {
        width: 250px;
    }
    
    .main-content[b-s623m7ud53] {
        margin-left: 250px;
    }
    
    .filters-row[b-s623m7ud53] {
        flex-direction: column;
    }
    
    .filter-select[b-s623m7ud53] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .employee-dashboard-container[b-s623m7ud53] {
        flex-direction: column;
    }
    
    .sidebar[b-s623m7ud53] {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .main-content[b-s623m7ud53] {
        margin-left: 0;
    }
    
    .charts-grid[b-s623m7ud53] {
        grid-template-columns: 1fr;
    }
    
    .section-header[b-s623m7ud53] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .action-bar[b-s623m7ud53] {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .search-input[b-s623m7ud53] {
        width: 100%;
    }
    
    .statistics-section[b-s623m7ud53],
    .employee-details-section[b-s623m7ud53] {
        padding: 20px;
    }
    
    .employee-table[b-s623m7ud53] {
        font-size: 12px;
    }
    
    .employee-table th[b-s623m7ud53],
    .employee-table td[b-s623m7ud53] {
        padding: 12px 8px;
    }
}

@media (max-width: 480px) {
    .statistics-section[b-s623m7ud53],
    .employee-details-section[b-s623m7ud53] {
        padding: 16px;
    }
    
    .section-title[b-s623m7ud53] {
        font-size: 20px;
    }
    
    .pagination[b-s623m7ud53] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Inactive-user row styling ───────────────────────────────────────────────
   Rows for soft-deleted (IsActive=false) users get a faded look + an
   "Inactive" badge next to the name so the admin can see at a glance whether
   the toggle button on this row will deactivate or reactivate. */
.row-inactive[b-s623m7ud53] {
    background-color: #f8fafc;
    color: #6b7280;
}

.row-inactive td[b-s623m7ud53] {
    color: #6b7280;
}

.row-inactive .employee-link[b-s623m7ud53] {
    color: #6b7280;
    text-decoration: line-through;
}

.inactive-badge[b-s623m7ud53] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}

/* Reactivate button — green check icon. Distinct from the red Deactivate
   power-icon button (which keeps the existing .delete-btn styling). */
.activate-btn[b-s623m7ud53] {
    color: #15803d;
}

.activate-btn:hover[b-s623m7ud53] {
    background-color: rgba(34, 197, 94, 0.10);
    color: #166534;
}

/* ── View / Edit slide-panel (mirrors AllSystemUsers) ─────────────────────────
   Side-panel that slides in from the right and overlays the dashboard.
   The same panel covers View (read-only, inputs disabled) and Edit
   (writable, Save button visible). Clicking the dimmed area outside the
   panel calls CloseEditPanel via the markup's @onclick handler. */
.edit-panel-overlay[b-s623m7ud53] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    animation: edit-panel-fade-in-b-s623m7ud53 0.2s ease;
}

.edit-panel[b-s623m7ud53] {
    width: 640px;
    max-width: 100%;
    background-color: var(--card-bg, #ffffff);
    color: var(--text-primary, #141414);
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    animation: edit-panel-slide-in-b-s623m7ud53 0.2s ease;
}

.edit-panel-header[b-s623m7ud53] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.edit-panel-title[b-s623m7ud53] {
    margin: 0;
    color: var(--text-primary, #141414);
    font-size: 18px;
    font-weight: 600;
}

.edit-panel-close[b-s623m7ud53] {
    background: transparent;
    border: none;
    color: var(--text-muted, #6b7280);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

.edit-panel-close:hover[b-s623m7ud53] {
    color: var(--text-primary, #141414);
}

.edit-panel-body[b-s623m7ud53] {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.edit-panel-footer[b-s623m7ud53] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary, #e2e8f0);
}

/* User summary card at the top of the panel body */
.edit-user-info[b-s623m7ud53] {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.edit-user-name[b-s623m7ud53] {
    font-weight: 600;
    color: var(--text-primary, #141414);
    margin-bottom: 2px;
}

.edit-user-email[b-s623m7ud53] {
    font-size: 13px;
    color: var(--text-tertiary, #4b5563);
}

.edit-user-dept[b-s623m7ud53] {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

/* Form rows — one label + one input each */
.edit-field[b-s623m7ud53] {
    margin-bottom: 14px;
}

.edit-label[b-s623m7ud53] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary, #141414);
}

.edit-input[b-s623m7ud53] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: 8px;
    background-color: #ffffff;
    color: #141414;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.edit-input:focus[b-s623m7ud53] {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.edit-input:disabled[b-s623m7ud53] {
    background-color: #f1f5f9;
    color: #6b7280;
    cursor: not-allowed;
}

.edit-note[b-s623m7ud53] {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin: 4px 0 0 0;
}

.edit-error[b-s623m7ud53] {
    background-color: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 12px;
}

/* Footer buttons — secondary closes, primary saves */
.edit-btn-secondary[b-s623m7ud53],
.edit-btn-primary[b-s623m7ud53] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.edit-btn-secondary[b-s623m7ud53] {
    background-color: #ffffff;
    color: #141414;
    border: 1px solid var(--border-primary, #d1d5db);
}

.edit-btn-secondary:hover[b-s623m7ud53] {
    background-color: #f8fafc;
}

.edit-btn-primary[b-s623m7ud53] {
    background-color: #3B82F6;
    color: #ffffff;
}

.edit-btn-primary:hover:not(:disabled)[b-s623m7ud53] {
    background-color: #2563EB;
    transform: translateY(-1px);
}

.edit-btn-primary:disabled[b-s623m7ud53] {
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes edit-panel-fade-in-b-s623m7ud53 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes edit-panel-slide-in-b-s623m7ud53 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (max-width: 720px) {
    .edit-panel[b-s623m7ud53] {
        width: 100%;
    }
}

/* /Pages/EmployeeDiversity.razor.rz.scp.css */
/* Main Container */
.employee-diversity-container[b-v7erukas74] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar */
.sidebar[b-v7erukas74] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: white;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

/* Main Content Area */
.main-content[b-v7erukas74] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page Header */
.page-header[b-v7erukas74] {
    background-color: var(--card-bg);
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    margin-left: -1px;
    border-left: 1px solid var(--border-primary);
}

.page-title[b-v7erukas74] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.user-profile[b-v7erukas74] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name[b-v7erukas74] {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.user-avatar[b-v7erukas74] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar img[b-v7erukas74] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-text[b-v7erukas74] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-primary, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* Form Container */
.form-shell[b-v7erukas74] {
    background: var(--card-bg);
    margin: 40px;
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--card-border);
}

.form-shell h2[b-v7erukas74] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 32px;
    border-bottom: 2px solid var(--border-primary);
    padding-bottom: 16px;
}

/* Form Grid */
.form-grid[b-v7erukas74] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.row[b-v7erukas74] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Change History (audit trail) card ─────────────────────────────────── */
.history-card[b-v7erukas74] {
    margin-top: 20px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
}
.history-card-title[b-v7erukas74] {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.history-empty[b-v7erukas74] {
    color: var(--text-muted);
    font-size: 14px;
    margin: 4px 0 0;
}
.history-scroll[b-v7erukas74] { overflow-x: auto; }
.history-table[b-v7erukas74] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.history-table th[b-v7erukas74],
.history-table td[b-v7erukas74] {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}
.history-table th[b-v7erukas74] {
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-secondary);
}
.history-table td[b-v7erukas74] { color: var(--text-primary); }
.history-table tbody tr:last-child td[b-v7erukas74] { border-bottom: none; }

/* ── Collapsible form sections ─────────────────────────────────────────── */
.form-section[b-v7erukas74] {
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    /* visible (not hidden) so an open dropdown in the last row of a section — e.g.
       Job Type / Skill Type — extends past the card instead of being clipped by it
       and hidden behind the next section. Collapse uses display:none, not overflow,
       so hiding overflow here served only the rounded corners. */
    overflow: visible;
}

/* Keep the header's hover tint inside the card's rounded top corners now that the
   card no longer clips overflow. */
.form-section-head[b-v7erukas74] {
    border-radius: 12px 12px 0 0;
}

.form-section-head[b-v7erukas74] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color .15s ease;
}

.form-section-head:hover[b-v7erukas74] {
    background-color: rgba(99, 102, 241, 0.06);
}

.form-section-title[b-v7erukas74] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .2px;
}

.form-section-chevron[b-v7erukas74] {
    color: var(--text-secondary);
    transition: transform .2s ease;
    flex: 0 0 auto;
}

/* Sections start expanded, so the chevron points up by default; collapsing
   rotates it to point down ("click to expand"). */
.form-section-chevron.is-open[b-v7erukas74] {
    transform: rotate(180deg);
}

.form-section-body[b-v7erukas74] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    border-top: 1px solid var(--border-primary);
}

.form-section-body.is-collapsed[b-v7erukas74] {
    display: none;
}

/* Field Styling */
.field[b-v7erukas74] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Inline server-side validation errors, shown under the offending input. */
.field-error[b-v7erukas74] {
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 500;
}
.field input.input-error[b-v7erukas74],
.field select.input-error[b-v7erukas74] {
    border-color: #dc2626;
}
.alert-error-list[b-v7erukas74] {
    margin: 8px 0 0;
    padding-left: 20px;
}
.alert-error-list li[b-v7erukas74] { margin: 2px 0; }

.field label[b-v7erukas74] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 4px;
}

.field input[b-v7erukas74],
.field select[b-v7erukas74] {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--input-bg);
    outline: none;
    width: 100%;
    transition: all 0.2s ease;
}

.field input:focus[b-v7erukas74],
.field select:focus[b-v7erukas74] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.field input[b-v7erukas74]::placeholder {
    color: var(--input-placeholder);
}

/* Radio Button Styling */
.inline-radio[b-v7erukas74] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-radio div[b-v7erukas74] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.inline-radio label[b-v7erukas74] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}

.inline-radio input[type="radio"][b-v7erukas74] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-primary);
}

/* Button Styling */
.button-row[b-v7erukas74] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-primary);
}

.btn-primary[b-v7erukas74] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-primary:hover[b-v7erukas74] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 64, 175, 0.3);
}

.btn-secondary[b-v7erukas74] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-secondary:hover[b-v7erukas74] {
    background-color: var(--btn-secondary-hover);
    border-color: var(--text-tertiary);
    transform: translateY(-1px);
}

/* EMP-01 repeaters: small icon-only buttons (add "+" / remove "✕") with a hover
   tooltip via the title attribute. Minimalistic — fixed square, no long label. */
.icon-btn[b-v7erukas74] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 0;
    padding: 0;
    margin-top: 4px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Add: brand-blue outline at rest, fills brand blue on hover. */
.icon-btn-add[b-v7erukas74] {
    color: var(--btn-primary-bg, #1e40af);
    border-color: var(--btn-primary-bg, #1e40af);
}

.icon-btn-add:hover[b-v7erukas74] {
    background: var(--btn-primary-bg, #1e40af);
    border-color: var(--btn-primary-bg, #1e40af);
    color: #fff;
}

/* Remove: red outline at rest, fills red on hover. */
.icon-btn-remove[b-v7erukas74] {
    color: var(--error, #dc2626);
    border-color: var(--error, #dc2626);
}

.icon-btn-remove:hover[b-v7erukas74] {
    background: var(--error, #dc2626);
    border-color: var(--error, #dc2626);
    color: #fff;
}

/* Empty field for spacing */
.empty[b-v7erukas74] {
    visibility: hidden;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .row[b-v7erukas74] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar[b-v7erukas74] {
        width: 250px;
    }
    
    .main-content[b-v7erukas74] {
        margin-left: 250px;
    }
}

@media (max-width: 768px) {
    .employee-diversity-container[b-v7erukas74] {
        flex-direction: column;
    }
    
    .sidebar[b-v7erukas74] {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .main-content[b-v7erukas74] {
        margin-left: 0;
    }
    
    .row[b-v7erukas74] {
        grid-template-columns: 1fr;
    }
    
    .page-header[b-v7erukas74] {
        padding: 16px 20px;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .form-shell[b-v7erukas74] {
        margin: 20px;
        padding: 24px;
    }
    
    .button-row[b-v7erukas74] {
        flex-direction: column;
    }
}

/* ── Required indicator ──────────────────────────────────────────────────── */
.required[b-v7erukas74] {
    color: #ef4444;
    margin-left: 2px;
}

/* ── Read-only field ─────────────────────────────────────────────────────── */
.readonly-field[b-v7erukas74] {
    background-color: var(--input-bg, #f9fafb);
    color: var(--text-secondary, #6b7280);
    cursor: not-allowed;
    opacity: 0.8;
}

/* ── Loading state ───────────────────────────────────────────────────────── */
.loading-state[b-v7erukas74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.spinner[b-v7erukas74] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-primary, #e5e7eb);
    border-top-color: var(--accent-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-v7erukas74 0.8s linear infinite;
}

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

/* ── Alert banners ───────────────────────────────────────────────────────── */
.alert[b-v7erukas74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success[b-v7erukas74] {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error[b-v7erukas74] {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-close[b-v7erukas74] {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0 4px;
}

.alert-close:hover[b-v7erukas74] { opacity: 1; }


/* ── Save button spinner ─────────────────────────────────────────────────── */
.btn-spinner[b-v7erukas74] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-v7erukas74 0.7s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

/* ── Disabled select ─────────────────────────────────────────────────────── */
.field select:disabled[b-v7erukas74] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .form-shell[b-v7erukas74] {
        margin: 16px;
        padding: 20px;
    }
    
    .page-header[b-v7erukas74] {
        padding: 16px;
    }

    .page-title[b-v7erukas74] {
        font-size: 24px;
    }
}

/* Mobile: tables (if rendered on this page) get horizontal scroll so wide
   row data stays legible instead of squashing into the viewport. */
@media (max-width: 768px) {
    .table-container[b-v7erukas74],
    .employee-table-wrapper[b-v7erukas74] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .employee-table[b-v7erukas74],
    table[b-v7erukas74] {
        min-width: 720px;
    }
}

/* The form is wrapped in a <fieldset> so view mode can disable every nested
   form control via the HTML5 `disabled` attribute. Browsers paint a default
   black border + small padding on fieldsets — we strip them so the wrapper
   is invisible to the user and the page looks identical to create / edit
   mode when the fieldset is enabled. */
.form-fieldset[b-v7erukas74] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0; /* fixes a Chrome quirk where fieldset breaks flex/grid */
}

/* Visual cue for view mode: every disabled input gets a pale-grey
   background and a not-allowed cursor so the form reads as "look, don't
   touch" at a glance. */
.form-fieldset[disabled] input[b-v7erukas74],
.form-fieldset[disabled] select[b-v7erukas74],
.form-fieldset[disabled] textarea[b-v7erukas74] {
    background-color: var(--bg-secondary, #f8fafc);
    color: #141414;
    cursor: not-allowed;
}

/* Phase-O OnePortal-access confirmation modal. Prefixed selectors so the
   styles don't clash with whatever generic modal CSS lives elsewhere. */
.oneportal-modal-overlay[b-v7erukas74] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.18s ease;
}

.oneportal-modal-card[b-v7erukas74] {
    width: min(460px, 92vw);
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    animation: scaleIn-b-v7erukas74 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.oneportal-modal-card h3[b-v7erukas74] {
    margin: 0 0 12px;
    font-size: 18px;
    color: #001F57;
}

.oneportal-modal-card p[b-v7erukas74] {
    margin: 0 0 10px;
    color: #334155;
    line-height: 1.5;
    font-size: 14px;
}

.oneportal-modal-actions[b-v7erukas74] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

@keyframes scaleIn-b-v7erukas74 {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
    .oneportal-modal-actions[b-v7erukas74] {
        flex-direction: column-reverse;
    }
    .oneportal-modal-actions .btn-primary[b-v7erukas74],
    .oneportal-modal-actions .btn-secondary[b-v7erukas74] {
        width: 100%;
    }
}
/* /Pages/EventManagement.razor.rz.scp.css */
.event-management-container[b-dy1sq8xpfx] {
    min-height: 100vh;
    background: var(--bg-primary, #f5f5f5);
}

.event-management-content[b-dy1sq8xpfx] {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.event-management-header[b-dy1sq8xpfx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.event-management-header h2[b-dy1sq8xpfx] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #001F57;
}

.unauthorized-message[b-dy1sq8xpfx] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.unauthorized-message p[b-dy1sq8xpfx] {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.loading[b-dy1sq8xpfx], .no-events[b-dy1sq8xpfx] {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.events-table-container[b-dy1sq8xpfx] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.events-table[b-dy1sq8xpfx] {
    width: 100%;
    border-collapse: collapse;
}

.events-table thead[b-dy1sq8xpfx] {
    background: #f8f9fa;
}

.events-table th[b-dy1sq8xpfx] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #001F57;
    border-bottom: 2px solid #e0e0e0;
}

.events-table td[b-dy1sq8xpfx] {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
}

.events-table tbody tr:hover[b-dy1sq8xpfx] {
    background: #f8f9fa;
}

.btn[b-dy1sq8xpfx] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary[b-dy1sq8xpfx] {
    background: #1e40af;
    color: white;
}

.btn-primary:hover[b-dy1sq8xpfx] {
    background: #1e3a8a;
}

.btn-sm[b-dy1sq8xpfx] {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-edit[b-dy1sq8xpfx] {
    background: #3b82f6;
    color: white;
    margin-right: 8px;
}

.btn-edit:hover[b-dy1sq8xpfx] {
    background: #2563eb;
}

.btn-delete[b-dy1sq8xpfx] {
    background: #ef4444;
    color: white;
}

.btn-delete:hover[b-dy1sq8xpfx] {
    background: #dc2626;
}

.btn-danger[b-dy1sq8xpfx] {
    background: #ef4444;
    color: white;
}

.btn-danger:hover[b-dy1sq8xpfx] {
    background: #dc2626;
}

.btn-secondary[b-dy1sq8xpfx] {
    background: #6b7280;
    color: white;
    margin-right: 8px;
}

.btn-secondary:hover[b-dy1sq8xpfx] {
    background: #4b5563;
}

/* Modal Styles */
.modal-overlay[b-dy1sq8xpfx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-dy1sq8xpfx] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-dy1sq8xpfx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h3[b-dy1sq8xpfx] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #001F57;
}

.modal-close[b-dy1sq8xpfx] {
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-close:hover[b-dy1sq8xpfx] {
    background: #f0f0f0;
}

.modal-body[b-dy1sq8xpfx] {
    padding: 20px;
}

.modal-footer[b-dy1sq8xpfx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
}





/* /Pages/forgotPassword.razor.rz.scp.css */
/* ===== ONE PORTAL – Forgot Password (CSS isolation) ===== */

/* predictable sizing */
*[b-0qc7poasxo], *[b-0qc7poasxo]::before, *[b-0qc7poasxo]::after {
    box-sizing: border-box;
}

/* layout consistent with login/reset */
.forgot-shell[b-0qc7poasxo] {
    --primary: #001F57;
    --heading: #292929;
    --sub: #585858;
    --placeholder: #C9D3E0;
    --border: #254a76;
    --input-h: 55px;
    --input-r: 16px;
    --content-w: 520px;
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

.forgot-left[b-0qc7poasxo] {
    position: relative;
    background: #0b1b33;
}

.forgot-img[b-0qc7poasxo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forgot-right[b-0qc7poasxo] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 16px;
}

    .forgot-right h1[b-0qc7poasxo] {
        margin: 0 0 10px;
        color: var(--heading);
        font-weight: 800;
        font-size: clamp(22px,3vw,32px);
    }

/* field wrapper */
.field[b-0qc7poasxo] {
    width: min(var(--content-w),100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

    .field label[b-0qc7poasxo] {
        font-size: 13px;
        font-weight: 700;
        color: #222;
        letter-spacing: .2px;
    }

/* Base input style — clean white surface, brand-navy focus halo. */
.input[b-0qc7poasxo] {
    width: 100%;
    height: var(--input-h);
    padding: 0 18px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: var(--input-r);
    font-size: 15px;
    outline: none;
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .input[b-0qc7poasxo]::placeholder {
        color: #94a3b8;                  /* slate-400 — readable on white */
    }

    .input:focus[b-0qc7poasxo] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

/* messages */
.validation-message[b-0qc7poasxo] {
    color: #c62828;
    font-size: 12px;
    margin-top: 4px;
}

.ok-message[b-0qc7poasxo],
.error-message[b-0qc7poasxo] {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
}

.ok-message[b-0qc7poasxo] {
    color: #0a7a2f;
}

.error-message[b-0qc7poasxo] {
    color: #c62828;
}

/* button consistent with login */
.btn.primary[b-0qc7poasxo] {
    width: min(var(--content-w),100%);
    height: var(--input-h);
    border-radius: 22px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 22px;
    cursor: pointer;
}

    .btn.primary:hover[b-0qc7poasxo] {
        filter: brightness(1.05);
    }

    .btn.primary:active[b-0qc7poasxo] {
        transform: translateY(1px);
    }

    .btn.primary[disabled][b-0qc7poasxo] {
        opacity: .7;
        cursor: not-allowed;
    }

/* ── Responsive ladder ──────────────────────────────────────────────────
   SideImagePanel hide + 100dvh fallback are global (wwwroot/css/app.css). */

@media (max-width: 960px) {
    .forgot-shell[b-0qc7poasxo] {
        grid-template-columns: 1fr;
    }
    .forgot-right[b-0qc7poasxo] {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .forgot-right[b-0qc7poasxo] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .forgot-right[b-0qc7poasxo] {
        padding: 20px 14px;
        gap: 12px;
    }
    .input[b-0qc7poasxo],
    .form-control[b-0qc7poasxo],
    .forgot-right .field input.input[b-0qc7poasxo],
    .forgot-right .field input.input[type="email"][b-0qc7poasxo] {
        font-size: 16px;
    }
    .btn.primary[b-0qc7poasxo] {
        width: 100%;
    }
}

/* override any bootstrap/form-control input styles that might still leak through */
/* Higher-specificity override that wins against browser defaults — same
   clean-white look as the .input rule above. */
.forgot-right .field input.input[b-0qc7poasxo],
.forgot-right .field input.input[type="email"][b-0qc7poasxo] {
    all: unset;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--input-h);
    padding: 0 18px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: var(--input-r);
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .forgot-right .field input.input[b-0qc7poasxo]::placeholder {
        color: #94a3b8;                  /* slate-400 */
    }

    .forgot-right .field input.input:focus[b-0qc7poasxo] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }
/* /Pages/Home.razor.rz.scp.css */
/* Main Container */
.home-container[b-ky3fuk0evs] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar */
.sidebar[b-ky3fuk0evs] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: white;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
}

/* Main Content Area */
.main-content[b-ky3fuk0evs] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page Header */
.page-header[b-ky3fuk0evs] {
    background-color: var(--card-bg);
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.page-title[b-ky3fuk0evs] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.user-profile[b-ky3fuk0evs] {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.user-name[b-ky3fuk0evs] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.user-avatar-dropdown[b-ky3fuk0evs] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.user-avatar-dropdown:hover[b-ky3fuk0evs] {
    background-color: var(--bg-secondary);
}

.user-avatar[b-ky3fuk0evs] {
    width: 40px;
    height: 40px;
    background-color: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.user-dropdown-menu[b-ky3fuk0evs] {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 200px;
    z-index: 1000;
    margin-top: 8px;
    border: 1px solid var(--border-primary);
}

.dropdown-item[b-ky3fuk0evs] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.dropdown-item:hover[b-ky3fuk0evs] {
    background-color: var(--bg-secondary);
}

.dropdown-divider[b-ky3fuk0evs] {
    height: 1px;
    background-color: var(--border-primary);
    margin: 4px 0;
}

.content-area[b-ky3fuk0evs] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sidebar[b-ky3fuk0evs] {
        width: 250px;
    }
    
    .main-content[b-ky3fuk0evs] {
        margin-left: 250px;
    }
    
    .page-header[b-ky3fuk0evs] {
        padding: 16px 32px;
    }
    
    .page-title[b-ky3fuk0evs] {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .home-container[b-ky3fuk0evs] {
        flex-direction: column;
    }
    
    .sidebar[b-ky3fuk0evs] {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .main-content[b-ky3fuk0evs] {
        margin-left: 0;
    }
    
    .page-header[b-ky3fuk0evs] {
        padding: 16px 20px;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .page-title[b-ky3fuk0evs] {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .page-header[b-ky3fuk0evs] {
        padding: 16px;
    }
    
    .user-profile[b-ky3fuk0evs] {
        width: 100%;
        justify-content: space-between;
    }
    
    .user-avatar[b-ky3fuk0evs] {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    .user-name[b-ky3fuk0evs] {
        font-size: 14px;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   ONE PORTAL — Login (CSS isolation)
   Enterprise-grade: dark navy canvas on the right, glassmorphism login
   card, Microsoft / Azure / SAP-style typography, smooth micro-animations.
   ───────────────────────────────────────────────────────────────────────── */

/* predictable sizing */
*[b-0n9dgtsnkn], *[b-0n9dgtsnkn]::before, *[b-0n9dgtsnkn]::after {
    box-sizing: border-box;
}

/* ── Shell ───────────────────────────────────────────────────────────── */
.login-shell[b-0n9dgtsnkn] {
    --primary:       #001F57;
    --primary-soft:  #0a3380;
    --primary-light: #1e40af;
    --accent:        #c9a961;   /* warm gold for subtle highlights */
    --text:          #0f172a;   /* slate-900 — body text on light surface */
    --text-strong:   #020617;   /* slate-950 — headings */
    --text-muted:    #475569;   /* slate-600 — secondary copy */
    --text-faint:    #94a3b8;   /* slate-400 — placeholders */
    --field-bg:      #ffffff;
    --field-border:  #cbd5e1;   /* slate-300 */
    --field-focus:   rgba(0, 31, 87, 0.12);
    --input-h:       52px;
    --input-r:       12px;
    --card-w:        420px;
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

/* ── Left side: light enterprise-themed canvas ───────────────────────── */
.brand-panel[b-0n9dgtsnkn] {
    background: #F5F8FC;
}

/* ── Right side: light enterprise canvas ─────────────────────────────── */
.login-right[b-0n9dgtsnkn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: #F5F8FC;
    overflow: hidden;
}

/* Subtle ambient depth — barely-visible brand-tint + warm-gold radials
   give the light surface dimension without competing with the card. */
.login-right[b-0n9dgtsnkn]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 18%, rgba(37, 99, 235, 0.05) 0%, transparent 38%),
        radial-gradient(circle at 78% 82%, rgba(201, 169, 97, 0.05) 0%, transparent 42%);
}

/* ── Paper card (light surface) ──────────────────────────────────────── */
.login-card[b-0n9dgtsnkn] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--card-w);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 40px 36px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;       /* slate-200 */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(15, 23, 42, 0.04);
    animation: card-rise-b-0n9dgtsnkn 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes card-rise-b-0n9dgtsnkn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Brand ───────────────────────────────────────────────────────────── */
.brand[b-0n9dgtsnkn] {
    margin-bottom: 6px;
}

.brand h1[b-0n9dgtsnkn] {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.brand .sub[b-0n9dgtsnkn] {
    margin: 0;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Fields ──────────────────────────────────────────────────────────── */
.field[b-0n9dgtsnkn] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 4px;
}

    .field label[b-0n9dgtsnkn] {
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

/* Input look — glass surface, soft borders, soft focus halo */
.input[b-0n9dgtsnkn],
.form-control[b-0n9dgtsnkn] {
    width: 100%;
    height: var(--input-h);
    padding: 0 16px;
    border: 1px solid var(--field-border);
    border-radius: var(--input-r);
    font-size: 14.5px;
    font-weight: 400;
    outline: none;
    background: var(--field-bg);
    color: var(--text);
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

    .input[b-0n9dgtsnkn]::placeholder,
    .form-control[b-0n9dgtsnkn]::placeholder {
        color: var(--text-faint);
        font-weight: 400;
    }

    .input:hover[b-0n9dgtsnkn],
    .form-control:hover[b-0n9dgtsnkn] {
        border-color: #94a3b8;          /* slate-400 */
    }

    .input:focus[b-0n9dgtsnkn],
    .form-control:focus[b-0n9dgtsnkn] {
        background: #ffffff;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--field-focus);
    }

    .input.valid[b-0n9dgtsnkn],
    .form-control.valid[b-0n9dgtsnkn] {
        border-color: #16a34a;
    }

    .input.invalid[b-0n9dgtsnkn],
    .form-control.invalid[b-0n9dgtsnkn] {
        border-color: #dc2626;
    }

/* ── Password + eye ──────────────────────────────────────────────────── */
.password .password-wrap[b-0n9dgtsnkn] {
    position: relative;
    width: 100%;
}

    .password .password-wrap .input[b-0n9dgtsnkn],
    .password .password-wrap .form-control[b-0n9dgtsnkn] {
        padding-right: 44px;
    }

.password .toggle[b-0n9dgtsnkn] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 6px 8px;
    cursor: pointer;
    line-height: 0;
    color: var(--text-muted);
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .password .toggle:hover[b-0n9dgtsnkn] {
        color: var(--text-strong);
        background: #f1f5f9;            /* slate-100 */
    }

    .password .toggle i[b-0n9dgtsnkn] {
        font-size: 18px;
        line-height: 1;
        display: block;
    }

/* ── Forgot link ─────────────────────────────────────────────────────── */
.forgot[b-0n9dgtsnkn] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

    .forgot a[b-0n9dgtsnkn] {
        font-size: 12.5px;
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.15s ease;
    }

        .forgot a:hover[b-0n9dgtsnkn] {
            color: var(--primary-light);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

/* ── Primary button (Microsoft/Azure-style) ──────────────────────────── */
.btn.primary[b-0n9dgtsnkn] {
    width: 100%;
    height: var(--input-h);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 16px rgba(29, 78, 216, 0.42);
}

    .btn.primary:hover[b-0n9dgtsnkn] {
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.22) inset,
            0 10px 20px rgba(29, 78, 216, 0.5);
    }

    .btn.primary:active[b-0n9dgtsnkn] {
        transform: translateY(0);
        filter: brightness(0.97);
    }

    .btn.primary[disabled][b-0n9dgtsnkn] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
    }

/* ── Divider ─────────────────────────────────────────────────────────── */
.divider[b-0n9dgtsnkn] {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 14px 0 6px;
    text-align: center;
}

.divider[b-0n9dgtsnkn]::before,
.divider[b-0n9dgtsnkn]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;                /* slate-200 */
}

.divider span[b-0n9dgtsnkn] {
    padding: 0 14px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent;
}

/* ── Secondary / outline button ──────────────────────────────────────── */
.btn.secondary[b-0n9dgtsnkn] {
    width: 100%;
    height: var(--input-h);
    border-radius: 12px;
    border: 1px solid var(--field-border);
    background: #ffffff;
    color: var(--text);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-top: 4px;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.btn.secondary:hover[b-0n9dgtsnkn] {
    background: #f8fafc;                /* slate-50 */
    border-color: #94a3b8;              /* slate-400 */
    transform: translateY(-1px);
}

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

.btn.secondary[disabled][b-0n9dgtsnkn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── GitHub-style passkey button ─────────────────────────────────────── */
.btn.passkey-github-style[b-0n9dgtsnkn] {
    width: 100%;
    height: var(--input-h);
    border-radius: 12px;
    border: 1px solid #1f2937;
    background: #111827;
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    margin-top: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.btn.passkey-github-style:hover[b-0n9dgtsnkn] {
    background: #1f2937;
    border-color: #374151;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.btn.passkey-github-style:active[b-0n9dgtsnkn] {
    transform: translateY(0);
}

.btn.passkey-github-style[disabled][b-0n9dgtsnkn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn.passkey-github-style svg[b-0n9dgtsnkn] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Messages ────────────────────────────────────────────────────────── */
.validation-message[b-0n9dgtsnkn],
.validation-errors li[b-0n9dgtsnkn] {
    color: #dc2626;                     /* red-600 */
    font-size: 12px;
    margin-top: 4px;
}

.error-message[b-0n9dgtsnkn] {
    margin-top: 10px;
    font-size: 13px;
    color: #b91c1c;                     /* red-700 */
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fef2f2;                /* red-50 */
    border: 1px solid #fecaca;          /* red-200 */
}

/* ── Responsive ladder ──────────────────────────────────────────────── */
@media (max-width: 960px) {
    .login-shell[b-0n9dgtsnkn] {
        grid-template-columns: 1fr;
    }
    .login-right[b-0n9dgtsnkn] {
        padding: 32px 22px;
        min-height: 100vh;
    }
    .login-card[b-0n9dgtsnkn] {
        max-width: 460px;
    }
}

@media (max-width: 600px) {
    .login-right[b-0n9dgtsnkn] {
        padding: 28px 16px;
    }
    .login-card[b-0n9dgtsnkn] {
        padding: 32px 26px;
    }
}

@media (max-width: 480px) {
    .login-right[b-0n9dgtsnkn] {
        padding: 24px 14px;
    }
    .login-card[b-0n9dgtsnkn] {
        padding: 28px 22px;
        gap: 16px;
    }
    .input[b-0n9dgtsnkn],
    .form-control[b-0n9dgtsnkn] {
        font-size: 16px;   /* defeat iOS focus-zoom */
    }
    .brand h1[b-0n9dgtsnkn] {
        font-size: 22px;
    }
}
/* /Pages/ManageStaffManagers.razor.rz.scp.css */
/* ENT-01 Part B — Add Enterprise Users.
   All colors flow from /wwwroot/css/themes.css CSS variables, so toggling
   .dark-theme on <body> swaps the palette automatically. Mirrors the
   layout/table/panel conventions of ManageTenants.razor.css. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

.employee-dashboard-container[b-htzqacqptt] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-htzqacqptt] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-htzqacqptt] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-htzqacqptt] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-htzqacqptt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
}

.section-title[b-htzqacqptt] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-subtitle[b-htzqacqptt] {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.action-bar[b-htzqacqptt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-htzqacqptt] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-htzqacqptt] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    width: 280px;
    outline: none;
}

.search-input:focus[b-htzqacqptt] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.search-input[b-htzqacqptt]::placeholder {
    color: var(--input-placeholder);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn[b-htzqacqptt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary[b-htzqacqptt] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover[b-htzqacqptt] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.btn-outline[b-htzqacqptt] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.btn-outline:hover[b-htzqacqptt] {
    background-color: var(--btn-secondary-hover);
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.employee-table-section[b-htzqacqptt] {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-htzqacqptt] {
    width: 100%;
    border-collapse: collapse;
}

.employee-table thead[b-htzqacqptt] {
    background-color: var(--bg-secondary);
}

.employee-table th[b-htzqacqptt] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
}

.employee-table tbody tr[b-htzqacqptt] {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-htzqacqptt] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-htzqacqptt] {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

.status-badge[b-htzqacqptt] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-htzqacqptt] {
    background: var(--success-bg);
    color: var(--success);
}

.status-inactive[b-htzqacqptt] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.btn-icon[b-htzqacqptt] {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 0.5rem;
}

.btn-icon:hover[b-htzqacqptt] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon.btn-danger[b-htzqacqptt] {
    color: var(--error);
    border-color: var(--error);
}

.btn-icon.btn-danger:hover[b-htzqacqptt] {
    background: var(--error-bg);
}

.actions-col[b-htzqacqptt] {
    text-align: right;
    white-space: nowrap;
}

.empty[b-htzqacqptt] {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

.loading-state[b-htzqacqptt],
.error-state[b-htzqacqptt] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

/* ── Right-slide edit panel ──────────────────────────────────────────────── */

.edit-panel-overlay[b-htzqacqptt] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn-b-htzqacqptt 0.2s ease;
}

.edit-panel[b-htzqacqptt] {
    width: 480px;
    max-width: 100%;
    background-color: var(--card-bg);
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideIn-b-htzqacqptt 0.2s ease;
}

.edit-panel-header[b-htzqacqptt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.edit-panel-header h3[b-htzqacqptt] {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}

.close-btn[b-htzqacqptt] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

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

.edit-panel-body[b-htzqacqptt] {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.edit-panel-footer[b-htzqacqptt] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
}

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

@keyframes slideIn-b-htzqacqptt {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ── Form helpers ────────────────────────────────────────────────────────── */

.form-label[b-htzqacqptt] {
    display: block;
    margin: 1rem 0 0.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-htzqacqptt] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 0.25rem;
    box-sizing: border-box;
}

.form-input:focus[b-htzqacqptt] {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.15);
}

.form-input:disabled[b-htzqacqptt] {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-hint[b-htzqacqptt] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-checkbox[b-htzqacqptt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.login-status[b-htzqacqptt] {
    margin-top: 1rem;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.required[b-htzqacqptt] {
    color: var(--error);
}

.alert[b-htzqacqptt] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-htzqacqptt] {
    background: var(--error-bg);
    border: 1px solid var(--error);
    color: var(--error);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .sidebar[b-htzqacqptt] { width: 250px; }
    .main-content[b-htzqacqptt] { margin-left: 250px; }
}

@media (max-width: 768px) {
    .employee-dashboard-container[b-htzqacqptt] {
        flex-direction: column;
    }
    .sidebar[b-htzqacqptt] {
        position: relative;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }
    .main-content[b-htzqacqptt] {
        margin-left: 0;
    }
    .employee-details-section[b-htzqacqptt] {
        padding: 20px 16px;
    }
    .section-header[b-htzqacqptt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .action-bar[b-htzqacqptt] {
        width: 100%;
        flex-wrap: wrap;
    }
    .search-box[b-htzqacqptt] {
        flex: 1 1 auto;
        min-width: 0;
    }
    .search-input[b-htzqacqptt] {
        width: 100%;
    }
    .employee-table-section[b-htzqacqptt] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .employee-table[b-htzqacqptt] {
        min-width: 720px;
        font-size: 13px;
    }
    .employee-table th[b-htzqacqptt],
    .employee-table td[b-htzqacqptt] {
        padding: 12px 10px;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .section-title[b-htzqacqptt] { font-size: 20px; }
}

@media (max-width: 480px) {
    .employee-details-section[b-htzqacqptt] {
        padding: 16px 12px;
    }
    .btn-icon[b-htzqacqptt] {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 10px;
    }
    .edit-panel[b-htzqacqptt] {
        width: 100% !important;
        max-width: none;
        height: 100%;
        border-radius: 0;
    }
}
/* /Pages/ManageTenants.razor.rz.scp.css */
/* All colors flow from /wwwroot/css/themes.css CSS variables.
   Light theme renders white-on-dark text by default; toggling .dark-theme on the
   <body> swaps every var(--*) value to the dark palette automatically. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

.employee-dashboard-container[b-jlgx5f5jzk] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-jlgx5f5jzk] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-jlgx5f5jzk] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-jlgx5f5jzk] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-jlgx5f5jzk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title[b-jlgx5f5jzk] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 30px 0;
}

.action-bar[b-jlgx5f5jzk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box[b-jlgx5f5jzk] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-jlgx5f5jzk] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    width: 250px;
    outline: none;
}

.search-input:focus[b-jlgx5f5jzk] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.search-input[b-jlgx5f5jzk]::placeholder {
    color: var(--input-placeholder);
}

.btn[b-jlgx5f5jzk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary[b-jlgx5f5jzk] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover[b-jlgx5f5jzk] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.btn-outline[b-jlgx5f5jzk] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.btn-outline:hover[b-jlgx5f5jzk] {
    background-color: var(--btn-secondary-hover);
}

.employee-table-section[b-jlgx5f5jzk] {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-jlgx5f5jzk] {
    width: 100%;
    border-collapse: collapse;
}

.employee-table thead[b-jlgx5f5jzk] {
    background-color: var(--bg-secondary);
}

.employee-table th[b-jlgx5f5jzk] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
}

.employee-table tbody tr[b-jlgx5f5jzk] {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color 0.2s ease;
}

.employee-table tbody tr:hover[b-jlgx5f5jzk] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-jlgx5f5jzk] {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

/* ── Right-slide edit panel ──────────────────────────────────────────────── */

.edit-panel-overlay[b-jlgx5f5jzk] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn-b-jlgx5f5jzk 0.2s ease;
}

.edit-panel[b-jlgx5f5jzk] {
    width: 480px;
    max-width: 100%;
    background-color: var(--card-bg);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideIn-b-jlgx5f5jzk 0.2s ease;
}

.edit-panel-header[b-jlgx5f5jzk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.edit-panel-header h3[b-jlgx5f5jzk] {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}

.close-btn[b-jlgx5f5jzk] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

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

.edit-panel-body[b-jlgx5f5jzk] {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.edit-panel-footer[b-jlgx5f5jzk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
}

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

@keyframes slideIn-b-jlgx5f5jzk {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ── Form helpers ────────────────────────────────────────────────────────── */

.form-label[b-jlgx5f5jzk] {
    display: block;
    margin: 1rem 0 0.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-jlgx5f5jzk] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 0.25rem;
}

.form-input:focus[b-jlgx5f5jzk] {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.15);
}

.form-input:disabled[b-jlgx5f5jzk] {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-hint[b-jlgx5f5jzk] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-checkbox[b-jlgx5f5jzk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.required[b-jlgx5f5jzk] {
    color: var(--error);
}

.alert[b-jlgx5f5jzk] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error[b-jlgx5f5jzk] {
    background: var(--error-bg);
    border: 1px solid var(--error);
    color: var(--error);
}

.status-badge[b-jlgx5f5jzk] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.status-active[b-jlgx5f5jzk] {
    background: var(--success-bg);
    color: var(--success);
}

.status-inactive[b-jlgx5f5jzk] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.btn-icon[b-jlgx5f5jzk] {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 0.5rem;
}

.btn-icon:hover[b-jlgx5f5jzk] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-icon.btn-danger[b-jlgx5f5jzk] {
    color: var(--error);
    border-color: var(--error);
}

.btn-icon.btn-danger:hover[b-jlgx5f5jzk] {
    background: var(--error-bg);
}

.actions-col[b-jlgx5f5jzk] {
    text-align: right;
    white-space: nowrap;
}

.empty[b-jlgx5f5jzk] {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

.loading-state[b-jlgx5f5jzk],
.error-state[b-jlgx5f5jzk] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

/* ── Live "similar tenant" suggestions under the Name field ──────────────
   Shown as the user types. Visually distinct from the input (subtle bg
   tint, soft border) so it reads as advisory, not as part of the form. */

.name-suggestions[b-jlgx5f5jzk] {
    margin-top: 0.5rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    animation: fadeIn-b-jlgx5f5jzk 0.15s ease;
}

.name-suggestions-header[b-jlgx5f5jzk] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.name-suggestion-item[b-jlgx5f5jzk] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-primary);
    font-size: 13px;
    color: var(--text-primary);
}

.name-suggestion-item strong[b-jlgx5f5jzk] {
    color: var(--text-secondary);
    font-size: 12px;
    min-width: 70px;
    font-weight: 700;
}

/* ── Similarity-warning modal (≥ 80% match on Create) ──────────────────────
   Centred, sits above the slide-in edit panel. Custom scaleIn animation —
   the panel's slideIn keyframe is wrong for a centred dialog. */

.similarity-confirm-overlay[b-jlgx5f5jzk] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3000;          /* above .edit-panel-overlay (2000) */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-jlgx5f5jzk 0.18s ease;
}

.similarity-confirm-modal[b-jlgx5f5jzk] {
    width: min(460px, 92vw);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: scaleIn-b-jlgx5f5jzk 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleIn-b-jlgx5f5jzk {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

.similarity-confirm-header[b-jlgx5f5jzk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
    background: #fff8e1;     /* soft amber — "warning, not error" */
}

.similarity-confirm-header i[b-jlgx5f5jzk] {
    color: #c08400;
    font-size: 22px;
    line-height: 1;
}

.similarity-confirm-header h3[b-jlgx5f5jzk] {
    margin: 0;
    font-size: 17px;
    color: #5d4400;
    font-weight: 700;
}

.similarity-confirm-body[b-jlgx5f5jzk] {
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.5;
}

.similarity-confirm-body p[b-jlgx5f5jzk] {
    margin: 0 0 10px 0;
}

.similarity-confirm-body p:last-of-type[b-jlgx5f5jzk] {
    margin: 12px 0 0 0;
    font-weight: 500;
}

.similarity-match-list[b-jlgx5f5jzk] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.similarity-match-list li[b-jlgx5f5jzk] {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border-primary);
    font-size: 13px;
}

.similarity-match-list li:first-child[b-jlgx5f5jzk] {
    border-top: none;
}

.similarity-match-list strong[b-jlgx5f5jzk] {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.similarity-pct[b-jlgx5f5jzk] {
    font-size: 12px;
    color: #c08400;
    font-weight: 600;
    white-space: nowrap;
}

.similarity-confirm-footer[b-jlgx5f5jzk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

/* ── ENT-01: tenant logo upload ──────────────────────────────────────────── */

.logo-upload[b-jlgx5f5jzk] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 0.25rem;
}

.logo-preview[b-jlgx5f5jzk] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    flex: 0 0 auto;
}

.logo-placeholder[b-jlgx5f5jzk] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px dashed var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    flex: 0 0 auto;
}

.logo-upload-controls[b-jlgx5f5jzk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.logo-upload-controls input[type="file"][b-jlgx5f5jzk] {
    font-size: 12.5px;
    color: var(--text-secondary);
    max-width: 100%;
}

.btn-link-danger[b-jlgx5f5jzk] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: var(--error);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link-danger:hover[b-jlgx5f5jzk] {
    opacity: 0.8;
}

/* ── ENT-01: registration-documents section (edit panel) ─────────────────
   Two single-slot docs (OPL, CORN) + up to 10 additional. Cards reuse the
   same var(--*) palette so they track the light/dark theme automatically. */

.doc-section[b-jlgx5f5jzk] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-primary);
}

.doc-section-title[b-jlgx5f5jzk] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.doc-slot[b-jlgx5f5jzk] {
    margin-bottom: 1.25rem;
}

.doc-slot-head[b-jlgx5f5jzk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.doc-slot-label[b-jlgx5f5jzk] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.doc-empty[b-jlgx5f5jzk] {
    font-size: 13px;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-primary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.doc-upload-row[b-jlgx5f5jzk] {
    margin-top: 0.5rem;
}

.doc-upload-row input[type="file"][b-jlgx5f5jzk] {
    font-size: 12.5px;
    color: var(--text-secondary);
    max-width: 100%;
}

.doc-card[b-jlgx5f5jzk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    margin-bottom: 0.5rem;
}

.doc-thumb-link[b-jlgx5f5jzk] {
    flex: 0 0 auto;
    line-height: 0;
}

.doc-thumb[b-jlgx5f5jzk] {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
}

.doc-badge[b-jlgx5f5jzk] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--text-muted);
}

.doc-badge-pdf[b-jlgx5f5jzk]  { background: #c0392b; }
.doc-badge-doc[b-jlgx5f5jzk]  { background: #2b579a; }
.doc-badge-file[b-jlgx5f5jzk] { background: var(--text-muted); }

.doc-meta[b-jlgx5f5jzk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-filename[b-jlgx5f5jzk] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-filename:hover[b-jlgx5f5jzk] {
    text-decoration: underline;
}

.doc-subtle[b-jlgx5f5jzk] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.doc-busy[b-jlgx5f5jzk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* ========================================================================
   Responsive — ManageTenants
   ------------------------------------------------------------------------
   Mobile-first reading bottom-up. Mirrors AllSystemUsers.razor.css's
   approach: sidebar collapses to drawer at 768px (handled by the shared
   PortalSidebar component), main-content drops its margin, the action bar
   wraps with a full-width search, and the tenant table scrolls
   horizontally inside its wrapper instead of breaking the layout.
   ======================================================================== */

/* iOS Safari address-bar fallback for full-page shells. */
.employee-dashboard-container[b-jlgx5f5jzk] {
    min-height: 100dvh;
}

.sidebar[b-jlgx5f5jzk] {
    height: 100dvh;
}

.main-content[b-jlgx5f5jzk] {
    min-height: 100dvh;
}

@media (max-width: 1200px) {
    .sidebar[b-jlgx5f5jzk] {
        width: 250px;
    }
    .main-content[b-jlgx5f5jzk] {
        margin-left: 250px;
    }
}

@media (max-width: 768px) {
    /* Sidebar slides in as a drawer at this breakpoint via the shared
       PortalSidebar component; main content takes the full width.
       The wrapper itself collapses to zero so SharedHeader anchors at
       top: 0 — see Dashboard.razor.css for the full rationale. */
    .employee-dashboard-container[b-jlgx5f5jzk] {
        flex-direction: column;
    }
    .sidebar[b-jlgx5f5jzk] {
        position: relative;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }
    .main-content[b-jlgx5f5jzk] {
        margin-left: 0;
    }
    .employee-details-section[b-jlgx5f5jzk] {
        padding: 20px 16px;
    }
    .section-header[b-jlgx5f5jzk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .action-bar[b-jlgx5f5jzk] {
        width: 100%;
        flex-wrap: wrap;
    }
    .search-box[b-jlgx5f5jzk] {
        flex: 1 1 auto;
        min-width: 0;
    }
    .search-input[b-jlgx5f5jzk] {
        width: 100%;
    }
    /* Wide tenant table: enable horizontal scroll inside its container so
       the page itself doesn't gain a horizontal scrollbar. */
    .employee-table-section[b-jlgx5f5jzk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .employee-table[b-jlgx5f5jzk] {
        min-width: 640px;
        font-size: 13px;
    }
    .employee-table th[b-jlgx5f5jzk],
    .employee-table td[b-jlgx5f5jzk] {
        padding: 12px 10px;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .section-title[b-jlgx5f5jzk] {
        font-size: 20px;
    }
    /* Live "similar tenants" suggestion card adapts to narrow phones. */
    .name-suggestion-item[b-jlgx5f5jzk] {
        font-size: 12.5px;
    }
    .name-suggestion-item strong[b-jlgx5f5jzk] {
        min-width: 56px;
    }
}

@media (max-width: 480px) {
    .employee-details-section[b-jlgx5f5jzk] {
        padding: 16px 12px;
    }
    /* Edit/Deactivate row buttons need WCAG-compliant 44×44 touch targets. */
    .btn-icon[b-jlgx5f5jzk] {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 10px;
    }
    /* Edit panel becomes a full-screen sheet on phones rather than a
       narrow drawer that would crowd the form fields. */
    .edit-panel[b-jlgx5f5jzk] {
        width: 100% !important;
        max-width: none;
        height: 100%;
        border-radius: 0;
    }
    /* Similarity-warning modal: edge-padded so the confirmation buttons
       have breathing room on the smallest screens. */
    .similarity-confirm-modal[b-jlgx5f5jzk] {
        width: min(92vw, 360px);
    }
    .similarity-confirm-body[b-jlgx5f5jzk],
    .similarity-confirm-header[b-jlgx5f5jzk],
    .similarity-confirm-footer[b-jlgx5f5jzk] {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Confirmation footer stacks (Cancel above, Create-anyway below) so
       both buttons fit a 320px iPhone SE without being squeezed. */
    .similarity-confirm-footer[b-jlgx5f5jzk] {
        flex-direction: column-reverse;
    }
    .similarity-confirm-footer .btn[b-jlgx5f5jzk] {
        width: 100%;
    }
    /* Match list rows compress: code | name | match-pct on three lines */
    .similarity-match-list li[b-jlgx5f5jzk] {
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
    }
    .similarity-match-list li strong[b-jlgx5f5jzk] {
        grid-column: 1 / -1;
    }
}
/* /Pages/MfaSetup.razor.rz.scp.css */
/* MFA setup wizard — themed via /wwwroot/css/themes.css. Scoped by Blazor
   CSS isolation to MfaSetup.razor only. Material-3 inspired surface +
   stepper + recommended-card highlight. */

.mfa-shell[b-x256w3saw4] {
    min-height: 100vh;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.mfa-card[b-x256w3saw4] {
    width: min(720px, 100%);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.10),
        0 24px 56px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    animation: mfaIn-b-x256w3saw4 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mfaIn-b-x256w3saw4 {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Stepper ──────────────────────────────────────────────────────────── */

.mfa-stepper[b-x256w3saw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--border-primary);
}

.mfa-step[b-x256w3saw4] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    transition: color 0.18s ease;
}

.mfa-step.is-active[b-x256w3saw4] {
    color: var(--accent-primary);
    font-weight: 600;
}

.mfa-step-num[b-x256w3saw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 13px;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.mfa-step.is-active .mfa-step-num[b-x256w3saw4] {
    background: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.18);
}

.mfa-step-label[b-x256w3saw4] {
    font-size: 13px;
    letter-spacing: 0.2px;
}

.mfa-step-line[b-x256w3saw4] {
    flex: 1;
    height: 2px;
    background: var(--border-primary);
    border-radius: 1px;
    transition: background 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.mfa-step-line.is-filled[b-x256w3saw4] {
    background: var(--accent-primary);
}

/* ── Body + typography ────────────────────────────────────────────────── */

.mfa-body[b-x256w3saw4] { padding: 28px 32px 32px; }

.mfa-title[b-x256w3saw4] {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.mfa-subtitle[b-x256w3saw4] {
    margin: 0 0 24px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Method chooser cards ─────────────────────────────────────────────── */

.mfa-method-grid[b-x256w3saw4] {
    display: grid;
    /* 160px minimum allows two cards per row at 360px viewport (two cards
       + gap fits a 320px iPhone SE comfortably). Previous 190px forced
       single-column on every phone <420px, which read as a long list. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

@media (max-width: 360px) {
    /* Single column on the very narrowest viewports — two cards become
       too cramped to read the title + description. */
    .mfa-method-grid[b-x256w3saw4] {
        grid-template-columns: 1fr;
    }
}

.mfa-method-card[b-x256w3saw4] {
    position: relative;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease;
    color: inherit;
    font-family: inherit;
}

.mfa-method-card:hover[b-x256w3saw4] {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.15);
}

.mfa-method-card.mfa-recommended[b-x256w3saw4] {
    border-color: var(--accent-primary);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.05), transparent);
}

.mfa-method-pill[b-x256w3saw4] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}

.mfa-method-icon[b-x256w3saw4] {
    color: var(--accent-primary);
    margin-bottom: 10px;
}

.mfa-method-title[b-x256w3saw4] {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.mfa-method-desc[b-x256w3saw4] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.mfa-fallback-note[b-x256w3saw4] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border-left: 3px solid var(--accent-primary);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
}

.mfa-fallback-note svg[b-x256w3saw4] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-primary);
}

/* ── TOTP enrollment (Figma-aligned: Step 1 / Step 2 sections) ─────────── */

/* A "section" is a Step block — header pill + description + content card. */
.mfa-totp-section[b-x256w3saw4] {
    margin: 18px 0 22px;
}

.mfa-section-header[b-x256w3saw4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.mfa-section-tag[b-x256w3saw4] {
    background: var(--accent-primary);
    color: #fff;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.mfa-section-title[b-x256w3saw4] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.mfa-section-desc[b-x256w3saw4] {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Step 1 card: QR on the left, "can't scan?" key + copy on the right. */
.mfa-totp-card[b-x256w3saw4] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
}

.mfa-qr-canvas[b-x256w3saw4] {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfa-totp-help[b-x256w3saw4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mfa-totp-help strong[b-x256w3saw4] {
    font-size: 13px;
    color: var(--text-primary);
}

.mfa-totp-help span[b-x256w3saw4] {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.mfa-secret-row[b-x256w3saw4] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.mfa-secret[b-x256w3saw4] {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Courier New', monospace;
    font-size: 12.5px;
    letter-spacing: 1px;
    word-break: break-all;
    color: var(--text-primary);
}

.mfa-copy-btn[b-x256w3saw4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mfa-copy-btn:hover[b-x256w3saw4] {
    background: var(--bg-secondary);
}

/* Legacy class — kept so any other call sites don't break. */
.mfa-link-btn[b-x256w3saw4] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 12.5px;
}

.mfa-link-btn:hover[b-x256w3saw4] { text-decoration: underline; }

/* ── Six-cell OTP input strip (TOTP step 2 + Email enrolment) ──────────── */

.mfa-otp-boxes[b-x256w3saw4] {
    display: flex;
    gap: 10px;
    margin: 6px 0 4px;
}

.mfa-otp-input[b-x256w3saw4] {
    width: 52px;
    height: 56px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    outline: none;
    caret-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mfa-otp-input:focus[b-x256w3saw4] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.mfa-otp-input:disabled[b-x256w3saw4] {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ── Email-OTP countdown timer ─────────────────────────────────────────── */

.mfa-timer[b-x256w3saw4] {
    margin: 14px 0 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.mfa-timer-text[b-x256w3saw4] { margin-right: 6px; }

.mfa-timer-countdown[b-x256w3saw4] {
    color: var(--accent-primary);
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: var(--bg-secondary);
    padding: 3px 8px;
    border-radius: 6px;
}

.mfa-timer-expired[b-x256w3saw4] {
    margin: 14px 0 6px;
    font-size: 13px;
    color: #c62828;
    font-weight: 600;
}

.mfa-resend-line[b-x256w3saw4] {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.mfa-resend-line a[b-x256w3saw4] {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.mfa-resend-line a:hover[b-x256w3saw4] { text-decoration: underline; }

/* ── Inputs ───────────────────────────────────────────────────────────── */

.mfa-input-label[b-x256w3saw4] {
    display: block;
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.mfa-input[b-x256w3saw4] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 18px;
    letter-spacing: 6px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mfa-input:focus[b-x256w3saw4] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

/* ── Email step ───────────────────────────────────────────────────────── */

.mfa-email-confirm[b-x256w3saw4] {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13px;
}

/* ── Loading + success + alerts ───────────────────────────────────────── */

.mfa-loading[b-x256w3saw4] {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.mfa-success[b-x256w3saw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.10);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.mfa-alert[b-x256w3saw4] {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
}

.mfa-alert-error[b-x256w3saw4] {
    background: rgba(239, 68, 68, 0.08);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.20);
}

/* ── Backup codes ─────────────────────────────────────────────────────── */

.mfa-codes-grid[b-x256w3saw4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
}

.mfa-code[b-x256w3saw4] {
    display: block;
    text-align: center;
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    font-weight: 600;
}

.mfa-codes-actions[b-x256w3saw4] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.mfa-checkbox[b-x256w3saw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.mfa-checkbox input[type="checkbox"][b-x256w3saw4] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ── Buttons + actions row ────────────────────────────────────────────── */

.mfa-actions[b-x256w3saw4] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-primary);
}

.mfa-btn[b-x256w3saw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.15s ease,
                box-shadow 0.15s ease;
    font-family: inherit;
}

.mfa-btn:disabled[b-x256w3saw4] { cursor: not-allowed; opacity: 0.55; }

.mfa-btn-primary[b-x256w3saw4] {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.32);
}

.mfa-btn-primary:hover:not(:disabled)[b-x256w3saw4] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.42);
}

.mfa-btn-ghost[b-x256w3saw4] {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.mfa-btn-ghost:hover:not(:disabled)[b-x256w3saw4] {
    background: var(--bg-secondary);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .mfa-totp-card[b-x256w3saw4] { grid-template-columns: 1fr; }
    .mfa-otp-input[b-x256w3saw4] { width: 44px; height: 50px; font-size: 22px; }
    .mfa-otp-boxes[b-x256w3saw4] { gap: 6px; }
    .mfa-stepper[b-x256w3saw4] { padding: 18px 18px 12px; }
    .mfa-body[b-x256w3saw4] { padding: 22px; }
    .mfa-codes-grid[b-x256w3saw4] { grid-template-columns: 1fr; }
    .mfa-step-label[b-x256w3saw4] { display: none; }
}
/* /Pages/PartnerUserCreate.razor.rz.scp.css */
/* All colors flow from /wwwroot/css/themes.css CSS variables.
   Light theme renders white-on-dark text by default; toggling .dark-theme on the
   <body> swaps every var(--*) value to the dark palette automatically. */

/* ── Layout shell ────────────────────────────────────────────────────────── */

.partner-user-container[b-s570kb2jpq] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-s570kb2jpq] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-s570kb2jpq] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Form shell ──────────────────────────────────────────────────────────── */

.form-shell[b-s570kb2jpq] {
    margin: 24px 32px;
    padding: 28px 32px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 1100px;
}

.form-shell h2[b-s570kb2jpq] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.form-hint[b-s570kb2jpq] {
    color: var(--text-secondary);
    font-size: 13.5px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.form-hint strong[b-s570kb2jpq] {
    color: var(--text-primary);
}

/* ── Rows / fields ───────────────────────────────────────────────────────── */

.row[b-s570kb2jpq] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px 24px;
    margin-bottom: 16px;
}

.field[b-s570kb2jpq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.field.empty[b-s570kb2jpq] {
    visibility: hidden;
}

.field label[b-s570kb2jpq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.req[b-s570kb2jpq] {
    color: var(--accent-danger, #d23737);
    font-weight: 700;
}

.input[b-s570kb2jpq] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}

.input:focus[b-s570kb2jpq] {
    border-color: var(--accent-primary, #2f6fed);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}

.input-locked[b-s570kb2jpq] {
    background-color: var(--bg-disabled, var(--bg-primary));
    color: var(--text-secondary);
    cursor: not-allowed;
}

.field .validation-message[b-s570kb2jpq] {
    color: var(--accent-danger, #d23737);
    font-size: 12px;
    margin-top: 4px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert[b-s570kb2jpq] {
    position: relative;
    padding: 12px 36px 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.alert-success[b-s570kb2jpq] {
    background-color: var(--alert-success-bg, #e8f5e9);
    color: var(--alert-success-fg, #1b5e20);
    border: 1px solid var(--alert-success-border, #a5d6a7);
}

.alert-error[b-s570kb2jpq] {
    background-color: var(--alert-error-bg, #fdecea);
    color: var(--alert-error-fg, #8c1d18);
    border: 1px solid var(--alert-error-border, #f5c2c0);
}

.alert-close[b-s570kb2jpq] {
    position: absolute;
    right: 8px;
    top: 6px;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.button-row[b-s570kb2jpq] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-primary);
}

.btn-primary[b-s570kb2jpq],
.btn-secondary[b-s570kb2jpq] {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-s570kb2jpq] {
    background-color: var(--accent-primary, #2f6fed);
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-s570kb2jpq] {
    filter: brightness(1.05);
}

.btn-secondary[b-s570kb2jpq] {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.btn-secondary:hover:not(:disabled)[b-s570kb2jpq] {
    background-color: var(--bg-primary);
}

.btn-primary:disabled[b-s570kb2jpq],
.btn-secondary:disabled[b-s570kb2jpq] {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-spinner[b-s570kb2jpq] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-s570kb2jpq 0.8s linear infinite;
}

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

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .row[b-s570kb2jpq] {
        grid-template-columns: 1fr;
    }
    .main-content[b-s570kb2jpq] {
        margin-left: 0;
    }
    .sidebar[b-s570kb2jpq] {
        position: static;
        width: 100%;
        height: auto;
    }
}

/* Phone portrait: stack everything single-column, shrink padding so the
   form is usable inside a phone viewport. The form-shell's max-width
   constraint goes away so the form fills the screen edge-to-edge. */
@media (max-width: 768px) {
    .row[b-s570kb2jpq],
    .form-row[b-s570kb2jpq],
    .form-grid[b-s570kb2jpq] {
        grid-template-columns: 1fr;
    }
    .form-shell[b-s570kb2jpq],
    .container[b-s570kb2jpq] {
        padding: 16px;
        max-width: 100%;
    }
    .actions[b-s570kb2jpq],
    .form-actions[b-s570kb2jpq] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Small phone: single-column buttons + tighter padding. */
@media (max-width: 480px) {
    .form-shell[b-s570kb2jpq],
    .container[b-s570kb2jpq] {
        padding: 12px;
    }
    .btn[b-s570kb2jpq],
    .btn-primary[b-s570kb2jpq],
    .btn-secondary[b-s570kb2jpq] {
        width: 100%;
    }
    h1[b-s570kb2jpq], h2[b-s570kb2jpq] { font-size: 20px; }
}

/* Phase-O: OnePortal-access toggle row + confirmation modal.
   The toggle sits below the form fields, above the submit button. The
   modal overlays the page when the toggle is on at submit time. */

.oneportal-toggle[b-s570kb2jpq] {
    margin: 14px 0 4px;
    padding: 12px 14px;
    background: #f8f9fc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.oneportal-toggle .toggle-label[b-s570kb2jpq] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.oneportal-toggle .toggle-label input[type="checkbox"][b-s570kb2jpq] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #001F57;
}

.oneportal-toggle .toggle-text[b-s570kb2jpq] {
    font-size: 14px;
}

.oneportal-toggle .form-hint[b-s570kb2jpq] {
    display: block;
    margin-top: 6px;
    margin-left: 28px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.45;
}

.modal-overlay[b-s570kb2jpq] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.18s ease;
}

.modal-card[b-s570kb2jpq] {
    width: min(460px, 92vw);
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    animation: scaleIn-b-s570kb2jpq 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card h3[b-s570kb2jpq] {
    margin: 0 0 12px;
    font-size: 18px;
    color: #001F57;
}

.modal-card p[b-s570kb2jpq] {
    margin: 0 0 10px;
    color: #334155;
    line-height: 1.5;
    font-size: 14px;
}

.modal-actions[b-s570kb2jpq] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

@keyframes scaleIn-b-s570kb2jpq {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
    .modal-actions[b-s570kb2jpq] {
        flex-direction: column-reverse;
    }
    .modal-actions .btn-primary[b-s570kb2jpq],
    .modal-actions .btn-secondary[b-s570kb2jpq] {
        width: 100%;
    }
}
/* /Pages/PortalAccessManagement.razor.rz.scp.css */
/* Main Container */
.portal-access-container[b-0o7c93cerf] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Ensure modals are not clipped */
    overflow: visible;
    position: relative;
}

/* Sidebar */
.sidebar[b-0o7c93cerf] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: white;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

/* Main Content Area */
.main-content[b-0o7c93cerf] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Ensure modals are not clipped */
    position: relative;
}

/* Form Container */
.form-shell[b-0o7c93cerf] {
    background: var(--card-bg);
    margin: 40px;
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--card-border);
}

.form-shell h2[b-0o7c93cerf] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 32px;
    border-bottom: 2px solid var(--border-primary);
    padding-bottom: 16px;
}

/* Tab Navigation */
.tab-navigation[b-0o7c93cerf] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border-primary);
}

.tab-button[b-0o7c93cerf] {
    padding: 12px 24px;
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.tab-button:hover[b-0o7c93cerf] {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.tab-button.active[b-0o7c93cerf] {
    color: var(--accent-primary, #3b82f6);
    border-bottom-color: var(--accent-primary, #3b82f6);
}

/* Tab Content */
.tab-content[b-0o7c93cerf] {
    margin-top: 24px;
}

/* Section Headers */
.section-header[b-0o7c93cerf] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

/* Data Tables */
.data-table[b-0o7c93cerf] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.data-table thead[b-0o7c93cerf] {
    background-color: var(--bg-primary);
}

.data-table th[b-0o7c93cerf] {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-primary);
}

.data-table td[b-0o7c93cerf] {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.data-table tbody tr:hover[b-0o7c93cerf] {
    background-color: var(--bg-primary);
}

.data-table tbody tr:last-child td[b-0o7c93cerf] {
    border-bottom: none;
}

/* Form Grid */
.form-grid[b-0o7c93cerf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.row[b-0o7c93cerf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Field Styling */
.field[b-0o7c93cerf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field label[b-0o7c93cerf] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 4px;
}

.field input[b-0o7c93cerf],
.field select[b-0o7c93cerf] {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--input-bg);
    outline: none;
    width: 100%;
    transition: all 0.2s ease;
    min-height: 40px;
}

.field input:focus[b-0o7c93cerf],
.field select:focus[b-0o7c93cerf] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.field input[b-0o7c93cerf]::placeholder {
    color: var(--input-placeholder);
}

.field select:disabled[b-0o7c93cerf] {
    background-color: var(--input-bg-disabled, #f3f4f6);
    cursor: not-allowed;
}

/* Button Styling */
.button-row[b-0o7c93cerf] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-primary);
}

.btn-primary[b-0o7c93cerf] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-primary:hover:not(:disabled)[b-0o7c93cerf] {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 64, 175, 0.3);
}

.btn-primary:disabled[b-0o7c93cerf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-0o7c93cerf] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-secondary:hover[b-0o7c93cerf] {
    background-color: var(--btn-secondary-hover);
    border-color: var(--text-tertiary);
    transform: translateY(-1px);
}

/* Modal Styling */
.modal-overlay[b-0o7c93cerf] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal[b-0o7c93cerf] {
    background-color: var(--card-bg) !important;
    border-radius: 12px !important;
    width: 90% !important;
    max-width: 550px !important;
    max-height: 42.5vh !important;
    overflow-y: auto !important;
    box-shadow: var(--shadow-lg) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.modal-header[b-0o7c93cerf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

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

.modal-close[b-0o7c93cerf] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover[b-0o7c93cerf] {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.modal-body[b-0o7c93cerf] {
    padding: 24px;
}

/* Section Headings */
.user-accesses-section[b-0o7c93cerf] {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid var(--border-primary);
}

.user-accesses-section h3[b-0o7c93cerf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .row[b-0o7c93cerf] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar[b-0o7c93cerf] {
        width: 250px;
    }
    
    .main-content[b-0o7c93cerf] {
        margin-left: 250px;
    }
}

@media (max-width: 768px) {
    .portal-access-container[b-0o7c93cerf] {
        flex-direction: column;
    }
    
    .sidebar[b-0o7c93cerf] {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .main-content[b-0o7c93cerf] {
        margin-left: 0;
    }
    
    .row[b-0o7c93cerf] {
        grid-template-columns: 1fr;
    }
    
    .form-shell[b-0o7c93cerf] {
        margin: 20px;
        padding: 24px;
    }
    
    .button-row[b-0o7c93cerf] {
        flex-direction: column;
    }
    
    .tab-navigation[b-0o7c93cerf] {
        flex-wrap: wrap;
    }
    
    .tab-button[b-0o7c93cerf] {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .form-shell[b-0o7c93cerf] {
        margin: 16px;
        padding: 20px;
    }
    
    .form-shell h2[b-0o7c93cerf] {
        font-size: 20px;
    }
    
    .modal[b-0o7c93cerf] {
        width: 95%;
        margin: 20px;
    }
}

/* Autocomplete Styles */
.autocomplete-container[b-0o7c93cerf] {
    position: relative;
    width: 100%;
}

.autocomplete-input[b-0o7c93cerf] {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--input-bg);
    outline: none;
    width: 100%;
    transition: all 0.2s ease;
}

.autocomplete-input:focus[b-0o7c93cerf] {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.autocomplete-dropdown[b-0o7c93cerf] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.autocomplete-item[b-0o7c93cerf] {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border-primary);
}

.autocomplete-item:last-child[b-0o7c93cerf] {
    border-bottom: none;
}

.autocomplete-item:hover[b-0o7c93cerf],
.autocomplete-item.highlighted[b-0o7c93cerf] {
    background-color: var(--bg-primary);
}

.autocomplete-item.no-results[b-0o7c93cerf] {
    color: var(--text-secondary);
    cursor: default;
    font-style: italic;
}

.autocomplete-item .user-name[b-0o7c93cerf] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.autocomplete-item .user-email[b-0o7c93cerf] {
    font-size: 12px;
    color: var(--text-secondary);
}


/* /Pages/PortalLaunch.razor.rz.scp.css */
/* ===== ONE PORTAL — Portal Launch handoff page =====
   Lightweight transient screen — the user spends ≤1 second here on a happy
   path. Style minimal, centered, brand-navy. Mirrors the auth-page
   typography so it doesn't feel like a different system. */

*[b-47i403cck9], *[b-47i403cck9]::before, *[b-47i403cck9]::after {
    box-sizing: border-box;
}

.launch-shell[b-47i403cck9] {
    --primary: #001F57;
    --heading: #292929;
    --muted: #585858;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.launch-card[b-47i403cck9] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 40px 32px;
    width: min(440px, 100%);
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 31, 87, 0.06);
}

.launch-card h1[b-47i403cck9] {
    margin: 0 0 8px;
    color: var(--heading);
    font-weight: 800;
    font-size: clamp(20px, 3vw, 26px);
}

.launch-card p[b-47i403cck9] {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.launch-card .muted[b-47i403cck9] {
    color: var(--muted);
}

.launch-card .error[b-47i403cck9] {
    color: #c62828;
    font-weight: 500;
    background: #fff5f5;
    border: 1px solid #f5c4c4;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 16px;
}

.launch-card .spinner[b-47i403cck9] {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

@media (max-width: 480px) {
    .launch-card[b-47i403cck9] {
        padding: 28px 18px;
        border-radius: 12px;
    }
}
/* /Pages/Portal/PortalPage.razor.rz.scp.css */
.portal-page-container[b-te0rd8zj37] {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Fullscreen mode for external portals - no outer sidebar, iframe takes all space */
.portal-page-container.fullscreen[b-te0rd8zj37] {
    display: flex;
}
.portal-page-container.fullscreen .portal-main-section[b-te0rd8zj37] {
    width: 100%;
}
.portal-page-container.fullscreen .portal-iframe-wrapper[b-te0rd8zj37] {
    flex: 1;
}

.portal-sidebar-section[b-te0rd8zj37] {
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
}

.portal-main-section[b-te0rd8zj37] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary, #ffffff);
}

.portal-iframe-wrapper[b-te0rd8zj37] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.portal-loading[b-te0rd8zj37] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

/* Old spinner styles removed - using LfzSpinner component instead */

.portal-error[b-te0rd8zj37] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.portal-error h2[b-te0rd8zj37] {
    margin-bottom: 1rem;
    color: var(--text-primary, #333);
}

.portal-error p[b-te0rd8zj37] {
    margin-bottom: 1.5rem;
    color: var(--text-secondary, #666);
}

.btn[b-te0rd8zj37] {
    padding: 0.5rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.btn-primary[b-te0rd8zj37] {
    background-color: var(--primary-color, #007bff);
    color: white;
}

.btn-primary:hover[b-te0rd8zj37] {
    background-color: var(--primary-hover, #0056b3);
}

.portal-content[b-te0rd8zj37] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.portal-main-content h2[b-te0rd8zj37] {
    margin-bottom: 1rem;
    color: var(--text-primary, #333);
}

.sub-portals-grid[b-te0rd8zj37] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.sub-portal-card[b-te0rd8zj37] {
    padding: 1.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.sub-portal-card:hover[b-te0rd8zj37] {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.sub-portal-icon[b-te0rd8zj37] {
    font-size: 2rem;
    color: var(--primary-color, #007bff);
    margin-bottom: 0.5rem;
}

.sub-portal-card h3[b-te0rd8zj37] {
    margin: 0.5rem 0 0.25rem;
    font-size: 1rem;
    color: var(--text-primary, #333);
}

.sub-portal-card p[b-te0rd8zj37] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.sub-portal-content[b-te0rd8zj37] {
    padding: 1.5rem;
}

.sub-portal-header h2[b-te0rd8zj37] {
    margin-bottom: 0.5rem;
    color: var(--text-primary, #333);
}

.breadcrumb[b-te0rd8zj37] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin-bottom: 1.5rem;
}

.breadcrumb a[b-te0rd8zj37] {
    color: var(--text-secondary, #666);
    text-decoration: none;
}

.breadcrumb a:hover[b-te0rd8zj37] {
    color: var(--primary-color, #007bff);
}

.breadcrumb .separator[b-te0rd8zj37] {
    color: var(--text-tertiary, #999);
}

.breadcrumb .current[b-te0rd8zj37] {
    color: var(--text-primary, #333);
    font-weight: 500;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* ===== ONE PORTAL – Reset Password (CSS isolation) ===== */

/* reset sizing */
*[b-kx7h1llweq], *[b-kx7h1llweq]::before, *[b-kx7h1llweq]::after {
    box-sizing: border-box;
}

/* layout: mirror the login page */
.reset-shell[b-kx7h1llweq] {
    --primary: #001F57;
    --heading: #292929;
    --sub: #585858;
    --placeholder: #C9D3E0;
    --border: #254a76;
    --input-h: 55px;
    --input-r: 16px;
    --content-w: 480px;

    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

.reset-left[b-kx7h1llweq] {
    position: relative;
    background: #0b1b33;
}

.reset-img[b-kx7h1llweq] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reset-right[b-kx7h1llweq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 16px;
}

.reset-right h1[b-kx7h1llweq] {
    margin: 0 0 10px;
    color: var(--heading);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
}

/* fields */
.field[b-kx7h1llweq] {
    width: min(var(--content-w), 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.field label[b-kx7h1llweq] {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    letter-spacing: .2px;
}

/* base input style — clean white surface, brand-navy focus halo. */
.input[b-kx7h1llweq] {
    width: 100%;
    height: var(--input-h);
    padding: 0 18px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: var(--input-r);
    font-size: 15px;
    outline: none;
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input[b-kx7h1llweq]::placeholder {
    color: #94a3b8;                      /* slate-400 — readable on white */
}

.input:focus[b-kx7h1llweq] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
}

/* validation colors */
.input.valid[b-kx7h1llweq] {
    border-color: #2e7d32;
}
.input.invalid[b-kx7h1llweq] {
    border-color: #c62828;
}
.input.modified[b-kx7h1llweq] {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* password toggle */
.password .password-wrap[b-kx7h1llweq] {
    position: relative;
    width: min(var(--content-w), 100%);
}
.password .password-wrap .input[b-kx7h1llweq] {
    width: 100%;
    padding-right: 46px;
}
.password .toggle[b-kx7h1llweq] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    color: #8aa0b9;
    z-index: 1;
}
.password .toggle:hover[b-kx7h1llweq] {
    color: #ffffff;
}
.password .toggle i[b-kx7h1llweq] {
    font-size: 20px;
    line-height: 1;
}

/* forgot/OK/error alignment */
.ok-message[b-kx7h1llweq],
.error-message[b-kx7h1llweq],
.validation-message[b-kx7h1llweq],
.loading-message[b-kx7h1llweq] {
    font-size: 12px;
    margin-top: 6px;
}

.ok-message[b-kx7h1llweq] {
    color: #0a7a2f;
}
.error-message[b-kx7h1llweq] {
    color: #c62828;
}
.loading-message[b-kx7h1llweq] {
    color: var(--sub);
    font-style: italic;
}

.error-message a[b-kx7h1llweq] {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
}

.error-message a:hover[b-kx7h1llweq] {
    text-decoration: none;
}

/* button */
.btn.primary[b-kx7h1llweq] {
    width: min(var(--content-w), 100%);
    height: var(--input-h);
    border-radius: 22px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 22px;
    cursor: pointer;
}

.btn.primary:hover[b-kx7h1llweq] {
    filter: brightness(1.05);
}
.btn.primary:active[b-kx7h1llweq] {
    transform: translateY(1px);
}
.btn.primary[disabled][b-kx7h1llweq] {
    opacity: .7;
    cursor: not-allowed;
}

/* ── Responsive ladder ──────────────────────────────────────────────────
   Mobile-first; reads bottom-up. SideImagePanel hide + 100dvh fallback
   live in wwwroot/css/app.css (shared across all auth pages). */

@media (max-width: 960px) {
    .reset-shell[b-kx7h1llweq] {
        grid-template-columns: 1fr;
    }
    .reset-right[b-kx7h1llweq] {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .reset-right[b-kx7h1llweq] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .reset-right[b-kx7h1llweq] {
        padding: 20px 14px;
        gap: 12px;
    }
    .input[b-kx7h1llweq],
    .form-control[b-kx7h1llweq] {
        font-size: 16px;
    }
    .btn.primary[b-kx7h1llweq] {
        width: 100%;
    }
    /* Strength-meter checks reflow to a single column so labels don't
       truncate ("Doesn't look like your email" needs space). */
    .pw-checks[b-kx7h1llweq] {
        grid-template-columns: 1fr;
    }
}

/* === Password strength meter === */
.pw-meter-wrap[b-kx7h1llweq] {
    width: min(var(--content-w), 100%);
    margin-top: 8px;
}

.pw-meter[b-kx7h1llweq] {
    --pct: 0;
    height: 8px;
    width: 100%;
    border-radius: 9999px;
    background: #2b3e57;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

    .pw-meter .bar[b-kx7h1llweq] {
        height: 100%;
        width: calc(var(--pct) * 1%);
        background: linear-gradient(90deg, #c62828 0%, #f9a825 50%, #2e7d32 100%);
        transition: width .25s ease;
    }

.pw-label[b-kx7h1llweq] {
    margin-top: 6px;
    font-size: 12px;
    color: #222;
    font-weight: 700;
    letter-spacing: .2px;
}

.pw-checks[b-kx7h1llweq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12px;
    color: #333;
}

    .pw-checks .ok[b-kx7h1llweq] {
        color: #2e7d32;
        font-weight: 700;
    }

    .pw-checks .bad[b-kx7h1llweq] {
        color: #c62828;
        font-weight: 600;
    }

    .pw-checks .dot[b-kx7h1llweq] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
        background: currentColor;
        vertical-align: middle;
    }

/* /Pages/SecuritySettings.razor.rz.scp.css */
/* Security Settings Page Styles */
.security-settings[b-kznneald08] {
    min-height: 100vh;
    background-color: #f8f9fa;
}

.card[b-kznneald08] {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header[b-kznneald08] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.btn[b-kznneald08] {
    border-radius: 0.375rem;
    font-weight: 500;
}

.btn-primary[b-kznneald08] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover[b-kznneald08] {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-outline-primary[b-kznneald08] {
    color: #0d6efd;
    border-color: #0d6efd;
}

.btn-outline-primary:hover[b-kznneald08] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-outline-danger[b-kznneald08] {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover[b-kznneald08] {
    background-color: #dc3545;
    border-color: #dc3545;
}

.alert[b-kznneald08] {
    border-radius: 0.375rem;
    border: none;
}

.alert-danger[b-kznneald08] {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-success[b-kznneald08] {
    background-color: #d1e7dd;
    color: #0f5132;
}

.list-group-item[b-kznneald08] {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem !important;
    margin-bottom: 0.5rem;
}

.list-group-item:last-child[b-kznneald08] {
    margin-bottom: 0;
}

.spinner-border[b-kznneald08] {
    width: 2rem;
    height: 2rem;
}

.form-control[b-kznneald08] {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
}

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

/* Timeline styles */
.timeline[b-kznneald08] {
    position: relative;
    padding-left: 30px;
}

.timeline-item[b-kznneald08] {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker[b-kznneald08] {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.timeline-content[b-kznneald08] {
    padding-left: 10px;
}

.timeline[b-kznneald08]::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container-fluid[b-kznneald08] {
        padding: 1rem;
    }
    
    .card-body[b-kznneald08] {
        padding: 1rem;
    }
    
    .btn[b-kznneald08] {
        font-size: 0.875rem;
    }
}

/* /Pages/TenantMenuVisibility.razor.rz.scp.css */
/* All colors flow from /wwwroot/css/themes.css CSS variables. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

.employee-dashboard-container[b-8jh5emf0w9] {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar[b-8jh5emf0w9] {
    width: 280px;
    background-color: var(--bg-sidebar);
    color: var(--text-sidebar);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
    border-right: 1px solid var(--border-primary);
}

.main-content[b-8jh5emf0w9] {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.employee-details-section[b-8jh5emf0w9] {
    padding: 30px 40px;
    background-color: var(--bg-primary);
}

.section-header[b-8jh5emf0w9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title[b-8jh5emf0w9] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.action-bar[b-8jh5emf0w9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-select[b-8jh5emf0w9] {
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    font-weight: 500;
}

.btn[b-8jh5emf0w9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-outline[b-8jh5emf0w9] {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.btn-outline:hover[b-8jh5emf0w9] {
    background-color: var(--btn-secondary-hover);
}

.employee-table-section[b-8jh5emf0w9] {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.employee-table[b-8jh5emf0w9] {
    width: 100%;
    border-collapse: collapse;
}

.employee-table thead[b-8jh5emf0w9] {
    background-color: var(--bg-secondary);
}

.employee-table th[b-8jh5emf0w9] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-primary);
}

.employee-table tbody tr[b-8jh5emf0w9] {
    border-bottom: 1px solid var(--border-primary);
}

.employee-table tbody tr:hover[b-8jh5emf0w9] {
    background-color: var(--bg-secondary);
}

.employee-table td[b-8jh5emf0w9] {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-primary);
}

/* ── Page-specific helpers ──────────────────────────────────────────────── */

.muted[b-8jh5emf0w9] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.centered[b-8jh5emf0w9] {
    text-align: center;
}

/* Greyed-out checkbox for toggles that are no-ops (Min. Role floor excludes the
   role anyway). The browser dims disabled inputs natively; we add a stronger
   opacity drop + not-allowed cursor so the row reads as informational. */
.toggle-disabled[b-8jh5emf0w9] {
    opacity: 0.35;
    cursor: not-allowed;
}

.code-badge[b-8jh5emf0w9] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: monospace;
    font-size: 12px;
}

.empty[b-8jh5emf0w9] {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

.loading-state[b-8jh5emf0w9],
.error-state[b-8jh5emf0w9] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}
/* /Pages/TotpChallenge.razor.rz.scp.css */
/* ===== ONE PORTAL – TOTP Challenge (CSS isolation) =====
   Mirrors Email2FA.razor.css so the two MFA challenge pages feel
   visually identical — only the wording and the input shape differ
   (Email = sent code; Totp = code from authenticator app). */

*[b-clx8p86ph5], *[b-clx8p86ph5]::before, *[b-clx8p86ph5]::after { box-sizing: border-box; }

/* two-column layout: image on the left, form on the right */
.twofa-shell[b-clx8p86ph5] {
    --primary: #001F57;
    --heading: #292929;
    --sub: #585858;
    --placeholder: #C9D3E0;
    --border: #254a76;
    --input-h: 55px;
    --input-r: 16px;
    --content-w: 520px;
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

.twofa-left[b-clx8p86ph5] {
    position: relative;
    background: #0b1b33;
}

.twofa-img[b-clx8p86ph5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.twofa-right[b-clx8p86ph5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 16px;
}

    .twofa-right h1[b-clx8p86ph5] {
        margin: 0 0 6px;
        color: var(--heading);
        font-weight: 800;
        font-size: clamp(22px, 3vw, 32px);
    }

    .twofa-right p[b-clx8p86ph5] {
        margin: 0;
        color: var(--sub);
        font-size: 14px;
    }

    .twofa-right label[b-clx8p86ph5] {
        display: block;
        margin-top: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--heading);
    }

/* OTP boxes — six 50×50 rounded cells */
.otp-boxes[b-clx8p86ph5] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Plain white surface to match the rest of the form panel — same
   recipe as .backup-input below + every other auth input across the app. */
.otp-input[b-clx8p86ph5] {
    width: 50px;
    height: 50px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    outline: none;
    caret-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .otp-input:focus[b-clx8p86ph5] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

    .otp-input:disabled[b-clx8p86ph5] {
        background: #e0e0e0;
        color: #999;
        border-color: #ccc;
        cursor: not-allowed;
    }

/* Backup-code input — single wide cell (codes are XXXX-XXXX, 9 chars). */
.backup-input[b-clx8p86ph5] {
    width: 100%;
    height: var(--input-h);
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--input-r);
    background: #f8f9fc;
    color: var(--heading);
    font-family: 'Courier New', monospace;
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    margin: 8px 0 6px;
    outline: none;
}

    .backup-input:focus[b-clx8p86ph5] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

/* Resend / "Use backup code" link line */
.small-text[b-clx8p86ph5] {
    margin-top: 6px;
    font-size: 13px;
    color: var(--sub);
}

    .small-text a[b-clx8p86ph5] {
        color: var(--primary);
        text-decoration: underline;
        cursor: pointer;
        font-weight: 600;
    }

        .small-text a:hover[b-clx8p86ph5] { text-decoration: none; }

/* Primary action button */
.btn.primary[b-clx8p86ph5] {
    width: min(var(--content-w), 100%);
    height: var(--input-h);
    border-radius: 22px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 22px;
    cursor: pointer;
}

    .btn.primary:hover[b-clx8p86ph5] { filter: brightness(1.05); }
    .btn.primary:active[b-clx8p86ph5] { transform: translateY(1px); }
    .btn.primary[disabled][b-clx8p86ph5] {
        opacity: .7;
        cursor: not-allowed;
    }

/* Countdown timer */
.timer-display[b-clx8p86ph5] {
    margin: 12px 0 4px;
    text-align: center;
    font-size: 14px;
}

.timer-text[b-clx8p86ph5] { color: var(--sub); }

.timer-countdown[b-clx8p86ph5] {
    color: var(--primary);
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: #f0f4f8;
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: 6px;
}

.timer-expired[b-clx8p86ph5] {
    margin: 12px 0;
    text-align: center;
}

.expired-text[b-clx8p86ph5] {
    color: #c62828;
    font-weight: 600;
    font-size: 14px;
}

/* Error banner under the form */
.error-message[b-clx8p86ph5] {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff0f0;
    border: 1px solid #f5c4c4;
    border-radius: 8px;
    color: #c62828;
    font-weight: 600;
    font-size: 13px;
}

/* ── Responsive ladder ──────────────────────────────────────────────────
   SideImagePanel hide + 100dvh fallback are global. OTP cells shrink
   responsively below 480px so 6 boxes fit on a 320px iPhone SE.
   Backup-code escape hatch input keeps its full-width single-cell shape. */

@media (max-width: 960px) {
    .twofa-shell[b-clx8p86ph5] {
        grid-template-columns: 1fr;
    }
    .twofa-left[b-clx8p86ph5] {
        min-height: 220px;
    }
    .twofa-right[b-clx8p86ph5] {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .twofa-right[b-clx8p86ph5] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .twofa-right[b-clx8p86ph5] {
        padding: 20px 14px;
        gap: 12px;
    }
    .otp-boxes[b-clx8p86ph5] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .otp-input[b-clx8p86ph5] {
        width: clamp(40px, 12vw, 50px);
        height: clamp(44px, 13vw, 54px);
        font-size: clamp(18px, 5.5vw, 24px);
    }
    /* Backup code is a single XXXX-XXXX cell — keep readable, slightly
       smaller letter-spacing so it doesn't overflow on narrow phones. */
    .backup-input[b-clx8p86ph5] {
        font-size: 16px;
        letter-spacing: 3px;
    }
    .btn.primary[b-clx8p86ph5] {
        width: 100%;
    }
}
/* /Pages/VerifyResetOtp.razor.rz.scp.css */
/* ===== ONE PORTAL – Verify Reset OTP (CSS isolation) ===== */

/* Reuse styles from Email2FA since layout is identical */
/* predictable sizing */
*[b-dclqhfm9u9], *[b-dclqhfm9u9]::before, *[b-dclqhfm9u9]::after {
    box-sizing: border-box;
}

/* two‑column layout */
.twofa-shell[b-dclqhfm9u9] {
    --primary: #001F57;
    --heading: #292929;
    --sub: #585858;
    --placeholder: #C9D3E0;
    --border: #254a76;
    --input-h: 55px;
    --input-r: 16px;
    --content-w: 520px;
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 100vh;
    width: 100%;
}

.twofa-left[b-dclqhfm9u9] {
    position: relative;
    background: #0b1b33;
}

.twofa-img[b-dclqhfm9u9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.twofa-right[b-dclqhfm9u9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 56px;
    gap: 16px;
}

    .twofa-right h1[b-dclqhfm9u9] {
        margin: 0 0 6px;
        color: var(--heading);
        font-weight: 800;
        font-size: clamp(22px,3vw,32px);
    }

    .twofa-right p[b-dclqhfm9u9] {
        margin: 0;
        color: var(--sub);
        font-size: 14px;
    }

/* OTP boxes wrapper */
.otp-boxes[b-dclqhfm9u9] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Plain white surface — matches every other auth input across the app. */
.otp-input[b-dclqhfm9u9] {
    width: 50px;
    height: 50px;
    border: 1px solid #cbd5e1;          /* slate-300 */
    border-radius: 12px;
    background: #ffffff;
    color: #1e293b;                      /* slate-800 */
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    outline: none;
    caret-color: transparent; /* hide caret */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .otp-input:focus[b-dclqhfm9u9] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 31, 87, 0.12);
    }

/* link styling for resend */
.small-text[b-dclqhfm9u9] {
    margin-top: 0;
    font-size: 12px;
    color: var(--sub);
}

    .small-text a[b-dclqhfm9u9] {
        color: var(--primary);
        text-decoration: underline;
        cursor: pointer;
    }

        .small-text a:hover[b-dclqhfm9u9] {
            text-decoration: none;
        }

/* button styling */
.btn.primary[b-dclqhfm9u9] {
    width: min(var(--content-w),100%);
    height: var(--input-h);
    border-radius: 22px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-top: 22px;
    cursor: pointer;
}

    .btn.primary:hover[b-dclqhfm9u9] {
        filter: brightness(1.05);
    }

    .btn.primary:active[b-dclqhfm9u9] {
        transform: translateY(1px);
    }

    .btn.primary[disabled][b-dclqhfm9u9] {
        opacity: .7;
        cursor: not-allowed;
    }

/* timer display */
.timer-display[b-dclqhfm9u9] {
    margin: 12px 0;
    text-align: center;
    font-size: 14px;
}

.timer-text[b-dclqhfm9u9] {
    color: var(--sub);
}

.timer-countdown[b-dclqhfm9u9] {
    color: var(--primary);
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: #f0f4f8;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 4px;
}

.timer-expired[b-dclqhfm9u9] {
    margin: 12px 0;
    text-align: center;
}

.expired-text[b-dclqhfm9u9] {
    color: #c62828;
    font-weight: 600;
    font-size: 14px;
}

/* disabled OTP inputs */
.otp-input:disabled[b-dclqhfm9u9] {
    background: #e0e0e0;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
}

/* error message */
.error-message[b-dclqhfm9u9] {
    margin-top: 12px;
    font-size: 13px;
    color: #c62828;
    font-weight: 600;
}

/* ── Responsive ladder ──────────────────────────────────────────────────
   SideImagePanel hide + 100dvh fallback are global. OTP cells shrink
   responsively below 480px so 6 boxes always fit even on a 320px iPhone SE. */

@media (max-width: 960px) {
    .twofa-shell[b-dclqhfm9u9] {
        grid-template-columns: 1fr;
    }
    .twofa-right[b-dclqhfm9u9] {
        padding: 28px 22px;
    }
}

@media (max-width: 600px) {
    .twofa-right[b-dclqhfm9u9] {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .twofa-right[b-dclqhfm9u9] {
        padding: 20px 14px;
        gap: 12px;
    }
    /* OTP wrapper: allow wrapping if needed; centre boxes on the line. */
    .otp-boxes[b-dclqhfm9u9] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    /* OTP cells: clamp scales between 40px (iPhone SE) and 50px (large phones).
       6 boxes × 44px + 5 × 8px gaps = 304px → fits comfortably on 320-wide. */
    .otp-input[b-dclqhfm9u9] {
        width: clamp(40px, 12vw, 50px);
        height: clamp(44px, 13vw, 54px);
        font-size: clamp(18px, 5.5vw, 24px);
    }
    .btn.primary[b-dclqhfm9u9] {
        width: 100%;
    }
}

/* /Shared/Components/PortalSidebar.razor.rz.scp.css */
/* =====================================================
   PORTAL SIDEBAR — redesigned for polish & hierarchy
   Colors: #001F57 navy · --accent-primary · --bg-sidebar
   ===================================================== */

/* ── Base container ─────────────────────────────────── */
.portal-sidebar[b-e4oewoc89n] {
    width: 100%;
    height: 100vh;
    background-color: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    box-shadow: 2px 0 16px rgba(0, 31, 87, 0.07);
    border-right: 1px solid var(--border-primary);
    z-index: 1000;
    font-family: 'Segoe UI', Inter, Tahoma, Geneva, Verdana, sans-serif;
    transition: width 0.28s cubic-bezier(.4,0,.2,1),
                background-color 0.28s ease,
                box-shadow 0.28s ease,
                border-color 0.28s ease;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Collapsed: navy pill capsule ───────────────────── */
.portal-sidebar.collapsed[b-e4oewoc89n] {
    width: 82px !important;
    padding: 16px 0 20px;
    background-color: #001F57;
    border-radius: 0 36px 36px 0;
    border-right: none;
    box-shadow: 4px 0 20px rgba(0, 31, 87, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: #ffffff;
    scrollbar-width: none;
}

.portal-sidebar.collapsed[b-e4oewoc89n]::-webkit-scrollbar { display: none; }

/* Hide text/extras in collapsed mode */
.portal-sidebar.collapsed .nav-text[b-e4oewoc89n],
.portal-sidebar.collapsed .submenu-container[b-e4oewoc89n],
.portal-sidebar.collapsed .submenu-toggle[b-e4oewoc89n],
.portal-sidebar.collapsed .sidebar-help[b-e4oewoc89n],
.portal-sidebar.collapsed .theme-toggle-text[b-e4oewoc89n],
.portal-sidebar.collapsed .logout-text[b-e4oewoc89n],
.portal-sidebar.collapsed .nav-section-divider[b-e4oewoc89n] {
    display: none !important;
}

/* ── Header ─────────────────────────────────────────── */
.sidebar-header[b-e4oewoc89n] {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
    transition: padding 0.28s ease, background-color 0.28s ease;
}

.portal-sidebar.collapsed .sidebar-header[b-e4oewoc89n] {
    padding: 14px 0 10px;
    border: none;
    background: transparent;
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo-container[b-e4oewoc89n] {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-right: 44px;
}

.logo[b-e4oewoc89n] {
    width: 76px;
    height: 40px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.portal-sidebar.collapsed .logo[b-e4oewoc89n] {
    display: none !important;
}

/* ── Collapse toggle button ─────────────────────────── */
.collapse-toggle[b-e4oewoc89n] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #001f57;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 31, 87, 0.3);
    flex-shrink: 0;
    pointer-events: auto;
}

.collapse-toggle:hover[b-e4oewoc89n] {
    background: #0033a0;
    box-shadow: 0 4px 12px rgba(0, 31, 87, 0.4);
    transform: translateY(-50%) scale(1.08);
}

.collapse-toggle:active[b-e4oewoc89n] {
    background: #001a4d;
    transform: translateY(-50%) scale(0.95);
}

.collapse-toggle svg[b-e4oewoc89n] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Collapsed toggle: white circle floating at top center of pill */
.portal-sidebar.collapsed .collapse-toggle[b-e4oewoc89n] {
    position: static;
    transform: none;
    background: #ffffff;
    color: #001F57;
    border: none;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.portal-sidebar.collapsed .collapse-toggle:hover[b-e4oewoc89n] {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    background: #f0f4ff;
}

.portal-sidebar.collapsed .collapse-toggle svg[b-e4oewoc89n] {
    stroke: #001F57;
}

/* ── Navigation area ────────────────────────────────── */
.sidebar-nav[b-e4oewoc89n] {
    flex: 1;
    padding: 8px 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
    transition: padding 0.28s ease;
}

.sidebar-nav[b-e4oewoc89n]::-webkit-scrollbar { width: 4px; }
.sidebar-nav[b-e4oewoc89n]::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 2px;
}

.portal-sidebar.collapsed .sidebar-nav[b-e4oewoc89n] {
    padding: 4px 10px;
    align-items: center;
    gap: 6px;
}

.portal-sidebar.collapsed .nav-capsule[b-e4oewoc89n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* ── Nav item ───────────────────────────────────────── */
.nav-item[b-e4oewoc89n] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.18s ease, border-left-color 0.18s ease, transform 0.15s ease;
    position: relative;
    min-height: 44px;
    border-left: 3px solid transparent;
    user-select: none;
}

.nav-item:hover[b-e4oewoc89n] {
    background-color: var(--bg-secondary);
    border-left-color: var(--accent-primary);
}

.nav-item.active[b-e4oewoc89n] {
    background-color: var(--accent-primary);
    border-left-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 10px rgba(0, 31, 87, 0.18);
}

/* HOME item gets a subtle top-emphasis style */
.nav-item.nav-home[b-e4oewoc89n] {
    font-weight: 600;
}

/* Collapsed icon-only items */
.portal-sidebar.collapsed .nav-item[b-e4oewoc89n] {
    width: 52px;
    height: 52px;
    min-height: unset;
    padding: 0;
    border-radius: 14px;
    border-left: none;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
}

.portal-sidebar.collapsed .nav-item:hover[b-e4oewoc89n] {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}

.portal-sidebar.collapsed .nav-item.active[b-e4oewoc89n] {
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* ── Nav icon ───────────────────────────────────────── */
.nav-icon[b-e4oewoc89n] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sidebar);
    flex-shrink: 0;
    transition: color 0.18s ease;
}

.nav-item.active .nav-icon[b-e4oewoc89n] {
    color: white;
}

.portal-sidebar.collapsed .nav-icon[b-e4oewoc89n] {
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.88);
}

.portal-sidebar.collapsed .nav-icon svg[b-e4oewoc89n],
.portal-sidebar.collapsed .nav-icon i[b-e4oewoc89n] {
    color: inherit;
    stroke: currentColor;
}

.portal-sidebar.collapsed .nav-item.active .nav-icon[b-e4oewoc89n] {
    color: #001F57;
}

/* ── Nav text ───────────────────────────────────────── */
.nav-text[b-e4oewoc89n] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-sidebar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    line-height: 1.3;
    transition: color 0.18s ease;
    letter-spacing: 0.01em;
}

.nav-item.active .nav-text[b-e4oewoc89n] {
    color: white;
    font-weight: 600;
}

.nav-item.nav-home .nav-text[b-e4oewoc89n] {
    font-weight: 600;
}

/* ── Section divider (below HOME) ───────────────────── */
.nav-section-divider[b-e4oewoc89n] {
    height: 1px;
    background: var(--border-primary);
    margin: 6px 4px 8px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Submenu toggle chevron ─────────────────────────── */
.submenu-toggle[b-e4oewoc89n] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 5px;
    transition: background 0.18s ease, opacity 0.18s ease;
    margin-left: auto;
    opacity: 0.6;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.submenu-toggle:hover[b-e4oewoc89n] {
    background: rgba(0, 0, 0, 0.07);
    opacity: 1;
}

.nav-item.active .submenu-toggle:hover[b-e4oewoc89n] {
    background: rgba(255, 255, 255, 0.18);
}

.submenu-toggle svg[b-e4oewoc89n] {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.submenu-toggle.expanded svg[b-e4oewoc89n] {
    transform: rotate(180deg);
}

/* ── Submenu container ──────────────────────────────── */
.submenu-container[b-e4oewoc89n] {
    margin-left: 14px;
    margin-top: 2px;
    margin-bottom: 4px;
    border-left: 2px solid var(--border-primary);
    padding-left: 8px;
    animation: slideDown-b-e4oewoc89n 0.22s ease-out;
}

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

/* ── Submenu items ──────────────────────────────────── */
.nav-subitem[b-e4oewoc89n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-left-color 0.15s ease, transform 0.12s ease;
    margin-bottom: 1px;
    border-left: 2px solid transparent;
    user-select: none;
}

.nav-subitem:hover[b-e4oewoc89n] {
    background-color: var(--bg-secondary);
    border-left-color: var(--accent-primary);
    transform: translateX(3px);
}

.nav-subitem.active[b-e4oewoc89n] {
    background-color: var(--accent-primary);
    border-left-color: rgba(255,255,255,0.5);
    box-shadow: 0 1px 6px rgba(0, 31, 87, 0.15);
}

.nav-subitem.active .nav-subtext[b-e4oewoc89n],
.nav-subitem.active .nav-subicon[b-e4oewoc89n] {
    color: white;
}

.nav-subicon[b-e4oewoc89n] {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sidebar);
    transition: color 0.15s ease;
    flex-shrink: 0;
    opacity: 0.75;
}

.nav-subitem:hover .nav-subicon[b-e4oewoc89n],
.nav-subitem.active .nav-subicon[b-e4oewoc89n] {
    opacity: 1;
}

.nav-subtext[b-e4oewoc89n] {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-sidebar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
    letter-spacing: 0.01em;
}

/* Hide submenus/toggles when collapsed */
.portal-sidebar.collapsed .submenu-container[b-e4oewoc89n],
.portal-sidebar.collapsed .submenu-toggle[b-e4oewoc89n] {
    display: none !important;
}

/* ── Help section ───────────────────────────────────── */
.sidebar-help[b-e4oewoc89n] {
    padding: 14px 16px;
    border-top: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.help-content[b-e4oewoc89n] {
    text-align: center;
}

.help-title[b-e4oewoc89n] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-sidebar-hover);
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}

.help-text[b-e4oewoc89n] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-sidebar);
    margin: 0 0 12px;
    line-height: 1.4;
}

.help-button[b-e4oewoc89n] {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.01em;
}

.help-button:hover[b-e4oewoc89n] {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

/* ── Theme toggle ───────────────────────────────────── */
.sidebar-theme-toggle[b-e4oewoc89n] {
    padding: 10px 10px;
    border-top: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.portal-sidebar.collapsed .sidebar-theme-toggle[b-e4oewoc89n] {
    padding: 10px 0;
    border: none;
    background: transparent;
    width: 100%;
    display: flex;
    justify-content: center;
}

.theme-toggle-button[b-e4oewoc89n] {
    background: none;
    border: none;
    color: var(--text-sidebar);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    transition: background 0.18s ease, color 0.18s ease;
    width: 100%;
    border-radius: 9px;
    letter-spacing: 0.01em;
}

.portal-sidebar.collapsed .theme-toggle-button[b-e4oewoc89n] {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    gap: 0;
}

.theme-toggle-button:hover[b-e4oewoc89n] {
    background-color: var(--bg-secondary);
    color: var(--text-sidebar-hover);
}

.portal-sidebar.collapsed .theme-toggle-button:hover[b-e4oewoc89n] {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}

.theme-toggle-icon[b-e4oewoc89n] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.theme-toggle-button:hover .theme-toggle-icon[b-e4oewoc89n] {
    transform: rotate(12deg) scale(1.1);
}

.theme-toggle-text[b-e4oewoc89n] {
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.portal-sidebar.collapsed .theme-toggle-text[b-e4oewoc89n] {
    display: none !important;
}

.portal-sidebar.collapsed .theme-toggle-icon[b-e4oewoc89n] {
    color: rgba(255,255,255,0.88);
}

/* ── Footer / Logout ────────────────────────────────── */
.sidebar-footer[b-e4oewoc89n] {
    padding: 10px 10px 16px;
    border-top: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
    transition: padding 0.28s ease;
}

.portal-sidebar.collapsed .sidebar-footer[b-e4oewoc89n] {
    padding: 10px 0 16px;
    border: none;
    background: transparent;
    width: 100%;
    display: flex;
    justify-content: center;
}

.logout-button[b-e4oewoc89n] {
    background: none;
    border: none;
    color: var(--text-sidebar);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    transition: background 0.18s ease, color 0.18s ease;
    width: 100%;
    border-radius: 9px;
    letter-spacing: 0.01em;
}

.portal-sidebar.collapsed .logout-button[b-e4oewoc89n] {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    gap: 0;
}

.portal-sidebar.collapsed .logout-button svg[b-e4oewoc89n] {
    color: rgba(255,255,255,0.75);
}

.logout-button:hover[b-e4oewoc89n] {
    background-color: rgba(220, 50, 50, 0.08);
    color: #c0392b;
}

.portal-sidebar.collapsed .logout-button:hover[b-e4oewoc89n] {
    background: rgba(220, 50, 50, 0.2);
    color: #ff6b6b;
}

.logout-text[b-e4oewoc89n] {
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.portal-sidebar.collapsed .logout-text[b-e4oewoc89n] {
    display: none !important;
}

/* ── Tooltips (collapsed: hover shows portal name) ──── */
.portal-sidebar.collapsed .nav-item[title]:not([title=""])[b-e4oewoc89n] {
    position: relative;
}

.portal-sidebar.collapsed .nav-item[title]:not([title=""]):hover[b-e4oewoc89n]::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #001f57;
    color: white;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(0, 31, 87, 0.22);
    letter-spacing: 0.01em;
    pointer-events: none;
}

.portal-sidebar.collapsed .nav-item[title]:not([title=""]):hover[b-e4oewoc89n]::before {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #001f57;
    z-index: 9999;
    pointer-events: none;
}

/* ── Scrollbar in sidebar-nav ───────────────────────── */
.sidebar-nav[b-e4oewoc89n]::-webkit-scrollbar {
    width: 3px;
}
.sidebar-nav[b-e4oewoc89n]::-webkit-scrollbar-thumb {
    background: rgba(0, 31, 87, 0.15);
    border-radius: 2px;
}
.sidebar-nav[b-e4oewoc89n]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 31, 87, 0.3);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1200px) {
    .logo[b-e4oewoc89n] { width: 70px; height: 36px; }
    .nav-text[b-e4oewoc89n] { font-size: 13px; }
}

/* Hamburger button is desktop-hidden — only relevant under the mobile drawer
   breakpoint below. The toggle lives inside the sidebar header so layouts that
   include PortalSidebar at the top of the page get the hamburger automatically. */
.sidebar-mobile-toggle[b-e4oewoc89n] {
    display: none;
}

/* Backdrop overlay — invisible on desktop, fades in over the page when the
   mobile drawer is open. Tapping it closes the drawer. */
.sidebar-backdrop[b-e4oewoc89n] {
    display: none;
}

@media (max-width: 768px) {
    /* Sidebar becomes a left-edge slide-in drawer at phone widths.
       Hidden by default (`left: -100%`). Adding `.is-open` slides it in.
       z-index 1000 keeps it above page content; the backdrop sits at 999. */
    .portal-sidebar[b-e4oewoc89n] {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        z-index: 1000;
        border-radius: 0;
        border-right: 1px solid var(--border-primary);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
        transition: left 220ms ease;
    }
    .portal-sidebar.is-open[b-e4oewoc89n] {
        left: 0;
    }

    /* Hamburger button: shown on phones, fixed top-left so users can reach it
       even after they scroll the page. */
    .sidebar-mobile-toggle[b-e4oewoc89n] {
        display: inline-flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1001;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background: var(--card-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-primary);
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        cursor: pointer;
    }

    /* Backdrop: visible only when drawer is open. Tapping closes the drawer. */
    .sidebar-backdrop.is-open[b-e4oewoc89n] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 999;
    }

    .sidebar-header[b-e4oewoc89n] { padding: 14px 16px; }
    .sidebar-nav[b-e4oewoc89n] { padding: 4px 12px; }
}