/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* === ServicePoint Dark Slate Login === */

.login-wrapper[b-05p21we9z0] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F172A 0%, #16212c 50%, #0F172A 100%);
    padding: 24px;
    font-family: 'Inter', sans-serif;
}

.login-card[b-05p21we9z0] {
    width: 100%;
    max-width: 448px;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Logo and header section */
.login-header[b-05p21we9z0] {
    padding: 2.5rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-logo[b-05p21we9z0] {
    height: 48px;
    width: auto;
    object-fit: contain;
    margin-bottom: 2rem;
}

.login-title[b-05p21we9z0] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0 0 0.5rem;
    text-align: center;
}

.login-subtitle[b-05p21we9z0] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

/* Form section */
.login-form[b-05p21we9z0] {
    padding: 0 2rem 2.5rem;
}

.login-form .form-label[b-05p21we9z0] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
    margin-left: 0.25rem;
}

/* Input with icon */
.input-icon-group[b-05p21we9z0] {
    position: relative;
}

.input-icon-group .input-icon[b-05p21we9z0] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 1.125rem;
    pointer-events: none;
    z-index: 2;
}

.input-icon-group[b-05p21we9z0]  .form-control {
    background: rgba(2, 6, 23, 0.5) !important;
    border: 1px solid #334155 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    color: #f1f5f9 !important;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-icon-group[b-05p21we9z0]  .form-control:focus {
    background: rgba(2, 6, 23, 0.7) !important;
    border-color: #0088CC !important;
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.2) !important;
    color: #f1f5f9 !important;
}

.input-icon-group[b-05p21we9z0]  .form-control::placeholder {
    color: #64748b;
}

/* Password toggle */
.btn-toggle-pw[b-05p21we9z0] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}

.btn-toggle-pw:hover[b-05p21we9z0] {
    color: #94a3b8;
}

/* Forgot password link */
.forgot-link[b-05p21we9z0] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #0088CC;
    text-decoration: none;
    transition: color 0.2s;
}

.forgot-link:hover[b-05p21we9z0] {
    color: #0077b3;
}

/* Sign In button */
.btn-signin[b-05p21we9z0] {
    width: 100%;
    background: #0088CC;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.2);
    transition: all 0.2s;
    cursor: pointer;
}

.btn-signin:hover[b-05p21we9z0] {
    background: #0077b3;
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.3);
}

.btn-signin:active[b-05p21we9z0] {
    transform: scale(0.98);
}

/* Secure Options divider */
.secure-divider[b-05p21we9z0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

.secure-divider hr[b-05p21we9z0] {
    flex: 1;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
    margin: 0;
}

.secure-divider span[b-05p21we9z0] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    white-space: nowrap;
}

/* Passkey button (::deep needed for PasskeySubmit child component) */
[b-05p21we9z0] .btn-passkey {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    background: #1E293B !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    cursor: pointer;
    text-decoration: none;
}

[b-05p21we9z0] .btn-passkey:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* Compliance footer */
.login-compliance[b-05p21we9z0] {
    padding: 1.25rem 2rem;
    background: rgba(2, 6, 23, 0.4);
    border-top: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0 0 0.75rem 0.75rem;
    text-align: center;
}

.login-compliance p[b-05p21we9z0] {
    font-size: 0.6875rem;
    color: #64748b;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Page footer */
.login-footer[b-05p21we9z0] {
    padding: 1.5rem;
    text-align: center;
}

.login-footer p[b-05p21we9z0] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

/* 2FA and Recovery form overrides */
.login-form h3[b-05p21we9z0] {
    font-weight: 700;
    color: #f1f5f9;
}

.login-form .text-muted[b-05p21we9z0] {
    color: #94a3b8 !important;
}

.login-form .text-danger[b-05p21we9z0] {
    color: #ef4444 !important;
}

.login-form .btn-outline-secondary[b-05p21we9z0] {
    background: transparent;
    border: 1px solid #334155;
    color: #94a3b8;
    border-radius: 0.5rem;
}

.login-form .btn-outline-secondary:hover[b-05p21we9z0] {
    border-color: #475569;
    color: #e2e8f0;
}

.login-form .btn-link[b-05p21we9z0] {
    color: #0088CC;
}

.login-form .form-check-label[b-05p21we9z0] {
    color: #94a3b8;
}
/* /Components/Account/Pages/Manage/TwoFactorMethods.razor.rz.scp.css */
/* "Add a method" row.

   The account-settings card is ~636px wide regardless of viewport, so Bootstrap's viewport-keyed
   col-md-* classes sized these fields to 153px and clipped their contents. A wrapping flex row with
   a content-derived minimum keeps every field readable at any card or window width. */

.add-method-row[b-h2hc1cdnjq] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
}

/* 12rem clears the widest option ("Authenticator app", ~135px) plus the select's 12px/36px padding
   and border — the caret gutter is what made the old 143px box too tight. */
.add-method-field[b-h2hc1cdnjq] {
    flex: 1 1 12rem;
    min-width: 12rem;
}

/* Email addresses and phone numbers are longer than a label, so give them more room. */
.add-method-field-wide[b-h2hc1cdnjq] {
    flex: 1 1 16rem;
    min-width: 16rem;
}

/* The button sits on the baseline of the last row and never stretches to a full column. */
.add-method-action[b-h2hc1cdnjq] {
    flex: 0 0 auto;
}

.add-method-action .btn[b-h2hc1cdnjq] {
    min-width: 6rem;
}
/* /Components/Common/CategoryIcon.razor.rz.scp.css */
/* Base icon container */
.category-icon[b-y8g6gy1p35] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.category-icon svg[b-y8g6gy1p35] {
    width: 100%;
    height: 100%;
}

/* Size variants */
.category-icon-sm[b-y8g6gy1p35] { width: 32px; height: 32px; padding: 6px; }
.category-icon-md[b-y8g6gy1p35] { width: 40px; height: 40px; padding: 8px; }
.category-icon-lg[b-y8g6gy1p35] { width: 48px; height: 48px; padding: 10px; }

