@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.rms-layout[b-f514jhmyhj] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #111827;
}

.rms-header[b-f514jhmyhj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    padding: 0 1rem;
    background: #1f2937;
    border-bottom: 1px solid #374151;
    flex-shrink: 0;
}

.rms-main[b-f514jhmyhj] {
    margin-top: 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.header-left[b-f514jhmyhj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-icon[b-f514jhmyhj] {
    width: 22px;
    height: 22px;
    color: #818cf8;
}

.brand-text[b-f514jhmyhj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f9fafb;
}

.header-divider[b-f514jhmyhj] {
    width: 1px;
    height: 20px;
    background: #4b5563;
}

.doc-name[b-f514jhmyhj] {
    font-size: 0.875rem;
    color: #d1d5db;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-right[b-f514jhmyhj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-user[b-f514jhmyhj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid #374151;
}

.user-email[b-f514jhmyhj] {
    font-size: 0.8125rem;
    color: #9ca3af;
}

.btn-icon[b-f514jhmyhj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #4b5563;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-f514jhmyhj] {
    background: #374151;
    color: #f9fafb;
    border-color: #6b7280;
}

.btn-icon svg[b-f514jhmyhj] {
    width: 16px;
    height: 16px;
}
/* /Pages/Auth/UAEPassCallback.razor.rz.scp.css */
/* UAEPass Callback - RMS Admin Enterprise Theme (Blue) */

/* Callback Wrapper */
.callback-wrapper[b-llodlevbb8] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #e0e7ff 100%);
    padding: 1rem;
}

.callback-card[b-llodlevbb8] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    padding: 3rem;
    max-width: 28rem;
    width: 100%;
    text-align: center;
}

/* Loading State */
.callback-loading[b-llodlevbb8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.uaepass-logo-container[b-llodlevbb8] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.uaepass-logo-large[b-llodlevbb8] {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

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

.callback-loading h2[b-llodlevbb8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 0;
}

.callback-loading p[b-llodlevbb8] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Error State */
.callback-error[b-llodlevbb8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.error-icon-container[b-llodlevbb8] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon[b-llodlevbb8] {
    width: 48px;
    height: 48px;
    color: white;
}

.callback-error h2[b-llodlevbb8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #991b1b;
    margin: 0;
}

.error-message[b-llodlevbb8] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    max-width: 100%;
}

.btn-retry[b-llodlevbb8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.btn-retry:hover[b-llodlevbb8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-icon[b-llodlevbb8] {
    width: 20px;
    height: 20px;
}

/* Success State */
.callback-success[b-llodlevbb8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.success-icon-container[b-llodlevbb8] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-llodlevbb8 0.3s ease-out;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.success-icon[b-llodlevbb8] {
    width: 48px;
    height: 48px;
    color: white;
}

.callback-success h2[b-llodlevbb8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0;
}

.callback-success p[b-llodlevbb8] {
    font-size: 0.875rem;
    color: #374151;
    margin: 0;
}

.callback-success .user-name[b-llodlevbb8] {
    font-weight: 600;
    color: #3b82f6;
}

.success-subtitle[b-llodlevbb8] {
    color: #9ca3af !important;
    font-size: 0.75rem !important;
    margin-top: 0.5rem;
}

/* Progress Steps */
.progress-steps[b-llodlevbb8] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.progress-step[b-llodlevbb8] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #e5e7eb;
}

.progress-step.active[b-llodlevbb8] {
    background: #3b82f6;
}

.progress-step.completed[b-llodlevbb8] {
    background: #10b981;
}

/* Animations */
@keyframes spin-b-llodlevbb8 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scaleIn-b-llodlevbb8 {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 480px) {
    .callback-card[b-llodlevbb8] {
        padding: 2rem;
    }

    .uaepass-logo-container[b-llodlevbb8],
    .error-icon-container[b-llodlevbb8],
    .success-icon-container[b-llodlevbb8] {
        width: 64px;
        height: 64px;
    }

    .uaepass-logo-large[b-llodlevbb8],
    .error-icon[b-llodlevbb8],
    .success-icon[b-llodlevbb8] {
        width: 36px;
        height: 36px;
    }

    .loading-spinner[b-llodlevbb8] {
        width: 40px;
        height: 40px;
    }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* Split Window Container */
.forgot-wrapper[b-1vcjchnblz] {
    min-height: 100vh;
    display: flex;
}

/* Left Panel - Branding */
.left-panel[b-1vcjchnblz] {
    display: none;
    width: 50%;
    background: linear-gradient(to bottom right, #3b82f6, #2563eb, #4338ca);
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .left-panel[b-1vcjchnblz] {
        display: flex;
    }
}

.decorative-overlay[b-1vcjchnblz] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.decorative-circle-1[b-1vcjchnblz] {
    position: absolute;
    top: 5rem;
    left: 5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(48px);
}

.decorative-circle-2[b-1vcjchnblz] {
    position: absolute;
    bottom: 5rem;
    right: 5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(167, 139, 250, 0.2);
    border-radius: 50%;
    filter: blur(48px);
}

.branding-content[b-1vcjchnblz] {
    position: relative;
    z-index: 10;
    color: white;
    padding: 3rem;
    max-width: 28rem;
}

.icon-box[b-1vcjchnblz] {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.icon-svg[b-1vcjchnblz] {
    width: 2rem;
    height: 2rem;
    color: white;
}

.welcome-title[b-1vcjchnblz] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.welcome-subtitle[b-1vcjchnblz] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.decorative-bars[b-1vcjchnblz] {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
}

.bar[b-1vcjchnblz] {
    width: 3rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
}

.bar-active[b-1vcjchnblz] {
    background: rgba(255, 255, 255, 0.6);
}

/* Right Panel - Form */
.right-panel[b-1vcjchnblz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: white;
}

@media (min-width: 1024px) {
    .right-panel[b-1vcjchnblz] {
        padding: 1rem 2rem;
    }
}

.form-container[b-1vcjchnblz] {
    width: 100%;
    max-width: 28rem;
}

.form-header[b-1vcjchnblz] {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header h2[b-1vcjchnblz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.form-header p[b-1vcjchnblz] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* Form Groups */
.form-group[b-1vcjchnblz] {
    margin-bottom: 1.25rem;
}

.form-group label[b-1vcjchnblz] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

/* Input with icon */
.input-wrapper[b-1vcjchnblz] {
    position: relative;
}

.input-icon[b-1vcjchnblz] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 1;
}

[b-1vcjchnblz] .form-input,
.input-wrapper[b-1vcjchnblz]  input {
    width: 100%;
    padding: 0.75rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: white;
}

[b-1vcjchnblz] .form-input.with-icon,
.input-wrapper[b-1vcjchnblz]  input {
    padding-left: 2.5rem;
}

[b-1vcjchnblz] .form-input:focus,
.input-wrapper[b-1vcjchnblz]  input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Error Message */
.error-message[b-1vcjchnblz] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

/* Submit Button */
.btn-submit[b-1vcjchnblz] {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    margin-bottom: 1.5rem;
}

.btn-submit:hover:not(:disabled)[b-1vcjchnblz] {
    background: linear-gradient(to right, #1d4ed8, #1e40af);
}

.btn-submit:focus[b-1vcjchnblz] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

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

.btn-submit svg[b-1vcjchnblz] {
    width: 20px;
    height: 20px;
}

.btn-spinner[b-1vcjchnblz] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1vcjchnblz 0.8s linear infinite;
}

/* Success State */
.success-container[b-1vcjchnblz] {
    text-align: center;
    padding: 1rem 0 2rem;
}

.success-icon[b-1vcjchnblz] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-1vcjchnblz 0.3s ease-out;
}

.success-icon svg[b-1vcjchnblz] {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.success-container h2[b-1vcjchnblz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.success-container p[b-1vcjchnblz] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.email-sent[b-1vcjchnblz] {
    margin-top: 1rem !important;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
}

.email-sent strong[b-1vcjchnblz] {
    color: #15803d;
}

/* Back Link */
.back-link-container[b-1vcjchnblz] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.back-link[b-1vcjchnblz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover[b-1vcjchnblz] {
    color: #2563eb;
    text-decoration: underline;
}

.back-link svg[b-1vcjchnblz] {
    width: 16px;
    height: 16px;
}

/* Footer */
.login-footer[b-1vcjchnblz] {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Validation */
[b-1vcjchnblz] .validation-message {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Animations */
@keyframes spin-b-1vcjchnblz {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scaleIn-b-1vcjchnblz {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Pages/ForgotUsername.razor.rz.scp.css */
/* Split Window Container */
.forgot-wrapper[b-7iyb6876aw] {
    min-height: 100vh;
    display: flex;
}

/* Left Panel - Branding */
.left-panel[b-7iyb6876aw] {
    display: none;
    width: 50%;
    background: linear-gradient(to bottom right, #3b82f6, #2563eb, #4338ca);
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .left-panel[b-7iyb6876aw] {
        display: flex;
    }
}

.decorative-overlay[b-7iyb6876aw] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.decorative-circle-1[b-7iyb6876aw] {
    position: absolute;
    top: 5rem;
    left: 5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(48px);
}

.decorative-circle-2[b-7iyb6876aw] {
    position: absolute;
    bottom: 5rem;
    right: 5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(167, 139, 250, 0.2);
    border-radius: 50%;
    filter: blur(48px);
}

.branding-content[b-7iyb6876aw] {
    position: relative;
    z-index: 10;
    color: white;
    padding: 3rem;
    max-width: 28rem;
}

.icon-box[b-7iyb6876aw] {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.icon-svg[b-7iyb6876aw] {
    width: 2rem;
    height: 2rem;
    color: white;
}

.welcome-title[b-7iyb6876aw] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.welcome-subtitle[b-7iyb6876aw] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.decorative-bars[b-7iyb6876aw] {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
}

.bar[b-7iyb6876aw] {
    width: 3rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
}

.bar-active[b-7iyb6876aw] {
    background: rgba(255, 255, 255, 0.6);
}

/* Right Panel - Form */
.right-panel[b-7iyb6876aw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: white;
}

@media (min-width: 1024px) {
    .right-panel[b-7iyb6876aw] {
        padding: 1rem 2rem;
    }
}

.form-container[b-7iyb6876aw] {
    width: 100%;
    max-width: 28rem;
}

.form-header[b-7iyb6876aw] {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header h2[b-7iyb6876aw] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.form-header p[b-7iyb6876aw] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* Form Groups */
.form-group[b-7iyb6876aw] {
    margin-bottom: 1.25rem;
}

.form-group label[b-7iyb6876aw] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

/* Input with icon */
.input-wrapper[b-7iyb6876aw] {
    position: relative;
}

.input-icon[b-7iyb6876aw] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 1;
}

[b-7iyb6876aw] .form-input,
.input-wrapper[b-7iyb6876aw]  input {
    width: 100%;
    padding: 0.75rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: white;
}

[b-7iyb6876aw] .form-input.with-icon,
.input-wrapper[b-7iyb6876aw]  input {
    padding-left: 2.5rem;
}

[b-7iyb6876aw] .form-input:focus,
.input-wrapper[b-7iyb6876aw]  input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Error Message */
.error-message[b-7iyb6876aw] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

/* Submit Button */
.btn-submit[b-7iyb6876aw] {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    margin-bottom: 1.5rem;
}

.btn-submit:hover:not(:disabled)[b-7iyb6876aw] {
    background: linear-gradient(to right, #1d4ed8, #1e40af);
}

.btn-submit:focus[b-7iyb6876aw] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

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

.btn-submit svg[b-7iyb6876aw] {
    width: 20px;
    height: 20px;
}

.btn-spinner[b-7iyb6876aw] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-7iyb6876aw 0.8s linear infinite;
}

/* Success State */
.success-container[b-7iyb6876aw] {
    text-align: center;
    padding: 1rem 0 2rem;
}

.success-icon[b-7iyb6876aw] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-7iyb6876aw 0.3s ease-out;
}

.success-icon svg[b-7iyb6876aw] {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.success-container h2[b-7iyb6876aw] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.success-container p[b-7iyb6876aw] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.email-sent[b-7iyb6876aw] {
    margin-top: 1rem !important;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
}

.email-sent strong[b-7iyb6876aw] {
    color: #15803d;
}

/* Back Link */
.back-link-container[b-7iyb6876aw] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.back-link[b-7iyb6876aw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover[b-7iyb6876aw] {
    color: #2563eb;
    text-decoration: underline;
}

.back-link svg[b-7iyb6876aw] {
    width: 16px;
    height: 16px;
}

/* Footer */
.login-footer[b-7iyb6876aw] {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Validation */
[b-7iyb6876aw] .validation-message {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Animations */
@keyframes spin-b-7iyb6876aw {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scaleIn-b-7iyb6876aw {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Pages/ForwardAccess.razor.rz.scp.css */
.forward-access-container[b-p1qdwcrkgw] {
    height: calc(100vh - 48px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #0f172a 100%);
}

/* Loading state */
.loading-state[b-p1qdwcrkgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f9fafb;
}

.loading-state .spinner[b-p1qdwcrkgw] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(129, 140, 248, 0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin-b-p1qdwcrkgw 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

.loading-state p[b-p1qdwcrkgw] {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* Error state */
.error-state[b-p1qdwcrkgw],
.expired-state[b-p1qdwcrkgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
}

.error-icon[b-p1qdwcrkgw],
.expired-icon[b-p1qdwcrkgw] {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
}

.error-icon svg[b-p1qdwcrkgw],
.expired-icon svg[b-p1qdwcrkgw] {
    width: 100%;
    height: 100%;
    color: #f87171;
}

.expired-icon svg[b-p1qdwcrkgw] {
    color: #fbbf24;
}

.error-state h2[b-p1qdwcrkgw],
.expired-state h2[b-p1qdwcrkgw] {
    color: #f9fafb;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.error-state p[b-p1qdwcrkgw],
.expired-state p[b-p1qdwcrkgw] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.expired-hint[b-p1qdwcrkgw] {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin-bottom: 1.5rem !important;
}

/* Verification card */
.verification-card[b-p1qdwcrkgw] {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 48px - 4rem);
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar for verification card */
.verification-card[b-p1qdwcrkgw]::-webkit-scrollbar {
    width: 6px;
}

.verification-card[b-p1qdwcrkgw]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.verification-card[b-p1qdwcrkgw]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.verification-card[b-p1qdwcrkgw]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Document info */
.document-info[b-p1qdwcrkgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.document-icon[b-p1qdwcrkgw] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.25);
}

.document-icon svg[b-p1qdwcrkgw] {
    width: 28px;
    height: 28px;
    color: white;
}

.document-info h2[b-p1qdwcrkgw] {
    color: #f9fafb;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    word-break: break-word;
}

.shared-by[b-p1qdwcrkgw] {
    color: #9ca3af;
    font-size: 0.85rem;
    margin: 0;
}

.shared-by span[b-p1qdwcrkgw] {
    color: #c7d2fe;
    font-weight: 500;
}

/* Divider */
.verification-divider[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.verification-divider[b-p1qdwcrkgw]::before,
.verification-divider[b-p1qdwcrkgw]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.verification-divider span[b-p1qdwcrkgw] {
    color: #6b7280;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* UAE Pass verification */
.uaepass-verification[b-p1qdwcrkgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.verification-intro[b-p1qdwcrkgw] {
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.btn-uaepass[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: white;
    color: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.btn-uaepass:hover:not(:disabled)[b-p1qdwcrkgw] {
    background: #f3f4f6;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25);
}

.btn-uaepass:disabled[b-p1qdwcrkgw] {
    opacity: 0.7;
    cursor: not-allowed;
}

.uaepass-logo[b-p1qdwcrkgw] {
    height: 24px;
    width: auto;
}

.uaepass-info[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 12px 16px;
    background: rgba(0, 117, 74, 0.1);
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.75rem;
}

.uaepass-info svg[b-p1qdwcrkgw] {
    width: 16px;
    height: 16px;
    color: #00754a;
    flex-shrink: 0;
}

/* Email verification */
.email-verification[b-p1qdwcrkgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recipient-email[b-p1qdwcrkgw] {
    display: block;
    margin-top: 0.5rem;
    color: #818cf8;
    font-size: 1rem;
}

.btn-send-code[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-send-code:hover:not(:disabled)[b-p1qdwcrkgw] {
    background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.btn-send-code:disabled[b-p1qdwcrkgw] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-send-code svg[b-p1qdwcrkgw] {
    width: 20px;
    height: 20px;
}

/* Code sent message */
.code-sent-message[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 8px;
    color: #34d399;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.code-sent-message svg[b-p1qdwcrkgw] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.code-sent-message strong[b-p1qdwcrkgw] {
    color: #6ee7b7;
}

/* Code input */
.code-input-group[b-p1qdwcrkgw] {
    width: 100%;
    margin-bottom: 1.5rem;
}

.code-input-group label[b-p1qdwcrkgw] {
    display: block;
    color: #9ca3af;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.code-inputs[b-p1qdwcrkgw] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.code-input[b-p1qdwcrkgw] {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f9fafb;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    outline: none;
    transition: all 0.15s ease;
}

.code-input:focus[b-p1qdwcrkgw] {
    border-color: #818cf8;
    background: rgba(129, 140, 248, 0.1);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.code-input.error[b-p1qdwcrkgw] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

.code-error[b-p1qdwcrkgw] {
    display: block;
    text-align: center;
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

/* Verify button */
.btn-verify[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-verify:hover:not(:disabled)[b-p1qdwcrkgw] {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-verify:disabled[b-p1qdwcrkgw] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-verify svg[b-p1qdwcrkgw] {
    width: 20px;
    height: 20px;
}

/* Resend section */
.resend-section[b-p1qdwcrkgw] {
    margin-top: 1rem;
    text-align: center;
}

.btn-link[b-p1qdwcrkgw] {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

.btn-link span[b-p1qdwcrkgw] {
    color: #818cf8;
    font-weight: 500;
}

.btn-link:hover span[b-p1qdwcrkgw] {
    text-decoration: underline;
}

.resend-timer[b-p1qdwcrkgw] {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Access type indicator */
.access-type-indicator[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.75rem;
}

.access-type-indicator svg[b-p1qdwcrkgw] {
    width: 14px;
    height: 14px;
}

.access-type-indicator.guest[b-p1qdwcrkgw] {
    color: #34d399;
    background: rgba(52, 211, 153, 0.05);
    border-color: rgba(52, 211, 153, 0.1);
}

.access-type-indicator.account[b-p1qdwcrkgw] {
    color: #818cf8;
    background: rgba(129, 140, 248, 0.05);
    border-color: rgba(129, 140, 248, 0.1);
}

/* Buttons */
.btn-primary[b-p1qdwcrkgw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-p1qdwcrkgw] {
    background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 100%);
    transform: translateY(-1px);
}

.btn-primary svg[b-p1qdwcrkgw] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-p1qdwcrkgw] {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-p1qdwcrkgw] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Button spinner */
.btn-spinner[b-p1qdwcrkgw] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p1qdwcrkgw 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 480px) {
    .forward-access-container[b-p1qdwcrkgw] {
        padding: 1rem;
    }

    .verification-card[b-p1qdwcrkgw] {
        max-height: calc(100vh - 48px - 2rem);
        padding: 1.5rem;
        border-radius: 16px;
    }

    .code-input[b-p1qdwcrkgw] {
        width: 42px;
        height: 50px;
        font-size: 1.25rem;
    }

    .code-inputs[b-p1qdwcrkgw] {
        gap: 6px;
    }

    .document-icon[b-p1qdwcrkgw] {
        width: 48px;
        height: 48px;
    }

    .document-icon svg[b-p1qdwcrkgw] {
        width: 24px;
        height: 24px;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* Documents Page - Admin Portal Style */
.documents-page[b-whi580x4xl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Loading States */
.loading-container[b-whi580x4xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    color: #64748b;
}

.loading-spinner[b-whi580x4xl] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(129, 140, 248, 0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin-b-whi580x4xl 0.8s linear infinite;
}

.loading-overlay[b-whi580x4xl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

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

/* Page Header */
.page-header[b-whi580x4xl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-title[b-whi580x4xl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* Header Actions */
.header-actions[b-whi580x4xl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.upload-btn[b-whi580x4xl] {
    display: inline-flex;
    cursor: pointer;
}

/* Refresh Button */
.refresh-btn[b-whi580x4xl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.refresh-btn:hover:not(:disabled)[b-whi580x4xl] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

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

.refresh-btn .btn-icon[b-whi580x4xl] {
    width: 18px;
    height: 18px;
}

.refresh-btn .btn-icon.spinning[b-whi580x4xl] {
    animation: spin-b-whi580x4xl 1s linear infinite;
}

.upload-btn-content[b-whi580x4xl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #2563eb;
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.upload-btn-content:hover[b-whi580x4xl] {
    background: #1d4ed8;
}

.btn-icon[b-whi580x4xl] {
    width: 18px;
    height: 18px;
}

/* Upload Error */
.upload-error[b-whi580x4xl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    color: #dc2626;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.dismiss-btn[b-whi580x4xl] {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.dismiss-btn:hover[b-whi580x4xl] {
    color: #b91c1c;
}

/* Search Bar */
.search-bar[b-whi580x4xl] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-input-wrapper[b-whi580x4xl] {
    flex: 1;
    position: relative;
}

.search-icon[b-whi580x4xl] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.search-input[b-whi580x4xl] {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b;
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus[b-whi580x4xl] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-input[b-whi580x4xl]::placeholder {
    color: #94a3b8;
}

.file-type-filter[b-whi580x4xl] {
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b;
    background: white;
    cursor: pointer;
    min-width: 140px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.file-type-filter:focus[b-whi580x4xl] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Error Container */
.error-container[b-whi580x4xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.error-message[b-whi580x4xl] {
    color: #dc2626;
    margin-bottom: 1rem;
}

.retry-btn[b-whi580x4xl] {
    padding: 0.5rem 1rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.retry-btn:hover[b-whi580x4xl] {
    background: #1d4ed8;
}

/* Empty State */
.empty-state[b-whi580x4xl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

.empty-icon[b-whi580x4xl] {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    color: #cbd5e1;
}

.empty-state h3[b-whi580x4xl] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.5rem;
}

.empty-state p[b-whi580x4xl] {
    font-size: 0.875rem;
    margin: 0;
}

/* Documents Grid */
.documents-grid[b-whi580x4xl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

/* Document Card */
.document-card[b-whi580x4xl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.document-card:hover[b-whi580x4xl] {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.doc-icon-wrapper[b-whi580x4xl] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: #f1f5f9;
}

.file-icon[b-whi580x4xl] {
    width: 28px;
    height: 28px;
}

.file-icon.pdf[b-whi580x4xl] { color: #dc2626; }
.file-icon.word[b-whi580x4xl] { color: #2563eb; }
.file-icon.excel[b-whi580x4xl] { color: #16a34a; }
.file-icon.powerpoint[b-whi580x4xl] { color: #ea580c; }
.file-icon.default[b-whi580x4xl] { color: #64748b; }

.doc-info[b-whi580x4xl] {
    flex: 1;
    min-width: 0;
}

.doc-name[b-whi580x4xl] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1e293b;
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta[b-whi580x4xl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.doc-separator[b-whi580x4xl] {
    color: #cbd5e1;
}

.doc-badges[b-whi580x4xl] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.375rem;
}

/* File Type Badges */
.file-type-badge[b-whi580x4xl] {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 9999px;
    letter-spacing: 0.025em;
}

.badge-pdf[b-whi580x4xl] {
    background: #fef2f2;
    color: #dc2626;
}

.badge-word[b-whi580x4xl] {
    background: #eff6ff;
    color: #2563eb;
}

.badge-excel[b-whi580x4xl] {
    background: #f0fdf4;
    color: #16a34a;
}

.badge-powerpoint[b-whi580x4xl] {
    background: #fff7ed;
    color: #ea580c;
}

.badge-default[b-whi580x4xl] {
    background: #f1f5f9;
    color: #64748b;
}

/* Access Badges */
.access-badge[b-whi580x4xl] {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 9999px;
}

.access-badge.owned[b-whi580x4xl] {
    background: #dbeafe;
    color: #1d4ed8;
}

.access-badge.granted[b-whi580x4xl] {
    background: #d1fae5;
    color: #047857;
}

.access-badge.licensed[b-whi580x4xl] {
    background: #fef3c7;
    color: #b45309;
}

.access-badge.offline[b-whi580x4xl] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* Rights Badges */
.doc-rights[b-whi580x4xl] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.right-badge[b-whi580x4xl] {
    display: inline-flex;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 0.25rem;
}

/* Arrow */
.doc-arrow[b-whi580x4xl] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #94a3b8;
    transition: transform 0.15s ease;
}

.document-card:hover .doc-arrow[b-whi580x4xl] {
    transform: translateX(4px);
    color: #2563eb;
}

/* Pagination */
.pagination[b-whi580x4xl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.page-btn[b-whi580x4xl] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #1e293b;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page-btn:hover:not(:disabled)[b-whi580x4xl] {
    border-color: #2563eb;
    background: #eff6ff;
}

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

.page-btn svg[b-whi580x4xl] {
    width: 16px;
    height: 16px;
}

.page-info[b-whi580x4xl] {
    font-size: 0.875rem;
    color: #64748b;
}

.page-total[b-whi580x4xl] {
    color: #94a3b8;
    margin-left: 0.25rem;
}

/* Responsive */
@media (max-width: 640px) {
    .documents-page[b-whi580x4xl] {
        padding: 1rem;
    }

    .page-header[b-whi580x4xl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .search-bar[b-whi580x4xl] {
        flex-direction: column;
    }

    .file-type-filter[b-whi580x4xl] {
        width: 100%;
    }

    .document-card[b-whi580x4xl] {
        padding: 0.875rem;
    }

    .doc-icon-wrapper[b-whi580x4xl] {
        width: 40px;
        height: 40px;
    }

    .file-icon[b-whi580x4xl] {
        width: 24px;
        height: 24px;
    }

    .doc-name[b-whi580x4xl] {
        font-size: 0.875rem;
    }

    .pagination[b-whi580x4xl] {
        flex-wrap: wrap;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Split Window Container */
.login-wrapper[b-s58s1eio1u] {
    min-height: 100vh;
    display: flex;
}

/* Left Panel - Branding */
.left-panel[b-s58s1eio1u] {
    display: none;
    width: 50%;
    background: linear-gradient(to bottom right, #3b82f6, #2563eb, #4338ca);
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .left-panel[b-s58s1eio1u] {
        display: flex;
    }
}

.decorative-overlay[b-s58s1eio1u] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.decorative-circle-1[b-s58s1eio1u] {
    position: absolute;
    top: 5rem;
    left: 5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(48px);
}

.decorative-circle-2[b-s58s1eio1u] {
    position: absolute;
    bottom: 5rem;
    right: 5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(167, 139, 250, 0.2);
    border-radius: 50%;
    filter: blur(48px);
}

.branding-content[b-s58s1eio1u] {
    position: relative;
    z-index: 10;
    color: white;
    padding: 3rem;
    max-width: 28rem;
}

.icon-box[b-s58s1eio1u] {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.icon-svg[b-s58s1eio1u] {
    width: 2rem;
    height: 2rem;
    color: white;
}

.welcome-title[b-s58s1eio1u] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.welcome-subtitle[b-s58s1eio1u] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.decorative-bars[b-s58s1eio1u] {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
}

.bar[b-s58s1eio1u] {
    width: 3rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
}

.bar-active[b-s58s1eio1u] {
    background: rgba(255, 255, 255, 0.6);
}

/* Right Panel - Form */
.right-panel[b-s58s1eio1u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: white;
}

@media (min-width: 1024px) {
    .right-panel[b-s58s1eio1u] {
        padding: 1rem 2rem;
    }
}

.form-container[b-s58s1eio1u] {
    width: 100%;
    max-width: 28rem;
}

.form-header[b-s58s1eio1u] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-header h2[b-s58s1eio1u] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.form-header p[b-s58s1eio1u] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}

/* Form Groups */
.form-group[b-s58s1eio1u] {
    margin-bottom: 1.25rem;
}

.form-group label[b-s58s1eio1u] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

/* Input with icon */
.input-wrapper[b-s58s1eio1u] {
    position: relative;
}

.input-icon[b-s58s1eio1u] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 1;
}

/* Use ::deep to style Blazor InputText child elements */
[b-s58s1eio1u] .form-input,
.input-wrapper[b-s58s1eio1u]  input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: white;
}

[b-s58s1eio1u] .form-input.with-icon,
.input-wrapper[b-s58s1eio1u]  input {
    padding-left: 2.5rem;
}

[b-s58s1eio1u] .form-input:focus,
.input-wrapper[b-s58s1eio1u]  input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Organization Dropdown */
.org-dropdown[b-s58s1eio1u] {
    position: relative;
}

.org-dropdown-button[b-s58s1eio1u] {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    text-align: left;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.org-dropdown-button:focus[b-s58s1eio1u],
.org-dropdown-button.open[b-s58s1eio1u] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.org-dropdown-button:disabled[b-s58s1eio1u] {
    cursor: not-allowed;
    opacity: 0.7;
}

.org-dropdown-button:hover:not(:disabled)[b-s58s1eio1u] {
    border-color: #9ca3af;
}

/* Loading state */
.org-loading[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    color: #9ca3af;
}

.org-spinner[b-s58s1eio1u] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-top-color: #3b82f6;
    border-radius: 50%;
    margin-right: 8px;
    animation: spin-b-s58s1eio1u 0.8s linear infinite;
}

/* Selected org */
.org-selected[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    color: #111827;
}

.org-placeholder[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    color: #9ca3af;
}

.org-icon[b-s58s1eio1u] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: #3b82f6;
}

.org-placeholder .org-icon[b-s58s1eio1u] {
    color: #9ca3af;
}

/* Chevron */
.org-chevron[b-s58s1eio1u] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    transition: transform 0.2s;
}

.org-chevron.open[b-s58s1eio1u] {
    transform: translateY(-50%) rotate(180deg);
}

/* Dropdown Menu */
.org-dropdown-menu[b-s58s1eio1u] {
    position: absolute;
    z-index: 10;
    margin-top: 4px;
    width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 192px;
    overflow-y: auto;
    animation: fadeIn-b-s58s1eio1u 0.2s ease-out;
}

.org-dropdown-item[b-s58s1eio1u] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    text-align: left;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.875rem;
}

.org-dropdown-item:hover[b-s58s1eio1u] {
    background: #eff6ff;
}

.org-dropdown-item.selected[b-s58s1eio1u] {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}

.org-item-content[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    color: #111827;
}

.org-item-icon[b-s58s1eio1u] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #9ca3af;
}

.org-check[b-s58s1eio1u] {
    width: 16px;
    height: 16px;
    color: #3b82f6;
}

/* Success message */
.org-success[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: #16a34a;
    margin-top: 0.5rem;
}

.org-success-icon[b-s58s1eio1u] {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

/* Organization error message */
.org-error[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fef2f2;
    border-radius: 0.375rem;
    border: 1px solid #fecaca;
}

.org-error-icon[b-s58s1eio1u] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Form Options */
.form-options[b-s58s1eio1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.remember-me[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.875rem;
}

.remember-me input[b-s58s1eio1u] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

/* Error Message */
.error-message[b-s58s1eio1u] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* Submit Button */
.btn-submit[b-s58s1eio1u] {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

/* Forgot Username/Password Links */
.forgot-links[b-s58s1eio1u] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.forgot-link[b-s58s1eio1u] {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

.forgot-link:hover[b-s58s1eio1u] {
    color: #2563eb;
    text-decoration: underline;
}

.forgot-separator[b-s58s1eio1u] {
    color: #d1d5db;
}

.btn-submit:hover:not(:disabled)[b-s58s1eio1u] {
    background: linear-gradient(to right, #1d4ed8, #1e40af);
}

.btn-submit:focus[b-s58s1eio1u] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

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

.btn-spinner[b-s58s1eio1u] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-s58s1eio1u 0.8s linear infinite;
}

/* Footer */
.login-footer[b-s58s1eio1u] {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Animations */
@keyframes spin-b-s58s1eio1u {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-s58s1eio1u {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Validation */
[b-s58s1eio1u] .validation-message {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Login Divider */
.login-divider[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.login-divider[b-s58s1eio1u]::before,
.login-divider[b-s58s1eio1u]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider-text[b-s58s1eio1u] {
    padding: 0 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* UAE Pass Button */
.btn-uaepass[b-s58s1eio1u] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-uaepass[b-s58s1eio1u]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(0,0,0,0.02) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.btn-uaepass:hover:not(:disabled)[b-s58s1eio1u]::before {
    transform: translateX(100%);
}

.btn-uaepass:hover:not(:disabled)[b-s58s1eio1u] {
    background: #f9fafb;
    border-color: #9ca3af;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-uaepass:focus[b-s58s1eio1u] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

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

.uaepass-logo[b-s58s1eio1u] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.uaepass-spinner[b-s58s1eio1u] {
    border-color: rgba(55, 65, 81, 0.3);
    border-top-color: #374151;
}

/* UAE Pass Hint */
.uaepass-hint[b-s58s1eio1u] {
    text-align: center;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* UAE Pass Linking Banner - Enterprise Blue Theme */
.uaepass-linking-banner[b-s58s1eio1u] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    animation: slideDown-b-s58s1eio1u 0.3s ease-out;
}

@keyframes slideDown-b-s58s1eio1u {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.linking-content[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.linking-logo[b-s58s1eio1u] {
    height: 2rem;
    width: auto;
    filter: brightness(0) invert(1);
}

.linking-info[b-s58s1eio1u] {
    color: white;
}

.linking-title[b-s58s1eio1u] {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
}

.linking-email[b-s58s1eio1u] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0.125rem 0 0 0;
}

.linking-cancel[b-s58s1eio1u] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.linking-cancel:hover[b-s58s1eio1u] {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.linking-instructions[b-s58s1eio1u] {
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* ===================================
   UAE Pass Tab Navigation
   =================================== */
.uaepass-tabs[b-s58s1eio1u] {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.tab-button[b-s58s1eio1u] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tab-button:hover:not(.active)[b-s58s1eio1u] {
    color: #374151;
    background: rgba(255, 255, 255, 0.5);
}

.tab-button.active[b-s58s1eio1u] {
    color: #1e3a8a;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-button svg[b-s58s1eio1u] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ===================================
   Create Account Form (Self-Registration)
   =================================== */
.create-account-form[b-s58s1eio1u] {
    text-align: center;
}

/* Email Confirmation Card */
.email-confirm-card[b-s58s1eio1u] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.email-icon-container[b-s58s1eio1u] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.email-icon-container svg[b-s58s1eio1u] {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

.email-confirm-title[b-s58s1eio1u] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 0 0 0.5rem 0;
}

.email-confirm-description[b-s58s1eio1u] {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.email-address-display[b-s58s1eio1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid #93c5fd;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    color: #1e40af;
    font-weight: 500;
    font-size: 0.875rem;
}

.email-address-display svg[b-s58s1eio1u] {
    width: 1rem;
    height: 1rem;
    color: #3b82f6;
}

/* ===================================
   Verification Form (6-digit code)
   =================================== */
.verification-form[b-s58s1eio1u] {
    text-align: center;
}

.verification-description[b-s58s1eio1u] {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.verification-description strong[b-s58s1eio1u] {
    color: #1e3a8a;
}

/* Verification Code Container */
.verification-code-container[b-s58s1eio1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.code-input-wrapper[b-s58s1eio1u] {
    position: relative;
    width: 100%;
    max-width: 200px;
}

.code-input[b-s58s1eio1u] {
    width: 100%;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.75rem;
    padding: 0.875rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: white;
    color: #1e3a8a;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

.code-input:focus[b-s58s1eio1u] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.code-input[b-s58s1eio1u]::placeholder {
    color: #d1d5db;
    letter-spacing: 0.5rem;
}

/* Valid code indicator */
.code-input.valid[b-s58s1eio1u] {
    border-color: #10b981;
    background: #f0fdf4;
}

.code-hint[b-s58s1eio1u] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0;
}

/* Code Status Messages */
.code-status[b-s58s1eio1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.code-status.success[b-s58s1eio1u] {
    color: #059669;
}

.code-status.error[b-s58s1eio1u] {
    color: #dc2626;
}

.code-status svg[b-s58s1eio1u] {
    width: 0.875rem;
    height: 0.875rem;
}

/* ===================================
   Resend Section
   =================================== */
.resend-section[b-s58s1eio1u] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.resend-text[b-s58s1eio1u] {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
}

.btn-link[b-s58s1eio1u] {
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.btn-link:hover:not(:disabled)[b-s58s1eio1u] {
    background: #eff6ff;
    color: #2563eb;
}

.btn-link:disabled[b-s58s1eio1u] {
    color: #9ca3af;
    cursor: not-allowed;
}

.cooldown-timer[b-s58s1eio1u] {
    color: #9ca3af;
    font-size: 0.8125rem;
}

/* ===================================
   Back Button (Change Email)
   =================================== */
.btn-back[b-s58s1eio1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.btn-back:hover[b-s58s1eio1u] {
    color: #374151;
    background: #f3f4f6;
}

.btn-back svg[b-s58s1eio1u] {
    width: 1rem;
    height: 1rem;
}

/* ===================================
   Success Animation (Account Created)
   =================================== */
.success-icon-container[b-s58s1eio1u] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    animation: scaleIn-b-s58s1eio1u 0.3s ease-out;
}

@keyframes scaleIn-b-s58s1eio1u {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon-container svg[b-s58s1eio1u] {
    width: 2rem;
    height: 2rem;
    color: white;
}

/* ===================================
   Link Account Form Container
   =================================== */
.link-account-form[b-s58s1eio1u] {
    animation: fadeIn-b-s58s1eio1u 0.2s ease-out;
}

/* ===================================
   Mobile Responsive Adjustments
   =================================== */
@media (max-width: 480px) {
    .uaepass-tabs[b-s58s1eio1u] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .tab-button[b-s58s1eio1u] {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }

    .email-confirm-card[b-s58s1eio1u] {
        padding: 1.25rem;
    }

    .code-input[b-s58s1eio1u] {
        font-size: 1.5rem;
        letter-spacing: 0.5rem;
    }

    .uaepass-linking-banner[b-s58s1eio1u] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .linking-content[b-s58s1eio1u] {
        flex-direction: column;
    }

    .linking-cancel[b-s58s1eio1u] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
}
/* /Pages/Register.razor.rz.scp.css */
.register-container[b-10hqaaeowg] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #0f172a 100%);
}

/* Loading state */
.loading-state[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f9fafb;
}

.loading-state .spinner[b-10hqaaeowg] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(129, 140, 248, 0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin-b-10hqaaeowg 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

.loading-state p[b-10hqaaeowg] {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* Error state */
.error-state[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
}

.error-icon[b-10hqaaeowg] {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
}

.error-icon svg[b-10hqaaeowg] {
    width: 100%;
    height: 100%;
    color: #f87171;
}

.error-state h2[b-10hqaaeowg] {
    color: #f9fafb;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.error-state p[b-10hqaaeowg] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

/* Success state */
.success-state[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
}

.success-icon[b-10hqaaeowg] {
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
}

.success-icon svg[b-10hqaaeowg] {
    width: 100%;
    height: 100%;
    color: #34d399;
}

.success-state h2[b-10hqaaeowg] {
    color: #f9fafb;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.success-state p[b-10hqaaeowg] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0;
}

/* Registration card */
.registration-card[b-10hqaaeowg] {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.registration-header[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.header-icon[b-10hqaaeowg] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.25);
}

.header-icon svg[b-10hqaaeowg] {
    width: 28px;
    height: 28px;
    color: white;
}

.registration-header h2[b-10hqaaeowg] {
    color: #f9fafb;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.registration-header p[b-10hqaaeowg] {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0;
}

/* Divider */
.registration-divider[b-10hqaaeowg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.registration-divider[b-10hqaaeowg]::before,
.registration-divider[b-10hqaaeowg]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.registration-divider span[b-10hqaaeowg] {
    color: #6b7280;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Form */
.registration-form[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-10hqaaeowg] {
    color: #d1d5db;
    font-size: 0.85rem;
    font-weight: 500;
}

.input-wrapper[b-10hqaaeowg] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.readonly[b-10hqaaeowg] {
    opacity: 0.7;
}

.input-icon[b-10hqaaeowg] {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #6b7280;
    pointer-events: none;
}

.lock-icon[b-10hqaaeowg] {
    position: absolute;
    right: 14px;
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.form-input[b-10hqaaeowg] {
    width: 100%;
    padding: 12px 14px 12px 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f9fafb;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.15s ease;
}

.form-input:focus[b-10hqaaeowg] {
    border-color: #818cf8;
    background: rgba(129, 140, 248, 0.05);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.form-input[b-10hqaaeowg]::placeholder {
    color: #6b7280;
}

.form-input:read-only[b-10hqaaeowg] {
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.03);
}

.form-input.error[b-10hqaaeowg] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

.form-input.valid[b-10hqaaeowg] {
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.05);
}

/* Username validation indicator */
.username-indicator[b-10hqaaeowg] {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.checking-spinner[b-10hqaaeowg] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(129, 140, 248, 0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin-b-10hqaaeowg 0.8s linear infinite;
}

.check-icon[b-10hqaaeowg] {
    width: 18px;
    height: 18px;
    color: #34d399;
}

.username-indicator .error-icon[b-10hqaaeowg] {
    width: 18px;
    height: 18px;
    color: #f87171;
}

.input-hint[b-10hqaaeowg] {
    color: #6b7280;
    font-size: 0.75rem;
}

.input-error[b-10hqaaeowg] {
    color: #f87171;
    font-size: 0.8rem;
}

/* Toggle password button */
.toggle-password[b-10hqaaeowg] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.15s ease;
}

.toggle-password:hover[b-10hqaaeowg] {
    color: #9ca3af;
}

.toggle-password svg[b-10hqaaeowg] {
    width: 18px;
    height: 18px;
}

/* Password requirements */
.password-requirements[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.requirement[b-10hqaaeowg] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.75rem;
    transition: color 0.15s ease;
}

.requirement svg[b-10hqaaeowg] {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.requirement.met[b-10hqaaeowg] {
    color: #34d399;
}

.requirement.met svg[b-10hqaaeowg] {
    opacity: 1;
}

/* Form error */
.form-error[b-10hqaaeowg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.85rem;
}

.form-error svg[b-10hqaaeowg] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Register button */
.btn-register[b-10hqaaeowg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    margin-top: 0.5rem;
}

.btn-register:hover:not(:disabled)[b-10hqaaeowg] {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-register:disabled[b-10hqaaeowg] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-register svg[b-10hqaaeowg] {
    width: 20px;
    height: 20px;
}

/* Button spinner */
.btn-spinner[b-10hqaaeowg] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-10hqaaeowg 0.8s linear infinite;
}

/* Secondary button */
.btn-secondary[b-10hqaaeowg] {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-10hqaaeowg] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Terms notice */
.terms-notice[b-10hqaaeowg] {
    text-align: center;
    color: #6b7280;
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.5;
}

/* UAE Pass notice */
.uaepass-notice[b-10hqaaeowg] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
}

.uaepass-icon[b-10hqaaeowg] {
    width: 24px;
    height: 24px;
    color: #34d399;
    flex-shrink: 0;
    margin-top: 2px;
}

.uaepass-notice-content[b-10hqaaeowg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.uaepass-notice-title[b-10hqaaeowg] {
    color: #34d399;
    font-size: 0.9rem;
    font-weight: 600;
}

.uaepass-notice-text[b-10hqaaeowg] {
    color: #9ca3af;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 480px) {
    .register-container[b-10hqaaeowg] {
        padding: 1rem;
    }

    .registration-card[b-10hqaaeowg] {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .header-icon[b-10hqaaeowg] {
        width: 48px;
        height: 48px;
    }

    .header-icon svg[b-10hqaaeowg] {
        width: 24px;
        height: 24px;
    }

    .registration-header h2[b-10hqaaeowg] {
        font-size: 1.2rem;
    }
}
/* /Pages/RequestNewLink.razor.rz.scp.css */
.request-link-container[b-1g03xrqzxm] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #0f172a 100%);
}

.request-link-card[b-1g03xrqzxm] {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.header-icon[b-1g03xrqzxm] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon svg[b-1g03xrqzxm] {
    width: 32px;
    height: 32px;
    color: #818cf8;
}

h2[b-1g03xrqzxm] {
    color: #f9fafb;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.subtitle[b-1g03xrqzxm] {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

/* Form */
.form-group[b-1g03xrqzxm] {
    text-align: left;
    margin-bottom: 1.5rem;
}

.form-group label[b-1g03xrqzxm] {
    display: block;
    color: #d1d5db;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.input-wrapper[b-1g03xrqzxm] {
    position: relative;
}

.input-icon[b-1g03xrqzxm] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #6b7280;
    pointer-events: none;
}

.input-wrapper input[b-1g03xrqzxm] {
    width: 100%;
    padding: 14px 14px 14px 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f9fafb;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.input-wrapper input[b-1g03xrqzxm]::placeholder {
    color: #6b7280;
}

.input-wrapper input:focus[b-1g03xrqzxm] {
    border-color: #818cf8;
    background: rgba(129, 140, 248, 0.05);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.input-wrapper input.error[b-1g03xrqzxm] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

.error-message[b-1g03xrqzxm] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.error-message svg[b-1g03xrqzxm] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Buttons */
.btn-primary[b-1g03xrqzxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover:not(:disabled)[b-1g03xrqzxm] {
    background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.btn-primary:disabled[b-1g03xrqzxm] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary svg[b-1g03xrqzxm] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-1g03xrqzxm] {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-1g03xrqzxm] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-link[b-1g03xrqzxm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.5rem;
    padding: 8px 16px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-link:hover[b-1g03xrqzxm] {
    color: #818cf8;
}

.btn-link svg[b-1g03xrqzxm] {
    width: 16px;
    height: 16px;
}

.btn-spinner[b-1g03xrqzxm] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1g03xrqzxm 0.8s linear infinite;
}

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

/* Info box */
.info-box[b-1g03xrqzxm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 1.5rem;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    text-align: left;
}

.info-box svg[b-1g03xrqzxm] {
    width: 18px;
    height: 18px;
    color: #818cf8;
    flex-shrink: 0;
    margin-top: 1px;
}

.info-box span[b-1g03xrqzxm] {
    color: #9ca3af;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Loading state */
.loading-state[b-1g03xrqzxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.loading-state .spinner[b-1g03xrqzxm] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(129, 140, 248, 0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin-b-1g03xrqzxm 0.8s linear infinite;
    margin-bottom: 1rem;
}

.loading-state p[b-1g03xrqzxm] {
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Email display (read-only) */
.email-display[b-1g03xrqzxm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(99, 102, 241, 0.12);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
}

.email-display .input-icon[b-1g03xrqzxm] {
    position: static;
    transform: none;
    width: 20px;
    height: 20px;
    color: #a5b4fc;
    flex-shrink: 0;
}

.masked-email[b-1g03xrqzxm] {
    color: #f3f4f6;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Error box */
.error-box[b-1g03xrqzxm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1rem;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    text-align: left;
}

.error-box svg[b-1g03xrqzxm] {
    width: 18px;
    height: 18px;
    color: #f87171;
    flex-shrink: 0;
    margin-top: 1px;
}

.error-box span[b-1g03xrqzxm] {
    color: #fca5a5;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Success state */
.success-state[b-1g03xrqzxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon[b-1g03xrqzxm] {
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    background: rgba(52, 211, 153, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon svg[b-1g03xrqzxm] {
    width: 36px;
    height: 36px;
    color: #34d399;
}

.success-state h2[b-1g03xrqzxm] {
    color: #34d399;
}

.success-state p[b-1g03xrqzxm] {
    color: #9ca3af;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}

.success-state p strong[b-1g03xrqzxm] {
    color: #e5e7eb;
}

.success-state .hint[b-1g03xrqzxm] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 480px) {
    .request-link-container[b-1g03xrqzxm] {
        padding: 1rem;
    }

    .request-link-card[b-1g03xrqzxm] {
        padding: 1.5rem;
        border-radius: 16px;
    }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* Split Window Container */
.reset-wrapper[b-4ug5g7vwio] {
    min-height: 100vh;
    display: flex;
}

/* Left Panel - Branding */
.left-panel[b-4ug5g7vwio] {
    display: none;
    width: 50%;
    background: linear-gradient(to bottom right, #3b82f6, #2563eb, #4338ca);
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .left-panel[b-4ug5g7vwio] {
        display: flex;
    }
}

.decorative-overlay[b-4ug5g7vwio] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.decorative-circle-1[b-4ug5g7vwio] {
    position: absolute;
    top: 5rem;
    left: 5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(48px);
}

.decorative-circle-2[b-4ug5g7vwio] {
    position: absolute;
    bottom: 5rem;
    right: 5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(167, 139, 250, 0.2);
    border-radius: 50%;
    filter: blur(48px);
}

.branding-content[b-4ug5g7vwio] {
    position: relative;
    z-index: 10;
    color: white;
    padding: 3rem;
    max-width: 28rem;
}

.icon-box[b-4ug5g7vwio] {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.icon-svg[b-4ug5g7vwio] {
    width: 2rem;
    height: 2rem;
    color: white;
}

.welcome-title[b-4ug5g7vwio] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.welcome-subtitle[b-4ug5g7vwio] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.decorative-bars[b-4ug5g7vwio] {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
}

.bar[b-4ug5g7vwio] {
    width: 3rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem;
}

.bar-active[b-4ug5g7vwio] {
    background: rgba(255, 255, 255, 0.6);
}

/* Right Panel - Form */
.right-panel[b-4ug5g7vwio] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: white;
}

@media (min-width: 1024px) {
    .right-panel[b-4ug5g7vwio] {
        padding: 1rem 2rem;
    }
}

.form-container[b-4ug5g7vwio] {
    width: 100%;
    max-width: 28rem;
}

.form-header[b-4ug5g7vwio] {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header h2[b-4ug5g7vwio] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.form-header p[b-4ug5g7vwio] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* Form Groups */
.form-group[b-4ug5g7vwio] {
    margin-bottom: 1.25rem;
}

.form-group label[b-4ug5g7vwio] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

/* Input with icon */
.input-wrapper[b-4ug5g7vwio] {
    position: relative;
}

.input-icon[b-4ug5g7vwio] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 1;
}

[b-4ug5g7vwio] .form-input,
.input-wrapper[b-4ug5g7vwio]  input {
    width: 100%;
    padding: 0.75rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    background: white;
}

[b-4ug5g7vwio] .form-input.with-icon,
.input-wrapper[b-4ug5g7vwio]  input {
    padding-left: 2.5rem;
}

[b-4ug5g7vwio] .form-input:focus,
.input-wrapper[b-4ug5g7vwio]  input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Password Requirements */
.password-requirements[b-4ug5g7vwio] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 6px;
}

.requirement[b-4ug5g7vwio] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #9ca3af;
    transition: color 0.2s;
}

.requirement svg[b-4ug5g7vwio] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.requirement.met[b-4ug5g7vwio] {
    color: #059669;
}

.requirement.met svg[b-4ug5g7vwio] {
    color: #059669;
}

/* Error Message */
.error-message[b-4ug5g7vwio] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

/* Submit Button */
.btn-submit[b-4ug5g7vwio] {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    margin-bottom: 1.5rem;
}

.btn-submit:hover:not(:disabled)[b-4ug5g7vwio] {
    background: linear-gradient(to right, #1d4ed8, #1e40af);
}

.btn-submit:focus[b-4ug5g7vwio] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

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

.btn-submit svg[b-4ug5g7vwio] {
    width: 20px;
    height: 20px;
}

.btn-spinner[b-4ug5g7vwio] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4ug5g7vwio 0.8s linear infinite;
}

/* Loading State */
.loading-container[b-4ug5g7vwio] {
    text-align: center;
    padding: 2rem 0;
}

.loading-container h2[b-4ug5g7vwio] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 1.5rem 0 0.75rem 0;
}

.loading-container p[b-4ug5g7vwio] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.loading-spinner[b-4ug5g7vwio] {
    width: 3rem;
    height: 3rem;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-4ug5g7vwio 0.8s linear infinite;
    margin: 0 auto;
}

/* Success State */
.success-container[b-4ug5g7vwio] {
    text-align: center;
    padding: 1rem 0 2rem;
}

.success-icon[b-4ug5g7vwio] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-4ug5g7vwio 0.3s ease-out;
}

.success-icon svg[b-4ug5g7vwio] {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.success-container h2[b-4ug5g7vwio] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.success-container p[b-4ug5g7vwio] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* Error State */
.error-container[b-4ug5g7vwio] {
    text-align: center;
    padding: 1rem 0 2rem;
}

.error-icon[b-4ug5g7vwio] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-4ug5g7vwio 0.3s ease-out;
}

.error-icon svg[b-4ug5g7vwio] {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.error-container h2[b-4ug5g7vwio] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.error-container p[b-4ug5g7vwio] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

/* Primary Button (for success/error states) */
.btn-primary[b-4ug5g7vwio] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(to right, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary:hover[b-4ug5g7vwio] {
    background: linear-gradient(to right, #1d4ed8, #1e40af);
    text-decoration: none;
    color: white;
}

.btn-primary svg[b-4ug5g7vwio] {
    width: 20px;
    height: 20px;
}

/* Back Link */
.back-link-container[b-4ug5g7vwio] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.back-link[b-4ug5g7vwio] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover[b-4ug5g7vwio] {
    color: #2563eb;
    text-decoration: underline;
}

.back-link svg[b-4ug5g7vwio] {
    width: 16px;
    height: 16px;
}

/* Footer */
.login-footer[b-4ug5g7vwio] {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Validation */
[b-4ug5g7vwio] .validation-message {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Animations */
@keyframes spin-b-4ug5g7vwio {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scaleIn-b-4ug5g7vwio {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Pages/Viewer.razor.rz.scp.css */
.viewer-container[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px);
    background: #1f2937;
}

/* Loading and error states */
.viewer-loading[b-7322abeg6q],
.viewer-error[b-7322abeg6q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #f9fafb;
    text-align: center;
}

.viewer-loading .spinner[b-7322abeg6q] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(129, 140, 248, 0.2);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: spin-b-7322abeg6q 0.8s linear infinite;
    margin-bottom: 1rem;
}

.viewer-loading p[b-7322abeg6q] {
    min-height: 1.5em;  /* Prevent layout shift during loading */
}

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

.viewer-error .error-icon[b-7322abeg6q] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.viewer-error h2[b-7322abeg6q] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.viewer-error p[b-7322abeg6q] {
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

.btn-back[b-7322abeg6q] {
    padding: 0.625rem 1.5rem;
    background: #818cf8;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-back:hover[b-7322abeg6q] {
    background: #6366f1;
}

/* Header controls (injected into MainLayout) */
.viewer-header-controls[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.permissions-group[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.perm-badge[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: #4b5563;
    transition: all 0.15s ease;
}

.perm-badge svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

.perm-badge.allowed[b-7322abeg6q] {
    color: #34d399;
}

.perm-badge.allowed:hover[b-7322abeg6q] {
    background: rgba(52, 211, 153, 0.1);
}

.session-timer[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(129, 140, 248, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #a5b4fc;
}

.session-timer svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

.btn-close[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #4b5563;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-close:hover[b-7322abeg6q] {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

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

/* OnlyOffice viewer content */
.viewer-content.onlyoffice-mode[b-7322abeg6q] {
    position: relative;
    flex: 1;
    background: #111827;
}

.onlyoffice-editor[b-7322abeg6q] {
    width: 100%;
    height: 100%;
    background: #111827;  /* Match viewer dark theme to prevent white flash */
}

/* Style OnlyOffice iframe during loading to prevent white flash */
.onlyoffice-editor iframe[b-7322abeg6q] {
    background: #111827;
}

/* OnlyOffice internal loading container */
#onlyoffice-editor[b-7322abeg6q] {
    background: #111827;
}

/* Watermark overlay (if used) */
.watermark-overlay[b-7322abeg6q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}

.watermark-row[b-7322abeg6q] {
    display: flex;
    justify-content: space-around;
}

.watermark-text[b-7322abeg6q] {
    font-size: 1.5rem;
    color: rgba(128, 128, 128, 0.3);
    transform: rotate(-45deg);
    white-space: nowrap;
    user-select: none;
}

/* ================================================== */
/* Forward/Share Document Modal */
/* ================================================== */

.forward-modal[b-7322abeg6q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.forward-modal-content[b-7322abeg6q] {
    position: relative;
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    padding-right: 1.25rem;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar - beautiful integrated design */
.forward-modal-content[b-7322abeg6q]::-webkit-scrollbar {
    width: 8px;
}

.forward-modal-content[b-7322abeg6q]::-webkit-scrollbar-track {
    background: transparent;
    margin: 16px 0;
}

.forward-modal-content[b-7322abeg6q]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.4), rgba(52, 211, 153, 0.2));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.forward-modal-content[b-7322abeg6q]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.6), rgba(52, 211, 153, 0.4));
    background-clip: padding-box;
}

/* Firefox scrollbar */
.forward-modal-content[b-7322abeg6q] {
    scrollbar-width: thin;
    scrollbar-color: rgba(52, 211, 153, 0.3) transparent;
}

.forward-icon[b-7322abeg6q] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.05));
    border-radius: 16px;
    color: #34d399;
}

.forward-icon svg[b-7322abeg6q] {
    width: 32px;
    height: 32px;
}

.forward-modal-content h2[b-7322abeg6q] {
    color: #f9fafb;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 0.5rem;
}

.forward-subtitle[b-7322abeg6q] {
    color: #9ca3af;
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

/* Error area - fixed height container prevents layout shift */
.error-area[b-7322abeg6q] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.forward-error[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.8125rem;
    font-weight: 500;
    animation: errorFadeIn-b-7322abeg6q 0.2s ease;
    width: 100%;
}

@keyframes errorFadeIn-b-7322abeg6q {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.forward-error svg[b-7322abeg6q] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Error container wrapper for expandable layout */
.forward-error-container[b-7322abeg6q] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Info icon button - inline with error message */
.info-icon-btn[b-7322abeg6q] {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.info-icon[b-7322abeg6q] {
    width: 16px;
    height: 16px;
    color: #f87171;
    transition: transform 0.2s;
}

.info-icon.expanded[b-7322abeg6q] {
    transform: rotate(180deg);
}

.info-icon-btn:hover .info-icon[b-7322abeg6q] {
    color: #ef4444;
}

/* Expandable error details panel */
.error-details-panel[b-7322abeg6q] {
    margin-top: 8px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: errorFadeIn-b-7322abeg6q 0.2s ease;
}

.error-detail-item[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid rgba(239, 68, 68, 0.1);
}

.error-detail-item:last-child[b-7322abeg6q] {
    border-bottom: none;
    padding-bottom: 0;
}

.error-detail-item:first-child[b-7322abeg6q] {
    padding-top: 0;
}

.error-email[b-7322abeg6q] {
    font-weight: 500;
    color: #e5e7eb;
    font-size: 0.8125rem;
}

.error-reason[b-7322abeg6q] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

.forward-form[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-7322abeg6q] {
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-hint[b-7322abeg6q] {
    color: #6b7280;
    font-size: 0.75rem;
    margin: 0;
}

/* Recipients section - enterprise style */
.recipients-header[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.recipients-count[b-7322abeg6q] {
    font-size: 0.75rem;
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 500;
}

.recipients-container[b-7322abeg6q] {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.75rem;
    transition: border-color 0.2s ease;
}

.recipients-container.has-error[b-7322abeg6q] {
    border-color: rgba(239, 68, 68, 0.4);
    animation: shake-b-7322abeg6q 0.4s ease-out;
}

@keyframes shake-b-7322abeg6q {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Inline error message */
.inline-error[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
    color: #f87171;
    font-size: 0.8rem;
}

.inline-error svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Input error state */
.forward-input.input-error[b-7322abeg6q] {
    border-color: rgba(239, 68, 68, 0.5);
}

.forward-input.input-error:focus[b-7322abeg6q] {
    border-color: #ef4444;
}

/* Button error state */
.btn-add-email.btn-error[b-7322abeg6q] {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

/* Email input row */
.email-input-row[b-7322abeg6q] {
    display: flex;
    gap: 0.5rem;
}

/* Clear input button */
.btn-clear-input[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 42px;
    padding: 0;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 8px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-clear-input:hover:not(:disabled)[b-7322abeg6q] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.btn-clear-input:disabled[b-7322abeg6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-clear-input svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

/* Email chips container - scrollable */
.email-chips-container[b-7322abeg6q] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 200px;  /* Increased from 140px to fit more recipients */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(52, 211, 153, 0.3) transparent;
}

/* When panel is expanded, let the modal body scroll instead */
.email-chips-container:has(.recipient-permissions-panel)[b-7322abeg6q] {
    max-height: none;
    overflow-y: visible;
}

.email-chips-container[b-7322abeg6q]::-webkit-scrollbar {
    width: 6px;
}

.email-chips-container[b-7322abeg6q]::-webkit-scrollbar-track {
    background: transparent;
}

.email-chips-container[b-7322abeg6q]::-webkit-scrollbar-thumb {
    background: rgba(52, 211, 153, 0.3);
    border-radius: 3px;
}

.email-chips-container[b-7322abeg6q]::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 211, 153, 0.5);
}

/* Email chips */
.email-chips[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-chip[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.email-chip:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.chip-icon[b-7322abeg6q] {
    width: 16px;
    height: 16px;
    color: #6b7280;
    flex-shrink: 0;
}

.chip-email[b-7322abeg6q] {
    flex: 1;
    color: #d1d5db;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.chip-remove svg[b-7322abeg6q] {
    width: 12px;
    height: 12px;
}

.chip-remove:hover:not(:disabled)[b-7322abeg6q] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.chip-remove:disabled[b-7322abeg6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.forward-input[b-7322abeg6q] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f9fafb;
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}

.forward-input:focus[b-7322abeg6q] {
    outline: none;
    border-color: #34d399;
}

.forward-input[b-7322abeg6q]::placeholder {
    color: #6b7280;
}

.btn-add-email[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 8px;
    color: #34d399;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-add-email:hover:not(:disabled)[b-7322abeg6q] {
    background: rgba(52, 211, 153, 0.25);
}

.btn-add-email:disabled[b-7322abeg6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-add-email svg[b-7322abeg6q] {
    width: 18px;
    height: 18px;
}

/* Note textarea */
.forward-note[b-7322abeg6q] {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f9fafb;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s ease;
}

.forward-note:focus[b-7322abeg6q] {
    outline: none;
    border-color: #34d399;
}

.forward-note[b-7322abeg6q]::placeholder {
    color: #6b7280;
}

/* Permission toggles */
.permission-toggles[b-7322abeg6q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.permission-toggle[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.permission-toggle:hover[b-7322abeg6q] {
    background: rgba(0, 0, 0, 0.3);
}

.permission-toggle input[type="checkbox"][b-7322abeg6q] {
    width: 18px;
    height: 18px;
    accent-color: #34d399;
    cursor: pointer;
}

.toggle-label[b-7322abeg6q] {
    color: #d1d5db;
    font-size: 0.875rem;
}

/* Inherited limits */
.inherited-limits[b-7322abeg6q] {
    padding: 1rem;
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.2);
    border-radius: 8px;
}

.inherited-limits label[b-7322abeg6q] {
    color: #a5b4fc;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.limits-grid[b-7322abeg6q] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.limit-item[b-7322abeg6q] {
    color: #c7d2fe;
    font-size: 0.875rem;
}

/* Access Limits and Validity Period Sections */
.limits-section[b-7322abeg6q],
.validity-section[b-7322abeg6q] {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.section-header[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.section-header svg[b-7322abeg6q] {
    width: 18px;
    height: 18px;
    color: #818cf8;
}

.section-header label[b-7322abeg6q] {
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 500;
}

.limit-field[b-7322abeg6q],
.validity-field[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 140px;
}

.limit-field label[b-7322abeg6q],
.validity-field label[b-7322abeg6q] {
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 500;
}

.limit-field input[b-7322abeg6q],
.validity-field input[b-7322abeg6q] {
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #f9fafb;
    font-size: 0.875rem;
    transition: border-color 0.15s ease;
    color-scheme: dark;
}

/* Datetime input with custom calendar icon */
.validity-field input.datetime-input[b-7322abeg6q] {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px 18px;
}

/* Hide the native calendar picker icon */
.validity-field input.datetime-input[b-7322abeg6q]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

/* Number input styling */
.limit-field input[type="number"][b-7322abeg6q] {
    color-scheme: dark;
}

.limit-field input:focus[b-7322abeg6q],
.validity-field input:focus[b-7322abeg6q] {
    outline: none;
    border-color: #818cf8;
}

.limit-field input:disabled[b-7322abeg6q],
.validity-field input:disabled[b-7322abeg6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.limit-field input[b-7322abeg6q]::placeholder,
.validity-field input[b-7322abeg6q]::placeholder {
    color: #6b7280;
}

.limit-field input.input-error[b-7322abeg6q],
.validity-field input.input-error[b-7322abeg6q] {
    border-color: rgba(239, 68, 68, 0.5);
}

.limit-field input.input-error:focus[b-7322abeg6q],
.validity-field input.input-error:focus[b-7322abeg6q] {
    border-color: #ef4444;
}

.field-error[b-7322abeg6q] {
    color: #f87171;
    font-size: 0.7rem;
    margin-top: 0.125rem;
}

.validity-grid[b-7322abeg6q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Per-recipient limits override */
.recipient-override-section[b-7322abeg6q] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.override-label[b-7322abeg6q] {
    display: block;
    color: #9ca3af;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.override-grid[b-7322abeg6q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.625rem;
}

.override-field[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.override-field label[b-7322abeg6q] {
    color: #9ca3af;
    font-size: 0.65rem;
    font-weight: 500;
}

.override-field input[b-7322abeg6q] {
    padding: 0.375rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #f9fafb;
    font-size: 0.75rem;
    color-scheme: dark;
}

.override-field input:focus[b-7322abeg6q] {
    outline: none;
    border-color: #818cf8;
}

.override-field input[b-7322abeg6q]::placeholder {
    color: #6b7280;
}

/* Forward buttons */
.forward-buttons[b-7322abeg6q] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.forward-buttons .btn-primary[b-7322abeg6q] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    min-width: 160px;
    min-height: 48px;
    background: linear-gradient(135deg, #34d399, #10b981);
    border: none;
    border-radius: 8px;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.forward-buttons .btn-primary:hover:not(:disabled)[b-7322abeg6q] {
    background: linear-gradient(135deg, #4ade80, #34d399);
    transform: translateY(-1px);
}

.forward-buttons .btn-primary:disabled[b-7322abeg6q] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.forward-buttons .btn-secondary[b-7322abeg6q] {
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.forward-buttons .btn-secondary:hover:not(:disabled)[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #d1d5db;
}

.forward-buttons .btn-secondary:disabled[b-7322abeg6q] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button spinner */
.btn-spinner[b-7322abeg6q] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #111827;
    border-radius: 50%;
    animation: spin-b-7322abeg6q 0.8s linear infinite;
}

/* Forward success state */
.forward-success[b-7322abeg6q] {
    text-align: center;
}

.forward-success .success-icon[b-7322abeg6q] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(16, 185, 129, 0.1));
    border-radius: 50%;
    color: #34d399;
}

.forward-success .success-icon svg[b-7322abeg6q] {
    width: 32px;
    height: 32px;
}

.forward-success h2[b-7322abeg6q] {
    color: #34d399;
    margin-bottom: 0.5rem;
}

.forward-success p[b-7322abeg6q] {
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

/* Forward results */
.forward-results[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.forward-result[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: left;
}

.forward-result.success[b-7322abeg6q] {
    border-left: 3px solid #34d399;
}

.forward-result.failed[b-7322abeg6q] {
    border-left: 3px solid #ef4444;
}

.result-icon[b-7322abeg6q] {
    font-weight: bold;
}

.forward-result.success .result-icon[b-7322abeg6q] {
    color: #34d399;
}

.forward-result.failed .result-icon[b-7322abeg6q] {
    color: #ef4444;
}

.result-email[b-7322abeg6q] {
    flex: 1;
    color: #d1d5db;
    font-size: 0.875rem;
}

.result-error[b-7322abeg6q] {
    color: #f87171;
    font-size: 0.75rem;
}

/* Share button - prominent button in header */
.btn-share[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #34d399, #10b981);
    border: none;
    border-radius: 8px;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
}

.btn-share:hover[b-7322abeg6q] {
    background: linear-gradient(135deg, #4ade80, #34d399);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4);
}

.btn-share svg[b-7322abeg6q] {
    width: 16px;
    height: 16px;
}

/* ═══ Offline Download Button ═══ */
.btn-download-offline[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-download-offline:hover:not(:disabled)[b-7322abeg6q] {
    background: linear-gradient(135deg, #93bbfd, #60a5fa);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-download-offline:disabled[b-7322abeg6q] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-download-offline.downloading[b-7322abeg6q] {
    background: linear-gradient(135deg, #93bbfd, #60a5fa);
}

.btn-download-offline svg[b-7322abeg6q] {
    width: 16px;
    height: 16px;
}

.btn-download-offline svg.spin[b-7322abeg6q] {
    animation: spin-b-7322abeg6q 1s linear infinite;
}

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

.btn-download-offline .chevron-icon[b-7322abeg6q] {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.btn-download-offline .chevron-icon.open[b-7322abeg6q] {
    transform: rotate(180deg);
}

.download-offline-wrapper[b-7322abeg6q] {
    position: relative;
    display: inline-flex;
}

.download-format-menu[b-7322abeg6q] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    overflow: hidden;
    animation: menuFadeIn-b-7322abeg6q 0.15s ease-out;
}

@keyframes menuFadeIn-b-7322abeg6q {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.download-format-option[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.download-format-option:hover[b-7322abeg6q] {
    background: rgba(59, 130, 246, 0.15);
}

.download-format-option + .download-format-option[b-7322abeg6q] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.download-format-option svg[b-7322abeg6q] {
    flex-shrink: 0;
    color: #60a5fa;
}

.format-label[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.format-name[b-7322abeg6q] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
}

.format-desc[b-7322abeg6q] {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .forward-modal-content[b-7322abeg6q] {
        padding: 1.5rem;
        margin: 0.5rem;
    }

    .forward-buttons[b-7322abeg6q] {
        flex-direction: column;
    }

    .forward-buttons .btn-secondary[b-7322abeg6q] {
        order: 1;
    }
}

/* ============================================== */
/* Per-Recipient Permissions Styles              */
/* ============================================== */

/* Email chip wrapper for expandable content */
.email-chip-wrapper[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
}

/* Customize button in chip */
.chip-customize[b-7322abeg6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.chip-customize svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

.chip-customize:hover[b-7322abeg6q] {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

/* Indicate customized recipients */
.email-chip.customized[b-7322abeg6q] {
    border-color: rgba(52, 211, 153, 0.3);
}

/* Recipient permissions panel */
.recipient-permissions-panel[b-7322abeg6q] {
    margin-top: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    animation: slideDown-b-7322abeg6q 0.2s ease;
}

@keyframes slideDown-b-7322abeg6q {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recipient-perm-header[b-7322abeg6q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: #9ca3af;
}

.btn-reset-override[b-7322abeg6q] {
    background: none;
    border: none;
    color: #818cf8;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.btn-reset-override:hover[b-7322abeg6q] {
    background: rgba(129, 140, 248, 0.15);
}

.recipient-perm-toggles[b-7322abeg6q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.perm-toggle-mini[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #d1d5db;
    cursor: pointer;
    transition: background 0.15s ease;
}

.perm-toggle-mini:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.08);
}

.perm-toggle-mini input[type="checkbox"][b-7322abeg6q] {
    width: 14px;
    height: 14px;
    accent-color: #34d399;
    cursor: pointer;
}

.perm-toggle-mini.ai-toggle[b-7322abeg6q] {
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.2);
}

/* Recipient AI toggles section */
.recipient-ai-toggles[b-7322abeg6q] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================== */
/* AI Security Section Styles                    */
/* ============================================== */

.ai-security-group[b-7322abeg6q] {
    background: rgba(129, 140, 248, 0.05);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(129, 140, 248, 0.15);
}

.ai-security-group > label:first-child[b-7322abeg6q] {
    color: #a5b4fc;
}

.ai-security-group .form-hint[b-7322abeg6q] {
    margin-top: 0.5rem;
}

/* ============================================== */
/* UAEPASS Verification Styles - Beautiful Green */
/* ============================================== */

/* Global UAEPASS section */
.uaepass-global-section[b-7322abeg6q] {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(16, 185, 129, 0.05));
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, 0.2);
    margin-top: 0.5rem;
}

.uaepass-header-global[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.uaepass-logo[b-7322abeg6q] {
    width: 20px;
    height: 20px;
    color: #34d399;
}

.uaepass-header-global label[b-7322abeg6q] {
    color: #34d399;
    font-weight: 600;
    font-size: 0.875rem;
}

.uaepass-hint[b-7322abeg6q] {
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.uaepass-controls[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.uaepass-toggle-main[b-7322abeg6q] {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
}

.uaepass-toggle-main input[type="checkbox"][b-7322abeg6q] {
    accent-color: #34d399;
}

/* Emirates ID input styling */
.emirates-id-global[b-7322abeg6q] {
    background: rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    border-radius: 8px;
    animation: slideDown-b-7322abeg6q 0.2s ease;
}

.emirates-label[b-7322abeg6q] {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.375rem;
}

.emirates-input-wrapper[b-7322abeg6q] {
    position: relative;
    display: flex;
    align-items: center;
}

.emirates-input[b-7322abeg6q] {
    flex: 1;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.5px;
}

.emirates-clear[b-7322abeg6q] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.emirates-clear:hover[b-7322abeg6q] {
    color: #ef4444;
}

.emirates-clear svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

.emirates-error-global[b-7322abeg6q] {
    display: block;
    font-size: 0.7rem;
    color: #f87171;
    margin-top: 0.25rem;
}

.emirates-note[b-7322abeg6q] {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.375rem;
    margin-bottom: 0;
}

/* Per-recipient UAEPASS section */
.uaepass-section[b-7322abeg6q] {
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 8px;
}

.uaepass-header[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.7rem;
    color: #34d399;
    font-weight: 500;
}

.uaepass-icon[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

.uaepass-toggle[b-7322abeg6q] {
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.emirates-id-input[b-7322abeg6q] {
    margin-top: 8px;
}

.emirates-id-input input[b-7322abeg6q] {
    width: 100%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    transition: border-color 0.15s ease;
}

.emirates-id-input input:focus[b-7322abeg6q] {
    outline: none;
    border-color: #34d399;
}

.emirates-id-input input.input-error[b-7322abeg6q] {
    border-color: rgba(239, 68, 68, 0.5);
}

.emirates-error[b-7322abeg6q] {
    display: block;
    font-size: 0.65rem;
    color: #f87171;
    margin-top: 4px;
}

/* Input error state (shared) */
.input-error[b-7322abeg6q] {
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* ===========================================
   Access Type Section Styles
   =========================================== */

.access-type-section[b-7322abeg6q] {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
}

.access-type-header[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.access-type-header label[b-7322abeg6q] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
}

.access-type-icon[b-7322abeg6q] {
    width: 18px;
    height: 18px;
    color: #818cf8;
}

.access-type-hint[b-7322abeg6q] {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.access-type-options[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.access-type-option[b-7322abeg6q] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.access-type-option:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 102, 241, 0.3);
}

.access-type-option.selected[b-7322abeg6q] {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}

.access-type-option input[type="radio"][b-7322abeg6q] {
    display: none;
}

.option-content[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.option-icon[b-7322abeg6q] {
    width: 24px;
    height: 24px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.access-type-option.selected .option-icon[b-7322abeg6q] {
    color: #818cf8;
}

.option-text[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-title[b-7322abeg6q] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
}

.option-desc[b-7322abeg6q] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.access-type-option.selected .option-title[b-7322abeg6q] {
    color: #c7d2fe;
}

.access-type-option.selected .option-desc[b-7322abeg6q] {
    color: #a5b4fc;
}

/* Radio button indicator */
.access-type-option[b-7322abeg6q]::before {
    content: '';
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin-right: 12px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.access-type-option.selected[b-7322abeg6q]::before {
    border-color: #818cf8;
    background: radial-gradient(circle, #818cf8 40%, transparent 45%);
}

/* ========== Share Hierarchy Modal Styles ========== */
.sw-modal-overlay[b-7322abeg6q] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    animation: swFadeIn-b-7322abeg6q 0.2s ease;
}

@keyframes swFadeIn-b-7322abeg6q {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes swSlideIn-b-7322abeg6q {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.sw-modal[b-7322abeg6q] {
    width: 90%;
    max-width: 950px;
    max-height: 85vh;
    background: linear-gradient(145deg, #1f2937, #111827);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: swSlideIn-b-7322abeg6q 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Modal Header */
.sw-modal-header[b-7322abeg6q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.sw-header-left[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sw-header-icon[b-7322abeg6q] {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: linear-gradient(135deg, #34d399, #10b981);
    border-radius: 12px;
    color: white;
}

.sw-modal-title[b-7322abeg6q] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f9fafb;
}

.sw-modal-subtitle[b-7322abeg6q] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

.sw-close-btn[b-7322abeg6q] {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 10px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.sw-close-btn:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.1);
    color: #f9fafb;
}

.sw-close-btn svg[b-7322abeg6q] {
    width: 18px;
    height: 18px;
}

/* Toolbar */
.sw-toolbar[b-7322abeg6q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sw-search-container[b-7322abeg6q] {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.sw-search-icon[b-7322abeg6q] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #6b7280;
    pointer-events: none;
}

.sw-search-input[b-7322abeg6q] {
    width: 100%;
    padding: 10px 36px 10px 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f9fafb;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.2s ease;
}

.sw-search-input[b-7322abeg6q]::placeholder {
    color: #6b7280;
}

.sw-search-input:focus[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(52, 211, 153, 0.5);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

.sw-search-clear[b-7322abeg6q] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.sw-search-clear:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.15);
    color: #f9fafb;
}

.sw-search-clear svg[b-7322abeg6q] {
    width: 12px;
    height: 12px;
}

.sw-toolbar-actions[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sw-checkbox-label[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
}

.sw-checkbox-label input[b-7322abeg6q] {
    width: 16px;
    height: 16px;
    accent-color: #34d399;
}

/* Stats Bar */
.sw-stats-bar[b-7322abeg6q] {
    display: flex;
    gap: 20px;
    padding: 12px 24px;
    background: rgba(52, 211, 153, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sw-stat[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.sw-stat-dot[b-7322abeg6q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sw-dot-active[b-7322abeg6q] {
    background: #34d399;
    animation: swPulse-b-7322abeg6q 2s ease-in-out infinite;
}

@keyframes swPulse-b-7322abeg6q {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sw-dot-revoked[b-7322abeg6q] {
    background: #f87171;
}

.sw-dot-expired[b-7322abeg6q] {
    background: #fbbf24;
}

.sw-stat-value[b-7322abeg6q] {
    font-weight: 600;
    color: #f9fafb;
}

.sw-stat-label[b-7322abeg6q] {
    color: #6b7280;
}

.sw-stat-active .sw-stat-value[b-7322abeg6q] {
    color: #34d399;
}

.sw-stat-revoked .sw-stat-value[b-7322abeg6q] {
    color: #f87171;
}

.sw-stat-expired .sw-stat-value[b-7322abeg6q] {
    color: #fbbf24;
}

/* Content Area */
.sw-content[b-7322abeg6q] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    min-height: 200px;
    max-height: 400px;
}

.sw-content[b-7322abeg6q]::-webkit-scrollbar {
    width: 8px;
}

.sw-content[b-7322abeg6q]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.sw-content[b-7322abeg6q]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Loading State */
.sw-loading[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.sw-spinner[b-7322abeg6q] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(52, 211, 153, 0.2);
    border-top-color: #34d399;
    border-radius: 50%;
    animation: swSpin-b-7322abeg6q 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes swSpin-b-7322abeg6q {
    to { transform: rotate(360deg); }
}

/* Empty State */
.sw-empty[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.sw-empty-icon[b-7322abeg6q] {
    width: 64px;
    height: 64px;
    color: #4b5563;
    margin-bottom: 16px;
}

.sw-empty h3[b-7322abeg6q] {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #e5e7eb;
}

.sw-empty p[b-7322abeg6q] {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Tree */
.sw-tree[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Tree Node */
.tree-node[b-7322abeg6q] {
    position: relative;
    margin-left: calc(min(var(--depth, 0), 5) * 4px);  /* Cap at depth 5, 4px per level = 20px max */
}

.tree-node.revoked[b-7322abeg6q] {
    opacity: 0.6;
}

.node-row[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    transition: all 0.15s ease;
}

.node-row:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Node Checkbox */
.node-checkbox[b-7322abeg6q] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.node-checkbox input[b-7322abeg6q] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.node-checkbox .checkmark[b-7322abeg6q] {
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-checkbox input:checked + .checkmark[b-7322abeg6q] {
    background: linear-gradient(135deg, #34d399, #10b981);
    border-color: transparent;
}

.node-checkbox input:checked + .checkmark[b-7322abeg6q]::after {
    content: '✓';
    font-size: 11px;
    color: white;
    font-weight: bold;
}

.node-checkbox-placeholder[b-7322abeg6q] {
    width: 18px;
    height: 18px;
}

/* Expand Button */
.expand-btn[b-7322abeg6q] {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.expand-btn:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.1);
    color: #f9fafb;
}

.expand-btn svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.expand-btn.expanded svg[b-7322abeg6q] {
    transform: rotate(90deg);
}

.expand-btn-placeholder[b-7322abeg6q] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Node Avatar */
.node-avatar[b-7322abeg6q] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

.node-avatar.status-active[b-7322abeg6q] {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.node-avatar.status-revoked[b-7322abeg6q] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.node-avatar.status-expired[b-7322abeg6q] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* Node Info */
.node-info[b-7322abeg6q] {
    flex: 1;
    min-width: 120px;
}

.node-email[b-7322abeg6q] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f9fafb;
    word-break: break-word;
}

.depth-badge[b-7322abeg6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    margin-right: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border-radius: 4px;
    flex-shrink: 0;
}

.node-email.strikethrough[b-7322abeg6q] {
    text-decoration: line-through;
    color: #6b7280;
}

.node-name[b-7322abeg6q] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* Node Meta */
.node-meta[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.node-permissions[b-7322abeg6q] {
    display: flex;
    gap: 3px;
}

.node-permissions .perm-badge[b-7322abeg6q] {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(129, 140, 248, 0.2);
    color: #a5b4fc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

/* Access Type Icon */
.access-type-icon[b-7322abeg6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: help;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.access-type-icon svg[b-7322abeg6q] {
    width: 14px;
    height: 14px;
}

.access-type-icon:hover[b-7322abeg6q] {
    transform: scale(1.1);
}

/* Access Type Colors */
.access-type-uae-guest[b-7322abeg6q] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.access-type-uae-guest:hover[b-7322abeg6q] {
    background: rgba(168, 85, 247, 0.25);
}

.access-type-uae-account[b-7322abeg6q] {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
}

.access-type-uae-account:hover[b-7322abeg6q] {
    background: rgba(129, 140, 248, 0.25);
}

.access-type-guest[b-7322abeg6q] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.access-type-guest:hover[b-7322abeg6q] {
    background: rgba(245, 158, 11, 0.25);
}

.access-type-account[b-7322abeg6q] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.access-type-account:hover[b-7322abeg6q] {
    background: rgba(59, 130, 246, 0.25);
}

.node-status[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.node-status .status-dot[b-7322abeg6q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.node-status.status-active[b-7322abeg6q] {
    color: #34d399;
}

.node-status.status-active .status-dot[b-7322abeg6q] {
    animation: swPulse-b-7322abeg6q 2s ease-in-out infinite;
}

.node-status.status-revoked[b-7322abeg6q] {
    color: #f87171;
}

.node-status.status-expired[b-7322abeg6q] {
    color: #fbbf24;
}

.node-stats[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: #6b7280;
}

.reshare-badge[b-7322abeg6q] {
    padding: 2px 8px;
    background: rgba(129, 140, 248, 0.2);
    color: #a5b4fc;
    border-radius: 10px;
    font-weight: 600;
}

.node-date[b-7322abeg6q] {
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 50px;
}

.node-action-btn[b-7322abeg6q] {
    width: 32px;
    height: 32px;
    background: rgba(248, 113, 113, 0.1);
    border: none;
    border-radius: 8px;
    color: #f87171;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    opacity: 0;
}

.node-row:hover .node-action-btn[b-7322abeg6q] {
    opacity: 1;
}

.node-action-btn:hover[b-7322abeg6q] {
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}

.node-action-btn svg[b-7322abeg6q] {
    width: 16px;
    height: 16px;
}

.node-action-placeholder[b-7322abeg6q] {
    width: 32px;
    height: 32px;
}

/* Node Children */
.node-children[b-7322abeg6q] {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px dashed rgba(255, 255, 255, 0.1);
    margin-left: 4px;
}

/* Modal Footer */
.sw-modal-footer[b-7322abeg6q] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

/* Buttons */
.sw-btn[b-7322abeg6q] {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sw-btn-secondary[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.sw-btn-secondary:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.08);
    color: #f9fafb;
}

.sw-btn-danger[b-7322abeg6q] {
    background: linear-gradient(135deg, #f87171, #ef4444);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.3);
}

.sw-btn-danger:hover[b-7322abeg6q] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(248, 113, 113, 0.4);
}

.sw-btn-danger:disabled[b-7322abeg6q] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.sw-btn-spinner[b-7322abeg6q] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: swSpin-b-7322abeg6q 0.8s linear infinite;
}

/* Dialog Overlay */
.sw-dialog-overlay[b-7322abeg6q] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    animation: swFadeIn-b-7322abeg6q 0.15s ease;
}

.sw-dialog[b-7322abeg6q] {
    width: 90%;
    max-width: 440px;
    background: linear-gradient(145deg, #1f2937, #111827);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: swSlideIn-b-7322abeg6q 0.2s ease;
}

.sw-dialog-header[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 24px 16px;
}

.sw-dialog-icon[b-7322abeg6q] {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
}

.sw-icon-warning[b-7322abeg6q] {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.2), rgba(239, 68, 68, 0.2));
    color: #f87171;
}

.sw-dialog-header h3[b-7322abeg6q] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f9fafb;
}

.sw-dialog-content[b-7322abeg6q] {
    padding: 0 24px 20px;
}

.sw-dialog-content > p[b-7322abeg6q] {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #9ca3af;
}

.sw-dialog-target[b-7322abeg6q] {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 16px;
}

.sw-dialog-target strong[b-7322abeg6q] {
    color: #f9fafb;
    font-size: 0.95rem;
}

.sw-dialog-warning[b-7322abeg6q] {
    margin: 0 0 16px;
    padding: 12px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #fbbf24;
}

.sw-dialog-options[b-7322abeg6q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.sw-radio-option[b-7322abeg6q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sw-radio-option:hover[b-7322abeg6q] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.sw-radio-option input[type="radio"][b-7322abeg6q] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    accent-color: #f87171;
    flex-shrink: 0;
}

.sw-radio-content[b-7322abeg6q] {
    flex: 1;
}

.sw-radio-title[b-7322abeg6q] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f9fafb;
    margin-bottom: 4px;
}

.sw-radio-desc[b-7322abeg6q] {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
}

.sw-dialog-reason[b-7322abeg6q] {
    margin-top: 16px;
}

.sw-dialog-reason label[b-7322abeg6q] {
    display: block;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

.sw-dialog-reason textarea[b-7322abeg6q] {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #f9fafb;
    font-size: 0.875rem;
    resize: none;
    outline: none;
    min-height: 80px;
    transition: all 0.2s ease;
}

.sw-dialog-reason textarea[b-7322abeg6q]::placeholder {
    color: #6b7280;
}

.sw-dialog-reason textarea:focus[b-7322abeg6q] {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.sw-dialog-footer[b-7322abeg6q] {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
}

.sw-dialog-footer .sw-btn[b-7322abeg6q] {
    flex: 1;
}

/* Shared Button in Header */
.btn-shared-with[b-7322abeg6q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 8px;
    color: #34d399;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-shared-with:hover[b-7322abeg6q] {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(16, 185, 129, 0.2));
    border-color: rgba(52, 211, 153, 0.5);
    transform: translateY(-1px);
}

.btn-shared-with svg[b-7322abeg6q] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.shared-count-badge[b-7322abeg6q] {
    padding: 2px 8px;
    background: #34d399;
    color: #111827;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .sw-modal[b-7322abeg6q] {
        width: 95%;
        max-height: 90vh;
    }

    .sw-toolbar[b-7322abeg6q] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sw-search-container[b-7322abeg6q] {
        max-width: 100%;
    }

    .sw-toolbar-actions[b-7322abeg6q] {
        justify-content: space-between;
    }

    .node-row[b-7322abeg6q] {
        flex-wrap: wrap;
    }

    .node-meta[b-7322abeg6q] {
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        flex-wrap: wrap;
        gap: 10px;
    }

    .sw-dialog-footer[b-7322abeg6q] {
        flex-direction: column;
    }
}