/* Category color themes (dark-compatible) */
.cat-shopping[b-y8g6gy1p35]      { background-color: rgba(124, 58, 237, 0.15); color: #7c3aed; }
.cat-groceries[b-y8g6gy1p35]     { background-color: rgba(5, 150, 105, 0.15);  color: #059669; }
.cat-gas[b-y8g6gy1p35]           { background-color: rgba(217, 119, 6, 0.15);  color: #d97706; }
.cat-entertainment[b-y8g6gy1p35] { background-color: rgba(219, 39, 119, 0.15); color: #db2777; }
.cat-dining[b-y8g6gy1p35]        { background-color: rgba(234, 88, 12, 0.15);  color: #ea580c; }
.cat-payment[b-y8g6gy1p35]       { background-color: rgba(37, 99, 235, 0.15);  color: #2563eb; }
.cat-travel[b-y8g6gy1p35]        { background-color: rgba(2, 132, 199, 0.15);  color: #0284c7; }
.cat-utilities[b-y8g6gy1p35]     { background-color: rgba(71, 85, 105, 0.15);  color: #475569; }
.cat-healthcare[b-y8g6gy1p35]    { background-color: rgba(239, 68, 68, 0.15);  color: #ef4444; }
.cat-other[b-y8g6gy1p35]         { background-color: rgba(107, 114, 128, 0.15); color: #6b7280; }
/* /Components/Common/Modal.razor.rz.scp.css */
/* Overlay — covers entire viewport */
.sp-modal-overlay[b-2rg45v1365] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-y: auto;
}

/* Backdrop — semi-transparent blur */
.sp-modal-backdrop[b-2rg45v1365] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modalFadeIn-b-2rg45v1365 0.2s ease-out;
}

/* Centering container */
.sp-modal-container[b-2rg45v1365] {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* Panel — dark slate card */
.sp-modal-panel[b-2rg45v1365] {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background-color: #1E293B;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid #334155;
    animation: modalSlideUp-b-2rg45v1365 0.25s ease-out;
}

/* Size variants */
.sp-modal-sm[b-2rg45v1365]   { max-width: 384px; }
.sp-modal-md[b-2rg45v1365]   { max-width: 448px; }
.sp-modal-lg[b-2rg45v1365]   { max-width: 512px; }
.sp-modal-xl[b-2rg45v1365]   { max-width: 576px; }
.sp-modal-full[b-2rg45v1365] { max-width: 672px; }

/* Top gradient accent line */
.sp-modal-accent[b-2rg45v1365] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0088CC, #33a3d9, #0088CC);
}

/* Header */
.sp-modal-header[b-2rg45v1365] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
}

.sp-modal-title[b-2rg45v1365] {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Close button */
.sp-modal-close[b-2rg45v1365] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-modal-close svg[b-2rg45v1365] {
    width: 20px;
    height: 20px;
}

.sp-modal-close:hover[b-2rg45v1365] {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.05);
}

.sp-modal-close:focus[b-2rg45v1365] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.2);
}

/* Body */
.sp-modal-body[b-2rg45v1365] {
    padding: 0 1.5rem 1.5rem;
}

.sp-modal-body-no-header[b-2rg45v1365] {
    padding-top: 1.5rem;
}

/* Footer */
.sp-modal-footer[b-2rg45v1365] {
    background-color: rgba(15, 23, 42, 0.5);
    padding: 1rem 1.5rem;
    border-top: 1px solid #334155;
}

/* Animations */
@keyframes modalFadeIn-b-2rg45v1365 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalSlideUp-b-2rg45v1365 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Components/Common/NotesPanel.razor.rz.scp.css */
/* Notes panel — visual language borrowed from ApplicationProcess.razor.css (its rules are
   scoped to that page, so the ones this component uses are duplicated here). */

.glass-card[b-utf1vvlxnk] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.section-title[b-utf1vvlxnk] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0088CC;
    margin: 0;
}

.notes-header[b-utf1vvlxnk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

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

.notes-count[b-utf1vvlxnk] {
    font-size: 0.6875rem;
    font-style: italic;
    color: #64748b;
}

.notes-toggle-deactivated[b-utf1vvlxnk] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.6875rem;
    color: #0088CC;
    cursor: pointer;
}

.notes-toggle-deactivated:hover[b-utf1vvlxnk] {
    text-decoration: underline;
}

.notes-list[b-utf1vvlxnk] {
    max-height: 20rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.5rem;
    margin-bottom: 1.5rem;
}

.note-item[b-utf1vvlxnk] {
    background: rgba(51, 65, 85, 0.4);
    padding: 1rem;
    border-radius: 0.5rem;
}

.note-item.note-deactivated[b-utf1vvlxnk] {
    opacity: 0.55;
}

.note-meta[b-utf1vvlxnk] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.5rem;
}

.note-author[b-utf1vvlxnk] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.note-time[b-utf1vvlxnk] {
    font-size: 0.625rem;
    color: #64748b;
}

.note-text[b-utf1vvlxnk] {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.note-footer[b-utf1vvlxnk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.625rem;
    gap: 0.75rem;
}

.note-badges[b-utf1vvlxnk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.note-badge[b-utf1vvlxnk] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 136, 204, 0.15);
    color: #7dd3fc;
}

.note-badge.deactivated[b-utf1vvlxnk] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.note-badge.muted[b-utf1vvlxnk] {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
    font-weight: 400;
}

.note-row-actions[b-utf1vvlxnk] {
    display: flex;
    gap: 0.625rem;
    flex-shrink: 0;
}

.note-link-btn[b-utf1vvlxnk] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0088CC;
    cursor: pointer;
}

.note-link-btn.danger[b-utf1vvlxnk] {
    color: #f87171;
}

.note-link-btn:hover:not(:disabled)[b-utf1vvlxnk] {
    text-decoration: underline;
}

.note-link-btn:disabled[b-utf1vvlxnk] {
    opacity: 0.4;
    cursor: default;
}

.notes-empty[b-utf1vvlxnk] {
    text-align: center;
    padding: 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.add-note-form[b-utf1vvlxnk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid #334155;
    padding-top: 1.25rem;
}

.form-label[b-utf1vvlxnk] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.note-textarea[b-utf1vvlxnk] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    width: 100%;
}

.note-textarea:focus[b-utf1vvlxnk] {
    border-color: rgba(0, 136, 204, 0.5);
}

.note-textarea[b-utf1vvlxnk]::placeholder {
    color: #475569;
}

.note-visibility-row[b-utf1vvlxnk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
}

.note-visibility-caption[b-utf1vvlxnk] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.note-flag-toggle[b-utf1vvlxnk] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #94a3b8;
    cursor: pointer;
    margin: 0;
}

.note-actions[b-utf1vvlxnk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

.submit-note-btn[b-utf1vvlxnk] {
    align-self: flex-end;
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #e2e8f0;
    background: #334155;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.submit-note-btn:hover:not(:disabled)[b-utf1vvlxnk] {
    background: #475569;
}

.submit-note-btn:disabled[b-utf1vvlxnk] {
    opacity: 0.4;
    cursor: default;
}

.note-cancel-btn[b-utf1vvlxnk] {
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    background: none;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    cursor: pointer;
}

.note-cancel-btn:hover:not(:disabled)[b-utf1vvlxnk] {
    border-color: #475569;
    color: #e2e8f0;
}
/* /Components/Common/PasswordInput.razor.rz.scp.css */
.pw-wrap[b-mgzfn6rerp] {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

/* Fully self-styled: host pages' CSS-isolated input classes cannot reach inside this
   component, so the field carries the app's dark input idiom itself. */
.pw-input[b-mgzfn6rerp] {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
}

.pw-input[b-mgzfn6rerp]::placeholder {
    color: #64748b;
}

.pw-input:focus-visible[b-mgzfn6rerp] {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

.pw-toggle[b-mgzfn6rerp] {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}

.pw-toggle:hover[b-mgzfn6rerp],
.pw-toggle:focus-visible[b-mgzfn6rerp] {
    color: #e2e8f0;
    outline: none;
}

/* Light variant — for white-surface modals (e.g. the End Users manage dialog). */
.pw-wrap.light .pw-input[b-mgzfn6rerp] {
    background: #fff;
    border: 1.5px solid #d9e1e8;
    color: #06121c;
}

.pw-wrap.light .pw-input[b-mgzfn6rerp]::placeholder {
    color: #8a97a3;
}

.pw-wrap.light .pw-input:focus-visible[b-mgzfn6rerp] {
    outline: 2px solid #0088CC;
    outline-offset: 1px;
}

.pw-wrap.light .pw-toggle[b-mgzfn6rerp] {
    color: #8a97a3;
}

.pw-wrap.light .pw-toggle:hover[b-mgzfn6rerp],
.pw-wrap.light .pw-toggle:focus-visible[b-mgzfn6rerp] {
    color: #33424e;
}
/* /Components/Common/StatementOptionsPanel.razor.rz.scp.css */
.stmt-options-panel[b-s2bw5fygnu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stmt-options-label[b-s2bw5fygnu] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.stmt-options-row[b-s2bw5fygnu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stmt-options-select[b-s2bw5fygnu] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    outline: none;
    min-width: 16rem;
}

.stmt-options-select:focus[b-s2bw5fygnu] {
    border-color: rgba(0, 136, 204, 0.5);
}

.stmt-options-save[b-s2bw5fygnu] {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #e2e8f0;
    background: #334155;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.stmt-options-save:hover:not(:disabled)[b-s2bw5fygnu] {
    background: #475569;
}

.stmt-options-save:disabled[b-s2bw5fygnu] {
    opacity: 0.4;
    cursor: default;
}

.stmt-options-readonly[b-s2bw5fygnu] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
}

.stmt-options-hint[b-s2bw5fygnu],
.stmt-options-loading[b-s2bw5fygnu] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}
/* /Components/Common/TabContainer.razor.rz.scp.css */
.tab-container[b-074s09lrzo] {
    width: 100%;
}

/* Nav wrapper holds tabs + indicator */
.tab-nav-wrapper[b-074s09lrzo] {
    position: relative;
    border-bottom: 1px solid #334155;
}

.tab-nav[b-074s09lrzo] {
    display: flex;
    gap: 0.25rem;
}

/* Tab button */
.tab-button[b-074s09lrzo] {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button:hover[b-074s09lrzo] {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.05);
}

.tab-button:focus[b-074s09lrzo] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.2);
}

.tab-button.active[b-074s09lrzo] {
    color: #0088CC;
    font-weight: 600;
}

/* Tab label */
.tab-label[b-074s09lrzo] {
    font-weight: 500;
}

.tab-button.active .tab-label[b-074s09lrzo] {
    font-weight: 600;
}

/* Tab icon */
.tab-icon[b-074s09lrzo] {
    margin-right: 0.5rem;
}

/* Tab badge */
.tab-badge[b-074s09lrzo] {
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 50px;
    background-color: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

/* Animated underline indicator */
.tab-indicator[b-074s09lrzo] {
    position: absolute;
    bottom: 0;
    height: 2px;
    border-radius: 50px;
    background: linear-gradient(90deg, #0088CC, #33a3d9);
    transition: all 0.3s ease-out;
}

/* Tab content area */
.tab-content[b-074s09lrzo] {
    margin-top: 1.5rem;
}
/* /Components/Layout/GlobalSearch.razor.rz.scp.css */
/* === Global Search Wrapper (inherits .search-wrapper from MainLayout) === */

.search-wrapper[b-hiiwpnebe4] {
    position: relative;
    flex: 1;
    max-width: 44rem;
}

/* Magnifying glass trigger button */
.search-trigger[b-hiiwpnebe4] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 9999px 0 0 9999px;
    transition: color 0.15s;
}

.search-trigger:hover[b-hiiwpnebe4] {
    color: #e2e8f0;
}

.search-input[b-hiiwpnebe4] {
    width: 100%;
    padding: 0.5rem 7rem 0.5rem 2.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: none;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #e2e8f0;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.search-quick-actions[b-hiiwpnebe4] {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    z-index: 2;
}

.search-quick-btn[b-hiiwpnebe4] {
    background: none;
    border: none;
    color: #475569;
    font-size: 0.8125rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.search-quick-btn:hover[b-hiiwpnebe4] {
    color: #0088CC;
    background: rgba(0, 136, 204, 0.1);
}

.search-input[b-hiiwpnebe4]::placeholder {
    color: #64748b;
}

.search-input:focus[b-hiiwpnebe4] {
    outline: none;
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.2);
}

/* === Dropdown Panel === */
.global-search-dropdown[b-hiiwpnebe4] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 0;
    z-index: 50;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: dropdownFadeIn-b-hiiwpnebe4 0.15s ease-out;
    overflow: hidden;
}

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

.dropdown-header[b-hiiwpnebe4] {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid #334155;
}

.dropdown-label[b-hiiwpnebe4] {
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.01em;
}

.dropdown-label strong[b-hiiwpnebe4] {
    color: #e2e8f0;
    font-weight: 600;
}

.dropdown-items[b-hiiwpnebe4] {
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-item[b-hiiwpnebe4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-radius: 0.5rem;
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
    text-align: left;
    width: 100%;
}

.dropdown-item:hover[b-hiiwpnebe4] {
    background-color: rgba(0, 136, 204, 0.1);
    color: #f1f5f9;
}

.dropdown-item:active[b-hiiwpnebe4] {
    background-color: rgba(0, 136, 204, 0.18);
}

.dropdown-item-icon[b-hiiwpnebe4] {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    color: #64748b;
    flex-shrink: 0;
    transition: color 0.12s;
}

.dropdown-item:hover .dropdown-item-icon[b-hiiwpnebe4] {
    color: #0088CC;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* === ServicePoint Dark Slate Layout Shell === */
.layout-shell[b-qddooxsjfi] {
    display: flex;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

/* --- Sidebar --- */
.sidebar[b-qddooxsjfi] {
    width: 264px;
    background: #1E293B;
    border-right: 1px solid #334155;
    display: flex;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    color: #94a3b8;
    flex-direction: column;
}

.sidebar-inner[b-qddooxsjfi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-logo[b-qddooxsjfi] {
    padding: calc(1.25rem + 10px) 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-logo-img[b-qddooxsjfi] {
    max-width: 100%;
    height: 29px;
    width: auto;
    object-fit: contain;
}

/* Sidebar bottom section (Settings, Logout) */
.sidebar-bottom[b-qddooxsjfi] {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid #334155;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-link[b-qddooxsjfi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.15s;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.sidebar-link:hover[b-qddooxsjfi] {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.sidebar-link-muted[b-qddooxsjfi] {
    color: rgba(148, 163, 184, 0.7);
}

.sidebar-footer-mark[b-qddooxsjfi] {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #334155;
    opacity: 0.55;
    transition: opacity 0.2s;
}

.sidebar-footer-mark:hover[b-qddooxsjfi] {
    opacity: 1;
}

.sidebar-footer-logo[b-qddooxsjfi] {
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* --- Main Region --- */
.main-region[b-qddooxsjfi] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* --- Top Bar / Header --- */
.top-bar[b-qddooxsjfi] {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    background: #1E293B;
    border-bottom: 1px solid #334155;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

/* Search input in top bar */
.search-wrapper[b-qddooxsjfi] {
    position: relative;
    flex: 1;
    max-width: 32rem;
}

.search-wrapper .search-icon[b-qddooxsjfi] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}

.search-input[b-qddooxsjfi] {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: none;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #e2e8f0;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.search-input[b-qddooxsjfi]::placeholder {
    color: #64748b;
}

.search-input:focus[b-qddooxsjfi] {
    outline: none;
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.2);
}

.top-bar-spacer[b-qddooxsjfi] {
    flex: 1;
}

.top-bar-actions[b-qddooxsjfi] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Notification & settings buttons */
.icon-btn[b-qddooxsjfi] {
    position: relative;
    padding: 0.5rem;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.icon-btn:hover[b-qddooxsjfi] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.notification-dot[b-qddooxsjfi] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 8px;
    height: 8px;
    background-color: #F4821F;
    border-radius: 50%;
    border: 2px solid #1E293B;
}

/* Header divider */
.header-divider[b-qddooxsjfi] {
    width: 1px;
    height: 2rem;
    background-color: #334155;
}

/* User greeting */
.user-greeting[b-qddooxsjfi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-greeting:hover[b-qddooxsjfi] {
    background: rgba(255, 255, 255, 0.03);
}

.greeting-text[b-qddooxsjfi] {
    text-align: right;
}

.greeting-name[b-qddooxsjfi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.2;
}

.greeting-role[b-qddooxsjfi] {
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    /* Backstop: never let a long role list widen the top bar */
    max-width: 20rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile avatar */
.profile-menu[b-qddooxsjfi] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.avatar-ring[b-qddooxsjfi] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #475569;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s;
    overflow: hidden;
}

.avatar-ring:hover[b-qddooxsjfi] {
    border-color: #0088CC;
}

.avatar-inner[b-qddooxsjfi] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1rem;
}

.chevron-icon[b-qddooxsjfi] {
    color: #94a3b8;
    font-size: 0.875rem;
}

/* Profile dropdown */
.profile-dropdown[b-qddooxsjfi] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-width: 10rem;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 20;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.profile-menu:focus-within .profile-dropdown[b-qddooxsjfi],
.profile-menu:hover .profile-dropdown[b-qddooxsjfi] {
    display: flex;
}

.profile-dropdown[b-qddooxsjfi]  .dropdown-item {
    color: #cbd5e1;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.profile-dropdown[b-qddooxsjfi]  .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

.profile-dropdown[b-qddooxsjfi]  .signout-item,
.profile-dropdown[b-qddooxsjfi]  .signout-item .btn-link {
    color: #ef4444;
}

.logout-form[b-qddooxsjfi] {
    display: inline-flex;
    align-items: center;
}

.profile-dropdown[b-qddooxsjfi]  .btn-link {
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
}

/* --- Content --- */
.content[b-qddooxsjfi] {
    flex: 1;
    padding: 2rem 2rem;
    background: #0F172A;
    overflow-y: auto;
}

/* --- Footer --- */
.footer-bar[b-qddooxsjfi] {
    padding: 1rem 0;
    text-align: center;
    background: rgba(30, 41, 59, 0.3);
    border-top: 1px solid #334155;
    flex-shrink: 0;
}

.footer-copy[b-qddooxsjfi] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .sidebar[b-qddooxsjfi] {
        width: 80px;
    }
    .sidebar-logo-img[b-qddooxsjfi] { height: 56px; }
    .sidebar-link-label[b-qddooxsjfi] { display: none; }
    .sidebar-link[b-qddooxsjfi] { justify-content: center; padding: 0.75rem; }
    .sidebar-footer-mark[b-qddooxsjfi] { display: none; }
    .top-bar[b-qddooxsjfi] { padding: 0 1.5rem; }
    .content[b-qddooxsjfi] { padding: 1.5rem; }
}

@media (max-width: 768px) {
    .layout-shell[b-qddooxsjfi] {
        flex-direction: column;
    }
    .sidebar[b-qddooxsjfi] {
        width: 100%;
        height: auto;
        flex-direction: row;
        position: static;
        border-right: none;
        border-bottom: 1px solid #334155;
    }
    .sidebar-inner[b-qddooxsjfi] {
        flex-direction: row;
        align-items: center;
    }
    .sidebar-bottom[b-qddooxsjfi] { display: none; }
    .sidebar-footer-mark[b-qddooxsjfi] { display: none; }
    .header-divider[b-qddooxsjfi] { display: none; }
    .greeting-text[b-qddooxsjfi] { display: none; }
    .top-bar[b-qddooxsjfi] { height: auto; padding: 0.75rem 1rem; }
    .search-wrapper[b-qddooxsjfi] { max-width: none; }
}

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

#blazor-error-ui .dismiss[b-qddooxsjfi] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* === ServicePoint Dark Slate Sidebar Navigation === */
.sidebar-nav[b-jaltr3so9l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
}

.sidebar-nav[b-jaltr3so9l]  .nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.15s;
}

.sidebar-nav[b-jaltr3so9l]  .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.sidebar-nav[b-jaltr3so9l]  .nav-item.active {
    background-color: rgba(0, 136, 204, 0.15);
    color: #0088CC;
    font-weight: 600;
    border-right: 3px solid #0088CC;
}

.sidebar-nav[b-jaltr3so9l]  .nav-item i {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.sidebar-nav[b-jaltr3so9l]  .nav-item-label {
    white-space: nowrap;
}

/* Badge on nav items */
.sidebar-nav[b-jaltr3so9l]  .nav-item-with-badge {
    position: relative;
}

.sidebar-nav[b-jaltr3so9l]  .nav-badge {
    margin-left: auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #ef4444;
    border-radius: 9999px;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Section divider */
.nav-section-divider[b-jaltr3so9l] {
    padding: 1rem 0.75rem 0.5rem;
}

.nav-section-label[b-jaltr3so9l] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .sidebar-nav[b-jaltr3so9l]  .nav-item-label {
        display: none;
    }
    .sidebar-nav[b-jaltr3so9l]  .nav-item {
        justify-content: center;
        padding: 0.625rem;
    }
    .sidebar-nav[b-jaltr3so9l] {
        padding: 0 0.5rem;
    }
    .nav-section-divider[b-jaltr3so9l] {
        display: none;
    }
}

@media (max-width: 768px) {
    .sidebar-nav[b-jaltr3so9l] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
    }
    .sidebar-nav[b-jaltr3so9l]  .nav-item {
        flex: 0 0 auto;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.4rem;
        border-right: none;
    }
    .sidebar-nav[b-jaltr3so9l]  .nav-item.active {
        border-right: none;
        border-bottom: 2px solid #0088CC;
    }
    .sidebar-nav[b-jaltr3so9l]  .nav-item i {
        font-size: 1rem;
    }
    .nav-section-divider[b-jaltr3so9l] {
        display: none;
    }
}
/* /Components/LoadingScrim.razor.rz.scp.css */
/* Fullscreen Loading Scrim — reusable overlay with spinner and text */
.loading-scrim[b-eefqy5w31p] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
}

.spinner-container[b-eefqy5w31p] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-text[b-eefqy5w31p] {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.loading-subtext[b-eefqy5w31p] {
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.ring-spinner[b-eefqy5w31p] {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #0088CC;
    border-radius: 50%;
    animation: spin-b-eefqy5w31p 0.8s linear infinite;
}

@keyframes spin-b-eefqy5w31p {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/AccountDetail.razor.rz.scp.css */
/* === ServicePoint Account Detail — Dark Slate === */

.acct-detail-content[b-sffg1qlmfx] {
    width: 100%;
}

/* --- Header --- */
.acct-header[b-sffg1qlmfx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.acct-breadcrumb[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.acct-breadcrumb-label[b-sffg1qlmfx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #0088CC;
}

.acct-breadcrumb-sep[b-sffg1qlmfx] {
    width: 2rem;
    height: 1px;
    background: #334155;
}

.acct-breadcrumb-link[b-sffg1qlmfx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
}

.acct-breadcrumb-link:hover[b-sffg1qlmfx] {
    color: #0088CC;
}

.acct-customer-name[b-sffg1qlmfx] {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
}

.acct-subtitle[b-sffg1qlmfx] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.25rem;
}

.acct-desc[b-sffg1qlmfx] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0;
    max-width: 28rem;
}

.btn-acct-outline[b-sffg1qlmfx] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #1E293B;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-acct-outline:hover[b-sffg1qlmfx] {
    background: #334155;
}

.btn-acct-primary[b-sffg1qlmfx] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: #0088CC;
    border: none;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.2);
    transition: background-color 0.2s;
}

.btn-acct-primary:hover[b-sffg1qlmfx] {
    background: #0077b3;
}

/* --- Overview Grid (Balance + Bento) --- */
.overview-grid[b-sffg1qlmfx] {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* --- Balance Hero Card --- */
.balance-hero[b-sffg1qlmfx] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}


.balance-label[b-sffg1qlmfx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    margin: 0 0 0.75rem;
}

.balance-amount[b-sffg1qlmfx] {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    margin-bottom: 2.5rem;
}

.balance-dollars[b-sffg1qlmfx] {
    font-size: 2.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}

.balance-cents[b-sffg1qlmfx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0088CC;
}

/* Balance owed exceeds the credit limit */
.overlimit-pill[b-sffg1qlmfx] {
    margin-left: 0.625rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    vertical-align: 2px;
}

/* Credit balance (customer holds own funds): green, unsigned, CR-tagged */
.balance-dollars.credit[b-sffg1qlmfx],
.balance-cents.credit[b-sffg1qlmfx] {
    color: #34d399;
}

.balance-cr-tag[b-sffg1qlmfx] {
    margin-left: 0.5rem;
    color: #34d399;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    vertical-align: 0.9rem;
}

.balance-breakdown[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.breakdown-label[b-sffg1qlmfx] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.breakdown-value[b-sffg1qlmfx] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
}

.breakdown-cents[b-sffg1qlmfx] {
    font-size: 0.75em;
    font-weight: 700;
    color: #0088CC;
}

.breakdown-divider[b-sffg1qlmfx] {
    width: 1px;
    height: 2.5rem;
    background: #334155;
}

/* --- Detail Bento Grid --- */
.detail-bento[b-sffg1qlmfx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.bento-card[b-sffg1qlmfx] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.bento-card-art[b-sffg1qlmfx] {
    background-image: var(--card-bg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 140px;
}

.bento-art-content[b-sffg1qlmfx] {
    margin-top: auto;
    padding-top: 1rem;
}

.bento-card-status[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bento-label[b-sffg1qlmfx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 0.5rem;
}

.bento-value[b-sffg1qlmfx] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

/* --- Status Pills (shared) --- */
.status-pill[b-sffg1qlmfx] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-pill.active[b-sffg1qlmfx] {
    background: rgba(0, 150, 57, 0.1);
    color: #009639;
}

.status-pill.inactive[b-sffg1qlmfx] {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}

/* BPC hot card status 18 — awaiting personalization/embossing */
.status-pill.print-required[b-sffg1qlmfx] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.status-pill.print-required .status-dot-sm[b-sffg1qlmfx] {
    background: #f59e0b;
}

.status-dot-sm[b-sffg1qlmfx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Cards Section --- */
.cards-section[b-sffg1qlmfx] {
    margin-bottom: 2rem;
}

.section-header[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.section-title[b-sffg1qlmfx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.count-badge[b-sffg1qlmfx] {
    padding: 0.1875rem 0.5rem;
    background: #334155;
    color: #94a3b8;
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: 0.25rem;
}

.table-card[b-sffg1qlmfx] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
}

.acct-table[b-sffg1qlmfx] {
    width: 100%;
    text-align: left;
}

.acct-table thead th[b-sffg1qlmfx] {
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.acct-table tbody td[b-sffg1qlmfx] {
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.2);
    vertical-align: middle;
    font-size: 0.875rem;
}

.acct-table tbody tr:last-child td[b-sffg1qlmfx] {
    border-bottom: none;
}

.acct-table tbody tr:hover[b-sffg1qlmfx] {
    background: rgba(51, 65, 85, 0.2);
    transition: background-color 0.15s;
}

.card-number-display[b-sffg1qlmfx] {
    font-weight: 600;
    color: #f1f5f9;
}

.type-chip[b-sffg1qlmfx] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    background: #334155;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-manage[b-sffg1qlmfx] {
    background: none;
    border: none;
    color: #0088CC;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    padding: 0;
    transition: text-decoration 0.15s;
}

.btn-manage:hover[b-sffg1qlmfx] {
    text-decoration: underline;
}

/* --- Expandable Ledger Sections --- */
.ledger-section[b-sffg1qlmfx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.expandable-card[b-sffg1qlmfx] {
    background: #1E293B;
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.expandable-card:hover[b-sffg1qlmfx] {
    border-color: rgba(0, 136, 204, 0.3);
}

.expandable-card-header[b-sffg1qlmfx] {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.expandable-title[b-sffg1qlmfx] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.section-badge[b-sffg1qlmfx] {
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.section-badge.primary[b-sffg1qlmfx] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.section-badge.muted[b-sffg1qlmfx] {
    background: #334155;
    color: #94a3b8;
}

.section-badge.warning[b-sffg1qlmfx] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.expandable-chevron[b-sffg1qlmfx] {
    color: #64748b;
    transition: color 0.15s;
}

.expandable-card:hover .expandable-chevron[b-sffg1qlmfx] {
    color: #0088CC;
}

.expandable-body[b-sffg1qlmfx] {
    border-top: 1px solid rgba(51, 65, 85, 0.3);
    padding: 0 1.5rem;
}

/* --- Cardholder cell (Associated Cards) --- */
.holder-cell[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.holder-name[b-sffg1qlmfx] {
    font-weight: 600;
    color: #f1f5f9;
}

.holder-pill[b-sffg1qlmfx] {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.holder-pill.primary[b-sffg1qlmfx] {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.08);
}

.holder-pill.secondary[b-sffg1qlmfx] {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.08);
}

/* --- Transactions date-range bar --- */
.txn-range-bar[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}

.txn-range-presets[b-sffg1qlmfx] {
    display: flex;
    gap: 0.375rem;
}

.txn-range-preset[b-sffg1qlmfx] {
    background: none;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 999px;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3125rem 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.txn-range-preset:hover[b-sffg1qlmfx] {
    border-color: rgba(0, 136, 204, 0.5);
    color: #e2e8f0;
}

.txn-range-preset.on[b-sffg1qlmfx] {
    background: rgba(0, 136, 204, 0.12);
    border-color: #0088CC;
    color: #38bdf8;
}

.txn-range-custom[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.txn-range-custom label[b-sffg1qlmfx] {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.txn-range-date[b-sffg1qlmfx] {
    background: #0f172a;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 0.375rem;
    color: #e2e8f0;
    font-size: 0.8125rem;
    padding: 0.3125rem 0.5rem;
    color-scheme: dark;
}

.txn-range-date:focus-visible[b-sffg1qlmfx] {
    outline: none;
    border-color: #0088CC;
}

.txn-range-apply[b-sffg1qlmfx] {
    padding: 0.3125rem 0.875rem;
    font-size: 0.8125rem;
}

@media (max-width: 900px) {
    .txn-range-bar[b-sffg1qlmfx] {
        flex-direction: column;
        align-items: stretch;
    }

    .txn-range-custom[b-sffg1qlmfx] {
        flex-wrap: wrap;
    }
}

/* --- Pending Account Actions --- */
.pending-actions-section[b-sffg1qlmfx] {
    margin-bottom: 2rem;
}

.pending-actions-header[b-sffg1qlmfx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.header-line[b-sffg1qlmfx] {
    height: 1px;
    flex: 1;
    background: #334155;
}

.pending-actions-grid[b-sffg1qlmfx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pending-action-card[b-sffg1qlmfx] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border-left-width: 4px;
}

.pending-action-card.warning-accent[b-sffg1qlmfx] {
    border-left-color: #f59e0b;
}

.pending-action-card.primary-accent[b-sffg1qlmfx] {
    border-left-color: #0088CC;
}

.pending-action-body[b-sffg1qlmfx] {
    /* layout handled by content */
}

.pending-action-icon[b-sffg1qlmfx] {
    font-size: 1.25rem;
}

.pending-action-icon.warning[b-sffg1qlmfx] {
    color: #f59e0b;
}

.pending-action-icon.primary[b-sffg1qlmfx] {
    color: #0088CC;
}

.pending-action-title[b-sffg1qlmfx] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
}

.pending-action-label[b-sffg1qlmfx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin: 0 0 0.25rem;
}

.pending-action-value[b-sffg1qlmfx] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.75rem;
}

.pending-action-status[b-sffg1qlmfx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f1f5f9;
}

.status-pulse[b-sffg1qlmfx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-pulse.warning[b-sffg1qlmfx] {
    background: #f59e0b;
}

.status-pulse.primary[b-sffg1qlmfx] {
    background: #0088CC;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .overview-grid[b-sffg1qlmfx] {
        grid-template-columns: 1fr;
    }
    .pending-actions-grid[b-sffg1qlmfx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .detail-bento[b-sffg1qlmfx] {
        grid-template-columns: 1fr;
    }
    .acct-header[b-sffg1qlmfx] {
        flex-direction: column;
    }
    .balance-breakdown[b-sffg1qlmfx] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    .breakdown-divider[b-sffg1qlmfx] {
        width: 100%;
        height: 1px;
    }
    .acct-table thead th[b-sffg1qlmfx],
    .acct-table tbody td[b-sffg1qlmfx] {
        padding: 0.75rem 1rem;
    }
}

/* --- Inline section spinner --- */
.inline-spinner[b-sffg1qlmfx] {
    width: 24px;
    height: 24px;
    border: 3px solid #334155;
    border-top-color: #0088CC;
    border-radius: 50%;
    animation: inline-spin-b-sffg1qlmfx 0.8s linear infinite;
    margin: 0 auto;
}

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

/* --- Transaction amount colours --- */
.txn-amount-credit[b-sffg1qlmfx] {
    color: #22c55e;
}

.txn-amount-hold[b-sffg1qlmfx] {
    color: #f59e0b;
}

/* DR/CR marker — sits one space behind the amount and inherits its colour, so a credit
   line reads green across both. */
.txn-impact[b-sffg1qlmfx] {
    margin-left: 0.35em;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* --- Credit limit form --- */
.credit-limit-form[b-sffg1qlmfx] {
    border-top: 1px solid #1e293b;
    padding-top: 0.75rem;
}

.credit-limit-input[b-sffg1qlmfx] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #f1f5f9;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    width: 140px;
    outline: none;
    transition: border-color 0.2s;
}

.credit-limit-input:focus[b-sffg1qlmfx] {
    border-color: #0088CC;
}

/* --- Credit limit success banner --- */
.credit-limit-success[b-sffg1qlmfx] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #22c55e;
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- Add New Card modal (new-customer idiom: icon tiles, callouts, grouped form) --- */
.entity-card[b-sffg1qlmfx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.5rem;
    border: 2px solid #334155;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.entity-card:hover[b-sffg1qlmfx] {
    border-color: rgba(0, 136, 204, 0.4);
}

.entity-card.selected[b-sffg1qlmfx] {
    border-color: #0088CC;
    background: rgba(0, 136, 204, 0.05);
}

.entity-icon[b-sffg1qlmfx] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.entity-card:hover .entity-icon[b-sffg1qlmfx] {
    transform: scale(1.1);
}

.entity-icon.primary-card[b-sffg1qlmfx] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.entity-icon.secondary-card[b-sffg1qlmfx] {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.entity-card.selected .entity-icon.secondary-card[b-sffg1qlmfx] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.info-callout[b-sffg1qlmfx] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 136, 204, 0.05);
    border: 1px solid rgba(0, 136, 204, 0.2);
    border-radius: 0.5rem;
}

.ac-section[b-sffg1qlmfx] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0088CC;
    border-bottom: 1px solid #334155;
    padding-bottom: 0.35rem;
    margin: 0 0 0.75rem;
}

.ac-label[b-sffg1qlmfx] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 0.3rem;
}

.ac-input[b-sffg1qlmfx] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.ac-input:focus[b-sffg1qlmfx] {
    outline: none;
    border-color: #0088CC;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
}

.ac-input[b-sffg1qlmfx]::placeholder {
    color: #475569;
}

select.ac-input option[b-sffg1qlmfx] {
    background: #0f172a;
    color: #f1f5f9;
}

/* --- Embossing-line editor (Add New Card) --- */
.ac-emboss-input[b-sffg1qlmfx] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.ac-emboss-hint[b-sffg1qlmfx] {
    font-size: 0.7rem;
    color: #64748b;
}

.ac-emboss-count[b-sffg1qlmfx] {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
}

.ac-emboss-count.over[b-sffg1qlmfx] {
    color: #f87171;
    font-weight: 700;
}

.ac-link-btn[b-sffg1qlmfx] {
    padding: 0;
    background: none;
    border: none;
    font-size: 0.7rem;
    color: #0088CC;
    text-decoration: underline;
    cursor: pointer;
}

.ac-link-btn:hover[b-sffg1qlmfx] {
    color: #38bdf8;
}
/* /Components/Pages/AccountStatements.razor.rz.scp.css */
/* Statements — month-pill timeline over the archive; the statement itself renders as PAPER
   (light document on the dark portal): it is an artifact, not a dashboard. */

.stm-content[b-u04lrpwifp] {
    padding: 2rem;
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.stm-back[b-u04lrpwifp] {
    align-self: flex-start;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.stm-back:hover[b-u04lrpwifp],
.stm-back:focus-visible[b-u04lrpwifp] {
    color: #e2e8f0;
}

.stm-title[b-u04lrpwifp] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.stm-subtitle[b-u04lrpwifp] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.stm-acct[b-u04lrpwifp] {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.stm-card[b-u04lrpwifp] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
}

.stm-empty[b-u04lrpwifp] {
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
}

/* ── Month pills ── */
.stm-pills[b-u04lrpwifp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stm-pill[b-u04lrpwifp] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.4375rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.stm-pill:hover:not(.on)[b-u04lrpwifp],
.stm-pill:focus-visible[b-u04lrpwifp] {
    border-color: #38bdf8;
    color: #e2e8f0;
    outline: none;
}

.stm-pill.on[b-u04lrpwifp] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

.stm-pill.older[b-u04lrpwifp] {
    background: rgba(100, 116, 139, 0.25);
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.5);
}

.stm-pill.older.on[b-u04lrpwifp] {
    background: #64748b;
    border-color: #64748b;
    color: #f8fafc;
}

.stm-older-wrap[b-u04lrpwifp] {
    position: relative;
}

.stm-older-menu[b-u04lrpwifp] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 40;
    min-width: 13rem;
    max-height: 18rem;
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 0.75rem;
    padding: 0.375rem;
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.5);
}

.stm-older-year[b-u04lrpwifp] {
    position: sticky;
    top: 0;
    background: #1e293b;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.4375rem 0.75rem 0.25rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    margin-bottom: 0.125rem;
}

.stm-older-year:not(:first-child)[b-u04lrpwifp] {
    margin-top: 0.375rem;
}

.stm-older-item[b-u04lrpwifp] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.5rem;
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4375rem 0.75rem;
    cursor: pointer;
}

.stm-older-item:hover[b-u04lrpwifp],
.stm-older-item:focus-visible[b-u04lrpwifp] {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    outline: none;
}

.stm-older-item.on[b-u04lrpwifp] {
    color: #38bdf8;
    font-weight: 700;
}

/* ── The statement document (paper) ── */
.stm-paper[b-u04lrpwifp] {
    background: #fbfbf7;
    color: #1a2233;
    border-radius: 0.5rem;
    box-shadow: 0 16px 48px rgba(2, 6, 23, 0.55);
    padding: 2rem 2.25rem 2.25rem;
}

.stm-paper-head[b-u04lrpwifp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 2px solid #0088CC;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.stm-paper-brand[b-u04lrpwifp] {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #0088CC;
}

.stm-paper-month[b-u04lrpwifp] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #101828;
    margin: 0.25rem 0 0.125rem;
    letter-spacing: -0.01em;
}

.stm-paper-sub[b-u04lrpwifp] {
    font-size: 0.75rem;
    color: #5b6472;
    font-variant-numeric: tabular-nums;
}

.stm-paper-actions[b-u04lrpwifp] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.stm-doc-btn[b-u04lrpwifp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.78125rem;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    border: 1px solid #c4ccd8;
    border-radius: 0.5rem;
    padding: 0.4375rem 0.875rem;
    cursor: pointer;
}

.stm-doc-btn:hover:not(:disabled)[b-u04lrpwifp],
.stm-doc-btn:focus-visible[b-u04lrpwifp] {
    border-color: #0088CC;
    color: #0088CC;
    outline: none;
}

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

/* summary grid */
.stm-summary[b-u04lrpwifp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.stm-sum-cell[b-u04lrpwifp] {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    border-bottom: 1px solid #e4e7ec;
    padding-bottom: 0.4375rem;
}

.stm-sum-label[b-u04lrpwifp] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7b8494;
}

.stm-sum-value[b-u04lrpwifp] {
    font-size: 1rem;
    font-weight: 700;
    color: #101828;
    font-variant-numeric: tabular-nums;
}

.stm-sum-cell.closing .stm-sum-value[b-u04lrpwifp] {
    color: #0088CC;
    font-size: 1.125rem;
}

.stm-sum-cell.due .stm-sum-value[b-u04lrpwifp] {
    color: #b54708;
}

/* transaction lines */
.stm-no-lines[b-u04lrpwifp] {
    color: #5b6472;
    font-size: 0.875rem;
    margin: 0;
}

.stm-lines[b-u04lrpwifp] {
    width: 100%;
    border-collapse: collapse;
}

.stm-lines th[b-u04lrpwifp] {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7b8494;
    text-align: left;
    padding: 0.4375rem 0.5rem;
    border-bottom: 1.5px solid #101828;
    white-space: nowrap;
}

.stm-lines td[b-u04lrpwifp] {
    font-size: 0.8125rem;
    color: #1a2233;
    padding: 0.4375rem 0.5rem;
    border-bottom: 1px solid #e9ecf1;
    vertical-align: top;
}

.stm-lines .num[b-u04lrpwifp] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stm-lines th.num[b-u04lrpwifp],
.stm-lines td.num:last-child[b-u04lrpwifp] {
    text-align: right;
}

.stm-lines td.cr[b-u04lrpwifp] {
    color: #067647;
}

.stm-src[b-u04lrpwifp] {
    color: #7b8494;
    font-size: 0.71875rem;
    margin-left: 0.375rem;
}

/* Synthesized-record marker (TranSrc = S) */
.stm-synth[b-u04lrpwifp] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0 0.3125rem;
    border: 1px solid #cbd2dc;
    border-radius: 3px;
    color: #7b8494;
    font-size: 0.65625rem;
    font-weight: 600;
    line-height: 1.15rem;
    vertical-align: 1px;
    cursor: help;
}

/* ── Email modal ── */
.stm-modal-backdrop[b-u04lrpwifp] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
}

.stm-modal[b-u04lrpwifp] {
    width: min(28rem, calc(100vw - 2rem));
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 1rem;
    padding: 1.5rem;
}

.stm-modal-title[b-u04lrpwifp] {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.375rem;
}

.stm-modal-desc[b-u04lrpwifp] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.stm-modal-src[b-u04lrpwifp] {
    color: #64748b;
}

.stm-modal-actions[b-u04lrpwifp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.stm-modal-btn[b-u04lrpwifp] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
}

.stm-modal-btn.primary[b-u04lrpwifp] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

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

.stm-modal-btn:focus-visible[b-u04lrpwifp] {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .stm-content[b-u04lrpwifp] {
        padding: 1rem;
    }

    .stm-paper[b-u04lrpwifp] {
        padding: 1.25rem;
    }

    .stm-summary[b-u04lrpwifp] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/ActivityReports.razor.rz.scp.css */
/* Activity Reports — quiet operational report surface in the portal's dark system. */

.rpt-content[b-jui1go7jfg] {
    padding: 2rem;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rpt-title[b-jui1go7jfg] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.rpt-subtitle[b-jui1go7jfg] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

/* ── Header actions ── */
.rpt-header[b-jui1go7jfg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.rpt-header-actions[b-jui1go7jfg] {
    display: flex;
    gap: 0.75rem;
}

.rpt-action[b-jui1go7jfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.35);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.rpt-action:hover:not(:disabled)[b-jui1go7jfg],
.rpt-action:focus-visible[b-jui1go7jfg] {
    background: rgba(51, 65, 85, 0.6);
    border-color: #38bdf8;
    outline: none;
}

.rpt-action:disabled[b-jui1go7jfg] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Print-only header (hidden on screen) */
.rpt-print-header[b-jui1go7jfg] {
    display: none;
}

/* ── Controls ── */
.rpt-controls[b-jui1go7jfg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.rpt-tabs[b-jui1go7jfg] {
    display: inline-flex;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 0.625rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.5);
}

.rpt-tab[b-jui1go7jfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 1.125rem;
    cursor: pointer;
}

.rpt-tab + .rpt-tab[b-jui1go7jfg] {
    border-left: 1px solid rgba(51, 65, 85, 0.6);
}

.rpt-tab.on[b-jui1go7jfg] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.rpt-tab:focus-visible[b-jui1go7jfg] {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}

.rpt-range[b-jui1go7jfg] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.rpt-range-label[b-jui1go7jfg] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.rpt-range-input[b-jui1go7jfg] {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.4375rem 0.75rem;
    color-scheme: dark;
}

.rpt-range-input:focus-visible[b-jui1go7jfg] {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

.rpt-run[b-jui1go7jfg] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1.125rem;
    border-radius: 0.5rem;
    border: 1px solid #38bdf8;
    background: #38bdf8;
    color: #0f172a;
    cursor: pointer;
}

.rpt-run:hover:not(:disabled)[b-jui1go7jfg],
.rpt-run:focus-visible[b-jui1go7jfg] {
    background: #7dd3fc;
    border-color: #7dd3fc;
    outline: none;
}

.rpt-run:disabled[b-jui1go7jfg] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Cards / chips ── */
.rpt-card[b-jui1go7jfg] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
}

.rpt-empty[b-jui1go7jfg] {
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
}

.rpt-stats[b-jui1go7jfg] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.rpt-chip[b-jui1go7jfg] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.35);
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.rpt-chip.ok[b-jui1go7jfg] { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.rpt-chip.warn[b-jui1go7jfg] { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }
.rpt-chip.err[b-jui1go7jfg] { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.rpt-chip.muted[b-jui1go7jfg] { color: #94a3b8; }

.rpt-range-note[b-jui1go7jfg] {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: auto;
}

/* ── Table ── */
.rpt-table-card[b-jui1go7jfg] {
    padding: 0.5rem 1rem 1rem;
}

.rpt-table[b-jui1go7jfg] {
    width: 100%;
    border-collapse: collapse;
}

.rpt-table th[b-jui1go7jfg] {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    text-align: left;
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    white-space: nowrap;
}

.rpt-table td[b-jui1go7jfg] {
    font-size: 0.8125rem;
    color: #e2e8f0;
    padding: 0.5625rem 0.75rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.25);
    vertical-align: middle;
}

.rpt-table tbody tr:hover[b-jui1go7jfg] {
    background: rgba(51, 65, 85, 0.2);
}

.rpt-num[b-jui1go7jfg] {
    font-variant-numeric: tabular-nums;
}

.rpt-right[b-jui1go7jfg] {
    text-align: right;
}

.rpt-result[b-jui1go7jfg] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.rpt-pill[b-jui1go7jfg] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.rpt-pill.ok[b-jui1go7jfg] { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.rpt-pill.warn[b-jui1go7jfg] { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }
.rpt-pill.err[b-jui1go7jfg] { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.rpt-pill.info[b-jui1go7jfg] { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); }
.rpt-pill.muted[b-jui1go7jfg] { color: #94a3b8; border-color: rgba(100, 116, 139, 0.35); }

@media (max-width: 768px) {
    .rpt-content[b-jui1go7jfg] {
        padding: 1rem;
    }

    .rpt-controls[b-jui1go7jfg] {
        flex-direction: column;
        align-items: stretch;
    }

    .rpt-range[b-jui1go7jfg] {
        flex-wrap: wrap;
    }
}

/* ── Print: ink-on-paper report, controls and chrome suppressed ── */
@page {
    size: A4 landscape;
    margin: 12mm;
}

@media print {
    .rpt-header[b-jui1go7jfg],
    .rpt-controls[b-jui1go7jfg] {
        display: none;
    }

    /* On paper there is no horizontal scroll — the table must lay out full-width. */
    .table-responsive[b-jui1go7jfg] {
        overflow: visible !important;
    }

    .rpt-table[b-jui1go7jfg] {
        width: 100%;
        table-layout: auto;
    }

    .rpt-table th[b-jui1go7jfg] {
        font-size: 6.5pt;
        padding: 4pt 4pt 3pt;
    }

    .rpt-table td[b-jui1go7jfg] {
        font-size: 7.5pt;
        padding: 3pt 4pt;
        word-break: break-word;
    }

    .rpt-pill[b-jui1go7jfg] {
        font-size: 6.5pt;
        padding: 1pt 4pt;
    }

    .rpt-content[b-jui1go7jfg] {
        padding: 0;
        max-width: none;
        gap: 0.75rem;
    }

    .rpt-print-header[b-jui1go7jfg] {
        display: block;
        border-bottom: 2px solid #0088CC;
        padding-bottom: 0.375rem;
    }

    .rpt-print-title[b-jui1go7jfg] {
        font-size: 16pt;
        font-weight: 800;
        color: #000;
    }

    .rpt-print-meta[b-jui1go7jfg] {
        font-size: 8pt;
        color: #444;
    }

    .rpt-card[b-jui1go7jfg],
    .rpt-table-card[b-jui1go7jfg] {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }

    .rpt-stats[b-jui1go7jfg] {
        gap: 0.375rem;
    }

    .rpt-chip[b-jui1go7jfg],
    .rpt-chip.ok[b-jui1go7jfg],
    .rpt-chip.warn[b-jui1go7jfg],
    .rpt-chip.err[b-jui1go7jfg],
    .rpt-chip.muted[b-jui1go7jfg] {
        color: #000;
        background: none;
        border-color: #999;
    }

    .rpt-range-note[b-jui1go7jfg] {
        color: #444;
    }

    .rpt-table th[b-jui1go7jfg] {
        color: #000;
        border-bottom-color: #000;
    }

    .rpt-table td[b-jui1go7jfg] {
        color: #000;
        border-bottom-color: #ccc;
    }

    .rpt-table tbody tr:hover[b-jui1go7jfg] {
        background: none;
    }

    .rpt-pill[b-jui1go7jfg],
    .rpt-pill.ok[b-jui1go7jfg],
    .rpt-pill.warn[b-jui1go7jfg],
    .rpt-pill.err[b-jui1go7jfg],
    .rpt-pill.info[b-jui1go7jfg],
    .rpt-pill.muted[b-jui1go7jfg] {
        color: #000;
        background: none;
        border-color: #999;
    }

    .rpt-result[b-jui1go7jfg] {
        color: #444;
    }
}
/* /Components/Pages/AdCampaignView.razor.rz.scp.css */
/* Campaign drill-down — shares the advertising section's quiet card language. */

.advd-content[b-eopjbk40b7] {
    padding: 2rem;
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.advd-back[b-eopjbk40b7] {
    align-self: flex-start;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.advd-back:hover[b-eopjbk40b7],
.advd-back:focus-visible[b-eopjbk40b7] {
    color: #e2e8f0;
}

.advd-hero[b-eopjbk40b7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}

.advd-eyebrow[b-eopjbk40b7] {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin: 0 0 0.25rem;
}

.advd-title[b-eopjbk40b7] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.advd-dates[b-eopjbk40b7] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.375rem 0 0;
    font-variant-numeric: tabular-nums;
}

.advd-pill[b-eopjbk40b7] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.advd-pill.live[b-eopjbk40b7] { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.advd-pill.booked[b-eopjbk40b7] { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); }
.advd-pill.done[b-eopjbk40b7] { color: #94a3b8; border-color: rgba(100, 116, 139, 0.35); }

.advd-card[b-eopjbk40b7] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}

.advd-empty[b-eopjbk40b7] {
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
    padding: 3rem 2rem;
}

.advd-card-header[b-eopjbk40b7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.advd-card-title[b-eopjbk40b7] {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin: 0;
}

.advd-card-hint[b-eopjbk40b7] {
    font-size: 0.75rem;
    color: #64748b;
}

.advd-empty-line[b-eopjbk40b7] {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}

.advd-ad-list[b-eopjbk40b7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.advd-ad-list li + li .advd-ad-row[b-eopjbk40b7] {
    border-top: 1px solid rgba(51, 65, 85, 0.3);
}

.advd-ad-row[b-eopjbk40b7] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.advd-ad-row:hover .advd-ad-name[b-eopjbk40b7],
.advd-ad-row:focus-visible .advd-ad-name[b-eopjbk40b7] {
    color: #38bdf8;
}

.advd-ad-row:focus-visible[b-eopjbk40b7] {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
    border-radius: 0.5rem;
}

.advd-ad-state[b-eopjbk40b7] {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.advd-ad-state.live[b-eopjbk40b7] { background: #34d399; }
.advd-ad-state.booked[b-eopjbk40b7] { background: #38bdf8; }
.advd-ad-state.done[b-eopjbk40b7] { background: #64748b; }

.advd-ad-main[b-eopjbk40b7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.advd-ad-name[b-eopjbk40b7] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.advd-ad-meta[b-eopjbk40b7] {
    font-size: 0.75rem;
    color: #64748b;
}

.advd-ad-dates[b-eopjbk40b7] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.advd-ad-chevron[b-eopjbk40b7] {
    color: #64748b;
    font-size: 1.125rem;
}

.advd-hero-side[b-eopjbk40b7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.advd-pill.off[b-eopjbk40b7] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

/* ── Actions ── */
.advd-actions[b-eopjbk40b7] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.advd-action-btn[b-eopjbk40b7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.35);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.advd-action-btn:hover[b-eopjbk40b7],
.advd-action-btn:focus-visible[b-eopjbk40b7] {
    background: rgba(51, 65, 85, 0.6);
    border-color: #38bdf8;
    outline: none;
}

.advd-action-btn.primary[b-eopjbk40b7] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

.advd-action-btn.primary:hover[b-eopjbk40b7],
.advd-action-btn.primary:focus-visible[b-eopjbk40b7] {
    background: #7dd3fc;
    border-color: #7dd3fc;
}

.advd-action-btn.danger[b-eopjbk40b7] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
    background: transparent;
}

.advd-action-btn.danger:hover[b-eopjbk40b7],
.advd-action-btn.danger:focus-visible[b-eopjbk40b7] {
    background: rgba(248, 113, 113, 0.12);
    border-color: #f87171;
}

/* ── Modals ── */
.advd-modal-backdrop[b-eopjbk40b7] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
}

.advd-modal[b-eopjbk40b7] {
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 1rem;
    padding: 1.5rem;
}

.advd-modal.wide[b-eopjbk40b7] {
    width: min(34rem, calc(100vw - 2rem));
}

.advd-modal-title[b-eopjbk40b7] {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.375rem;
}

.advd-modal-desc[b-eopjbk40b7] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.advd-modal-label[b-eopjbk40b7] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 0.25rem;
}

/* Qualifier on a field label — same size, but unshouted, so it reads as a note rather than
   part of the field name. */
.advd-modal-hint[b-eopjbk40b7] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: #94a3b8;
}

.advd-modal-input[b-eopjbk40b7] {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.875rem;
    color-scheme: dark;
}

.advd-modal-input:focus-visible[b-eopjbk40b7] {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

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

.advd-modal-check[b-eopjbk40b7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    margin-bottom: 0.875rem;
    cursor: pointer;
}

.advd-modal-link[b-eopjbk40b7] {
    background: none;
    border: none;
    padding: 0;
    margin: -0.375rem 0 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    cursor: pointer;
    display: block;
}

.advd-modal-link:hover[b-eopjbk40b7],
.advd-modal-link:focus-visible[b-eopjbk40b7] {
    text-decoration: underline;
}

.advd-modal-error[b-eopjbk40b7] {
    font-size: 0.75rem;
    color: #f87171;
    margin: 0 0 0.75rem;
}

.advd-modal-actions[b-eopjbk40b7] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.advd-modal-btn[b-eopjbk40b7] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
}

.advd-modal-btn.primary[b-eopjbk40b7] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

.advd-modal-btn.danger[b-eopjbk40b7] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}

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

.advd-modal-btn:focus-visible[b-eopjbk40b7] {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .advd-content[b-eopjbk40b7] {
        padding: 1rem;
    }

    .advd-hero[b-eopjbk40b7],
    .advd-card[b-eopjbk40b7] {
        padding: 1.25rem;
    }

    .advd-ad-row[b-eopjbk40b7] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/AddEditCustomer.razor.rz.scp.css */
/* =====================================================
   AddEditCustomer Page — Scoped Styles
   ===================================================== */

.addedit-content[b-bo536plgb2] {
    padding: 0;
}

/* Breadcrumb */
.breadcrumb-nav a:hover[b-bo536plgb2] {
    color: var(--primary-color) !important;
}

/* Form section cards */
.form-section[b-bo536plgb2] {
    border-radius: 0.75rem;
}

.section-header[b-bo536plgb2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

/* Form labels — uppercase small muted */
.form-label-upper[b-bo536plgb2] {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

/* Dark-themed form inputs */
.form-control-dark[b-bo536plgb2],
.form-select-dark[b-bo536plgb2] {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-dark:focus[b-bo536plgb2],
.form-select-dark:focus[b-bo536plgb2] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.15);
    background: var(--input-bg);
    color: var(--text-color);
}

.form-control-dark[b-bo536plgb2]::placeholder {
    color: #64748b;
}

/* Classification toggle */
.classification-toggle[b-bo536plgb2] {
    display: flex;
    padding: 0.25rem;
    background: var(--input-bg);
    border-radius: 0.5rem;
    width: fit-content;
}

.classification-btn[b-bo536plgb2] {
    padding: 0.5rem 2rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.classification-btn:hover[b-bo536plgb2] {
    color: var(--text-color);
}

.classification-btn.active[b-bo536plgb2] {
    background: var(--card-bg);
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
}

/* Add buttons (link style) */
.btn-add[b-bo536plgb2] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-add:hover[b-bo536plgb2] {
    text-decoration: underline;
    color: var(--primary-color);
}

/* Delete icon button */
.btn-icon-delete[b-bo536plgb2] {
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

.btn-icon-delete:hover[b-bo536plgb2] {
    color: #ef4444;
}

/* Address block */
.address-block[b-bo536plgb2] {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
}

/* KYC callout */
.kyc-callout[b-bo536plgb2] {
    background: rgba(0, 136, 204, 0.05);
    border: 1px solid rgba(0, 136, 204, 0.2);
    border-radius: 0.75rem;
}

/* Footer */
.footer-actions[b-bo536plgb2] {
    border-top: 1px solid var(--card-border);
}

/* Alert styling (inherited from Customer page but scoped) */
.alert-danger[b-bo536plgb2] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    border-radius: 0.75rem;
}

.btn-close-white[b-bo536plgb2] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Form check input (checkbox) */
.form-check-input[b-bo536plgb2] {
    background-color: var(--input-bg);
    border-color: var(--card-border);
}

.form-check-input:checked[b-bo536plgb2] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus[b-bo536plgb2] {
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.25);
    border-color: var(--primary-color);
}
/* /Components/Pages/Advertising.razor.rz.scp.css */
/* Advertising schedule — broadcast-style campaign timeline in the portal's dark system. */

.adv-content[b-b1g5j1vbyo] {
    padding: 2rem;
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.adv-header[b-b1g5j1vbyo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.adv-title[b-b1g5j1vbyo] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.adv-subtitle[b-b1g5j1vbyo] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.adv-header-actions[b-b1g5j1vbyo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.adv-new-btn[b-b1g5j1vbyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    background: #38bdf8;
    border: 1px solid #38bdf8;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.adv-new-btn:hover[b-b1g5j1vbyo],
.adv-new-btn:focus-visible[b-b1g5j1vbyo] {
    background: #7dd3fc;
    border-color: #7dd3fc;
    outline: none;
}

/* ── Window picker ── */
.adv-window-picker[b-b1g5j1vbyo] {
    display: inline-flex;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 0.625rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.5);
}

.adv-window-btn[b-b1g5j1vbyo] {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
}

.adv-window-btn + .adv-window-btn[b-b1g5j1vbyo] {
    border-left: 1px solid rgba(51, 65, 85, 0.6);
}

.adv-window-btn.on[b-b1g5j1vbyo] {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.adv-window-btn:focus-visible[b-b1g5j1vbyo] {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}

/* ── Cards / chips ── */
.adv-card[b-b1g5j1vbyo] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
}

.adv-empty[b-b1g5j1vbyo] {
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
}

.adv-stats[b-b1g5j1vbyo] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.adv-chip[b-b1g5j1vbyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #94a3b8;
}

.adv-chip .dot[b-b1g5j1vbyo] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.adv-chip.live[b-b1g5j1vbyo] { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.adv-chip.live .dot[b-b1g5j1vbyo] { background: #34d399; }
.adv-chip.booked[b-b1g5j1vbyo] { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); }
.adv-chip.booked .dot[b-b1g5j1vbyo] { background: #38bdf8; }
.adv-chip.done[b-b1g5j1vbyo] { color: #94a3b8; border-color: rgba(100, 116, 139, 0.35); }
.adv-chip.done .dot[b-b1g5j1vbyo] { background: #64748b; }

.adv-chip-note[b-b1g5j1vbyo] {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: auto;
}

/* ── Gantt ── */
.adv-gantt-card[b-b1g5j1vbyo] {
    padding: 0.5rem 0 0.75rem;
    overflow: hidden;
}

.adv-gantt-scroll[b-b1g5j1vbyo] {
    overflow-x: auto;
    scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
}

.adv-gantt[b-b1g5j1vbyo] {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

.gantt-row[b-b1g5j1vbyo] {
    display: flex;
    align-items: stretch;
    border-top: 1px solid rgba(51, 65, 85, 0.25);
}

.gantt-axis-row[b-b1g5j1vbyo] {
    border-top: none;
}

.gantt-label[b-b1g5j1vbyo] {
    position: sticky;
    left: 0;
    z-index: 3;
    flex: 0 0 15rem;
    width: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.625rem 1rem;
    text-align: left;
    background: #1b2739;
    border: none;
    border-right: 1px solid rgba(51, 65, 85, 0.5);
    cursor: pointer;
}

.gantt-label:hover .g-camp-name[b-b1g5j1vbyo],
.gantt-label:focus-visible .g-camp-name[b-b1g5j1vbyo] {
    color: #38bdf8;
}

.gantt-label:focus-visible[b-b1g5j1vbyo] {
    outline: 2px solid #38bdf8;
    outline-offset: -2px;
}

.gantt-axis-label[b-b1g5j1vbyo] {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    justify-content: flex-end;
    cursor: default;
}

.g-camp-name[b-b1g5j1vbyo] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.2;
}

.g-camp-off[b-b1g5j1vbyo] {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    padding: 0.0625rem 0.375rem;
    margin-left: 0.375rem;
    vertical-align: middle;
}

.g-camp-dates[b-b1g5j1vbyo] {
    font-size: 0.6875rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.gantt-track[b-b1g5j1vbyo] {
    position: relative;
    min-height: 3rem;
    flex: 0 0 auto;
}

.gantt-axis[b-b1g5j1vbyo] {
    min-height: 2rem;
}

.g-tick[b-b1g5j1vbyo] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(51, 65, 85, 0.5);
}

.g-tick-label[b-b1g5j1vbyo] {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    white-space: nowrap;
}

.g-grid[b-b1g5j1vbyo] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(51, 65, 85, 0.22);
}

/* campaign window underlay */
.g-window[b-b1g5j1vbyo] {
    position: absolute;
    top: 0.4375rem;
    bottom: 0.4375rem;
    border-radius: 0.375rem;
    background: rgba(100, 116, 139, 0.12);
    border: 1px dashed rgba(100, 116, 139, 0.35);
}

/* ad segment bars */
.g-bar[b-b1g5j1vbyo] {
    position: absolute;
    top: 0.6875rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    border: 1px solid;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    transition: filter 120ms ease, transform 120ms ease;
}

.g-bar:hover[b-b1g5j1vbyo],
.g-bar:focus-visible[b-b1g5j1vbyo] {
    filter: brightness(1.25);
    z-index: 4;
}

.g-bar:focus-visible[b-b1g5j1vbyo] {
    outline: 2px solid #f1f5f9;
    outline-offset: 1px;
}

.g-bar.live[b-b1g5j1vbyo] { background: rgba(52, 211, 153, 0.22); border-color: rgba(52, 211, 153, 0.65); }
.g-bar.live .g-bar-text[b-b1g5j1vbyo] { color: #6ee7b7; }
.g-bar.booked[b-b1g5j1vbyo] { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.6); }
.g-bar.booked .g-bar-text[b-b1g5j1vbyo] { color: #7dd3fc; }
.g-bar.done[b-b1g5j1vbyo] { background: rgba(71, 85, 105, 0.35); border-color: rgba(100, 116, 139, 0.5); }
.g-bar.done .g-bar-text[b-b1g5j1vbyo] { color: #94a3b8; }

.g-bar-text[b-b1g5j1vbyo] {
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* today marker */
.g-today[b-b1g5j1vbyo] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 2px solid #38bdf8;
    z-index: 1;
    pointer-events: none;
}

.g-today-label[b-b1g5j1vbyo] {
    position: absolute;
    top: 0.25rem;
    left: 0.3125rem;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #38bdf8;
    background: rgba(15, 23, 42, 0.85);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* ── Legend ── */
.adv-legend[b-b1g5j1vbyo] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem 0.25rem;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
}

.adv-legend-item[b-b1g5j1vbyo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
}

.adv-legend .swatch[b-b1g5j1vbyo] {
    width: 1.125rem;
    height: 0.625rem;
    border-radius: 0.1875rem;
    border: 1px solid;
}

.adv-legend .swatch.live[b-b1g5j1vbyo] { background: rgba(52, 211, 153, 0.22); border-color: rgba(52, 211, 153, 0.65); }
.adv-legend .swatch.booked[b-b1g5j1vbyo] { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.6); }
.adv-legend .swatch.done[b-b1g5j1vbyo] { background: rgba(71, 85, 105, 0.35); border-color: rgba(100, 116, 139, 0.5); }
.adv-legend .swatch.track[b-b1g5j1vbyo] { background: rgba(100, 116, 139, 0.12); border: 1px dashed rgba(100, 116, 139, 0.35); }

.adv-legend-hint[b-b1g5j1vbyo] {
    font-size: 0.6875rem;
    color: #64748b;
    margin-left: auto;
}

/* ── Modal (new campaign) ── */
.adv-modal-backdrop[b-b1g5j1vbyo] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
}

.adv-modal[b-b1g5j1vbyo] {
    width: min(28rem, calc(100vw - 2rem));
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 1rem;
    padding: 1.5rem;
}

.adv-modal-title[b-b1g5j1vbyo] {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.375rem;
}

.adv-modal-desc[b-b1g5j1vbyo] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.adv-modal-label[b-b1g5j1vbyo] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 0.25rem;
}

.adv-modal-input[b-b1g5j1vbyo] {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.875rem;
    color-scheme: dark;
}

.adv-modal-input:focus-visible[b-b1g5j1vbyo] {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

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

.adv-modal-error[b-b1g5j1vbyo] {
    font-size: 0.75rem;
    color: #f87171;
    margin: 0 0 0.75rem;
}

.adv-modal-actions[b-b1g5j1vbyo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.adv-modal-btn[b-b1g5j1vbyo] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
}

.adv-modal-btn.primary[b-b1g5j1vbyo] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

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

.adv-modal-btn:focus-visible[b-b1g5j1vbyo] {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .adv-content[b-b1g5j1vbyo] {
        padding: 1rem;
    }

    .gantt-label[b-b1g5j1vbyo] {
        flex-basis: 10rem;
        width: 10rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-bar[b-b1g5j1vbyo] {
        transition: none;
    }
}
/* /Components/Pages/AdView.razor.rz.scp.css */
/* Ad drill-down — booking facts + creative, in the advertising section's card language. */

.adv-ad-content[b-64bmaook3d] {
    padding: 2rem;
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.adv-ad-back[b-64bmaook3d] {
    align-self: flex-start;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.adv-ad-back:hover[b-64bmaook3d],
.adv-ad-back:focus-visible[b-64bmaook3d] {
    color: #e2e8f0;
}

.adv-ad-hero[b-64bmaook3d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}

.adv-ad-eyebrow[b-64bmaook3d] {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin: 0 0 0.25rem;
}

.adv-ad-title[b-64bmaook3d] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.adv-ad-campaign-link[b-64bmaook3d] {
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #38bdf8;
    cursor: pointer;
}

.adv-ad-campaign-link:hover[b-64bmaook3d],
.adv-ad-campaign-link:focus-visible[b-64bmaook3d] {
    text-decoration: underline;
}

.adv-ad-pill[b-64bmaook3d] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.adv-ad-pill.live[b-64bmaook3d] { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.adv-ad-pill.booked[b-64bmaook3d] { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); }
.adv-ad-pill.done[b-64bmaook3d] { color: #94a3b8; border-color: rgba(100, 116, 139, 0.35); }

.adv-ad-card[b-64bmaook3d] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}

.adv-ad-empty[b-64bmaook3d] {
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
    padding: 3rem 2rem;
}

.adv-ad-card-title[b-64bmaook3d] {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.adv-ad-facts[b-64bmaook3d] {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.adv-ad-facts > div[b-64bmaook3d] {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(51, 65, 85, 0.25);
}

.adv-ad-facts > div:first-child[b-64bmaook3d] {
    border-top: none;
    padding-top: 0;
}

.adv-ad-facts dt[b-64bmaook3d] {
    flex: 0 0 8rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding-top: 0.0625rem;
}

.adv-ad-facts dd[b-64bmaook3d] {
    margin: 0;
    font-size: 0.875rem;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}

.adv-ad-content-id[b-64bmaook3d] {
    color: #64748b;
    font-size: 0.75rem;
}

.adv-ad-creative[b-64bmaook3d] {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
}

.adv-ad-url[b-64bmaook3d] {
    font-size: 0.8125rem;
    color: #7dd3fc;
    word-break: break-all;
}

.adv-ad-open[b-64bmaook3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.35);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 0.5rem;
    padding: 0.4375rem 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.adv-ad-open:hover[b-64bmaook3d],
.adv-ad-open:focus-visible[b-64bmaook3d] {
    border-color: #38bdf8;
    color: #f1f5f9;
}

/* ── Actions ── */
.adv-ad-actions[b-64bmaook3d] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.adv-ad-action-btn[b-64bmaook3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.35);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.adv-ad-action-btn:hover:not(:disabled)[b-64bmaook3d],
.adv-ad-action-btn:focus-visible[b-64bmaook3d] {
    background: rgba(51, 65, 85, 0.6);
    border-color: #38bdf8;
    outline: none;
}

.adv-ad-action-btn.danger[b-64bmaook3d] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
    background: transparent;
}

.adv-ad-action-btn.danger:hover:not(:disabled)[b-64bmaook3d],
.adv-ad-action-btn.danger:focus-visible[b-64bmaook3d] {
    background: rgba(248, 113, 113, 0.12);
    border-color: #f87171;
}

.adv-ad-action-btn:disabled[b-64bmaook3d] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Modals ── */
.adv-ad-modal-backdrop[b-64bmaook3d] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
}

.adv-ad-modal[b-64bmaook3d] {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 1rem;
    padding: 1.5rem;
}

.adv-ad-modal-title[b-64bmaook3d] {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.375rem;
}

.adv-ad-modal-desc[b-64bmaook3d] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.adv-ad-modal-warn[b-64bmaook3d] {
    font-size: 0.8125rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0 1rem;
}

.adv-ad-modal-label[b-64bmaook3d] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 0.25rem;
}

/* Qualifier on a field label — unshouted, so it reads as a note rather than part of the name. */
.adv-ad-modal-hint[b-64bmaook3d] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: #94a3b8;
}

.adv-ad-modal-input[b-64bmaook3d] {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.875rem;
    color-scheme: dark;
}

.adv-ad-modal-input:focus-visible[b-64bmaook3d] {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

.adv-ad-modal-row[b-64bmaook3d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.adv-ad-modal-error[b-64bmaook3d] {
    font-size: 0.75rem;
    color: #f87171;
    margin: 0 0 0.75rem;
}

.adv-ad-modal-actions[b-64bmaook3d] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.adv-ad-modal-btn[b-64bmaook3d] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    color: #e2e8f0;
    cursor: pointer;
}

.adv-ad-modal-btn.primary[b-64bmaook3d] {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #0f172a;
}

.adv-ad-modal-btn.danger[b-64bmaook3d] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}

.adv-ad-modal-btn:disabled[b-64bmaook3d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.adv-ad-modal-btn:focus-visible[b-64bmaook3d] {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .adv-ad-content[b-64bmaook3d] {
        padding: 1rem;
    }

    .adv-ad-hero[b-64bmaook3d],
    .adv-ad-card[b-64bmaook3d] {
        padding: 1.25rem;
    }

    .adv-ad-facts > div[b-64bmaook3d] {
        flex-direction: column;
        gap: 0.125rem;
    }
}
/* /Components/Pages/ApplicationProcess.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ApplicationProcess – Application Review & Decision
   Dark slate theme matching existing ServicePoint pages
   ═══════════════════════════════════════════════════════════ */

.process-content[b-g7o1eivn1q] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Alert Banners ── */
.alert-banner[b-g7o1eivn1q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-error[b-g7o1eivn1q] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.alert-success[b-g7o1eivn1q] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
}

/* ── Header ── */
.process-header[b-g7o1eivn1q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.back-link[b-g7o1eivn1q] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.2s;
}

.back-link:hover[b-g7o1eivn1q] {
    color: #0088CC;
}

.process-title[b-g7o1eivn1q] {
    font-size: 1.75rem;
    font-weight: 300;
    color: #e2e8f0;
    letter-spacing: -0.02em;
    margin: 0;
}

.title-accent[b-g7o1eivn1q] {
    font-weight: 700;
    color: #f1f5f9;
}

/* ── Summary Bar ── */
.summary-bar[b-g7o1eivn1q] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
}

.summary-item[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
}

.summary-label[b-g7o1eivn1q] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.summary-value[b-g7o1eivn1q] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #e2e8f0;
}

.summary-value.amount[b-g7o1eivn1q] {
    font-weight: 700;
    color: #f1f5f9;
}

/* ── Badges ── */
.badge[b-g7o1eivn1q] {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    width: fit-content;
}

.badge-blue[b-g7o1eivn1q] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.badge-amber[b-g7o1eivn1q] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.badge-green[b-g7o1eivn1q] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.badge-red[b-g7o1eivn1q] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.badge-slate[b-g7o1eivn1q] {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* ── Main Grid ── */
.main-grid[b-g7o1eivn1q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.left-column[b-g7o1eivn1q],
.right-column[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── Glass Cards ── */
.glass-card[b-g7o1eivn1q] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.section-title[b-g7o1eivn1q] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0088CC;
    margin: 0 0 1.5rem;
}

/* ── Profile Card ── */
.profile-card[b-g7o1eivn1q] {
    position: relative;
}

.card-watermark[b-g7o1eivn1q] {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.profile-grid[b-g7o1eivn1q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}

.profile-field.full-width[b-g7o1eivn1q] {
    grid-column: 1 / -1;
}

.field-label[b-g7o1eivn1q] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.field-value[b-g7o1eivn1q] {
    font-size: 0.9375rem;
    color: #e2e8f0;
}

.field-large[b-g7o1eivn1q] {
    font-size: 1.375rem;
    font-weight: 300;
}

.field-medium[b-g7o1eivn1q] {
    font-size: 1.125rem;
    font-weight: 500;
}

.field-value.amount[b-g7o1eivn1q] {
    font-weight: 700;
    color: #f1f5f9;
}

.field-with-icon[b-g7o1eivn1q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.field-with-icon i[b-g7o1eivn1q] {
    color: #0088CC;
    font-size: 1.125rem;
}

/* ── Notes Card ── */
.notes-header[b-g7o1eivn1q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.notes-header .section-title[b-g7o1eivn1q] {
    margin-bottom: 0;
}

.notes-count[b-g7o1eivn1q] {
    font-size: 0.6875rem;
    font-style: italic;
    color: #64748b;
}

.notes-list[b-g7o1eivn1q] {
    max-height: 16rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.5rem;
    margin-bottom: 1.5rem;
}

.note-item[b-g7o1eivn1q] {
    background: rgba(51, 65, 85, 0.4);
    padding: 1rem;
    border-radius: 0.5rem;
}

.note-highlighted[b-g7o1eivn1q] {
    border-left: 2px solid rgba(0, 136, 204, 0.4);
}

.note-meta[b-g7o1eivn1q] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.5rem;
}

.note-author[b-g7o1eivn1q] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.note-time[b-g7o1eivn1q] {
    font-size: 0.625rem;
    color: #64748b;
}

.note-text[b-g7o1eivn1q] {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.notes-empty[b-g7o1eivn1q] {
    text-align: center;
    padding: 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.add-note-form[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid #334155;
    padding-top: 1.25rem;
}

.form-label[b-g7o1eivn1q] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.note-textarea[b-g7o1eivn1q] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.note-textarea:focus[b-g7o1eivn1q] {
    border-color: rgba(0, 136, 204, 0.5);
}

.note-textarea[b-g7o1eivn1q]::placeholder {
    color: #475569;
}

.submit-note-btn[b-g7o1eivn1q] {
    align-self: flex-end;
    padding: 0.625rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #e2e8f0;
    background: #334155;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.submit-note-btn:hover:not(:disabled)[b-g7o1eivn1q] {
    background: #475569;
}

.submit-note-btn:disabled[b-g7o1eivn1q] {
    opacity: 0.4;
    cursor: default;
}

/* ── Risk Card ── */
.risk-card[b-g7o1eivn1q] {
    position: relative;
}

.risk-glow[b-g7o1eivn1q] {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 6rem;
    height: 6rem;
    background: rgba(0, 136, 204, 0.08);
    filter: blur(3rem);
    border-radius: 50%;
    pointer-events: none;
}

.risk-form[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.risk-field[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.risk-score-value[b-g7o1eivn1q] {
    font-weight: 700;
    color: #0088CC;
    font-size: 0.9375rem;
}

.risk-slider[b-g7o1eivn1q] {
    width: 100%;
    height: 6px;
    background: #0f172a;
    border-radius: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

.risk-slider[b-g7o1eivn1q]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0088CC;
    cursor: pointer;
    border: 2px solid #1e293b;
    box-shadow: 0 0 8px rgba(0, 136, 204, 0.4);
}

.risk-slider[b-g7o1eivn1q]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0088CC;
    cursor: pointer;
    border: 2px solid #1e293b;
    box-shadow: 0 0 8px rgba(0, 136, 204, 0.4);
}

.risk-scale[b-g7o1eivn1q] {
    display: flex;
    justify-content: space-between;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #475569;
}

.select-wrapper[b-g7o1eivn1q] {
    position: relative;
}

.risk-select[b-g7o1eivn1q] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.risk-select:focus[b-g7o1eivn1q] {
    border-color: rgba(0, 136, 204, 0.5);
}

.select-icon[b-g7o1eivn1q] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    font-size: 0.875rem;
}

.save-assessment-btn[b-g7o1eivn1q] {
    width: 100%;
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.15);
}

.save-assessment-btn:hover[b-g7o1eivn1q] {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 136, 204, 0.25);
}

.save-assessment-btn:active[b-g7o1eivn1q] {
    transform: scale(0.98);
}

/* ── Decision Buttons ── */
.decision-section[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.decision-btn[b-g7o1eivn1q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.3s;
    text-align: left;
}

.decision-btn:disabled[b-g7o1eivn1q] {
    opacity: 0.35;
    cursor: default;
    transform: none !important;
}

.decision-approve[b-g7o1eivn1q] {
    background: rgba(17, 42, 33, 0.8);
    border-color: rgba(45, 92, 73, 0.3);
}

.decision-approve:hover:not(:disabled)[b-g7o1eivn1q] {
    background: rgba(24, 58, 45, 0.9);
}

.decision-approve .decision-btn-label[b-g7o1eivn1q] {
    color: rgba(74, 222, 128, 0.6);
}

.decision-approve .decision-btn-title[b-g7o1eivn1q] {
    color: #4ade80;
}

.decision-approve i[b-g7o1eivn1q] {
    color: #4ade80;
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.decision-approve:hover:not(:disabled) i[b-g7o1eivn1q] {
    transform: translateX(0.25rem);
}

.decision-deny[b-g7o1eivn1q] {
    background: rgba(42, 17, 17, 0.8);
    border-color: rgba(92, 45, 45, 0.3);
}

.decision-deny:hover:not(:disabled)[b-g7o1eivn1q] {
    background: rgba(58, 24, 24, 0.9);
}

.decision-deny .decision-btn-label[b-g7o1eivn1q] {
    color: rgba(248, 113, 113, 0.6);
}

.decision-deny .decision-btn-title[b-g7o1eivn1q] {
    color: #f87171;
}

.decision-deny i[b-g7o1eivn1q] {
    color: #f87171;
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.decision-deny:hover:not(:disabled) i[b-g7o1eivn1q] {
    transform: translateX(0.25rem);
}

.decision-btn-text[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.decision-btn-label[b-g7o1eivn1q] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.decision-btn-title[b-g7o1eivn1q] {
    font-size: 1.125rem;
    font-weight: 700;
}

/* ── Checklist Card ── */
.checklist-card[b-g7o1eivn1q] {
    padding: 1.5rem;
}

.checklist-title[b-g7o1eivn1q] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin: 0 0 1rem;
}

.checklist-items[b-g7o1eivn1q] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.checklist-item[b-g7o1eivn1q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.check-dot[b-g7o1eivn1q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.check-active[b-g7o1eivn1q] {
    background: #0088CC;
    box-shadow: 0 0 8px rgba(0, 136, 204, 0.6);
}

.check-pending[b-g7o1eivn1q] {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.check-label[b-g7o1eivn1q] {
    font-size: 0.8125rem;
    color: #e2e8f0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .main-grid[b-g7o1eivn1q] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .process-content[b-g7o1eivn1q] {
        padding: 1rem;
    }

    .summary-bar[b-g7o1eivn1q] {
        flex-direction: column;
        gap: 1rem;
    }

    .profile-grid[b-g7o1eivn1q] {
        grid-template-columns: 1fr;
    }

    .decision-btn[b-g7o1eivn1q] {
        padding: 1rem;
    }
}
/* /Components/Pages/Applications.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Applications – Pending Approvals Queue
   Dark slate theme matching existing ServicePoint pages
   ═══════════════════════════════════════════════════════════ */

.applications-content[b-gth8k21hfz] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Alert Banners ── */
.alert-banner[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-error[b-gth8k21hfz] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.alert-success[b-gth8k21hfz] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
}

/* ── Page Header ── */
.page-header[b-gth8k21hfz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.page-title[b-gth8k21hfz] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0;
}

.page-subtitle[b-gth8k21hfz] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0.25rem 0 0;
}

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

.sort-toggle[b-gth8k21hfz] {
    display: inline-flex;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.25rem;
    overflow: hidden;
}

.sort-btn[b-gth8k21hfz] {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.sort-btn:hover[b-gth8k21hfz] {
    color: #e2e8f0;
}

.sort-btn.active[b-gth8k21hfz] {
    background: #334155;
    color: #f1f5f9;
}

.filter-btn[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover[b-gth8k21hfz] {
    background: #334155;
}

/* ── Filters Row ── */
.filters-row[b-gth8k21hfz] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.25rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    flex-wrap: wrap;
}

.filter-group[b-gth8k21hfz] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 160px;
}

.filter-label[b-gth8k21hfz] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

.filter-select[b-gth8k21hfz] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #e2e8f0;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.2s;
}

.filter-select:focus[b-gth8k21hfz] {
    border-color: #0088CC;
}

.apply-filter-btn[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: #0088CC;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-end;
}

.apply-filter-btn:hover[b-gth8k21hfz] {
    background: #0077b3;
}

/* ── Stats Bar ── */
.stats-bar[b-gth8k21hfz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card[b-gth8k21hfz] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label[b-gth8k21hfz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
}

.stat-value[b-gth8k21hfz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
}

.stat-primary[b-gth8k21hfz] {
    color: #0088CC;
}

.stat-amber[b-gth8k21hfz] {
    color: #f59e0b;
}

.stat-green[b-gth8k21hfz] {
    color: #22c55e;
}

/* ── Table Card ── */
.table-card[b-gth8k21hfz] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
}

.table-scroll[b-gth8k21hfz] {
    overflow-x: auto;
}

.applications-table[b-gth8k21hfz] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.applications-table thead tr[b-gth8k21hfz] {
    background: rgba(51, 65, 85, 0.5);
}

.applications-table th[b-gth8k21hfz] {
    padding: 1rem 1.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    white-space: nowrap;
}

.applications-table tbody tr[b-gth8k21hfz] {
    border-top: 1px solid rgba(51, 65, 85, 0.5);
    transition: background 0.15s;
    cursor: pointer;
}

.applications-table tbody tr:hover[b-gth8k21hfz] {
    background: rgba(51, 65, 85, 0.3);
}

.applications-table td[b-gth8k21hfz] {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    vertical-align: middle;
}

.text-right[b-gth8k21hfz] {
    text-align: right;
}

/* ── Cell Styles ── */
.app-id[b-gth8k21hfz] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0088CC;
}

.priority-tag[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.priority-dot[b-gth8k21hfz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.priority-high[b-gth8k21hfz] {
    background: #ef4444;
}

.priority-standard[b-gth8k21hfz] {
    background: #64748b;
}

.priority-text[b-gth8k21hfz] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
}

.priority-high-text[b-gth8k21hfz] {
    color: #ef4444;
}

.date-cell[b-gth8k21hfz] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

.customer-name[b-gth8k21hfz] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.customer-sub[b-gth8k21hfz] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.125rem 0 0;
}

.type-badge[b-gth8k21hfz] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
}

.type-new-account[b-gth8k21hfz] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.type-limit-increase[b-gth8k21hfz] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.product-cell[b-gth8k21hfz] {
    font-weight: 500;
}

.limit-cell[b-gth8k21hfz] {
    font-weight: 700;
}

/* ── Action Buttons ── */
.actions-cell[b-gth8k21hfz] {
    text-align: right;
}

.action-buttons[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.action-approve[b-gth8k21hfz] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.action-approve:hover:not(:disabled)[b-gth8k21hfz] {
    background: rgba(34, 197, 94, 0.2);
}

.action-approve:disabled[b-gth8k21hfz] {
    opacity: 0.4;
    cursor: default;
}

.action-reject[b-gth8k21hfz] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.action-reject:hover:not(:disabled)[b-gth8k21hfz] {
    background: rgba(239, 68, 68, 0.2);
}

.action-reject:disabled[b-gth8k21hfz] {
    opacity: 0.4;
    cursor: default;
}

.action-view[b-gth8k21hfz] {
    padding: 0.375rem;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1rem;
}

.action-view:hover[b-gth8k21hfz] {
    color: #f1f5f9;
}

/* ── Table Footer / Pagination ── */
.table-footer[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(51, 65, 85, 0.3);
    border-top: 1px solid rgba(51, 65, 85, 0.5);
}

.table-footer-text[b-gth8k21hfz] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.pagination-controls[b-gth8k21hfz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-btn[b-gth8k21hfz] {
    padding: 0.25rem 0.5rem;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled)[b-gth8k21hfz] {
    background: #334155;
    color: #f1f5f9;
}

.page-btn:disabled[b-gth8k21hfz] {
    opacity: 0.3;
    cursor: default;
}

.page-indicator[b-gth8k21hfz] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    padding: 0.25rem 0.625rem;
    background: #0088CC;
    border-radius: 0.375rem;
}

/* ── Empty State ── */
.empty-state[b-gth8k21hfz] {
    text-align: center;
    padding: 4rem 2rem;
    color: #94a3b8;
}

.empty-state i[b-gth8k21hfz] {
    font-size: 3rem;
    color: #475569;
    margin-bottom: 1rem;
    display: block;
}

.empty-state h3[b-gth8k21hfz] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #cbd5e1;
    margin: 0 0 0.5rem;
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
    .applications-content[b-gth8k21hfz] {
        padding: 1rem;
    }

    .stats-bar[b-gth8k21hfz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header[b-gth8k21hfz] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filters-row[b-gth8k21hfz] {
        flex-direction: column;
    }

    .filter-group[b-gth8k21hfz] {
        min-width: 100%;
    }

    .action-approve[b-gth8k21hfz],
    .action-reject[b-gth8k21hfz] {
        display: none;
    }
}
/* /Components/Pages/CardDetail.razor.rz.scp.css */
/* === ServicePoint Card Detail — Dark Slate === */

.card-detail-content[b-kmkzcr3qbx] {
    width: 100%;
}

/* --- Header --- */
.card-page-header[b-kmkzcr3qbx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.card-breadcrumb[b-kmkzcr3qbx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.card-breadcrumb-link[b-kmkzcr3qbx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
}

.card-breadcrumb-link:hover[b-kmkzcr3qbx] {
    color: #0088CC;
}

.card-breadcrumb-sep[b-kmkzcr3qbx] {
    width: 2rem;
    height: 1px;
    background: #334155;
}

.card-breadcrumb-current[b-kmkzcr3qbx] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0088CC;
}

.card-page-title[b-kmkzcr3qbx] {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
}

.card-page-desc[b-kmkzcr3qbx] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    max-width: 32rem;
}

.card-status-badge-wrap[b-kmkzcr3qbx] {
    flex-shrink: 0;
}

.card-status-badge[b-kmkzcr3qbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-status-badge.active[b-kmkzcr3qbx] {
    background: rgba(0, 150, 57, 0.08);
    color: #009639;
}

.card-status-badge.pending[b-kmkzcr3qbx] {
    background: rgba(0, 136, 204, 0.08);
    color: #0088CC;
}

.card-status-badge.inactive[b-kmkzcr3qbx] {
    background: rgba(100, 116, 139, 0.1);
    color: #94a3b8;
}

.card-status-dot[b-kmkzcr3qbx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

/* --- Bento Grid --- */
.card-bento-grid[b-kmkzcr3qbx] {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.card-bento-left[b-kmkzcr3qbx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-bento-right[b-kmkzcr3qbx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Card Art Visual --- */
.card-art-container[b-kmkzcr3qbx] {
    position: relative;
}

.card-art-glow[b-kmkzcr3qbx] {
    position: absolute;
    inset: -4px;
    background: rgba(0, 136, 204, 0.12);
    border-radius: 1.5rem;
    filter: blur(24px);
    transition: background 0.5s;
    pointer-events: none;
}

.card-art-container:hover .card-art-glow[b-kmkzcr3qbx] {
    background: rgba(0, 136, 204, 0.2);
}

.card-art-visual[b-kmkzcr3qbx] {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586 / 1;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.card-art-img[b-kmkzcr3qbx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-art-overlay[b-kmkzcr3qbx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.75rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.card-art-top[b-kmkzcr3qbx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-art-issuer-label[b-kmkzcr3qbx] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.5);
}

.card-art-product[b-kmkzcr3qbx] {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.card-art-brand-logo[b-kmkzcr3qbx] {
    height: 24px;
    opacity: 0.9;
}

.card-art-bottom[b-kmkzcr3qbx] {
    /* sits at the bottom */
}

.card-art-number[b-kmkzcr3qbx] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.card-art-details[b-kmkzcr3qbx] {
    display: flex;
    gap: 2rem;
}

.card-art-detail-label[b-kmkzcr3qbx] {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.125rem;
}

.card-art-detail-value[b-kmkzcr3qbx] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
}

/* --- Metadata Grid --- */
.card-meta-grid[b-kmkzcr3qbx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.card-meta-item[b-kmkzcr3qbx] {
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid #334155;
    border-radius: 0.75rem;
}

.card-meta-brand[b-kmkzcr3qbx] {
    position: relative;
}

.card-meta-brand-icon[b-kmkzcr3qbx] {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    height: 1.5rem;
    opacity: 0.5;
    pointer-events: none;
}

.card-meta-label[b-kmkzcr3qbx] {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.card-meta-value[b-kmkzcr3qbx] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.card-meta-hint[b-kmkzcr3qbx] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.375rem 0 0;
}

/* --- Management Controls Panel --- */
.card-controls-panel[b-kmkzcr3qbx] {
    padding: 2rem;
    background: #1b2025;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.card-controls-title[b-kmkzcr3qbx] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin: 0 0 0.5rem;
}

.btn-card-print[b-kmkzcr3qbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #0088CC 0%, #004c6b 100%);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.25);
}

.btn-card-print:hover[b-kmkzcr3qbx] {
    box-shadow: 0 6px 24px rgba(0, 136, 204, 0.35);
}

.btn-card-print:active[b-kmkzcr3qbx] {
    transform: scale(0.98);
}

.btn-card-action[b-kmkzcr3qbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: #20262c;
    color: #f1f5f9;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-card-action:hover[b-kmkzcr3qbx] {
    background: #252d33;
}

.btn-card-action-danger:hover[b-kmkzcr3qbx] {
    background: rgba(238, 125, 119, 0.08);
    color: #ee7d77;
}

.action-icon-warning[b-kmkzcr3qbx] {
    color: #f59e0b;
}

.action-hint[b-kmkzcr3qbx] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
}

.action-hint-danger[b-kmkzcr3qbx] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(238, 125, 119, 0.5);
}

/* --- Issuance Timeline --- */
.card-timeline-panel[b-kmkzcr3qbx] {
    padding: 2rem;
    background: rgba(32, 38, 44, 0.6);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
}

.card-timeline-header[b-kmkzcr3qbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.card-timeline-title[b-kmkzcr3qbx] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin: 0;
}

.card-timeline[b-kmkzcr3qbx] {
    display: flex;
    flex-direction: column;
}

.timeline-entry[b-kmkzcr3qbx] {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
}

.timeline-entry:last-child[b-kmkzcr3qbx] {
    padding-bottom: 0;
}

.timeline-entry.dimmed[b-kmkzcr3qbx] {
    opacity: 0.45;
}

.timeline-dot-wrap[b-kmkzcr3qbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.timeline-dot[b-kmkzcr3qbx] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}

.timeline-dot.active[b-kmkzcr3qbx] {
    background: #0088CC;
    box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.2);
}

.timeline-line[b-kmkzcr3qbx] {
    width: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}

.timeline-content[b-kmkzcr3qbx] {
    padding-top: 0;
}

.timeline-entry-title[b-kmkzcr3qbx] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.125rem;
}

.timeline-entry-desc[b-kmkzcr3qbx] {
    font-size: 0.75rem;
    color: #64748b;
}

/* --- Block Reason Panel --- */
.card-block-panel[b-kmkzcr3qbx] {
    padding: 1.5rem;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left-width: 4px;
    border-left-color: #f59e0b;
    border-radius: 0.75rem;
}

.card-block-title[b-kmkzcr3qbx] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f59e0b;
}

.card-block-reason[b-kmkzcr3qbx] {
    font-size: 0.8125rem;
    color: #f1f5f9;
    margin: 0 0 0.25rem;
}

.card-block-hint[b-kmkzcr3qbx] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

/* --- Card Status History Section --- */
.card-history-section[b-kmkzcr3qbx] {
    margin-bottom: 2.5rem;
}

.card-history-header[b-kmkzcr3qbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.card-history-title[b-kmkzcr3qbx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.card-history-badge[b-kmkzcr3qbx] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.card-history-table-wrap[b-kmkzcr3qbx] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
}

.card-history-table[b-kmkzcr3qbx] {
    width: 100%;
    text-align: left;
}

.card-history-table thead th[b-kmkzcr3qbx] {
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.card-history-table tbody td[b-kmkzcr3qbx] {
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.2);
    vertical-align: middle;
    font-size: 0.875rem;
    color: #f1f5f9;
}

.card-history-table tbody tr:last-child td[b-kmkzcr3qbx] {
    border-bottom: none;
}

.card-history-table tbody tr:hover[b-kmkzcr3qbx] {
    background: rgba(51, 65, 85, 0.15);
    transition: background-color 0.15s;
}

.history-sub-label[b-kmkzcr3qbx] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0088CC;
}

.history-txn-status[b-kmkzcr3qbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.history-txn-status.txn-active[b-kmkzcr3qbx] {
    background: rgba(0, 150, 57, 0.1);
    color: #009639;
}

.history-txn-status.txn-temp-block[b-kmkzcr3qbx] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.history-txn-status.txn-perm-block[b-kmkzcr3qbx] {
    background: rgba(238, 125, 119, 0.1);
    color: #ee7d77;
}

.history-txn-status.txn-unknown[b-kmkzcr3qbx] {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}

.history-block-reason[b-kmkzcr3qbx] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    background: rgba(238, 125, 119, 0.1);
    color: #ee7d77;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.history-card-type[b-kmkzcr3qbx] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    background: #334155;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-replaced[b-kmkzcr3qbx] {
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.8125rem;
}

/* --- Card Details Summary --- */
.card-summary-section[b-kmkzcr3qbx] {
    margin-bottom: 2.5rem;
}

.card-summary-header[b-kmkzcr3qbx] {
    margin-bottom: 1.25rem;
}

.card-summary-grid[b-kmkzcr3qbx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.card-summary-item[b-kmkzcr3qbx] {
    padding: 1.25rem;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
}

.card-summary-label[b-kmkzcr3qbx] {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.card-summary-value[b-kmkzcr3qbx] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    word-break: break-all;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .card-bento-grid[b-kmkzcr3qbx] {
        grid-template-columns: 1fr;
    }
    .card-summary-grid[b-kmkzcr3qbx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .card-page-header[b-kmkzcr3qbx] {
        flex-direction: column;
    }
    .card-meta-grid[b-kmkzcr3qbx] {
        grid-template-columns: 1fr;
    }
    .card-summary-grid[b-kmkzcr3qbx] {
        grid-template-columns: 1fr;
    }
    .card-art-number[b-kmkzcr3qbx] {
        font-size: 1rem;
    }
    .card-history-table thead th[b-kmkzcr3qbx],
    .card-history-table tbody td[b-kmkzcr3qbx] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Pages/CardPrintingDashboard.razor.rz.scp.css */
/* === Embossing Job Management Dashboard === */

.emboss-mgmt-content[b-84aiygc47f] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* --- Header --- */
.em-header[b-84aiygc47f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2rem;
}

.em-title[b-84aiygc47f] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #e0e6ed;
    letter-spacing: -0.02em;
    margin: 0;
}

.em-subtitle[b-84aiygc47f] {
    color: #8da1ab;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    max-width: 600px;
}

/* --- Stats Grid --- */
.em-stats-grid[b-84aiygc47f] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.em-stat-card[b-84aiygc47f] {
    background: #111416;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border-left: 4px solid transparent;
}

.em-stat-card.em-stat-primary[b-84aiygc47f] { border-left-color: #0088CC; }
.em-stat-card.em-stat-pending[b-84aiygc47f] { border-left-color: #f59e0b; }
.em-stat-card.em-stat-error[b-84aiygc47f] { border-left-color: #ee7d77; }
.em-stat-card.em-stat-completed[b-84aiygc47f] { border-left-color: #004c6b; }

.em-stat-label[b-84aiygc47f] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #8da1ab;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.em-stat-value-row[b-84aiygc47f] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.em-stat-value[b-84aiygc47f] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #e0e6ed;
}

.em-stat-tag[b-84aiygc47f] {
    font-size: 0.65rem;
    font-weight: 700;
}

.em-stat-tag.pending[b-84aiygc47f] { color: #f59e0b; }
.em-stat-tag.muted[b-84aiygc47f] { color: #004c6b; }

.em-stat-bar[b-84aiygc47f] {
    margin-top: 1rem;
    height: 4px;
    width: 100%;
    background: #20262c;
    border-radius: 2px;
    overflow: hidden;
}

.em-stat-bar-fill[b-84aiygc47f] {
    height: 100%;
    border-radius: 2px;
}

.em-stat-bar-fill.primary[b-84aiygc47f] { background: #0088CC; }

.em-stat-hint[b-84aiygc47f] {
    font-size: 0.625rem;
    color: #70767c;
    font-style: italic;
    margin-top: 1rem;
}

/* --- Query Panel --- */
.em-query-panel[b-84aiygc47f] {
    background: #1b2025;
    border-radius: 16px;
    padding: 2px;
    margin-bottom: 2rem;
}

.em-query-inner[b-84aiygc47f] {
    background: #0c0e10;
    border-radius: 14px;
    padding: 1.75rem;
}

.em-query-header[b-84aiygc47f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: #0088CC;
    font-size: 1.1rem;
}

.em-query-title[b-84aiygc47f] {
    font-weight: 700;
    color: #e0e6ed;
    margin: 0;
}

.em-query-fields[b-84aiygc47f] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}

.em-query-field-action[b-84aiygc47f] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.em-query-label[b-84aiygc47f] {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    color: #70767c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    margin-left: 0.25rem;
}

.em-query-input[b-84aiygc47f] {
    width: 100%;
    background: #1b2025;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #e0e6ed;
    font-size: 0.875rem;
    outline: none;
    transition: box-shadow 0.2s;
}

.em-query-input:focus[b-84aiygc47f] {
    box-shadow: 0 0 0 1px rgba(0, 136, 204, 0.3);
}

.em-query-input[b-84aiygc47f]::placeholder {
    color: rgba(112, 118, 124, 0.4);
}

.em-search-btn[b-84aiygc47f] {
    background: #0088CC;
    border: none;
    border-radius: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.em-search-btn:hover[b-84aiygc47f] { transform: scale(1.05); }
.em-search-btn:active[b-84aiygc47f] { transform: scale(0.95); }

/* --- Table Section --- */
.em-table-section[b-84aiygc47f] {
    background: #161a1e;
    border-radius: 16px;
    overflow: hidden;
}

.em-table-header[b-84aiygc47f] {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid rgba(66, 73, 78, 0.1);
}

.em-table-title[b-84aiygc47f] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #e0e6ed;
    margin: 0;
}

.em-table[b-84aiygc47f] {
    width: 100%;
    border-collapse: collapse;
}

.em-table thead th[b-84aiygc47f] {
    padding: 1rem 1.75rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: #70767c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(17, 20, 22, 0.5);
    text-align: left;
}

.em-table tbody td[b-84aiygc47f] {
    padding: 1.1rem 1.75rem;
    font-size: 0.875rem;
    color: #a6acb2;
    border-bottom: 1px solid rgba(66, 73, 78, 0.05);
}

.em-table-row[b-84aiygc47f] {
    transition: background 0.2s;
}

.em-table-row:hover[b-84aiygc47f] {
    background: #252d33;
    cursor: pointer;
}

.em-job-id[b-84aiygc47f] {
    font-weight: 700;
    color: #0088CC;
}

.em-card-id[b-84aiygc47f] {
    font-family: monospace;
    color: #a6acb2;
}

.em-emboss-name[b-84aiygc47f] {
    font-weight: 600;
    color: #e0e6ed;
}

.em-created-at[b-84aiygc47f] {
    font-size: 0.75rem;
    color: #8da1ab;
}

/* Evolve console pop-up link (pending jobs only) */
.em-evolve-link[b-84aiygc47f] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background: transparent;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 0.25rem;
    color: #38bdf8;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    white-space: nowrap;
}

.em-evolve-link:hover[b-84aiygc47f],
.em-evolve-link:focus-visible[b-84aiygc47f] {
    background: rgba(56, 189, 248, 0.12);
    outline: none;
}

.em-evolve-none[b-84aiygc47f] {
    color: #475569;
}

/* --- Status Pills --- */
.em-status-pill[b-84aiygc47f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.em-status-pill.completed[b-84aiygc47f] {
    background: rgba(0, 136, 204, 0.1);
    color: #81cfff;
}

.em-status-pill.pending[b-84aiygc47f] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.em-status-pill.failed[b-84aiygc47f] {
    background: rgba(238, 125, 119, 0.1);
    color: #ee7d77;
}

.em-status-pill.cancelled[b-84aiygc47f] {
    background: rgba(166, 172, 178, 0.1);
    color: #a6acb2;
}

.em-status-dot[b-84aiygc47f] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.em-status-dot.pulse[b-84aiygc47f] {
    animation: em-pulse-b-84aiygc47f 1.5s ease-in-out infinite;
}

@keyframes em-pulse-b-84aiygc47f {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.em-status-pill.completed .em-status-dot[b-84aiygc47f] {
    box-shadow: 0 0 8px rgba(129, 207, 255, 0.8);
}

/* --- Table Footer --- */
.em-table-footer[b-84aiygc47f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.75rem;
    background: rgba(17, 20, 22, 0.3);
}

.em-table-footer-text[b-84aiygc47f] {
    font-size: 0.75rem;
    color: #70767c;
    font-style: italic;
    margin: 0;
}

/* --- Inline Spinner --- */
.inline-spinner[b-84aiygc47f] {
    width: 24px;
    height: 24px;
    border: 3px solid #334155;
    border-top-color: #0088CC;
    border-radius: 50%;
    animation: inline-spin-b-84aiygc47f 0.8s linear infinite;
    margin: 0 auto;
}

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

/* --- Responsive --- */
@media (max-width: 1199px) {
    .em-stats-grid[b-84aiygc47f] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .em-stats-grid[b-84aiygc47f] {
        grid-template-columns: 1fr;
    }
    .em-query-fields[b-84aiygc47f] {
        grid-template-columns: 1fr;
    }
    .em-header[b-84aiygc47f] {
        flex-direction: column;
    }
}

/* --- Quick status filter chips --- */
.em-table-header[b-84aiygc47f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.em-filter-chips[b-84aiygc47f] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.em-chip[b-84aiygc47f] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1.5px solid #d9e1e8;
    border-radius: 999px;
    background: #fff;
    color: #5b6b78;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
}

.em-chip:hover[b-84aiygc47f] { border-color: #b8c4cf; color: #33424e; }

.em-chip .em-chip-dot[b-84aiygc47f] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* Active state per status colour */
.em-chip.active[b-84aiygc47f] { color: #fff; border-color: transparent; }
.em-chip.active .em-chip-dot[b-84aiygc47f] { opacity: 1; background: #fff; }
.em-chip.active.all[b-84aiygc47f] { background: #33424e; }
.em-chip.active.pending[b-84aiygc47f] { background: #d98a1f; }
.em-chip.active.completed[b-84aiygc47f] { background: #1a9e5f; }
.em-chip.active.failed[b-84aiygc47f] { background: #d64545; }
.em-chip.active.cancelled[b-84aiygc47f] { background: #7a8794; }
/* /Components/Pages/CardPrintingJob.razor.rz.scp.css */
/* === ServicePoint Emboss Card — Dark Slate === */

.emboss-content[b-tbivynnsem] {
    width: 100%;
}

/* --- Header --- */
.emboss-header[b-tbivynnsem] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.emboss-breadcrumb[b-tbivynnsem] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.emboss-breadcrumb-link[b-tbivynnsem] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
}

.emboss-breadcrumb-link:hover[b-tbivynnsem] {
    color: #0088CC;
}

.emboss-breadcrumb-sep[b-tbivynnsem] {
    width: 1.5rem;
    height: 1px;
    background: #334155;
}

.emboss-breadcrumb-current[b-tbivynnsem] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0088CC;
}

.emboss-title[b-tbivynnsem] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
}

.emboss-subtitle[b-tbivynnsem] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.emboss-queue-label[b-tbivynnsem] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #64748b;
}

.emboss-dot[b-tbivynnsem] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #64748b;
}

.emboss-ready-label[b-tbivynnsem] {
    font-size: 0.8125rem;
    font-weight: 500;
    font-style: italic;
    color: #0088CC;
}

.emboss-header-actions[b-tbivynnsem] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Why the send button is blocked — a disabled control alone doesn't explain itself. */
.emboss-blocked-hint[b-tbivynnsem] {
    max-width: 17rem;
    margin: 0;
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #f59e0b;
}

.btn-emboss-primary[b-tbivynnsem] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #0088CC 0%, #004c6b 100%);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.2);
    transition: transform 0.1s, box-shadow 0.2s;
}

.btn-emboss-primary:hover:not(:disabled)[b-tbivynnsem] {
    box-shadow: 0 6px 24px rgba(0, 136, 204, 0.3);
}

.btn-emboss-primary:active:not(:disabled)[b-tbivynnsem] {
    transform: scale(0.97);
}

/* Blocked (an earlier job is still awaiting its result) — read as inert, not merely faded. */
.btn-emboss-primary:disabled[b-tbivynnsem] {
    background: #253039;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Bento Grid --- */
.emboss-bento[b-tbivynnsem] {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.emboss-left[b-tbivynnsem] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.emboss-right[b-tbivynnsem] {
    display: flex;
    flex-direction: column;
}

/* --- Card Art --- */
.emboss-card-art[b-tbivynnsem] {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586 / 1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.emboss-card-img[b-tbivynnsem] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.emboss-card-overlay[b-tbivynnsem] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
}

.emboss-card-top[b-tbivynnsem] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.emboss-card-issuer[b-tbivynnsem] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.emboss-card-contactless[b-tbivynnsem] {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.emboss-card-bottom[b-tbivynnsem] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.emboss-card-number[b-tbivynnsem] {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.2em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.emboss-card-row[b-tbivynnsem] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.emboss-card-holder[b-tbivynnsem] {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- Secondary Meta Cards --- */
.emboss-meta-grid[b-tbivynnsem] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.emboss-meta-card[b-tbivynnsem] {
    background: #161a1e;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border-left: 2px solid rgba(0, 136, 204, 0.2);
}

.emboss-meta-label[b-tbivynnsem] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #64748b;
    margin: 0 0 0.75rem;
}

.emboss-meta-value[b-tbivynnsem] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0;
}

.emboss-cents[b-tbivynnsem] {
    font-size: 0.5em;
    font-weight: 700;
    color: #0088CC;
}

.emboss-meta-hint[b-tbivynnsem] {
    font-size: 0.75rem;
    font-weight: 500;
    font-style: italic;
    color: #0088CC;
    margin: 0.25rem 0 0;
}

.emboss-meta-hint-muted[b-tbivynnsem] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.emboss-meta-status[b-tbivynnsem] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.emboss-status-dot[b-tbivynnsem] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}

.emboss-status-dot.pending[b-tbivynnsem] {
    background: #0088CC;
    box-shadow: 0 0 10px #0088CC;
}

/* --- Glass Panel (Right) --- */
.emboss-glass-panel[b-tbivynnsem] {
    background: rgba(32, 38, 44, 0.6);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
}

.emboss-section[b-tbivynnsem] {
    /* sections within glass panel */
}

.emboss-section-title[b-tbivynnsem] {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emboss-section-title i[b-tbivynnsem] {
    color: #0088CC;
}

/* Shipping Address */
.emboss-address-card[b-tbivynnsem] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(66, 73, 78, 0.15);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.emboss-address-name[b-tbivynnsem] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.25rem;
}

.emboss-address-line[b-tbivynnsem] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Embossing Specs */
.emboss-specs-list[b-tbivynnsem] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.emboss-spec-item[b-tbivynnsem] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(66, 73, 78, 0.15);
}

.emboss-spec-item:last-child[b-tbivynnsem] {
    border-bottom: none;
}

.emboss-spec-label[b-tbivynnsem] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
}

.emboss-spec-value[b-tbivynnsem] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
}

.emboss-spec-primary[b-tbivynnsem] {
    color: #0088CC;
}

.emboss-foil-dot[b-tbivynnsem] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0c0c0;
    flex-shrink: 0;
}

/* Info Callout */
.emboss-info-callout[b-tbivynnsem] {
    background: rgba(0, 136, 204, 0.05);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
}

.emboss-info-icon[b-tbivynnsem] {
    color: #0088CC;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.emboss-info-text[b-tbivynnsem] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

/* --- Embossing Events Table --- */
.emboss-events-section[b-tbivynnsem] {
    margin-bottom: 2.5rem;
}

.emboss-events-header[b-tbivynnsem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: rgba(17, 20, 22, 0.5);
    border-radius: 1rem 1rem 0 0;
    border: 1px solid #334155;
    border-bottom: none;
}

.emboss-events-title[b-tbivynnsem] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.emboss-events-subtitle[b-tbivynnsem] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.125rem 0 0;
}

.emboss-live-badge[b-tbivynnsem] {
    padding: 0.25rem 0.75rem;
    background: #20262c;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
}

.emboss-events-table-wrap[b-tbivynnsem] {
    background: #1b2025;
    border: 1px solid #334155;
    border-top: none;
    overflow: hidden;
}

.emboss-events-table[b-tbivynnsem] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.emboss-events-table thead th[b-tbivynnsem] {
    background: rgba(17, 20, 22, 0.6);
    color: #64748b;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}

.emboss-events-table tbody td[b-tbivynnsem] {
    padding: 1.25rem 2rem;
    vertical-align: middle;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(66, 73, 78, 0.08);
}

.emboss-events-table tbody tr:last-child td[b-tbivynnsem] {
    border-bottom: none;
}

.emboss-event-row[b-tbivynnsem] {
    transition: background-color 0.15s, border-left 0.15s;
    border-left: 3px solid transparent;
}

.emboss-event-row:hover[b-tbivynnsem] {
    background: #252d33;
    border-left-color: #0088CC;
}

.emboss-event-icon[b-tbivynnsem] {
    font-size: 1.125rem;
}

.emboss-event-icon.icon-primary[b-tbivynnsem] {
    color: #0088CC;
}

.emboss-event-icon.icon-error[b-tbivynnsem] {
    color: #ee7d77;
}

.emboss-event-name[b-tbivynnsem] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
}

.emboss-event-time[b-tbivynnsem] {
    font-size: 0.875rem;
    color: #64748b;
}

.emboss-event-operator[b-tbivynnsem] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #f1f5f9;
}

/* Status Pills */
.emboss-status-pill[b-tbivynnsem] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.emboss-status-pill.in-progress[b-tbivynnsem] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.emboss-status-pill.error[b-tbivynnsem] {
    color: #ee7d77;
}

.emboss-error-dot[b-tbivynnsem] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ee7d77;
    box-shadow: 0 0 8px #ee7d77;
}

.emboss-status-text[b-tbivynnsem] {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Action Buttons */
.btn-emboss-evolve[b-tbivynnsem] {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 0.25rem;
    color: #38bdf8;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    /* Block margin keeps a gap when the actions cell wraps the buttons into a stack. */
    margin: 0.1875rem 0.5rem 0.1875rem 0;
    transition: transform 0.1s;
}

.btn-emboss-evolve:hover[b-tbivynnsem] {
    background: rgba(56, 189, 248, 0.12);
    transform: scale(1.05);
}

.btn-emboss-evolve:active[b-tbivynnsem] {
    transform: scale(0.95);
}

.btn-emboss-record[b-tbivynnsem] {
    padding: 0.375rem 0.75rem;
    background: #0088CC;
    border: none;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.2);
    margin: 0.1875rem 0;
    transition: transform 0.1s;
}

.btn-emboss-record:hover[b-tbivynnsem] {
    transform: scale(1.05);
}

.btn-emboss-record:active[b-tbivynnsem] {
    transform: scale(0.95);
}

.btn-emboss-more[b-tbivynnsem] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.15s;
}

.btn-emboss-more:hover[b-tbivynnsem] {
    color: #f1f5f9;
}

/* Footer */
.emboss-events-footer[b-tbivynnsem] {
    padding: 1rem 2rem;
    background: rgba(17, 20, 22, 0.3);
    border: 1px solid #334155;
    border-top: 1px solid rgba(66, 73, 78, 0.15);
    border-radius: 0 0 1rem 1rem;
    text-align: center;
}

.emboss-footer-link[b-tbivynnsem] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: color 0.15s;
}

.emboss-footer-link:hover[b-tbivynnsem] {
    color: #0088CC;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .emboss-bento[b-tbivynnsem] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .emboss-header[b-tbivynnsem] {
        flex-direction: column;
        align-items: flex-start;
    }
    .emboss-meta-grid[b-tbivynnsem] {
        grid-template-columns: 1fr;
    }
    .emboss-title[b-tbivynnsem] {
        font-size: 1.75rem;
    }
    .emboss-card-number[b-tbivynnsem] {
        font-size: 1.125rem;
    }
    .emboss-events-table thead th[b-tbivynnsem],
    .emboss-events-table tbody td[b-tbivynnsem] {
        padding: 0.875rem 1rem;
    }
}

/* --- Record Result modal --- */
.emboss-modal-backdrop[b-tbivynnsem] {
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 28, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.emboss-modal[b-tbivynnsem] {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 460px;
    padding: 1.5rem;
}

.emboss-modal-title[b-tbivynnsem] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #06121c;
    margin: 0 0 0.25rem;
}

.emboss-modal-sub[b-tbivynnsem] {
    font-size: 0.8125rem;
    color: #5b6b78;
    margin: 0 0 1rem;
}

.emboss-modal-error[b-tbivynnsem] {
    background: #fdecec;
    color: #a11;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.8125rem;
    margin-bottom: 0.9rem;
}

.emboss-modal-choice[b-tbivynnsem] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.emboss-modal-choice label[b-tbivynnsem] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid #e2e8ee;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    color: #33424e;
}

.emboss-modal-choice input[b-tbivynnsem] { margin-right: 0.25rem; }
.emboss-modal-choice .choice-approve.selected[b-tbivynnsem] { border-color: #1a9e5f; background: #eafaf1; color: #0d6b3f; }
.emboss-modal-choice .choice-reject.selected[b-tbivynnsem] { border-color: #d64545; background: #fdecec; color: #a11; }

.emboss-modal-field[b-tbivynnsem] { margin-bottom: 0.75rem; }
.emboss-modal-field label[b-tbivynnsem] {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7885;
    margin-bottom: 0.3rem;
}
.emboss-modal-field select[b-tbivynnsem],
.emboss-modal-field input[b-tbivynnsem] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid #d9e1e8;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    color: #1f2c36;
    background: #fff;
}

.emboss-modal-note[b-tbivynnsem] {
    font-size: 0.78rem;
    color: #5b6b78;
    background: #f4f7fa;
    border-radius: 0.45rem;
    padding: 0.6rem 0.7rem;
    margin: 0 0 1rem;
}

.emboss-modal-actions[b-tbivynnsem] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.btn-emboss-secondary[b-tbivynnsem] {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    background: #eef2f6;
    border: none;
    border-radius: 0.5rem;
    color: #33424e;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-emboss-secondary:hover[b-tbivynnsem] { background: #e2e8ee; }
.btn-emboss-secondary:disabled[b-tbivynnsem] { opacity: 0.5; cursor: not-allowed; }

.btn-emboss-danger[b-tbivynnsem] {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(135deg, #e05656 0%, #a11 100%);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(209, 45, 45, 0.2);
    transition: transform 0.1s, box-shadow 0.2s;
}
.btn-emboss-danger:hover[b-tbivynnsem] { box-shadow: 0 6px 24px rgba(209, 45, 45, 0.3); }
.btn-emboss-danger:active[b-tbivynnsem] { transform: scale(0.97); }
.btn-emboss-danger:disabled[b-tbivynnsem] { opacity: 0.5; cursor: not-allowed; }

/* Supplementary-card shipping note — the mailing party differs from the cardholder. */
.emboss-holder-note[b-tbivynnsem] {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #94a3b8;
}
/* /Components/Pages/Cards.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Cards Management – Card Lifecycle Dashboard
   Dark slate theme matching ServicePoint design system
   ═══════════════════════════════════════════════════════════ */

.cards-content[b-kfp4okx0nj] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ═══ Header ═══ */
.cards-header[b-kfp4okx0nj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.cards-title[b-kfp4okx0nj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.cards-subtitle[b-kfp4okx0nj] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.header-actions[b-kfp4okx0nj] {
    display: flex;
    gap: 0.75rem;
}

.issue-card-btn[b-kfp4okx0nj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.2);
    transition: all 0.2s;
}

.issue-card-btn:hover[b-kfp4okx0nj] {
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.35);
}

/* ═══ Filter Bar ═══ */
.filter-bar[b-kfp4okx0nj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-bottom: none;
    border-radius: 0.75rem 0.75rem 0 0;
}

.filter-controls[b-kfp4okx0nj] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.search-wrapper[b-kfp4okx0nj] {
    position: relative;
}

.search-wrapper i[b-kfp4okx0nj] {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #475569;
    font-size: 0.75rem;
}

.filter-search[b-kfp4okx0nj] {
    width: 14rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: #e2e8f0;
    outline: none;
    font-family: inherit;
    transition: box-shadow 0.2s;
}

.filter-search:focus[b-kfp4okx0nj] {
    box-shadow: 0 0 0 1px #0088CC;
}

.filter-search[b-kfp4okx0nj]::placeholder {
    color: #475569;
}

.search-quick-icons[b-kfp4okx0nj] {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
}

.sq-btn[b-kfp4okx0nj] {
    background: none;
    border: none;
    color: #475569;
    font-size: 0.8125rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.sq-btn:hover[b-kfp4okx0nj] {
    color: #0088CC;
    background: rgba(0, 136, 204, 0.1);
}

.clickable-row[b-kfp4okx0nj] {
    cursor: pointer;
}

.clickable-row:hover[b-kfp4okx0nj] {
    background-color: rgba(0, 136, 204, 0.05);
}

.filter-select[b-kfp4okx0nj] {
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: #e2e8f0;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.filter-select:focus[b-kfp4okx0nj] {
    box-shadow: 0 0 0 1px #0088CC;
}

.filter-count[b-kfp4okx0nj] {
    font-size: 0.75rem;
    color: #475569;
    white-space: nowrap;
}

.filter-count strong[b-kfp4okx0nj] {
    color: #e2e8f0;
    font-weight: 700;
}

/* ═══ Table Card ═══ */
.table-card[b-kfp4okx0nj] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0 0 0.75rem 0.75rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.table-scroll[b-kfp4okx0nj] {
    overflow-x: auto;
}

.cards-table[b-kfp4okx0nj] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

/* ── Table Head ── */
.cards-table thead tr[b-kfp4okx0nj] {
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}

.cards-table th[b-kfp4okx0nj] {
    padding: 1rem 1.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #475569;
    white-space: nowrap;
}

.sortable-col[b-kfp4okx0nj] {
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
}

.sortable-col:hover[b-kfp4okx0nj] {
    color: #94a3b8;
}

.sort-icon[b-kfp4okx0nj] {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    color: #475569;
}

/* ── Table Body ── */
.cards-table tbody tr[b-kfp4okx0nj] {
    border-top: 1px solid rgba(51, 65, 85, 0.12);
    transition: background 0.15s;
}

.cards-table tbody tr:hover[b-kfp4okx0nj] {
    background: rgba(37, 45, 51, 0.4);
}

.cards-table td[b-kfp4okx0nj] {
    padding: 1rem 1.5rem;
    vertical-align: middle;
}

.text-right[b-kfp4okx0nj] {
    text-align: right;
}

/* ── Card Number ── */
.card-number[b-kfp4okx0nj] {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #e2e8f0;
}

/* ── Cardholder Cell ── */
.holder-cell[b-kfp4okx0nj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.holder-avatar[b-kfp4okx0nj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.holder-name[b-kfp4okx0nj] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* ── Card Type Badge ── */
.type-badge[b-kfp4okx0nj] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: rgba(51, 65, 85, 0.4);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

/* ── Network ── */
.network-label[b-kfp4okx0nj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* ── Expiry ── */
.expiry-label[b-kfp4okx0nj] {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: #64748b;
}

/* ═══ Status Pills ═══ */
.status-pill[b-kfp4okx0nj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
}

.status-dot[b-kfp4okx0nj] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.status-active[b-kfp4okx0nj] {
    background: rgba(0, 150, 57, 0.1);
    color: #10b981;
}

.status-active .status-dot[b-kfp4okx0nj] {
    background: #10b981;
}

.status-blocked[b-kfp4okx0nj] {
    background: rgba(220, 38, 38, 0.1);
    color: #ef4444;
}

.status-blocked .status-dot[b-kfp4okx0nj] {
    background: #ef4444;
}

.status-expired[b-kfp4okx0nj] {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.status-expired .status-dot[b-kfp4okx0nj] {
    background: #64748b;
}

.status-pending[b-kfp4okx0nj] {
    background: rgba(244, 130, 31, 0.1);
    color: #f59e0b;
}

.status-pending .status-dot[b-kfp4okx0nj] {
    background: #f59e0b;
}

/* ── Actions ── */
.action-menu-btn[b-kfp4okx0nj] {
    padding: 0.375rem;
    background: none;
    border: none;
    color: #475569;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.2s;
}

.action-menu-btn:hover[b-kfp4okx0nj] {
    color: #0088CC;
}

/* ═══ Pagination Footer ═══ */
.table-footer[b-kfp4okx0nj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(15, 23, 42, 0.3);
    border-top: 1px solid rgba(51, 65, 85, 0.15);
}

.page-nav-btn[b-kfp4okx0nj] {
    padding: 0.375rem 0.75rem;
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}

.page-nav-btn:hover:not(:disabled)[b-kfp4okx0nj] {
    color: #e2e8f0;
}

.page-nav-btn:disabled[b-kfp4okx0nj] {
    opacity: 0.5;
    cursor: default;
}

.page-numbers[b-kfp4okx0nj] {
    display: flex;
    gap: 0.25rem;
}

.page-num[b-kfp4okx0nj] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    background: none;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-num:hover[b-kfp4okx0nj] {
    background: rgba(51, 65, 85, 0.4);
}

.page-num.active[b-kfp4okx0nj] {
    background: #0088CC;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.25);
}

.page-ellipsis[b-kfp4okx0nj] {
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.75rem;
}

/* ═══ Responsive ═══ */
@media (max-width: 1024px) {
    .filter-bar[b-kfp4okx0nj] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-count[b-kfp4okx0nj] {
        text-align: right;
    }
}

@media (max-width: 768px) {
    .cards-content[b-kfp4okx0nj] {
        padding: 1rem;
    }

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

    .filter-controls[b-kfp4okx0nj] {
        flex-direction: column;
    }

    .filter-search[b-kfp4okx0nj] {
        width: 100%;
    }
}
/* /Components/Pages/Customer.razor.rz.scp.css */
/* =====================================================
   Customer Page — Scoped Styles
   ===================================================== */

.customer-content[b-lyq0401zax] {
    padding: 0;
}

/* Clickable customer rows */
[b-lyq0401zax] .customer-row {
    cursor: pointer;
    transition: background-color 0.12s;
}

[b-lyq0401zax] .customer-row:hover {
    background-color: rgba(0, 136, 204, 0.05) !important;
}

/* Search bar */
.search-bar-wrap[b-lyq0401zax] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-lyq0401zax] {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.search-input[b-lyq0401zax] {
    padding: 1rem 16rem 1rem 3rem;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus[b-lyq0401zax] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
    background: var(--card-bg);
    color: var(--text-color);
}

.search-input[b-lyq0401zax]::placeholder {
    color: #64748b;
}

/* Search bar actions container (right side, embedded) */
.search-bar-actions[b-lyq0401zax] {
    position: absolute;
    right: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

/* Search/dropdown trigger button */
.btn-search-go[b-lyq0401zax] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    transition: color 0.2s, background-color 0.2s;
}

.btn-search-go:hover:not(:disabled)[b-lyq0401zax] {
    color: var(--primary-color);
    background: rgba(0, 136, 204, 0.1);
}

.btn-search-go:disabled[b-lyq0401zax] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Vertical divider between search icon and quick buttons */
.search-divider[b-lyq0401zax] {
    width: 1px;
    height: 1.25rem;
    background: var(--card-border);
    margin: 0 0.25rem;
}

/* Quick mode buttons (Number / Name) */
.btn-search-quick[b-lyq0401zax] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-search-quick:hover[b-lyq0401zax] {
    color: var(--primary-color);
    background: rgba(0, 136, 204, 0.08);
}

.btn-search-quick.active[b-lyq0401zax] {
    color: var(--primary-color);
    background: rgba(0, 136, 204, 0.15);
}

/* Filter row selects */
.filter-select[b-lyq0401zax] {
    font-size: 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    min-width: 120px;
}

.filter-select:focus[b-lyq0401zax] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.15);
}

/* Table styling */
.customer-table thead th[b-lyq0401zax] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    background: rgba(2, 6, 23, 0.3);
}

.customer-table tbody td[b-lyq0401zax] {
    padding: 0.875rem 1.5rem;
    vertical-align: middle;
    border-bottom-color: var(--card-border);
}

.customer-table tbody tr:hover[b-lyq0401zax] {
    background: rgba(255, 255, 255, 0.02);
}

/* Avatar circles */
.avatar-circle[b-lyq0401zax] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.avatar-blue[b-lyq0401zax] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.avatar-purple[b-lyq0401zax] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* Type badge */
.type-badge[b-lyq0401zax] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Status badge */
.status-badge[b-lyq0401zax] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-lyq0401zax] {
    background: rgba(0, 150, 57, 0.1);
    color: var(--success-color);
}

.status-badge.inactive[b-lyq0401zax] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.status-dot[b-lyq0401zax] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    display: inline-block;
}

.status-badge.active .status-dot[b-lyq0401zax] {
    background: var(--success-color);
}

.status-badge.inactive .status-dot[b-lyq0401zax] {
    background: var(--text-muted);
}

/* Action icon button */
.btn-icon[b-lyq0401zax] {
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s, background 0.2s;
}

.btn-icon:hover[b-lyq0401zax] {
    color: var(--primary-color);
    background: rgba(0, 136, 204, 0.1);
}

/* Pagination */
.pagination-bar[b-lyq0401zax] {
    border-top: 1px solid var(--card-border);
    background: rgba(2, 6, 23, 0.3);
}

.page-btn[b-lyq0401zax] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-color);
    background: transparent;
    border: none;
    transition: background 0.2s;
}

.page-btn:hover[b-lyq0401zax] {
    background: rgba(255, 255, 255, 0.06);
}

.page-btn.active[b-lyq0401zax] {
    background: var(--primary-color);
    color: #fff;
}

/* Alert styling for dark theme */
.alert-danger[b-lyq0401zax] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    border-radius: 0.75rem;
}

.btn-close-white[b-lyq0401zax] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =====================================================
   Entity Selection Modal Styles
   ===================================================== */

.entity-card[b-lyq0401zax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 2px solid var(--card-border);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.entity-card:hover[b-lyq0401zax] {
    border-color: rgba(0, 136, 204, 0.4);
}

.entity-card.selected[b-lyq0401zax] {
    border-color: var(--primary-color);
    background: rgba(0, 136, 204, 0.05);
}

.entity-icon[b-lyq0401zax] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.entity-card:hover .entity-icon[b-lyq0401zax] {
    transform: scale(1.1);
}

.entity-icon.individual[b-lyq0401zax] {
    background: rgba(0, 136, 204, 0.1);
    color: var(--primary-color);
}

.entity-icon.corporate[b-lyq0401zax] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.entity-card.selected .entity-icon.corporate[b-lyq0401zax] {
    background: rgba(0, 136, 204, 0.1);
    color: var(--primary-color);
}

.info-callout[b-lyq0401zax] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 136, 204, 0.05);
    border: 1px solid rgba(0, 136, 204, 0.2);
    border-radius: 0.5rem;
}
/* /Components/Pages/CustomerDetail.razor.rz.scp.css */
/* === ServicePoint Customer Detail — Dark Slate === */

.detail-content[b-at9v844fjs] {
    width: 100%;
}

/* --- Breadcrumb --- */
.breadcrumb-bar[b-at9v844fjs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.breadcrumb-link[b-at9v844fjs] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0088CC;
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-link:hover[b-at9v844fjs] {
    color: #0077b3;
}

.breadcrumb-sep[b-at9v844fjs] {
    font-size: 0.625rem;
    color: #64748b;
}

.breadcrumb-current[b-at9v844fjs] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

/* --- Hero Grid (Profile + Contact) --- */
.hero-grid[b-at9v844fjs] {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* --- Profile Hero Card --- */
.profile-hero[b-at9v844fjs] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.profile-hero-glow[b-at9v844fjs] {
    position: absolute;
    top: -4rem;
    right: -4rem;
    width: 8rem;
    height: 8rem;
    background: rgba(0, 136, 204, 0.06);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.profile-hero-inner[b-at9v844fjs] {
    position: relative;
    z-index: 1;
}

.party-type-badge[b-at9v844fjs] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: rgba(0, 136, 204, 0.1);
    border: 1px solid rgba(0, 136, 204, 0.2);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0088CC;
}

.party-id-label[b-at9v844fjs] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
}

.field-label[b-at9v844fjs] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin: 0 0 0.25rem;
}

.field-value[b-at9v844fjs] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.profile-name[b-at9v844fjs] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.name-title[b-at9v844fjs] {
    font-weight: 300;
    color: #0088CC;
    margin-right: 0.25rem;
}

.profile-details-grid[b-at9v844fjs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.btn-online-info[b-at9v844fjs] {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #0088CC, #004c6b);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-online-info:hover[b-at9v844fjs] {
    opacity: 0.9;
}

/* --- Contact Grid --- */
.contact-grid[b-at9v844fjs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* --- Info Cards (Address, Contact) --- */
.info-card[b-at9v844fjs] {
    background: rgba(22, 26, 30, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.info-card-accent[b-at9v844fjs] {
    border-left: 2px solid rgba(0, 136, 204, 0.4);
}

.info-card-span2[b-at9v844fjs] {
    grid-column: span 2;
}

.info-card-header[b-at9v844fjs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.info-card-title[b-at9v844fjs] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin: 0;
}

.info-card-icon[b-at9v844fjs] {
    font-size: 1.125rem;
    color: #64748b;
}

.info-card-icon.accent[b-at9v844fjs] {
    color: #0088CC;
}

.info-card-text[b-at9v844fjs] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin: 0 0 0.125rem;
}

.info-card-muted[b-at9v844fjs] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.5rem 0 0;
}

/* --- Communication Channels --- */
.channels-grid[b-at9v844fjs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.channel-item[b-at9v844fjs] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.channel-icon[b-at9v844fjs] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #20262c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0088CC;
    font-size: 1rem;
    flex-shrink: 0;
}

.channel-label[b-at9v844fjs] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 0.125rem;
}

.channel-value[b-at9v844fjs] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #e2e8f0;
    margin: 0;
}

/* --- Financial Portfolio --- */
.portfolio-section[b-at9v844fjs] {
    margin-bottom: 2.5rem;
}

.portfolio-header[b-at9v844fjs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.btn-apply-account[b-at9v844fjs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0088CC;
    background: rgba(0, 136, 204, 0.08);
    border: 1px solid rgba(0, 136, 204, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-apply-account:hover[b-at9v844fjs] {
    background: rgba(0, 136, 204, 0.15);
    border-color: rgba(0, 136, 204, 0.5);
    color: #29a3e0;
    transform: translateY(-1px);
}

.btn-apply-account:active[b-at9v844fjs] {
    transform: translateY(0);
}

.btn-apply-account i[b-at9v844fjs] {
    font-size: 0.875rem;
}

.section-title[b-at9v844fjs] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -0.01em;
}

.aggregate-balance[b-at9v844fjs] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.aggregate-balance strong[b-at9v844fjs] {
    color: #0088CC;
    font-weight: 700;
}

/* Net credit: same green-CR convention as the portfolio rows and the payment hero. */
.aggregate-balance strong.credit[b-at9v844fjs] {
    color: #34d399;
}

.portfolio-card[b-at9v844fjs] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.portfolio-table[b-at9v844fjs] {
    width: 100%;
    text-align: left;
}

.portfolio-table thead th[b-at9v844fjs] {
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.portfolio-table tbody td[b-at9v844fjs] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.2);
    vertical-align: middle;
    font-size: 0.875rem;
}

.portfolio-table tbody tr:last-child td[b-at9v844fjs] {
    border-bottom: none;
}

.portfolio-table tbody tr:hover[b-at9v844fjs] {
    background: rgba(37, 45, 51, 0.5);
    transition: background-color 0.15s;
}

.portfolio-row[b-at9v844fjs] {
    cursor: pointer;
}

.acct-dot[b-at9v844fjs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0088CC;
    box-shadow: 0 0 12px rgba(0, 136, 204, 0.5);
    flex-shrink: 0;
}

.acct-number[b-at9v844fjs] {
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.acct-balance[b-at9v844fjs] {
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}

/* Credit (positive) balances read green with a CR marker — same convention as the payment hero. */
.acct-balance.credit[b-at9v844fjs] {
    color: #34d399;
}

.status-pill[b-at9v844fjs] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-pill.active[b-at9v844fjs] {
    background: rgba(0, 150, 57, 0.1);
    color: #009639;
}

.status-pill.inactive[b-at9v844fjs] {
    background: rgba(244, 130, 31, 0.1);
    color: #F4821F;
}

.status-pill.overlimit[b-at9v844fjs] {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    margin-left: 0.375rem;
}

/* --- Expandable Cards --- */
.expandable-list[b-at9v844fjs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.expandable-card[b-at9v844fjs] {
    background: #1E293B;
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.expandable-card:hover[b-at9v844fjs] {
    border-color: rgba(0, 136, 204, 0.3);
}

.expandable-card-header[b-at9v844fjs] {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.expandable-icon[b-at9v844fjs] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #20262c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.expandable-icon.primary[b-at9v844fjs] {
    color: #0088CC;
}

.expandable-icon.tertiary[b-at9v844fjs] {
    color: #F4821F;
}

.expandable-title[b-at9v844fjs] {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.expandable-desc[b-at9v844fjs] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0.125rem 0 0;
}

.expandable-chevron[b-at9v844fjs] {
    color: #64748b;
    transition: color 0.15s;
}

.expandable-card:hover .expandable-chevron[b-at9v844fjs] {
    color: #0088CC;
}

.expandable-body[b-at9v844fjs] {
    border-top: 1px solid rgba(51, 65, 85, 0.3);
    padding: 0 1.5rem;
}

/* --- Compliance & Operational Actions --- */
.actions-section[b-at9v844fjs] {
    margin-bottom: 2rem;
}

.actions-section-label[b-at9v844fjs] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #94a3b8;
    margin: 0 0 1.5rem;
}

.actions-grid[b-at9v844fjs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.action-card[b-at9v844fjs] {
    background: rgba(22, 26, 30, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: background-color 0.2s;
}

.action-card:hover[b-at9v844fjs] {
    background: #1E293B;
}

.action-card-top[b-at9v844fjs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.action-icon[b-at9v844fjs] {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    background: #20262c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.action-icon.primary[b-at9v844fjs] {
    color: #0088CC;
}

.action-icon.danger[b-at9v844fjs] {
    color: #ef4444;
}

.action-icon.muted[b-at9v844fjs] {
    color: #94a3b8;
}

.action-badge[b-at9v844fjs] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.action-badge.review[b-at9v844fjs] {
    background: rgba(244, 130, 31, 0.1);
    color: #F4821F;
}

.action-badge.urgent[b-at9v844fjs] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.action-title[b-at9v844fjs] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.5rem;
}

.action-desc[b-at9v844fjs] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.action-link[b-at9v844fjs] {
    background: none;
    border: none;
    color: #0088CC;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: text-decoration 0.15s;
}

.action-link:hover[b-at9v844fjs] {
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .hero-grid[b-at9v844fjs] {
        grid-template-columns: 1fr;
    }
    .actions-grid[b-at9v844fjs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-grid[b-at9v844fjs] {
        grid-template-columns: 1fr;
    }
    .info-card-span2[b-at9v844fjs] {
        grid-column: span 1;
    }
    .channels-grid[b-at9v844fjs] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .profile-details-grid[b-at9v844fjs] {
        grid-template-columns: 1fr;
    }
}

/* Online-user lookup note (no linked user / error) */
.online-user-note[b-at9v844fjs] {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

/* --- Payment rail links (Bill Payments / Money Transfers) --- */
.cust-rails[b-at9v844fjs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.cust-rail-card[b-at9v844fjs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.cust-rail-card:hover[b-at9v844fjs] {
    border-color: rgba(0, 136, 204, 0.5);
    background: #223044;
}

.cust-rail-icon[b-at9v844fjs] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cust-rail-icon.billpay[b-at9v844fjs] { background: rgba(0, 136, 204, 0.12); color: #0088CC; }
.cust-rail-icon.transfer[b-at9v844fjs] { background: rgba(34, 197, 94, 0.12); color: #22c55e; }

.cust-rail-body[b-at9v844fjs] { flex: 1; min-width: 0; }

.cust-rail-title[b-at9v844fjs] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.15rem;
}

.cust-rail-desc[b-at9v844fjs] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

.cust-rail-chev[b-at9v844fjs] {
    color: #475569;
    flex-shrink: 0;
}

.cust-rail-card:hover .cust-rail-chev[b-at9v844fjs] { color: #0088CC; }

@media (max-width: 900px) {
    .cust-rails[b-at9v844fjs] { grid-template-columns: 1fr; }
}
/* /Components/Pages/CustomerMessaging.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Customer Messaging – Chat Interface
   Dark slate theme matching ServicePoint design system
   ═══════════════════════════════════════════════════════════ */

.messaging-layout[b-nx6zsnslrg] {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
}

/* ═══ Left Panel: Conversations ═══ */
.conversations-panel[b-nx6zsnslrg] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(51, 65, 85, 0.3);
    background: rgba(15, 23, 42, 0.5);
}

.conversations-tabs[b-nx6zsnslrg] {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}

.tab-btn[b-nx6zsnslrg] {
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab-btn:hover[b-nx6zsnslrg] {
    color: #94a3b8;
}

.tab-active[b-nx6zsnslrg] {
    color: #0088CC;
    font-weight: 700;
    border-bottom-color: #0088CC;
}

.conversations-list[b-nx6zsnslrg] {
    flex: 1;
    overflow-y: auto;
}

.conversation-item[b-nx6zsnslrg] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(51, 65, 85, 0.1);
    transition: background 0.15s;
}

.conversation-item:hover[b-nx6zsnslrg] {
    background: rgba(51, 65, 85, 0.2);
}

.conversation-selected[b-nx6zsnslrg] {
    background: rgba(0, 136, 204, 0.05);
    border-left: 4px solid #0088CC;
    padding-left: calc(1.5rem - 4px);
}

.conversation-avatar[b-nx6zsnslrg] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0088CC;
    flex-shrink: 0;
}

.conversation-preview[b-nx6zsnslrg] {
    flex: 1;
    min-width: 0;
}

.conversation-header-row[b-nx6zsnslrg] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.conversation-name[b-nx6zsnslrg] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-selected .conversation-name[b-nx6zsnslrg] {
    color: #f1f5f9;
}

.conversation-time[b-nx6zsnslrg] {
    font-size: 0.625rem;
    font-weight: 500;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.conversation-selected .conversation-time[b-nx6zsnslrg] {
    color: #0088CC;
}

.conversation-snippet[b-nx6zsnslrg] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.conversation-selected .conversation-snippet[b-nx6zsnslrg] {
    color: #94a3b8;
}

/* ═══ Right Panel: Chat ═══ */
.chat-panel[b-nx6zsnslrg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #0f172a;
}

/* ── Chat Header ── */
.chat-header[b-nx6zsnslrg] {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    background: rgba(30, 41, 59, 0.5);
}

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

.chat-header-avatar[b-nx6zsnslrg] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0088CC;
}

.chat-header-name[b-nx6zsnslrg] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.chat-header-status[b-nx6zsnslrg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.online-dot[b-nx6zsnslrg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.online-label[b-nx6zsnslrg] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.chat-header-actions[b-nx6zsnslrg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-action-btn[b-nx6zsnslrg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(51, 65, 85, 0.4);
    border: none;
    border-radius: 0.5rem;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-action-btn:hover[b-nx6zsnslrg] {
    background: rgba(51, 65, 85, 0.6);
    color: #f1f5f9;
}

.chat-icon-btn[b-nx6zsnslrg] {
    padding: 0.5rem;
    background: none;
    border: none;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: color 0.2s;
}

.chat-icon-btn:hover[b-nx6zsnslrg] {
    color: #f1f5f9;
}

/* ── Messages ── */
.chat-messages[b-nx6zsnslrg] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.date-separator[b-nx6zsnslrg] {
    display: flex;
    justify-content: center;
}

.date-label[b-nx6zsnslrg] {
    padding: 0.25rem 0.75rem;
    background: rgba(51, 65, 85, 0.4);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
}

.message-row[b-nx6zsnslrg] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    max-width: 80%;
}

.message-customer[b-nx6zsnslrg] {
    align-self: flex-start;
}

.message-agent[b-nx6zsnslrg] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.customer-msg-avatar[b-nx6zsnslrg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: #0088CC;
    flex-shrink: 0;
}

.agent-avatar[b-nx6zsnslrg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0088CC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.message-bubble[b-nx6zsnslrg] {
    padding: 1rem;
    border-radius: 0.75rem;
}

.message-bubble p[b-nx6zsnslrg] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.bubble-customer[b-nx6zsnslrg] {
    background: rgba(51, 65, 85, 0.4);
    color: #e2e8f0;
    border-bottom-left-radius: 0;
}

.bubble-agent[b-nx6zsnslrg] {
    background: #0088CC;
    color: #fff;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.2);
}

.message-time[b-nx6zsnslrg] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.625rem;
    color: #475569;
}

.message-time-agent[b-nx6zsnslrg] {
    text-align: right;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Input Area ── */
.chat-input-area[b-nx6zsnslrg] {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
    background: rgba(30, 41, 59, 0.3);
}

.quick-replies[b-nx6zsnslrg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.quick-replies-label[b-nx6zsnslrg] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #475569;
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.quick-reply-btn[b-nx6zsnslrg] {
    padding: 0.375rem 0.75rem;
    background: rgba(51, 65, 85, 0.4);
    border: none;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.quick-reply-btn:hover[b-nx6zsnslrg] {
    background: rgba(0, 136, 204, 0.15);
    color: #0088CC;
}

.quick-reply-btn:first-of-type[b-nx6zsnslrg] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
    border: 1px solid rgba(0, 136, 204, 0.2);
}

.input-row[b-nx6zsnslrg] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.input-wrapper[b-nx6zsnslrg] {
    flex: 1;
    background: rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    padding: 0.5rem;
    transition: box-shadow 0.2s;
}

.input-wrapper:focus-within[b-nx6zsnslrg] {
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.3);
}

.message-input[b-nx6zsnslrg] {
    width: 100%;
    background: transparent;
    border: none;
    resize: none;
    color: #e2e8f0;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    font-family: inherit;
}

.message-input[b-nx6zsnslrg]::placeholder {
    color: #475569;
}

.input-footer[b-nx6zsnslrg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
    margin-top: 0.25rem;
}

.input-actions[b-nx6zsnslrg] {
    display: flex;
    gap: 0.25rem;
}

.input-icon-btn[b-nx6zsnslrg] {
    padding: 0.375rem;
    background: none;
    border: none;
    color: #475569;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.input-icon-btn:hover[b-nx6zsnslrg] {
    color: #0088CC;
    background: rgba(0, 136, 204, 0.1);
}

.input-hint[b-nx6zsnslrg] {
    font-size: 0.625rem;
    color: #475569;
}

.send-btn[b-nx6zsnslrg] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
    transition: all 0.2s;
}

.send-btn:hover[b-nx6zsnslrg] {
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.5);
}

/* ── Empty State ── */
.chat-empty[b-nx6zsnslrg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #475569;
}

.chat-empty i[b-nx6zsnslrg] {
    font-size: 3rem;
    color: #334155;
}

.chat-empty h3[b-nx6zsnslrg] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #64748b;
    margin: 0;
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
    .conversations-panel[b-nx6zsnslrg] {
        width: 260px;
    }
}

@media (max-width: 640px) {
    .messaging-layout[b-nx6zsnslrg] {
        flex-direction: column;
    }

    .conversations-panel[b-nx6zsnslrg] {
        width: 100%;
        height: 200px;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* === ServicePoint Dark Slate Dashboard === */
.dashboard-content[b-lbcjt6bsnz] {
    width: 100%;
}

/* --- Header Row --- */
.dash-header[b-lbcjt6bsnz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.dash-header h1[b-lbcjt6bsnz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.dash-header-sub[b-lbcjt6bsnz] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0.25rem 0 0;
}

.dash-actions[b-lbcjt6bsnz] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-dash-outline[b-lbcjt6bsnz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #1E293B;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-dash-outline:hover[b-lbcjt6bsnz] {
    background: #334155;
}

.btn-dash-primary[b-lbcjt6bsnz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #0088CC;
    border: none;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.2);
    transition: background-color 0.2s;
}

.btn-dash-primary:hover[b-lbcjt6bsnz] {
    background: #0077b3;
}

/* --- Metric Cards Grid --- */
.metrics-grid[b-lbcjt6bsnz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metric-card[b-lbcjt6bsnz] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.metric-top[b-lbcjt6bsnz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.metric-icon-wrap[b-lbcjt6bsnz] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.metric-icon-wrap.primary[b-lbcjt6bsnz] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.metric-icon-wrap.accent[b-lbcjt6bsnz] {
    background: rgba(244, 130, 31, 0.1);
    color: #F4821F;
}

.metric-trend-label[b-lbcjt6bsnz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
}

.metric-label[b-lbcjt6bsnz] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    margin: 0 0 0.25rem;
}

.metric-value[b-lbcjt6bsnz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

/* --- Recent User Activity Card --- */
.activity-card[b-lbcjt6bsnz] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
}

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

.activity-header h3[b-lbcjt6bsnz] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    display: flex;
    align-items: center;
}

.activity-subtitle[b-lbcjt6bsnz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.activity-table[b-lbcjt6bsnz] {
    width: 100%;
    text-align: left;
}

.activity-table thead th[b-lbcjt6bsnz] {
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.activity-table tbody td[b-lbcjt6bsnz] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    vertical-align: middle;
    font-size: 0.875rem;
    color: #cbd5e1;
}

.activity-table tbody tr:last-child td[b-lbcjt6bsnz] {
    border-bottom: none;
}

.activity-empty[b-lbcjt6bsnz] {
    text-align: center;
    color: #64748b;
    padding: 3rem 1.5rem !important;
    font-size: 0.875rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .metrics-grid[b-lbcjt6bsnz] {
        grid-template-columns: 1fr;
    }
    .dash-header[b-lbcjt6bsnz] {
        flex-direction: column;
    }
    .activity-table thead th[b-lbcjt6bsnz],
    .activity-table tbody td[b-lbcjt6bsnz] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Pages/NewAccount.razor.rz.scp.css */
/* === ServicePoint New Account — Dark Slate === */

.new-account-content[b-pmms6p38gf] {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
}

/* --- Header --- */
.new-account-header[b-pmms6p38gf] {
    margin-bottom: 2rem;
}

.new-account-title[b-pmms6p38gf] {
    font-size: 1.875rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
}

.new-account-desc[b-pmms6p38gf] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
}

/* --- Sections --- */
.new-account-sections[b-pmms6p38gf] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section[b-pmms6p38gf] {
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    overflow: hidden;
}

.form-section-header[b-pmms6p38gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.form-section-title[b-pmms6p38gf] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.form-section-body[b-pmms6p38gf] {
    padding: 1.5rem;
}

/* --- Step Icons --- */
.step-icon[b-pmms6p38gf] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-icon.completed[b-pmms6p38gf] {
    background: rgba(0, 136, 204, 0.15);
    color: #0088CC;
    font-size: 1rem;
}

.step-icon.active[b-pmms6p38gf] {
    background: #0088CC;
    color: #fff;
}

/* --- Change Customer Link --- */
.change-link[b-pmms6p38gf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0088CC;
    text-decoration: none;
    transition: text-decoration 0.15s;
}

.change-link:hover[b-pmms6p38gf] {
    text-decoration: underline;
}

/* --- Customer Info Row --- */
.customer-info-row[b-pmms6p38gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.customer-avatar[b-pmms6p38gf] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 2rem;
}

.customer-name[b-pmms6p38gf] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
}

.customer-id[b-pmms6p38gf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0088CC;
    margin-top: 0.125rem;
}

/* --- Product Config Grid --- */
.product-config-grid[b-pmms6p38gf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.product-fields[b-pmms6p38gf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Form Fields --- */
.field-group[b-pmms6p38gf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label[b-pmms6p38gf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #cbd5e1;
}

.select-wrap[b-pmms6p38gf] {
    position: relative;
}

.field-select[b-pmms6p38gf] {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    font-weight: 500;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.field-select:focus[b-pmms6p38gf] {
    outline: none;
    border-color: #0088CC;
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.15);
}

.select-chevron[b-pmms6p38gf] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.75rem;
    pointer-events: none;
}

.input-with-prefix[b-pmms6p38gf] {
    position: relative;
}

.input-prefix[b-pmms6p38gf] {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-weight: 700;
    font-size: 0.875rem;
    pointer-events: none;
}

.field-input[b-pmms6p38gf] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.2s;
}

.field-input:focus[b-pmms6p38gf] {
    outline: none;
    border-color: #0088CC;
    box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.15);
}

.field-input[b-pmms6p38gf]::placeholder {
    color: #475569;
}

/* Hide spin buttons on number input */
.field-input[type="number"][b-pmms6p38gf]::-webkit-inner-spin-button,
.field-input[type="number"][b-pmms6p38gf]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.field-input[type="number"][b-pmms6p38gf] {
    -moz-appearance: textfield;
}

.field-hint[b-pmms6p38gf] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

/* --- Card Preview --- */
.card-preview-area[b-pmms6p38gf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-preview-visual[b-pmms6p38gf] {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1.586 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s;
}

.card-preview-visual:hover[b-pmms6p38gf] {
    transform: scale(1.02);
}

.card-preview-img[b-pmms6p38gf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-preview-overlay[b-pmms6p38gf] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.card-brand-row[b-pmms6p38gf] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 340px;
    margin-bottom: 0.75rem;
}

.card-preview-top[b-pmms6p38gf] {
    display: flex;
    align-items: flex-start;
}

.card-preview-label[b-pmms6p38gf] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
}

.card-preview-product[b-pmms6p38gf] {
    font-size: 0.875rem;
    font-weight: 800;
    color: #fff;
    font-style: italic;
}

.card-preview-brand[b-pmms6p38gf] {
    height: 48px;
}

.card-preview-bottom[b-pmms6p38gf] {
    /* bottom of card */
}

.card-preview-number[b-pmms6p38gf] {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.card-preview-holder[b-pmms6p38gf] {
    display: flex;
    gap: 1.5rem;
}

.card-preview-detail-label[b-pmms6p38gf] {
    font-size: 0.4375rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.0625rem;
}

.card-preview-detail-value[b-pmms6p38gf] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
}

.card-preview-caption[b-pmms6p38gf] {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

/* --- Approval Callout --- */
.approval-callout[b-pmms6p38gf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(0, 136, 204, 0.05);
    border: 1px solid rgba(0, 136, 204, 0.2);
    border-radius: 0.75rem;
}

.approval-callout-icon[b-pmms6p38gf] {
    flex-shrink: 0;
    color: #0088CC;
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.approval-callout-title[b-pmms6p38gf] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.25rem;
}

.approval-callout-text[b-pmms6p38gf] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

/* --- Form Actions --- */
.form-actions[b-pmms6p38gf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-bottom: 3rem;
}

.btn-form-cancel[b-pmms6p38gf] {
    padding: 0.75rem 2rem;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-form-cancel:hover[b-pmms6p38gf] {
    background: rgba(51, 65, 85, 0.3);
    color: #e2e8f0;
}

.btn-form-submit[b-pmms6p38gf] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 2.5rem;
    background: #0088CC;
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.25);
    transition: background-color 0.2s, transform 0.1s;
}

.btn-form-submit:hover[b-pmms6p38gf] {
    background: #0077b3;
}

.btn-form-submit:active[b-pmms6p38gf] {
    transform: scale(0.98);
}

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

/* --- Responsive --- */
@media (max-width: 899px) {
    .product-config-grid[b-pmms6p38gf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .form-section-header[b-pmms6p38gf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .customer-info-row[b-pmms6p38gf] {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-actions[b-pmms6p38gf] {
        flex-direction: column-reverse;
    }
    .btn-form-cancel[b-pmms6p38gf],
    .btn-form-submit[b-pmms6p38gf] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Onboarding Requests – Pending Review Portal
   Dark slate theme matching ServicePoint design system
   ═══════════════════════════════════════════════════════════ */

.onboarding-content[b-yd5f49kv3b] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Header ── */
.onboarding-header[b-yd5f49kv3b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.onboarding-title[b-yd5f49kv3b] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.03em;
    margin: 0;
}

.onboarding-subtitle[b-yd5f49kv3b] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0.375rem 0 0;
}

.header-actions[b-yd5f49kv3b] {
    display: flex;
    gap: 0.75rem;
}

.export-btn[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    background: transparent;
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.export-btn:hover[b-yd5f49kv3b] {
    background: rgba(51, 65, 85, 0.3);
    border-color: rgba(51, 65, 85, 0.8);
}

.manual-entry-btn[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.2);
    transition: all 0.2s;
}

.manual-entry-btn:hover[b-yd5f49kv3b] {
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.35);
}

/* ═══ Stats Row ═══ */
.stats-row[b-yd5f49kv3b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-card[b-yd5f49kv3b] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-yd5f49kv3b] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon-blue[b-yd5f49kv3b] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.stat-icon-amber[b-yd5f49kv3b] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-icon-purple[b-yd5f49kv3b] {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.stat-label[b-yd5f49kv3b] {
    font-size: 0.875rem;
    color: #64748b;
}

.stat-value-row[b-yd5f49kv3b] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.stat-value[b-yd5f49kv3b] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
}

.stat-trend[b-yd5f49kv3b] {
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-trend-up[b-yd5f49kv3b] {
    color: #10b981;
}

.stat-trend-down[b-yd5f49kv3b] {
    color: #ef4444;
}

/* ═══ Table Card ═══ */
.table-card[b-yd5f49kv3b] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* ── Filters ── */
.table-filters[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.2);
}

.search-wrapper[b-yd5f49kv3b] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-wrapper i[b-yd5f49kv3b] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #475569;
}

.filter-search[b-yd5f49kv3b] {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.25rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    outline: none;
    font-family: inherit;
    transition: box-shadow 0.2s;
}

.filter-search:focus[b-yd5f49kv3b] {
    box-shadow: 0 0 0 1px #0088CC;
}

.filter-search[b-yd5f49kv3b]::placeholder {
    color: #475569;
}

.filter-dropdowns[b-yd5f49kv3b] {
    display: flex;
    gap: 0.75rem;
}

.filter-select[b-yd5f49kv3b] {
    padding: 0.625rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    outline: none;
    font-family: inherit;
    min-width: 140px;
    cursor: pointer;
}

.filter-select:focus[b-yd5f49kv3b] {
    box-shadow: 0 0 0 1px #0088CC;
}

/* ── Table ── */
.table-scroll[b-yd5f49kv3b] {
    overflow-x: auto;
}

.onboarding-table[b-yd5f49kv3b] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.onboarding-table thead tr[b-yd5f49kv3b] {
    background: rgba(17, 20, 22, 0.3);
}

.onboarding-table th[b-yd5f49kv3b] {
    padding: 1rem 1.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    white-space: nowrap;
}

.onboarding-table tbody tr[b-yd5f49kv3b] {
    border-top: 1px solid rgba(51, 65, 85, 0.15);
    transition: background 0.15s;
}

.onboarding-table tbody tr:hover[b-yd5f49kv3b] {
    background: rgba(37, 45, 51, 0.4);
}

.onboarding-table td[b-yd5f49kv3b] {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
}

.text-right[b-yd5f49kv3b] {
    text-align: right;
}

/* ── Applicant Cell ── */
.applicant-cell[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.applicant-avatar[b-yd5f49kv3b] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2b3e46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
    flex-shrink: 0;
}

.avatar-corporate[b-yd5f49kv3b] {
    background: rgba(0, 136, 204, 0.1);
    color: #0088CC;
}

.applicant-name[b-yd5f49kv3b] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.applicant-id[b-yd5f49kv3b] {
    font-size: 0.625rem;
    color: #64748b;
    margin-top: 0.125rem;
}

.date-primary[b-yd5f49kv3b] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.date-secondary[b-yd5f49kv3b] {
    font-size: 0.625rem;
    color: #475569;
    margin-top: 0.125rem;
}

/* ── KYC Badge ── */
.kyc-badge[b-yd5f49kv3b] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 800;
}

.kyc-pass[b-yd5f49kv3b] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.kyc-pending[b-yd5f49kv3b] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.kyc-review[b-yd5f49kv3b] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.kyc-failed[b-yd5f49kv3b] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ── Docs Status ── */
.docs-status[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.docs-icon-success[b-yd5f49kv3b] {
    color: #10b981;
}

.docs-icon-warn[b-yd5f49kv3b] {
    color: #f59e0b;
}

.docs-icon-muted[b-yd5f49kv3b] {
    color: #64748b;
}

.docs-icon-error[b-yd5f49kv3b] {
    color: #ef4444;
}

/* ── Agent Cell ── */
.agent-cell[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #e2e8f0;
}

.agent-mini-avatar[b-yd5f49kv3b] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: #0088CC;
}

.unassigned-label[b-yd5f49kv3b] {
    font-size: 0.8125rem;
    color: #475569;
    font-style: italic;
}

/* ── Action Buttons ── */
.review-btn[b-yd5f49kv3b] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.review-btn:hover[b-yd5f49kv3b] {
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}

.claim-btn[b-yd5f49kv3b] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0088CC;
    background: transparent;
    border: 1px solid rgba(0, 136, 204, 0.4);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.claim-btn:hover[b-yd5f49kv3b] {
    background: rgba(0, 136, 204, 0.05);
    border-color: #0088CC;
}

.details-btn[b-yd5f49kv3b] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(51, 65, 85, 0.4);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.details-btn:hover[b-yd5f49kv3b] {
    background: rgba(51, 65, 85, 0.6);
    color: #f1f5f9;
}

/* ── Table Footer / Pagination ── */
.table-footer[b-yd5f49kv3b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(17, 20, 22, 0.3);
    border-top: 1px solid rgba(51, 65, 85, 0.15);
}

.table-footer-text[b-yd5f49kv3b] {
    font-size: 0.75rem;
    color: #64748b;
}

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

.page-btn[b-yd5f49kv3b] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: rgba(51, 65, 85, 0.3);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.2s;
}

.page-btn:hover:not(:disabled)[b-yd5f49kv3b] {
    color: #0088CC;
}

.page-btn:disabled[b-yd5f49kv3b] {
    opacity: 0.3;
    cursor: default;
}

.page-num[b-yd5f49kv3b] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    background: rgba(51, 65, 85, 0.3);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-num:hover[b-yd5f49kv3b] {
    color: #0088CC;
}

.page-num.active[b-yd5f49kv3b] {
    background: #0088CC;
    color: #fff;
}

.page-ellipsis[b-yd5f49kv3b] {
    padding: 0 0.5rem;
    color: #475569;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .stats-row[b-yd5f49kv3b] {
        grid-template-columns: 1fr;
    }

    .table-filters[b-yd5f49kv3b] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrapper[b-yd5f49kv3b] {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .onboarding-content[b-yd5f49kv3b] {
        padding: 1rem;
    }

    .onboarding-title[b-yd5f49kv3b] {
        font-size: 1.75rem;
    }

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

    .filter-dropdowns[b-yd5f49kv3b] {
        flex-direction: column;
    }
}
/* /Components/Pages/Operations/FileUploads.razor.rz.scp.css */
/* File Uploads — reuses ActivityReports' rpt-* card/table language (CSS isolation means the
   rules themselves must be repeated here, not shared) plus upl-* rules for the picker,
   drop zone and per-file progress rows. */

.upl-content[b-8rff2c91om] {
    padding: 2rem;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rpt-header[b-8rff2c91om] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.rpt-title[b-8rff2c91om] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.rpt-subtitle[b-8rff2c91om] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.upl-section-title[b-8rff2c91om] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
}

.rpt-card[b-8rff2c91om] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
}

.rpt-empty[b-8rff2c91om] {
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
}

.rpt-range-label[b-8rff2c91om] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.rpt-run[b-8rff2c91om] {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1.125rem;
    border-radius: 0.5rem;
    border: 1px solid #38bdf8;
    background: #38bdf8;
    color: #0f172a;
    cursor: pointer;
}

.rpt-run:hover:not(:disabled)[b-8rff2c91om],
.rpt-run:focus-visible[b-8rff2c91om] {
    background: #7dd3fc;
    border-color: #7dd3fc;
    outline: none;
}

.rpt-run:disabled[b-8rff2c91om] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rpt-table-card[b-8rff2c91om] {
    padding: 0.5rem 1rem 1rem;
}

.rpt-table[b-8rff2c91om] {
    width: 100%;
    border-collapse: collapse;
}

.rpt-table th[b-8rff2c91om] {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    text-align: left;
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    white-space: nowrap;
}

.rpt-table td[b-8rff2c91om] {
    font-size: 0.8125rem;
    color: #e2e8f0;
    padding: 0.5625rem 0.75rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.25);
    vertical-align: middle;
}

.rpt-table tbody tr:hover[b-8rff2c91om] {
    background: rgba(51, 65, 85, 0.2);
}

.rpt-num[b-8rff2c91om] {
    font-variant-numeric: tabular-nums;
}

.rpt-right[b-8rff2c91om] {
    text-align: right;
}

.rpt-pill[b-8rff2c91om] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.rpt-pill.ok[b-8rff2c91om] { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
.rpt-pill.warn[b-8rff2c91om] { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }
.rpt-pill.err[b-8rff2c91om] { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.rpt-pill.muted[b-8rff2c91om] { color: #94a3b8; border-color: rgba(100, 116, 139, 0.35); }

.rpt-chip[b-8rff2c91om] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.35);
    color: #e2e8f0;
}

.rpt-chip.warn[b-8rff2c91om] { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); }

/* ── Picker card ── */
.upl-picker-card[b-8rff2c91om] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.upl-field[b-8rff2c91om] {
    max-width: 20rem;
}

.upl-select[b-8rff2c91om] {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.4375rem 0.75rem;
    color-scheme: dark;
}

.upl-dropzone[b-8rff2c91om] {
    position: relative;
    border: 2px dashed rgba(100, 116, 139, 0.4);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: rgba(2, 6, 23, 0.3);
}

.upl-dropzone-icon[b-8rff2c91om] {
    font-size: 1.75rem;
    color: #38bdf8;
}

.upl-dropzone-text[b-8rff2c91om] {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.upl-file-input[b-8rff2c91om] {
    color: #cbd5e1;
    font-size: 0.8125rem;
}

.upl-inline-error[b-8rff2c91om] {
    color: #f87171;
    font-size: 0.8125rem;
}

.upl-staged-list[b-8rff2c91om] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.upl-staged-row[b-8rff2c91om] {
    display: grid;
    grid-template-columns: 1fr auto 14rem auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.4);
}

.upl-staged-name[b-8rff2c91om] {
    font-size: 0.8125rem;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upl-staged-size[b-8rff2c91om] {
    font-size: 0.75rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.upl-staged-progress[b-8rff2c91om] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upl-progress-track[b-8rff2c91om] {
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: rgba(51, 65, 85, 0.5);
    overflow: hidden;
}

.upl-progress-fill[b-8rff2c91om] {
    height: 100%;
    background: #38bdf8;
    transition: width 0.15s ease;
}

.upl-progress-fill.ok[b-8rff2c91om] { background: #34d399; }
.upl-progress-fill.err[b-8rff2c91om] { background: #f87171; }
.upl-progress-fill.muted[b-8rff2c91om] { background: #64748b; }

.upl-staged-status[b-8rff2c91om] {
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: #94a3b8;
}

.upl-staged-status.ok[b-8rff2c91om] { color: #34d399; }
.upl-staged-status.err[b-8rff2c91om] { color: #f87171; }
.upl-staged-status.info[b-8rff2c91om] { color: #38bdf8; }

.upl-remove[b-8rff2c91om] {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 0.375rem;
}

.upl-remove:hover:not(:disabled)[b-8rff2c91om] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.upl-remove:disabled[b-8rff2c91om] {
    opacity: 0.35;
    cursor: not-allowed;
}

.upl-actions[b-8rff2c91om] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .upl-content[b-8rff2c91om] {
        padding: 1rem;
    }

    .upl-staged-row[b-8rff2c91om] {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }
}
/* /Components/Pages/Operations/PrinterManagement.razor.rz.scp.css */
/* Printer Management placeholder — reuses the ActivityReports card/empty-state look.
   CSS isolation is per-component, so these rules are copied (not shared) from
   ActivityReports.razor.css rather than left unstyled. */

.rpt-card[b-smcv16fzjr] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    margin: 2rem;
}

.rpt-empty[b-smcv16fzjr] {
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9375rem;
}

.rpt-empty h3[b-smcv16fzjr] {
    color: #e2e8f0;
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
}

.rpt-empty p[b-smcv16fzjr] {
    max-width: 40rem;
    margin: 0 auto;
}
/* /Components/Pages/PaymentPost.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   PaymentPost – Immediate Payment Posting
   Dark slate theme matching existing ServicePoint pages
   ═══════════════════════════════════════════════════════════ */

.payment-content[b-0qh0k7bz24] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Alert Banner ── */
.alert-banner[b-0qh0k7bz24] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-error[b-0qh0k7bz24] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.alert-close[b-0qh0k7bz24] {
    margin-left: auto;
    background: none;
    border: none;
    color: #fca5a5;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.75rem;
}

/* ── Header ── */
.payment-header[b-0qh0k7bz24] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.payment-title[b-0qh0k7bz24] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    margin: 0;
}

.payment-terminal[b-0qh0k7bz24] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0088CC;
    margin: 0.25rem 0 0;
}

/* ── Main Grid ── */
.payment-grid[b-0qh0k7bz24] {
    display: grid;
    /* Equal columns: the Branch Payments tile (left) matches the printer-status tile (right). */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.left-column[b-0qh0k7bz24],
.right-column[b-0qh0k7bz24] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Explicit placement: the two columns share row 1; the Branch Payments band spans row 2
   edge-to-edge, so its right edge lines up with the printer-status tile's right edge. */
.left-column[b-0qh0k7bz24] {
    grid-column: 1;
    grid-row: 1;
}

.right-column[b-0qh0k7bz24] {
    grid-column: 2;
    grid-row: 1;
}

.history-band[b-0qh0k7bz24] {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* ═══ Account Card ═══ */
.account-card[b-0qh0k7bz24] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.account-badge[b-0qh0k7bz24] {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(0, 136, 204, 0.4);
}

.account-hero[b-0qh0k7bz24] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.account-icon[b-0qh0k7bz24] {
    font-size: 2rem;
    color: #0088CC;
}

.account-holder[b-0qh0k7bz24] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.01em;
    margin: 0 0 0.625rem;
}

.account-holder-number[b-0qh0k7bz24] {
    margin-left: 0.625rem;
    padding-left: 0.625rem;
    border-left: 1px solid rgba(100, 116, 139, 0.4);
    font-weight: 500;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.balance-label[b-0qh0k7bz24] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin: 0;
}

.balance-amount[b-0qh0k7bz24] {
    font-size: 3rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0.25rem 0 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.balance-cents[b-0qh0k7bz24] {
    font-size: 1.75rem;
    font-weight: 800;
}

.balance-currency[b-0qh0k7bz24] {
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    margin-left: 0.5rem;
}

/* Credit-balance treatment: the figure and its CR marker go green; CR sits BEFORE the
   currency tag. The dimmed currency stays neutral so the green reads as the signal. */
.balance-credit[b-0qh0k7bz24] {
    color: #34d399;
}

.balance-cr[b-0qh0k7bz24] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-left: 0.375rem;
    letter-spacing: 0.06em;
}

.account-meta[b-0qh0k7bz24] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
}

.meta-label[b-0qh0k7bz24] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.meta-value[b-0qh0k7bz24] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
}

.meta-label-due[b-0qh0k7bz24] {
    color: #f59e0b;
}

.meta-value-due[b-0qh0k7bz24] {
    color: #f59e0b;
}

/* ═══ Transaction Entry Form ═══ */
.form-card[b-0qh0k7bz24] {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2);
}

.form-header[b-0qh0k7bz24] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.form-title[b-0qh0k7bz24] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.terminal-status[b-0qh0k7bz24] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot[b-0qh0k7bz24] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-ready[b-0qh0k7bz24] {
    background: #0088CC;
    box-shadow: 0 0 12px rgba(0, 136, 204, 0.6);
}

.status-busy[b-0qh0k7bz24] {
    background: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
    animation: pulse-glow-b-0qh0k7bz24 1.5s ease-in-out infinite;
}

@keyframes pulse-glow-b-0qh0k7bz24 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.status-text[b-0qh0k7bz24] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
}

.form-body[b-0qh0k7bz24] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.field-label[b-0qh0k7bz24] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.amount-input-wrapper[b-0qh0k7bz24] {
    position: relative;
}

.amount-prefix[b-0qh0k7bz24] {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    font-weight: 300;
    color: #64748b;
    pointer-events: none;
}

.amount-input[b-0qh0k7bz24] {
    width: 100%;
    background: #0f172a;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: #f1f5f9;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    -moz-appearance: textfield;
}

.amount-input[b-0qh0k7bz24]::-webkit-outer-spin-button,
.amount-input[b-0qh0k7bz24]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amount-input:focus[b-0qh0k7bz24] {
    border-color: rgba(0, 136, 204, 0.5);
}

.amount-input[b-0qh0k7bz24]::placeholder {
    color: #1e293b;
}

.form-meta-row[b-0qh0k7bz24] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-meta-card[b-0qh0k7bz24] {
    background: #1e293b;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-meta-card:hover[b-0qh0k7bz24] {
    border-color: rgba(0, 136, 204, 0.2);
}

.form-meta-label[b-0qh0k7bz24] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
}

.form-meta-value-row[b-0qh0k7bz24] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-meta-select[b-0qh0k7bz24] {
    width: 100%;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 0.8125rem;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.form-meta-select option[b-0qh0k7bz24] {
    background: #1e293b;
    color: #f1f5f9;
}

.form-meta-value[b-0qh0k7bz24] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.form-meta-input[b-0qh0k7bz24] {
    width: 100%;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0;
    outline: none;
    font-family: inherit;
}

.form-meta-input[b-0qh0k7bz24]::placeholder {
    color: #475569;
    font-weight: 400;
}

.aml-badge[b-0qh0k7bz24] {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.process-btn[b-0qh0k7bz24] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 8px 32px rgba(0, 136, 204, 0.2);
}

.process-btn:hover:not(:disabled)[b-0qh0k7bz24] {
    box-shadow: 0 8px 32px rgba(0, 136, 204, 0.4);
    transform: translateY(-1px);
}

.process-btn:active:not(:disabled)[b-0qh0k7bz24] {
    transform: scale(0.98);
}

.process-btn:disabled[b-0qh0k7bz24] {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* ═══ Receipt Section ═══ */
.receipt-section[b-0qh0k7bz24] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.receipt-section-label[b-0qh0k7bz24] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 1rem;
}

.receipt-paper[b-0qh0k7bz24] {
    width: 100%;
    max-width: 360px;
    background: #f8fafc;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 2rem;
    color: #1e293b;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    position: relative;
}

.receipt-paper[b-0qh0k7bz24]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background:
        linear-gradient(-45deg, #f8fafc 5px, transparent 0),
        linear-gradient(45deg, #f8fafc 5px, transparent 0);
    background-size: 10px 10px;
}

.receipt-header[b-0qh0k7bz24] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px dashed #cbd5e1;
}

.receipt-brand[b-0qh0k7bz24] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.receipt-sub[b-0qh0k7bz24] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #64748b;
}

.receipt-body[b-0qh0k7bz24] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.receipt-line[b-0qh0k7bz24] {
    display: flex;
    justify-content: space-between;
}

.receipt-key[b-0qh0k7bz24] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.receipt-val[b-0qh0k7bz24] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.8125rem;
}

.receipt-total[b-0qh0k7bz24] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
    margin: 0.5rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.receipt-total-label[b-0qh0k7bz24] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.receipt-total-amount[b-0qh0k7bz24] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.receipt-barcode[b-0qh0k7bz24] {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.barcode-lines[b-0qh0k7bz24] {
    width: 100%;
    height: 3rem;
    background: repeating-linear-gradient(
        90deg,
        #000 0px,
        #000 2px,
        transparent 2px,
        transparent 6px
    );
    opacity: 0.15;
}

.barcode-label[b-0qh0k7bz24] {
    font-size: 0.5625rem;
    letter-spacing: 0.15em;
    color: #94a3b8;
}

/* ═══ Output Configuration ═══ */
.output-card[b-0qh0k7bz24] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.output-title[b-0qh0k7bz24] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin: 0 0 1rem;
}

.output-body[b-0qh0k7bz24] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.printer-select-wrapper[b-0qh0k7bz24] {
    position: relative;
}

.printer-icon[b-0qh0k7bz24] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0088CC;
    font-size: 1.125rem;
    pointer-events: none;
}

.printer-select[b-0qh0k7bz24] {
    width: 100%;
    background: #0f172a;
    border: none;
    border-radius: 0.5rem;
    padding: 0.875rem 2.5rem 0.875rem 3rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #f1f5f9;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.printer-chevron[b-0qh0k7bz24] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    font-size: 0.875rem;
}

.email-check[b-0qh0k7bz24] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.5rem;
    cursor: pointer;
}

.email-check input[type="checkbox"][b-0qh0k7bz24] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #475569;
    background: #0f172a;
    accent-color: #0088CC;
    cursor: pointer;
}

.email-check span[b-0qh0k7bz24] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

.print-btn[b-0qh0k7bz24] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #e2e8f0;
    background: #334155;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.print-btn:hover:not(:disabled)[b-0qh0k7bz24] {
    background: #475569;
}

.print-btn:disabled[b-0qh0k7bz24] {
    opacity: 0.35;
    cursor: default;
}

/* ═══ Security Card ═══ */
.security-card[b-0qh0k7bz24] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
}

.security-icon[b-0qh0k7bz24] {
    font-size: 2.5rem;
    color: #1e3a5f;
    display: block;
    margin-bottom: 0.75rem;
}

.security-text[b-0qh0k7bz24] {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

/* ═══ Responsive ═══ */
@media (max-width: 1024px) {
    .payment-grid[b-0qh0k7bz24] {
        grid-template-columns: 1fr;
    }

    /* Single column: everything stacks in source order (form, history, receipt/printing). */
    .left-column[b-0qh0k7bz24],
    .right-column[b-0qh0k7bz24],
    .history-band[b-0qh0k7bz24] {
        grid-column: 1;
        grid-row: auto;
    }

    .receipt-paper[b-0qh0k7bz24] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .payment-content[b-0qh0k7bz24] {
        padding: 1rem;
    }

    .balance-amount[b-0qh0k7bz24] {
        font-size: 2rem;
    }

    .balance-cents[b-0qh0k7bz24] {
        font-size: 1.25rem;
    }

    .amount-input[b-0qh0k7bz24] {
        font-size: 1.75rem;
        padding: 1rem 1rem 1rem 2.5rem;
    }

    .amount-prefix[b-0qh0k7bz24] {
        font-size: 1.25rem;
        left: 1rem;
    }

    .account-meta[b-0qh0k7bz24] {
        grid-template-columns: 1fr;
    }

    .form-meta-row[b-0qh0k7bz24] {
        grid-template-columns: 1fr;
    }

    .info-row[b-0qh0k7bz24] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PortalUserManage.razor.rz.scp.css */
/* Portal user management — quiet card language matching the portal's dark system. */

.pu-content[b-pbu5zr15yz] {
    padding: 2rem;
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pu-back[b-pbu5zr15yz] {
    align-self: flex-start;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.pu-back:hover[b-pbu5zr15yz],
.pu-back:focus-visible[b-pbu5zr15yz] {
    color: #e2e8f0;
}

/* ── Hero ── */
.pu-hero[b-pbu5zr15yz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}

.pu-identity[b-pbu5zr15yz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pu-avatar[b-pbu5zr15yz] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0, 136, 204, 0.18);
    color: #38bdf8;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.pu-name[b-pbu5zr15yz] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -0.01em;
}

.pu-logon[b-pbu5zr15yz] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.125rem 0 0;
    font-variant-numeric: tabular-nums;
}

.pu-badges[b-pbu5zr15yz] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pu-pill[b-pbu5zr15yz] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.pu-pill.ok[b-pbu5zr15yz] {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.08);
}

.pu-pill.warn[b-pbu5zr15yz] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

.pu-pill.muted[b-pbu5zr15yz] {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.35);
}

.pu-pill.danger[b-pbu5zr15yz] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.1);
}

/* ── Roles ── */
.pu-roles-card[b-pbu5zr15yz] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}

.pu-roles-header[b-pbu5zr15yz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pu-roles-title[b-pbu5zr15yz] {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin: 0;
}

.pu-roles-hint[b-pbu5zr15yz] {
    font-size: 0.75rem;
    color: #64748b;
}

.pu-role-list[b-pbu5zr15yz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pu-role-row[b-pbu5zr15yz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 0;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
}

.pu-role-row:first-child[b-pbu5zr15yz] {
    border-top: none;
}

.pu-role-main[b-pbu5zr15yz] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pu-role-name[b-pbu5zr15yz] {
    font-weight: 700;
    color: #e2e8f0;
    font-size: 0.875rem;
}

.pu-role-row.held .pu-role-name[b-pbu5zr15yz] {
    color: #38bdf8;
}

.pu-role-scope[b-pbu5zr15yz] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.pu-role-desc[b-pbu5zr15yz] {
    font-size: 0.75rem;
    color: #64748b;
}

.pu-role-toggle[b-pbu5zr15yz] {
    min-width: 5.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
}

.pu-role-toggle.grant[b-pbu5zr15yz] {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.45);
}

.pu-role-toggle.grant:hover:not(:disabled)[b-pbu5zr15yz] {
    background: rgba(52, 211, 153, 0.12);
}

.pu-role-toggle.revoke[b-pbu5zr15yz] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}

.pu-role-toggle.revoke:hover:not(:disabled)[b-pbu5zr15yz] {
    background: rgba(248, 113, 113, 0.12);
}

.pu-role-toggle:disabled[b-pbu5zr15yz] {
    opacity: 0.45;
    cursor: not-allowed;
}

.pu-role-toggle:focus-visible[b-pbu5zr15yz] {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

/* ── Account actions ── */
.pu-actions[b-pbu5zr15yz] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pu-action-btn[b-pbu5zr15yz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.35);
    border: 1px solid rgba(100, 116, 139, 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.pu-action-btn:hover[b-pbu5zr15yz],
.pu-action-btn:focus-visible[b-pbu5zr15yz] {
    background: rgba(51, 65, 85, 0.6);
    outline: none;
    border-color: #38bdf8;
}

/* Status, not a control — nothing for staff to trigger; the user's own next sign-in drives it. */
.pu-action-note[b-pbu5zr15yz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

.pu-action-btn.danger[b-pbu5zr15yz] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

.pu-action-btn.danger:hover:not(:disabled)[b-pbu5zr15yz],
.pu-action-btn.danger:focus-visible[b-pbu5zr15yz] {
    background: rgba(248, 113, 113, 0.12);
    border-color: #f87171;
}

.pu-action-btn:disabled[b-pbu5zr15yz] {
    opacity: 0.5;
    cursor: default;
}

/* ── Confirmation modal ── */
.pu-modal-backdrop[b-pbu5zr15yz] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 1050;
}

.pu-modal[b-pbu5zr15yz] {
    width: min(26rem, calc(100vw - 2rem));
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 1rem;
    padding: 1.5rem;
}

.pu-modal-title[b-pbu5zr15yz] {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.375rem;
}

.pu-modal-desc[b-pbu5zr15yz] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0 0 1rem;
}

.pu-modal-input[b-pbu5zr15yz] {
    width: 100%;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 0.5rem;
    color: #f1f5f9;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.pu-modal-input:focus-visible[b-pbu5zr15yz] {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}

.pu-modal-error[b-pbu5zr15yz] {
    font-size: 0.75rem;
    color: #f87171;
    margin-bottom: 0.75rem;
}

.pu-modal-actions[b-pbu5zr15yz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(51, 65, 85, 0.4);
}

.pu-modal-btn[b-pbu5zr15yz] {
    padding: 0.5rem 1.375rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.pu-modal-btn:disabled[b-pbu5zr15yz] {
    opacity: 0.55;
    cursor: default;
}

.pu-modal-btn.cancel[b-pbu5zr15yz] {
    background: none;
    border: 1px solid rgba(100, 116, 139, 0.4);
    color: #94a3b8;
}

.pu-modal-btn.cancel:hover:not(:disabled)[b-pbu5zr15yz] {
    border-color: rgba(148, 163, 184, 0.6);
    color: #e2e8f0;
}

.pu-modal-btn.confirm[b-pbu5zr15yz] {
    background: #0088CC;
    border: 1px solid #0088CC;
    color: #fff;
}

.pu-modal-btn.confirm:hover:not(:disabled)[b-pbu5zr15yz] {
    background: #0aa2ef;
    border-color: #0aa2ef;
}

@media (max-width: 640px) {
    .pu-content[b-pbu5zr15yz] {
        padding: 1rem;
    }

    .pu-hero[b-pbu5zr15yz],
    .pu-roles-card[b-pbu5zr15yz] {
        padding: 1.25rem;
    }

    .pu-role-row[b-pbu5zr15yz] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/ServiceUnavailable.razor.rz.scp.css */
.unavailable-wrapper[b-73c66n7bh9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F172A 0%, #16212c 50%, #0F172A 100%);
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

.unavailable-card[b-73c66n7bh9] {
    width: 100%;
    max-width: 600px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.status-icon[b-73c66n7bh9] {
    font-size: 3.5rem;
    color: #0088CC;
    opacity: 0.8;
}

.unavailable-title[b-73c66n7bh9] {
    color: #f1f5f9;
}

.unavailable-subtitle[b-73c66n7bh9] {
    color: #94a3b8;
}

.unavailable-link[b-73c66n7bh9] {
    color: #0088CC;
}

.unavailable-link:hover[b-73c66n7bh9] {
    color: #33a3d9;
}
/* /Components/Pages/SurepayBillers.razor.rz.scp.css */
/*
    Surepay Billers — biller adjudication.

    The screen states one thing: the catalogue is a gate, and it is shut by default. So the
    palette is built around which state needs the operator's hand, not around severity:

      orange  an undecided biller — the only state that is work. Rendered as glass, per spec.
      teal    included — cardholders can pay it.
      grey    excluded — a normal, deliberate outcome, NOT an error.

    Excluded is deliberately not red. On a fail-closed screen most rows are legitimately
    excluded; colouring them red would drown the orange that actually demands attention.
*/

.bil-page[b-epbjdbqtyj] {
    --bil-plate: #161c23;
    --bil-hairline: #20262c;
    --bil-ink: #f1f5f9;
    --bil-ink-dim: #64748b;
    --bil-ink-mid: #94a3b8;

    --bil-pending: #f2822a;
    --bil-open: #2dd4a0;
    --bil-shut: #64748b;

    padding: 1.75rem 2rem 4rem;
    max-width: 1180px;
    color: var(--bil-ink);
}

.mono[b-epbjdbqtyj] {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* ── Header: the thesis ─────────────────────────────────────────────── */

.bil-head[b-epbjdbqtyj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.bil-eyebrow[b-epbjdbqtyj] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--bil-ink-dim);
    margin: 0 0 0.6rem;
}

/* The single most important sentence on the page. Scale and weight carry it — the app has one
   typeface, and a second family here would read as a different product. */
.bil-thesis[b-epbjdbqtyj] {
    font-size: clamp(1.5rem, 3.4vw, 2.35rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    color: var(--bil-ink);
}

.bil-thesis-loading[b-epbjdbqtyj] { color: var(--bil-ink-dim); }

.bil-count[b-epbjdbqtyj] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bil-thesis-sub[b-epbjdbqtyj] {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bil-ink-dim);
    max-width: 52ch;
}

.bil-thesis-sub-open[b-epbjdbqtyj] { color: var(--bil-pending); }

.bil-head-side[b-epbjdbqtyj] { padding-top: 1.5rem; }

.bil-refresh[b-epbjdbqtyj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--bil-hairline);
    border-radius: 7px;
    color: var(--bil-ink-mid);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.bil-refresh:hover:not(:disabled)[b-epbjdbqtyj] { border-color: #3a444f; color: var(--bil-ink); }
.bil-refresh:disabled[b-epbjdbqtyj] { opacity: 0.5; cursor: default; }

.spin[b-epbjdbqtyj] { animation: bil-spin-b-epbjdbqtyj 0.9s linear infinite; }
@keyframes bil-spin-b-epbjdbqtyj { to { transform: rotate(360deg); } }

/* ── Fetch facts ────────────────────────────────────────────────────── */

.bil-meta[b-epbjdbqtyj] {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin: 1.75rem 0 0;
    padding: 0.9rem 0;
    border-top: 1px solid var(--bil-hairline);
    border-bottom: 1px solid var(--bil-hairline);
}

.bil-meta-cell[b-epbjdbqtyj] { margin: 0; }

.bil-meta dt[b-epbjdbqtyj] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--bil-ink-dim);
    margin-bottom: 0.28rem;
}

.bil-meta dd[b-epbjdbqtyj] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bil-ink);
}

.bil-meta dd.warn[b-epbjdbqtyj] { color: var(--bil-pending); font-weight: 600; }

/* ── Filters ────────────────────────────────────────────────────────── */

.bil-filters[b-epbjdbqtyj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.bil-filters-label[b-epbjdbqtyj] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--bil-ink-dim);
    margin-right: 0.15rem;
}

/* Each chip is railed in the colour of the rows it admits, so the control belongs to the list
   rather than floating above it. Off is a genuine absence — no fill, no rail colour. */
.bil-chip[b-epbjdbqtyj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.36rem 0.7rem 0.36rem 0.85rem;
    background: transparent;
    border: 1px solid var(--bil-hairline);
    border-radius: 6px;
    color: var(--bil-ink-dim);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.bil-chip-rail[b-epbjdbqtyj] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #2b333c;
    transition: background 0.15s ease;
}

.bil-chip:hover[b-epbjdbqtyj] { color: var(--bil-ink-mid); border-color: #3a444f; }

.bil-chip.on[b-epbjdbqtyj] { color: var(--bil-ink); border-color: #3a444f; background: rgba(255, 255, 255, 0.03); }

.bil-chip-active.on .bil-chip-rail[b-epbjdbqtyj] { background: var(--bil-open); }
.bil-chip-inactive.on .bil-chip-rail[b-epbjdbqtyj] { background: var(--bil-shut); }
.bil-chip-stale.on .bil-chip-rail[b-epbjdbqtyj] { background: var(--bil-pending); }

.bil-chip-count[b-epbjdbqtyj] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--bil-ink-dim);
}

.bil-chip.on .bil-chip-count[b-epbjdbqtyj] { color: var(--bil-ink-mid); }

.bil-filters-tally[b-epbjdbqtyj] {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--bil-ink-dim);
}

.bil-alert[b-epbjdbqtyj] {
    margin: 1.25rem 0 0;
    padding: 0.7rem 0.9rem;
    border-left: 2px solid var(--bil-pending);
    background: rgba(242, 130, 42, 0.07);
    color: #fcd9b8;
    font-size: 0.8rem;
    border-radius: 0 5px 5px 0;
}

.bil-empty[b-epbjdbqtyj] {
    margin: 2.5rem 0;
    color: var(--bil-ink-dim);
    font-size: 0.85rem;
}

/* ── The list ───────────────────────────────────────────────────────── */

.bil-list[b-epbjdbqtyj] {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bil-row[b-epbjdbqtyj] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1rem 1.15rem 1rem 1.4rem;
    background: var(--bil-plate);
    border: 1px solid var(--bil-hairline);
    border-radius: 9px;
    overflow: hidden;
    transition: background 0.35s ease, border-color 0.35s ease;
}

/* The rail — the signature. State is carried twice (rail + ground) so the orange glass is
   never the only cue, which keeps the screen legible without colour. */
.bil-rail[b-epbjdbqtyj] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bil-shut);
    transition: background 0.35s ease;
}

.bil-row.is-included .bil-rail[b-epbjdbqtyj] { background: var(--bil-open); }
.bil-row.is-undecided .bil-rail[b-epbjdbqtyj] { background: var(--bil-pending); }

/* Undecided: orange glass. Frosted rather than flat so it reads as a state the row is
   waiting in, not as an error banner. */
.bil-row.is-undecided[b-epbjdbqtyj] {
    background:
        linear-gradient(135deg, rgba(242, 130, 42, 0.16) 0%, rgba(242, 130, 42, 0.06) 100%),
        var(--bil-plate);
    border-color: rgba(242, 130, 42, 0.34);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.bil-row.is-withdrawn[b-epbjdbqtyj] { opacity: 0.62; }

.bil-row-main[b-epbjdbqtyj] { flex: 1; min-width: 0; }

.bil-row-head[b-epbjdbqtyj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.bil-name[b-epbjdbqtyj] {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--bil-ink);
}

/* An href is an identifier, not prose — monospace says so. */
.bil-href[b-epbjdbqtyj] {
    font-size: 0.68rem;
    color: var(--bil-ink-dim);
}

.bil-ccy[b-epbjdbqtyj] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bil-ink-mid);
    border: 1px solid var(--bil-hairline);
    border-radius: 3px;
    padding: 0.08rem 0.32rem;
}

.bil-tag[b-epbjdbqtyj] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bil-ink-dim);
    border: 1px solid var(--bil-hairline);
    border-radius: 3px;
    padding: 0.12rem 0.36rem;
}

.bil-desc[b-epbjdbqtyj] {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    color: var(--bil-ink-mid);
    line-height: 1.45;
}

.bil-state[b-epbjdbqtyj] {
    margin: 0.45rem 0 0;
    font-size: 0.74rem;
    color: var(--bil-ink-dim);
    line-height: 1.5;
}

.bil-state-lead[b-epbjdbqtyj] {
    font-weight: 600;
    color: var(--bil-ink-mid);
    margin-right: 0.35rem;
}

.bil-row.is-undecided .bil-state-lead[b-epbjdbqtyj] { color: var(--bil-pending); }
.bil-row.is-included .bil-state-lead[b-epbjdbqtyj] { color: var(--bil-open); }

.bil-by[b-epbjdbqtyj] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--bil-ink-dim);
}

.bil-note[b-epbjdbqtyj] {
    margin: 0.55rem 0 0;
    font-size: 0.75rem;
    color: var(--bil-ink-mid);
    line-height: 1.5;
    padding-left: 0.7rem;
    border-left: 1px solid var(--bil-hairline);
}

.bil-note-label[b-epbjdbqtyj] {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bil-ink-dim);
    margin-bottom: 0.2rem;
}

/* ── Actions ────────────────────────────────────────────────────────── */

.bil-row-actions[b-epbjdbqtyj] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.bil-btn[b-epbjdbqtyj] {
    border: 1px solid var(--bil-hairline);
    background: transparent;
    border-radius: 6px;
    color: var(--bil-ink-mid);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.bil-btn:disabled[b-epbjdbqtyj] { opacity: 0.45; cursor: default; }

.bil-btn-go:hover:not(:disabled)[b-epbjdbqtyj] {
    border-color: var(--bil-open);
    color: var(--bil-open);
    background: rgba(45, 212, 160, 0.08);
}

.bil-btn-stop:hover:not(:disabled)[b-epbjdbqtyj] {
    border-color: var(--bil-shut);
    color: var(--bil-ink);
    background: rgba(100, 116, 139, 0.12);
}

.bil-btn-quiet:hover:not(:disabled)[b-epbjdbqtyj] { border-color: #3a444f; color: var(--bil-ink); }

/* The one place red earns its keep: this destroys a record rather than changing a decision. */
.bil-btn-danger[b-epbjdbqtyj] {
    border-color: rgba(248, 113, 113, 0.45);
    color: #f87171;
}

.bil-btn-danger:hover:not(:disabled)[b-epbjdbqtyj] {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.bil-warn[b-epbjdbqtyj] {
    margin: 0.6rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(248, 113, 113, 0.5);
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--bil-ink-mid);
    max-width: 62ch;
}

/* ── Reason editor ──────────────────────────────────────────────────── */

.bil-editor[b-epbjdbqtyj] { margin-top: 0.75rem; }

.bil-editor-label[b-epbjdbqtyj] {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bil-ink-mid);
    margin-bottom: 0.35rem;
}

.bil-editor-box[b-epbjdbqtyj] {
    width: 100%;
    background: #0f141a;
    border: 1px solid var(--bil-hairline);
    border-radius: 6px;
    color: var(--bil-ink);
    font-size: 0.78rem;
    font-family: inherit;
    line-height: 1.5;
    padding: 0.55rem 0.7rem;
    resize: vertical;
}

.bil-editor-box:focus[b-epbjdbqtyj] {
    outline: none;
    border-color: var(--bil-ink-dim);
}

.bil-editor-box[b-epbjdbqtyj]::placeholder { color: #46505c; }

.bil-editor-actions[b-epbjdbqtyj] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

/* ── Quality floor ──────────────────────────────────────────────────── */

.bil-btn:focus-visible[b-epbjdbqtyj],
.bil-refresh:focus-visible[b-epbjdbqtyj],
.bil-editor-box:focus-visible[b-epbjdbqtyj] {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .bil-page[b-epbjdbqtyj] { padding: 1.25rem 1rem 3rem; }
    .bil-head-side[b-epbjdbqtyj] { padding-top: 0.75rem; }
    .bil-meta[b-epbjdbqtyj] { gap: 1.25rem; }
    .bil-row[b-epbjdbqtyj] { flex-direction: column; gap: 0.75rem; }
    .bil-row-actions[b-epbjdbqtyj] { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .spin[b-epbjdbqtyj] { animation: none; }
    .bil-row[b-epbjdbqtyj], .bil-rail[b-epbjdbqtyj] { transition: none; }
}
/* /Components/Pages/UserListView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Users – Online Users Management
   Dark slate theme matching existing ServicePoint pages
   ═══════════════════════════════════════════════════════════ */

.users-content[b-3ghqjykj8l] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Header ── */
.users-header[b-3ghqjykj8l] {
    margin-bottom: 0.5rem;
}

.users-title[b-3ghqjykj8l] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.03em;
    margin: 0;
}

.users-subtitle[b-3ghqjykj8l] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0.375rem 0 0;
}

/* ═══ Search Card ═══ */
.search-card[b-3ghqjykj8l] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.search-card-header[b-3ghqjykj8l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.search-card-title[b-3ghqjykj8l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-card-title i[b-3ghqjykj8l] {
    color: #0088CC;
    font-size: 1.25rem;
}

.search-card-title h3[b-3ghqjykj8l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.execute-search-btn[b-3ghqjykj8l] {
    padding: 0.625rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0088CC 0%, #005580 100%);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.15);
}

.execute-search-btn:hover[b-3ghqjykj8l] {
    box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
}

.search-fields[b-3ghqjykj8l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
}

.search-field[b-3ghqjykj8l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label[b-3ghqjykj8l] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    padding-left: 0.25rem;
}

.field-input[b-3ghqjykj8l] {
    width: 100%;
    background: #0f172a;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    outline: none;
    transition: box-shadow 0.2s;
    font-family: inherit;
}

.field-input:focus[b-3ghqjykj8l] {
    box-shadow: 0 0 0 1px #0088CC;
}

.field-input[b-3ghqjykj8l]::placeholder {
    color: #334155;
}

/* ═══ Table Card ═══ */
.table-card[b-3ghqjykj8l] {
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.table-header[b-3ghqjykj8l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(17, 20, 22, 0.5);
}

.table-header-left[b-3ghqjykj8l] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.table-title[b-3ghqjykj8l] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.active-count-badge[b-3ghqjykj8l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(51, 65, 85, 0.6);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0088CC;
}

.active-dot[b-3ghqjykj8l] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0088CC;
    box-shadow: 0 0 8px rgba(0, 136, 204, 0.8);
}

.table-header-actions[b-3ghqjykj8l] {
    display: flex;
    gap: 0.5rem;
}

.icon-action-btn[b-3ghqjykj8l] {
    padding: 0.5rem;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1rem;
}

.icon-action-btn:hover[b-3ghqjykj8l] {
    color: #f1f5f9;
}

.table-scroll[b-3ghqjykj8l] {
    overflow-x: auto;
}

.users-table[b-3ghqjykj8l] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.users-table thead tr[b-3ghqjykj8l] {
    background: rgba(17, 20, 22, 0.3);
}

.users-table th[b-3ghqjykj8l] {
    padding: 1.25rem 2rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    white-space: nowrap;
}

.users-table tbody tr[b-3ghqjykj8l] {
    border-top: 1px solid rgba(51, 65, 85, 0.15);
    transition: background 0.15s;
    cursor: pointer;
}

.users-table tbody tr:hover[b-3ghqjykj8l] {
    background: rgba(37, 45, 51, 0.6);
}

.users-table td[b-3ghqjykj8l] {
    padding: 1.5rem 2rem;
    vertical-align: middle;
}

.text-right[b-3ghqjykj8l] {
    text-align: right;
}

/* ── User Entity Cell ── */
.user-entity[b-3ghqjykj8l] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar[b-3ghqjykj8l] {
    width: 40px;
    height: 40px;
    border-radius: 0.375rem;
    background: #2b3e46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0088CC;
    flex-shrink: 0;
}

.user-name[b-3ghqjykj8l] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}

.user-email[b-3ghqjykj8l] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

.customer-id-cell[b-3ghqjykj8l] {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

.activity-primary[b-3ghqjykj8l] {
    font-size: 0.875rem;
    color: #e2e8f0;
}

.activity-ip[b-3ghqjykj8l] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    margin-top: 0.125rem;
}

/* ── Status Badges ── */
.status-badge[b-3ghqjykj8l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
}

.status-badge .status-indicator[b-3ghqjykj8l] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-active[b-3ghqjykj8l] {
    background: rgba(0, 136, 204, 0.1);
    border: 1px solid rgba(0, 136, 204, 0.2);
    color: #0088CC;
}

.status-active .status-indicator[b-3ghqjykj8l] {
    background: #0088CC;
}

.status-locked[b-3ghqjykj8l] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-locked .status-indicator[b-3ghqjykj8l] {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.status-pending[b-3ghqjykj8l] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-pending .status-indicator[b-3ghqjykj8l] {
    background: #f59e0b;
}

.status-inactive[b-3ghqjykj8l] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.status-inactive .status-indicator[b-3ghqjykj8l] {
    background: #64748b;
}

.row-action-btn[b-3ghqjykj8l] {
    padding: 0.5rem;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1rem;
}

.row-action-btn:hover[b-3ghqjykj8l] {
    color: #0088CC;
}

/* ── Table Footer / Pagination ── */
.table-footer[b-3ghqjykj8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: rgba(17, 20, 22, 0.5);
    border-top: 1px solid rgba(51, 65, 85, 0.15);
}

.table-footer-text[b-3ghqjykj8l] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.pagination-controls[b-3ghqjykj8l] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.page-btn[b-3ghqjykj8l] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #334155;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.2s;
}

.page-btn:hover:not(:disabled)[b-3ghqjykj8l] {
    color: #0088CC;
}

.page-btn:disabled[b-3ghqjykj8l] {
    opacity: 0.3;
    cursor: default;
}

.page-num[b-3ghqjykj8l] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    background: #334155;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.page-num:hover[b-3ghqjykj8l] {
    color: #0088CC;
}

.page-num.active[b-3ghqjykj8l] {
    background: #0088CC;
    color: #fff;
}

/* ═══ Insights Row ═══ */
.insights-row[b-3ghqjykj8l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.insight-card[b-3ghqjykj8l] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.2);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.insight-label[b-3ghqjykj8l] {
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.insight-value[b-3ghqjykj8l] {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9;
}

.insight-trend[b-3ghqjykj8l] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
}

.trend-up[b-3ghqjykj8l] {
    color: #0088CC;
}

.trend-warn[b-3ghqjykj8l] {
    color: #ef4444;
}

.trend-muted[b-3ghqjykj8l] {
    color: #64748b;
    text-transform: uppercase;
    font-size: 0.625rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .search-fields[b-3ghqjykj8l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-row[b-3ghqjykj8l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .users-content[b-3ghqjykj8l] {
        padding: 1rem;
    }

    .users-title[b-3ghqjykj8l] {
        font-size: 1.75rem;
    }

    .search-fields[b-3ghqjykj8l] {
        grid-template-columns: 1fr;
    }

    .insights-row[b-3ghqjykj8l] {
        grid-template-columns: 1fr;
    }

    .search-card-header[b-3ghqjykj8l] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

/* Customer link in the user row */
.user-customer-link[b-3ghqjykj8l] {
    color: #0088CC;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.user-customer-link:hover[b-3ghqjykj8l] { text-decoration: underline; }
/* /Components/Pages/UserManage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   UserManage – User Detail & Security Management
   Dark slate theme matching existing ServicePoint pages
   ═══════════════════════════════════════════════════════════ */

.manage-content[b-pwn8ttxbgs] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Alert Banners ── */
.alert-banner[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-error[b-pwn8ttxbgs] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.alert-success[b-pwn8ttxbgs] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
}

/* ═══ Hero Header ═══ */
.hero-header[b-pwn8ttxbgs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}

.hero-name[b-pwn8ttxbgs] {
    font-size: 3.5rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.04em;
    margin: 0 0 0.75rem;
    line-height: 1;
}

.hero-badges[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hero-badge[b-pwn8ttxbgs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 9999px;
}

/* Red hero pills (deactivated account / expired password) take visual precedence */
.hero-badge.deactivated-pill[b-pwn8ttxbgs],
.hero-badge.danger-pill[b-pwn8ttxbgs] {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.45);
}

.hero-badge.deactivated-pill .badge-value[b-pwn8ttxbgs],
.hero-badge.danger-pill .badge-value[b-pwn8ttxbgs] {
    color: #f87171;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* Amber hero pill — an unlinked user is incomplete, not broken, so it sits below the red pills */
.hero-badge.warn-pill[b-pwn8ttxbgs] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
}

.hero-badge.warn-pill .badge-value[b-pwn8ttxbgs] {
    color: #f59e0b;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.badge-label[b-pwn8ttxbgs] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
}

.badge-value[b-pwn8ttxbgs] {
    font-size: 0.8125rem;
    font-family: monospace;
    color: #0088CC;
}

.session-status[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-dot[b-pwn8ttxbgs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-active[b-pwn8ttxbgs] {
    background: #0088CC;
    box-shadow: 0 0 12px rgba(0, 136, 204, 0.6);
    animation: pulse-dot-b-pwn8ttxbgs 2s ease-in-out infinite;
}

.dot-inactive[b-pwn8ttxbgs] {
    background: #64748b;
}

@keyframes pulse-dot-b-pwn8ttxbgs {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.session-label[b-pwn8ttxbgs] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0088CC;
}

/* ── Status Grid ── */
.hero-status-grid[b-pwn8ttxbgs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(17, 20, 22, 0.6);
    border-radius: 0.75rem;
    padding: 1px;
    overflow: hidden;
}

.status-cell[b-pwn8ttxbgs] {
    background: #0f172a;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.status-cell:first-child[b-pwn8ttxbgs] {
    border-radius: 0.75rem 0 0 0.75rem;
}

.status-cell:last-child[b-pwn8ttxbgs] {
    border-radius: 0 0.75rem 0.75rem 0;
}

.status-cell-label[b-pwn8ttxbgs] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.status-cell-value[b-pwn8ttxbgs] {
    font-weight: 700;
    font-size: 0.875rem;
}

.val-primary[b-pwn8ttxbgs] { color: #0088CC; }
.val-tertiary[b-pwn8ttxbgs] { color: #f59e0b; }
.val-error[b-pwn8ttxbgs] { color: #ef4444; }
.val-muted[b-pwn8ttxbgs] { color: #64748b; }

/* ═══ Not-linked notice ═══ */
.link-notice[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.5rem;
    border-radius: 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left-width: 4px;
}

.link-notice-icon[b-pwn8ttxbgs] {
    color: #f59e0b;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.link-notice-body[b-pwn8ttxbgs] {
    flex: 1;
    min-width: 0;
}

.link-notice-title[b-pwn8ttxbgs] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fcd34d;
}

.link-notice-text[b-pwn8ttxbgs] {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #cbd5e1;
}

.link-notice-btn[b-pwn8ttxbgs] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.15rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(245, 158, 11, 0.55);
    background: transparent;
    color: #fcd34d;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.link-notice-btn:hover[b-pwn8ttxbgs] {
    background: #f59e0b;
    color: #1a1204;
}

.link-notice-btn i[b-pwn8ttxbgs] {
    font-size: 1rem;
}

/* ═══ Bento Grid ═══ */
.bento-grid[b-pwn8ttxbgs] {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 1.5rem;
    align-items: stretch;
}

.col-left[b-pwn8ttxbgs],
.col-right[b-pwn8ttxbgs] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Glass Cards ── */
.glass-card[b-pwn8ttxbgs] {
    background: #1e293b;
    border: 1px solid rgba(51, 65, 85, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* ── Session Card ── */
.session-card[b-pwn8ttxbgs] {
    padding: 2rem;
}

.card-header-row[b-pwn8ttxbgs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.card-header-row i[b-pwn8ttxbgs] {
    color: #64748b;
    font-size: 1.25rem;
}

.card-title[b-pwn8ttxbgs] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.session-details[b-pwn8ttxbgs] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.session-item[b-pwn8ttxbgs] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.session-icon-wrap[b-pwn8ttxbgs] {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.session-icon-wrap i[b-pwn8ttxbgs] {
    font-size: 1.125rem;
}

.bg-primary-muted[b-pwn8ttxbgs] {
    background: rgba(0, 76, 107, 0.2);
    color: #0088CC;
}

.bg-secondary-muted[b-pwn8ttxbgs] {
    background: rgba(43, 62, 70, 0.4);
    color: #8da1ab;
}

.session-meta-label[b-pwn8ttxbgs] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #64748b;
}

.session-meta-value[b-pwn8ttxbgs] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #e2e8f0;
}

.session-meta-sub[b-pwn8ttxbgs] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

/* Risk Bar */
.risk-bar[b-pwn8ttxbgs] {
    padding-top: 1rem;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
}

.risk-bar-header[b-pwn8ttxbgs] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.risk-score[b-pwn8ttxbgs] {
    color: #0088CC;
    font-weight: 700;
}

.risk-track[b-pwn8ttxbgs] {
    width: 100%;
    height: 4px;
    background: #334155;
    border-radius: 9999px;
    overflow: hidden;
}

.risk-fill[b-pwn8ttxbgs] {
    height: 100%;
    background: #0088CC;
    border-radius: 9999px;
    transition: width 0.5s;
}

/* ── Action Card ── */
.action-card[b-pwn8ttxbgs] {
    padding: 2rem;
    background: rgba(17, 20, 22, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.2);
}

.action-card-title[b-pwn8ttxbgs] {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    margin: 0 0 1.5rem;
}

.action-buttons[b-pwn8ttxbgs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: #334155;
    border: none;
    border-radius: 0.5rem;
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-pwn8ttxbgs] {
    background: #475569;
}

.action-btn.danger[b-pwn8ttxbgs] {
    color: #f87171;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35);
}

.action-btn.danger:hover[b-pwn8ttxbgs] {
    background: rgba(248, 113, 113, 0.12);
}

/* Status, not a control — sits in the action column but is deliberately not a button: there is nothing
   for staff to trigger, because verification is driven by the user's own next sign-in. Muted and
   borderless so it doesn't read as a disabled action. */
.action-note[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 0.5rem;
    background: rgba(251, 191, 36, 0.08);
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25);
    color: #fbbf24;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.action-btn i[b-pwn8ttxbgs] {
    color: #0088CC;
    font-size: 1.125rem;
    transition: transform 0.2s;
}

.action-btn:hover i[b-pwn8ttxbgs] {
    transform: translateX(0.25rem);
}

.action-btn-danger[b-pwn8ttxbgs] {
    background: rgba(127, 41, 39, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.action-btn-danger:hover[b-pwn8ttxbgs] {
    background: rgba(127, 41, 39, 0.3);
}

.action-btn-danger span[b-pwn8ttxbgs] {
    color: #ef4444;
}

.action-btn-danger i[b-pwn8ttxbgs] {
    color: #ef4444;
}

/* ═══ Audit Card ═══ */
.audit-card[b-pwn8ttxbgs] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.audit-header[b-pwn8ttxbgs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.2);
}

.audit-subtitle[b-pwn8ttxbgs] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

.audit-header-actions[b-pwn8ttxbgs] {
    display: flex;
    gap: 0.5rem;
}

.icon-action-btn[b-pwn8ttxbgs] {
    padding: 0.5rem;
    color: #64748b;
    background: #334155;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 0.875rem;
}

.icon-action-btn:hover[b-pwn8ttxbgs] {
    color: #0088CC;
}

.audit-table-wrap[b-pwn8ttxbgs] {
    flex: 1;
    overflow: auto;
}

.audit-table[b-pwn8ttxbgs] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.audit-table thead tr[b-pwn8ttxbgs] {
    background: rgba(17, 20, 22, 0.4);
}

.audit-table th[b-pwn8ttxbgs] {
    padding: 1rem 2rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    white-space: nowrap;
}

.audit-table tbody tr[b-pwn8ttxbgs] {
    border-top: 1px solid rgba(51, 65, 85, 0.1);
    transition: background 0.15s;
}

.audit-table tbody tr:hover[b-pwn8ttxbgs] {
    background: rgba(37, 45, 51, 0.5);
}

.audit-table td[b-pwn8ttxbgs] {
    padding: 1.25rem 2rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    vertical-align: middle;
}

.text-right[b-pwn8ttxbgs] {
    text-align: right;
}

.event-cell[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.event-cell i[b-pwn8ttxbgs] {
    font-size: 1.125rem;
}

.icon-primary[b-pwn8ttxbgs] { color: rgba(0, 136, 204, 0.5); }
.icon-tertiary[b-pwn8ttxbgs] { color: rgba(245, 158, 11, 0.5); }
.icon-error[b-pwn8ttxbgs] { color: rgba(239, 68, 68, 0.5); }
.icon-muted[b-pwn8ttxbgs] { color: #64748b; }

tr:hover .icon-primary[b-pwn8ttxbgs] { color: #0088CC; }
tr:hover .icon-tertiary[b-pwn8ttxbgs] { color: #f59e0b; }
tr:hover .icon-error[b-pwn8ttxbgs] { color: #ef4444; }
tr:hover .icon-muted[b-pwn8ttxbgs] { color: #0088CC; }

.origin-cell[b-pwn8ttxbgs] {
    font-size: 0.8125rem;
    color: #64748b;
}

.event-status[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
}

.event-dot[b-pwn8ttxbgs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-primary[b-pwn8ttxbgs] {
    background: #0088CC;
    box-shadow: 0 0 8px rgba(0, 136, 204, 0.6);
}

.dot-tertiary[b-pwn8ttxbgs] {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.dot-error[b-pwn8ttxbgs] {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.dot-secondary[b-pwn8ttxbgs] {
    background: #8da1ab;
    box-shadow: 0 0 8px rgba(141, 161, 171, 0.4);
}

.timestamp-cell[b-pwn8ttxbgs] {
    font-size: 0.75rem;
    font-family: monospace;
    color: #64748b;
}

/* Audit Footer */
.audit-footer[b-pwn8ttxbgs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: rgba(17, 20, 22, 0.4);
    border-top: 1px solid rgba(51, 65, 85, 0.2);
}

.audit-footer-stats[b-pwn8ttxbgs] {
    display: flex;
    gap: 2rem;
}

.footer-stat[b-pwn8ttxbgs] {
    display: flex;
    flex-direction: column;
}

.footer-stat-label[b-pwn8ttxbgs] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #64748b;
}

.footer-stat-value[b-pwn8ttxbgs] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.audit-footer-badge[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}

.audit-footer-badge i[b-pwn8ttxbgs] {
    font-size: 0.875rem;
}

/* ═══ Identity Record (bottom profile) ═══ */
.profile-card[b-pwn8ttxbgs] {
    position: relative;
    overflow: hidden;
    border-radius: 0.9rem;
    padding: 2rem 2.5rem 2.25rem;
    background:
        radial-gradient(130% 150% at 100% 0%, rgba(0, 136, 204, 0.10) 0%, transparent 46%),
        linear-gradient(135deg, #1b2536 0%, #121a27 100%);
    border: 1px solid rgba(51, 65, 85, 0.55);
}

.profile-glow-tl[b-pwn8ttxbgs] {
    position: absolute;
    top: -6rem;
    right: -6rem;
    width: 22rem;
    height: 22rem;
    background: rgba(0, 136, 204, 0.10);
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
}

.profile-glow-br[b-pwn8ttxbgs] {
    position: absolute;
    bottom: -7rem;
    left: -5rem;
    width: 20rem;
    height: 20rem;
    background: rgba(0, 76, 107, 0.12);
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
}

.profile-card-inner[b-pwn8ttxbgs] {
    position: relative;
    z-index: 1;
}

.profile-head[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.6rem;
}

.profile-tick[b-pwn8ttxbgs] {
    width: 0.5rem;
    height: 1.05rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #17a3e0, #004c6b);
    box-shadow: 0 0 12px rgba(0, 136, 204, 0.5);
}

.profile-title[b-pwn8ttxbgs] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8296ab;
    margin: 0;
}

/* Balanced 3-over-2 spec grid: three short fields, then two long ones — no orphan. */
.profile-grid[b-pwn8ttxbgs] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 2.25rem;
    row-gap: 0;
    margin: 0;
}

.pf[b-pwn8ttxbgs] {
    min-width: 0;
    padding: 1.05rem 0 0.95rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.pf-sm[b-pwn8ttxbgs] { grid-column: span 2; }
.pf-lg[b-pwn8ttxbgs] { grid-column: span 3; }

.pf dt[b-pwn8ttxbgs] {
    margin: 0 0 0.4rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b6f85;
}

.pf dd[b-pwn8ttxbgs] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #e6edf5;
    line-height: 1.35;
    word-break: break-word;
}

/* ═══ Responsive ═══ */
@media (max-width: 1024px) {
    .bento-grid[b-pwn8ttxbgs] {
        grid-template-columns: 1fr;
    }

    .profile-grid[b-pwn8ttxbgs] {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.75rem;
    }

    .pf-sm[b-pwn8ttxbgs], .pf-lg[b-pwn8ttxbgs] { grid-column: auto; }

    .hero-status-grid[b-pwn8ttxbgs] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .manage-content[b-pwn8ttxbgs] {
        padding: 1rem;
    }

    .hero-name[b-pwn8ttxbgs] {
        font-size: 2rem;
    }

    .hero-header[b-pwn8ttxbgs] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-status-grid[b-pwn8ttxbgs] {
        width: 100%;
    }

    .profile-grid[b-pwn8ttxbgs] {
        grid-template-columns: 1fr;
    }

    .audit-footer[b-pwn8ttxbgs] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

/* Clickable customer link in hero */
.um-link[b-pwn8ttxbgs] { color: #0088CC; cursor: pointer; }
.um-link:hover[b-pwn8ttxbgs] { text-decoration: underline; }

/* Action confirmation modal */
.um-modal-backdrop[b-pwn8ttxbgs] {
    position: fixed; inset: 0; background: rgba(6,18,28,0.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 1rem;
}
.um-modal[b-pwn8ttxbgs] {
    background: #fff; border-radius: 0.75rem; box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    width: 100%; max-width: 440px; padding: 1.5rem;
}
.um-modal-title[b-pwn8ttxbgs] { font-size: 1.05rem; font-weight: 800; color: #06121c; margin: 0 0 0.35rem; }
.um-modal-desc[b-pwn8ttxbgs] { font-size: 0.85rem; color: #5b6b78; margin: 0 0 1rem; }
.um-modal-input[b-pwn8ttxbgs] {
    width: 100%; padding: 0.6rem 0.75rem; border: 1.5px solid #d9e1e8; border-radius: 0.5rem;
    font-size: 0.9rem; margin-bottom: 0.9rem;
}
.um-modal-error[b-pwn8ttxbgs] { background: #fdecec; color: #a11; border-radius: 0.5rem; padding: 0.55rem 0.7rem; font-size: 0.8rem; margin-bottom: 0.9rem; }
.um-modal-actions[b-pwn8ttxbgs] { display: flex; justify-content: flex-end; gap: 0.6rem; }
.um-btn-secondary[b-pwn8ttxbgs] {
    padding: 0.6rem 1.3rem; border: none; border-radius: 0.5rem; background: #eef2f6; color: #33424e;
    font-size: 0.8125rem; font-weight: 800; cursor: pointer;
}
.um-btn-secondary:hover[b-pwn8ttxbgs] { background: #e2e8ee; }
.um-btn-confirm[b-pwn8ttxbgs] {
    padding: 0.6rem 1.3rem; border: none; border-radius: 0.5rem;
    background: linear-gradient(135deg, #0088CC 0%, #004c6b 100%); color: #fff;
    font-size: 0.8125rem; font-weight: 800; cursor: pointer;
}
.um-btn-confirm:disabled[b-pwn8ttxbgs], .um-btn-secondary:disabled[b-pwn8ttxbgs] { opacity: 0.5; cursor: not-allowed; }

/* ═══ Link-to-customer flow (inside the light modal) ═══ */
.um-modal-wide[b-pwn8ttxbgs] {
    max-width: 720px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.lk-head[b-pwn8ttxbgs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.lk-head .um-modal-desc[b-pwn8ttxbgs] { margin-bottom: 1rem; }

.lk-steps[b-pwn8ttxbgs] {
    display: flex;
    gap: 0.35rem;
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    flex-shrink: 0;
}

.lk-steps li[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9aa8b4;
}

.lk-steps li + li[b-pwn8ttxbgs]::before {
    content: "";
    width: 1.25rem;
    height: 1px;
    background: #d9e1e8;
    margin-right: 0.35rem;
}

.lk-steps li span[b-pwn8ttxbgs] {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #eef2f6;
    color: #7b8a97;
    font-size: 0.7rem;
}

.lk-steps li.on[b-pwn8ttxbgs] { color: #06121c; }
.lk-steps li.on span[b-pwn8ttxbgs] { background: #0088CC; color: #fff; }
.lk-steps li.done span[b-pwn8ttxbgs] { background: #d6ecf8; color: #0088CC; }

/* Search modes */
.lk-modes[b-pwn8ttxbgs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.lk-mode[b-pwn8ttxbgs] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1.5px solid #d9e1e8;
    border-radius: 9999px;
    background: #fff;
    color: #5b6b78;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.lk-mode:hover[b-pwn8ttxbgs] { border-color: #a9bdcb; color: #33424e; }

.lk-mode.active[b-pwn8ttxbgs] {
    background: #06121c;
    border-color: #06121c;
    color: #fff;
}

.lk-search[b-pwn8ttxbgs] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.lk-search-input[b-pwn8ttxbgs] {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid #d9e1e8;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.lk-search-input:focus[b-pwn8ttxbgs] {
    outline: none;
    border-color: #0088CC;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
}

/* Results */
.lk-results-head[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef2f6;
}

.lk-results-count[b-pwn8ttxbgs] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b9aa6;
}

.lk-filter[b-pwn8ttxbgs] {
    width: 14rem;
    padding: 0.4rem 0.65rem;
    border: 1.5px solid #d9e1e8;
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.lk-filter:focus[b-pwn8ttxbgs] {
    outline: none;
    border-color: #0088CC;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
}

.lk-results[b-pwn8ttxbgs] {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
}

.lk-result[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 1.5px solid #eef2f6;
    border-radius: 0.6rem;
    margin-bottom: 0.4rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.lk-result:hover[b-pwn8ttxbgs] {
    border-color: #0088CC;
    background: #f5fbfe;
}

.lk-result:focus-visible[b-pwn8ttxbgs],
.lk-mode:focus-visible[b-pwn8ttxbgs] {
    outline: none;
    border-color: #0088CC;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.25);
}

.lk-result > i[b-pwn8ttxbgs] {
    color: #a9bdcb;
    font-size: 0.9rem;
}

.lk-avatar[b-pwn8ttxbgs] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #e6f4fb;
    color: #0088CC;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.lk-avatar-lg[b-pwn8ttxbgs] {
    width: 3rem;
    height: 3rem;
    font-size: 0.95rem;
}

.lk-result-main[b-pwn8ttxbgs] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.lk-result-name[b-pwn8ttxbgs] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #06121c;
}

.lk-result-sub[b-pwn8ttxbgs] {
    font-size: 0.75rem;
    color: #7b8a97;
}

.lk-result-id[b-pwn8ttxbgs] {
    font-family: monospace;
    font-size: 0.78rem;
    color: #5b6b78;
}

.lk-empty[b-pwn8ttxbgs] {
    padding: 1.25rem 0.25rem;
    font-size: 0.83rem;
    color: #7b8a97;
    text-align: center;
    list-style: none;
}

/* Confirm pane */
.lk-detail[b-pwn8ttxbgs] {
    border: 1.5px solid #eef2f6;
    border-radius: 0.6rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.9rem;
}

.lk-detail-head[b-pwn8ttxbgs] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.lk-detail-name[b-pwn8ttxbgs] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #06121c;
}

.lk-detail-sub[b-pwn8ttxbgs] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: #7b8a97;
}

.lk-facts[b-pwn8ttxbgs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.5rem;
    margin: 0;
}

.lk-facts dt[b-pwn8ttxbgs] {
    margin: 0 0 0.15rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b9aa6;
}

.lk-facts dd[b-pwn8ttxbgs] {
    margin: 0;
    font-size: 0.88rem;
    color: #22313d;
    word-break: break-word;
}

.lk-detail-note[b-pwn8ttxbgs] {
    margin: 0.9rem 0 0;
    font-size: 0.75rem;
    color: #8b9aa6;
}

.lk-irreversible[b-pwn8ttxbgs] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    background: #fff8ec;
    border: 1px solid #f2d09a;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6b4e13;
    margin-bottom: 0.9rem;
}

.lk-irreversible i[b-pwn8ttxbgs] {
    color: #d18700;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.lk-irreversible strong[b-pwn8ttxbgs] { color: #4a3608; }

/* Blocked: the customer already belongs to another user, so there is nothing to confirm */
.lk-irreversible.lk-blocked[b-pwn8ttxbgs] {
    background: #fdecec;
    border-color: #e8b4b4;
    color: #7a2b2b;
}

.lk-irreversible.lk-blocked i[b-pwn8ttxbgs] { color: #c0392b; }
.lk-irreversible.lk-blocked strong[b-pwn8ttxbgs] { color: #5c1c1c; }
.lk-irreversible.lk-blocked .um-link[b-pwn8ttxbgs] { color: #a11; font-weight: 700; }

@media (max-width: 640px) {
    .lk-head[b-pwn8ttxbgs] { flex-direction: column; gap: 0.5rem; }
    .lk-search[b-pwn8ttxbgs] { flex-direction: column; }
    .lk-results-head[b-pwn8ttxbgs] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .lk-filter[b-pwn8ttxbgs] { width: 100%; }
    .lk-facts[b-pwn8ttxbgs] { grid-template-columns: 1fr; }
    .link-notice[b-pwn8ttxbgs] { flex-wrap: wrap; }
}